First Milestone Project:User-Centric Frontend Development.
This is my website to introduce visitors to Bedfordshire and to encourage them to visit.
The project highlights a number of places throughout the county to visit and explore, as wellas
a contact form asking people to join an email list to receive advanced notification of events.
There is also a page of general infomation about the county, a highlight page of autumn and
winter2019 events, and a section detailing the transport links to the county.
UX
My goal in the design was to highlight the wide variety of activities available to families and individuals in the less well-known county of Bedfordshire. I wanted my design to be bright and attractive to a younger demographic, and away from the traditional,stuffier view of Bedfordshire as the birthplace of John Bunyan and 17th century Puritanism. I wanted people to have quick and easy links to explore further the places and events listed. There are also links to Facebook, Instagram, and Twitter, so that people can explore further the physical activities available, and the wildlife of the county.
I started with a mobile first design approach to this project, and so I created mockups and wireframes for small screens first. I then moved onto creating mockups and wireframes for tablets and desktop screens.
Mockups and wireframes can be viewed via this link:
The clear goals that needed to be achieved for this website were:
To chose background-images that best showed the natural beauty, cultural history, and fun for all ages that could be had in the county.
The text in the 'about us' section should give a comprehensive and varied list of the attractions of the county in order to appeal to as wide a range of viewers as possible. They needed to know that the county could provide interests to satisfy the tastes of all tourists. These attractions include great stately homes such as Woburn Abbey, to places of natural beauty such as Dunstable Downs, pretty villages like Ampthill, and activity experiences for all in places such as Shuttleworth and Twinwoods.
Event cards would firther suggest an even greater range of places to visit, with a brief summary on each card of what they had to offer, and a link,'Read Me' to each locations' own website to provide comprehensive information of what was on offer.
There should be a contact form in which someone could submit their email address, and phone number to receive constantly updated information, and a check box to see if events could be booked online.
There should be social media links to facebook, instagram and twitter.
The navigation bar has the logo of Bedfordshire's coat of arms to promote the brand of the county, a sense of distinction, and to give an elegance to the navbar. The navbar is responsive, and at 768px will toggle for conciseness on a mobile screen.
Technologies
HTML5
CSS3
was used for styling,page layout, styling of icons and images.
BOOTSTRAP (4.1.3) framework
jQuery and bootstrap.min.js plugins were used for the navbar, and for implementing its responsive behaviour. And to enable the button to toggle the navigational bar. They were used to enable background images, the 'contact us' form and its checkbox functionality.The 'event cards' were from Boootstrap components.
Google Fonts
Git
was used for version control.
Github was the remote repository.
Google Chrome Developer Tools.
Google Docs were used to write the content of the README.md file.
Features
My project features the 'ScrollSpy' feature which highlights the section of the page as the viewer scrolls down or up the page. This used a JQuery plugin This was taken from W3schools 'scrollspy tutorial'. Click here to view
Features left to Implement
In the future, I should like to change the static landing-page to one that had a slide-show of images of Bedfordshire in order to attract the attention of more potential visitors. In addition, I would make the images appropriate to the season. I should also like the contact form to be more specific, with check boxes so that visitors could get targeted emails according to their particular interests, such as 'health and well-being', 'cycling', 'food and drink', and 'gardens and heritage'. Also the highlights section would change according to the season.
Testing
The project was tested on multiple mobile devices, including Galaxy s5, iphone6,7,8 and ipad Pro, and on variou browsers including opera and safari, and firefox to ensure compatibility and responsiveness.Manual testing was conducted to ensure the user story objectives were achieved. All links and hover effects were tested manually, and all links will open using target="_blank" in a new tab.The 'Required' attribute is added to the 'name', 'email'. and 'message', fields, so that the form would not submit if these are not filled in. A bug left to fix is that I had wanted the top third of the 'event' cards on desktop to have an appropriate image, such as an animal for Whipsnade zoo, but I found that I kept getting a 'ghost' card with the image on it, and the text on the original card.Platforms:
GalaxyS5:Google Chrome, Microsoft Edge, Firefox
i phone x:tested using the inspect features on Chrome Developer tools
Windows10:Google Chrome, Microsoft Edge, Firefox
My index.html code was submitted to W3C Validator for checking and validation. Similarly, my style.css code was tested with the W3C CSS Validation service.
Content
All content was written by me.
Deployment
This site is hosted on Github pages, deployed directly from the master branch. In order for the site to deploy correctly on GitHub pages, the loading page must be named index.html. A link to my deployed site can be found here: Click here to view
Media
All photos were from Google images advanced search to be free from copywrite.
Acknowledgements
The 'event' cards and contact form were from 'getBootstrap's component section.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent