Syncro Ireland was built to become the main focal point of an annual Irish event for VW Syncro enthusiasts. The site aims to promote and encourage engagement from the community across the island of Ireland, the UK, and international visitors. The organiser's goal is to encourge enthusiasts to sign up to receive news regarding Syncro (and other 4x4) events, and to build a cohort of volunteers to ensure the event's continued success.
You can view the Syncro Ireland live site HERE.
[ This website was created as the first Portfolio Project (PP1) for the Code Institute's Full Stack Web Development course. ]
The site was built to become the main focal point of an annual Irish event for VW Syncro enthusiasts. The target audience are mostly VW Syncro owners, but extends to all other 4x4, off-roading and camper van enthusists. The organisers had been using various other media (Facebook; online club forum) to get information out to the channel, with mixed success. They realised that there was no single online destination to find out about events in Ireland and connect all interested parties. This made it difficult to build momentum for an event idea. It was realised that a registration portal was needed to inform those interested in attending, and, in fact, a register of volunteers was needed to help make the event happen. This site aims to fulfill those needs for both the organisers and attendees.
-
-
- Create an online presence to promote the annual Irish event
- Site must inform vistors about future and past events
- Create a registration form to:
- capture contact details of those interested in receiving event news
- capture contact details of those interested in volunteering at events
- allow the user to submit suggestions or feedback
- Site must be intuitive to read & navigate on both desktop & mobile devices
-
-
As a first time user...
- I want to easily understand the main purpose of the site and learn more about the organisation
- I want to be able to easily navigate throughout the site to find content
- I want to find their social media links to follow event news
-
As a returning visitor...
- I want to be able to easily register my interest in attending an event
- I want to find the best way to get in contact with the organisers with any questions or suggestions I may have
- I want to be able to view the site clearly on a mobile device
-
As a frequent user...
- I want to to see if there are any new events happening
- I want to to see if there are any updates on a forthcoming event
- I want to see any new photos or videos of previous events or related acitivites
-
-
-
-
A simple 3-5 page structure was discussed to satisfy and separate the strategy goals of promote, inform & register, and also allow for expansion to other pages - for example, a gallery page of images of events/attendees/vans etc., and possibly a page dedicated to the history of the VW Syncro van. For the purposes of delivering an MVP to a tight deadline, the three-page structure was decided upon to ensure it was feasible to deliver the important design strategy goals.
The site must appeal to a Syncro/4x4 enthusiast and present the information in a clear, accessible and obvious way whether on mobile devices or larger screens. To achieve this, page navigation links are laid out the same at the top of each page, as are links to relevant social media platforms on the bottom of each page.
The main page is a brief, but comprehensive introduction with all navigation links visible. The registration form link is presented as 'Sign Up!' - this is an obvious call-to-action.
The events page clearly presents upcoming & past event news items which remain in the correct order when the layout changes in response to various screen sizes. It also includes any important event announcements (e.g. request for volunteers), presented as a mock Post-It note, to highlight the message and the call-to-action.
The registration form page presents a simple form for required user contact details with a choice to enter a comment or question, a check a box to volunteer, and a submit button.
Throughout the site all links & buttons use high contrast colours on hover or click, or when in a form data field, to provide clear visual feedback to the user when an action is taken. All pages use images of Syncro vans at events, or in off-road locations, which appeal to the target audience and are likely to elicit a positive emotional response. -
To highight the Irish identity of the site, a green/white/gold variation was used throughout the site. I chose to base these colours on actual official VW paint colours as used on the Syncro vans (e.g. VW Escorial Green), so this design choice should also feel familiar to the site's users. The choice for the background was between an off-white VW Pastel White, Ford Polar and a Chrysler Arctic White, all of which have 'AAA' WCAG 2.0 contrast scores when used as text on the green background (i.e in the header & footer). The results of the colour contrast testing are included in the Testing section below.
-
Colour choices
- Ford Polar White, #eef4f4
- VW Escorial Green, #344d2c
- VW Brilliant Yellow, #edda1c
-
How colours were used
- Body: White
- Header: Green
- Footer: Green
- Content text: Green on White or White on Green, as applicable
- Highlights (Active/Selected/Border): Yellow
-
-
The Google font, Raleway, was chosen as its unique 'W' bears some resemblance to the W in the iconic VW logo.
-
The main page uses a large hero image to grab the user's attention. It is instantly recognizable as a Syncro camper van in a remote and rugged mountain landscape. Other images used on the site show Syncro vans involved in off-roading action during previous events. An embedded video can be played which is a montage of amateur enthusiast phone footage from a previous event. All of this is very relatable and relevant to the target audience and should encourage users to connect with the organisers and want to attend events.
-
I did not create wireframes with software like Balsamiq, but I have decided to include pictures of my pencil sketches of my layout design process. These do not necessarily represent the final look of the site pages, but are presented here to show how I went about fleshing out my initial thoughts and ideas about how to structure the site before a line of code was written.
-
To fulfil the needs of the site owner and its users, the following features were implemented:
- Navigation Bar contains the site name/logo and links to the Home, Events and SingUp pages. It is identical on, and positioned at, the top of all pages. It is fully responsive on different device sizes. The currently selected page is indicated with a bright yellow underline and the items change colour when the mouse hovers over them to give the user immediate visual feedback.
- This allows the user to navigate intuitively between the site's pages
- Home Page Image is a large hero image. It is instantly recognizable as a Syncro camper van in a remote and rugged mountain landscape.
- This grabs the visitor's attention and appeals to their similar interests. It should encourage them to continue reading and engage with the site. The organiser wants to appeal to this demographic.
- Main Introduction Section explains to the visitor what the purpose of the site is and presents options for them to get involved and sign up for news and connect on social media. There is also an image of a van tackling a water obstacle as part of a previous event.
- The visitor is informed of the site's intentions regarding organising an annual event. They see an image of a van in off-road action which gives them a sense of the type of exciting activites that take place at events.
- Site Footer contains links to Syncro Ireland social meadia platforms. The links open in a new browser tab. The footer is identical on each page of the site.
- Visitors can easily connect with the event's social media platforms as it appears at the bottom of each page. When the user hovers the mouse over the icon it changes to a bright yellow colour to highlight the choice. The owner makes it as easy as possible to gain followers on social media.
- Events Page is presented in sections showing upcoming events first, followed by previous event news, images or videos where applicable. Important notices or calls-to-action are presented in mock Post-It note style.
- All relevant information that a user might want regarding upcoming events is here. Important news or notices are also here and is in an attention-grabbing style. The user can also browse old event news from Ireland and elsewhere, view pictures and watch event videos. The site owner is assured that the event news and the call for community engagement is being noticed.
- Signup Page contains the form which allows the user to register their interest in upcoming events, provide feedback to the organisers and indicate that they would like to volunteer to help at the events. There are only three fields of contact information required, and two optional. The fields are clearly defined and highlighted to make it easy to fill out on screens of any size. There is error checking built in to ensure the required fields are not left blank. When they submit the data, the user is alerted if they have missed one and can rectify it easily.
- This allows the user to easily register their interest in attending events and submit suggestions or questions to the organisers. This benefits the organiser by having one central, organised method for collecting a database of interested attendees and volunteers. This can be used as a newsletter mailing list and as an aid to planning events.
- 404 Page contains the full site look - working header and footer - with another prominent central link which takes the user back to the main home page.
- This allows the user to recover from a system or user error by simply linking back to the main site page. They see a short 'Offroaders' joke (see credits below) which might be mildly amusing (which is nice!) to the target demographic of the visitor. A prominent link, which also highlights on hover, makes it stress free to find their way back to the main site. The organiser benefits by keeping the vistor within the site even in the event of an error like this, and hopefully does it in a stress free and amusing way.
I would like to have implemented these, but decided to stick with producing the MVP
- A gallery page showing Syncro vans and attendees in action at events
- An About Syncro or Syncro History page dedicated to explaining to visitors what makes a Syncro, a Syncro.
- Git
- Git was used for version control and managed via the VSCode terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the project's code after being pushed from Git, and Github Pages used to deploy the live site
- Google Fonts:
- Google font 'Raleway' was imported in the style.css file and used throughout the site.
- Font Awesome:
- Font Awesome was used to add icons for aesthetic and UX purposes.
- Gimp:
- Gimp was used to edit and retouch photos for the website.
- Birme:
- birme.net was used to resize images.
- TinyPNG:
- tinypng.com was used to compress large images
-
- I want to easily understand the main purpose of the site and learn more about the organisation
- The main landing page was checked to ensure it explains the purpose of the allows the visitor to explore for more information
- I want to be able to easily navigate throughout the site to find content
- The navigation links were checked on each page to ensure that they take the user to the intended page or section and there were no broken links
- I want to find their social media links to connect and follow event news
- Each page was checked to confirm that the footer contained the same links and that they would open the event's page on the correct media platform in a new browser window.
- I want to easily understand the main purpose of the site and learn more about the organisation
-
- I want to be able to easily register my interest in attending an event
- The signup registration form was tested to ensure that the user could complete and submit it in a few easy steps. It was also tested to ensure the user could not submit with out filling in the three required contact fields.
- I want to find the best way to get in contact with the organisers with any questions or suggestions I may have
- The signup/feedback form was tested to ensure that the user could submit a custom message
- I want to be able to view the site clearly on a mobile device
- Testing was done to ensure that the site was responsive on all device screen sizes and that the information was clear and accesible.
- I want to be able to easily register my interest in attending an event
-
- I want to to see if there are any new events happening
- I tested to ensure that upcoming event news was shown on the events page
- I want to to see if there are any updates on a forthcoming event
- I tested to ensure that updates on upcoming events was shown on the events page
- I want to see any new photos or videos of previous events or realted acitivites
- I tested to ensure photos and videos of previous events was present on the events page. Video playback was tested.
- I want to to see if there are any new events happening
The W3C Markup Validator and W3C CSS Jigsaw Validator services were used to validate every page of the project for syntax errors. NOTE: All validation was re-run after fixing the errors shown below to ensure that no further errors or warnings existed.
- index.html Warning: errant
<section>was replaced with a<div>ashero-sectionis for decoration only and has no semantic use
- events.html Error: embeded video link code was actually generated by YouTube, but I removed the attribute to fix this
- signup.html Error: stray tag was deleted
- style.css: two stray commas were found and deleted
- Chrome DevTools and a Chrome extension, Unicorn Revealer, were used to check responsiveness on various device sizes. Some issues were found at the 320px screen size where the logo and footer elements were breaking the screen width (as shown in the image below). I could see in DevTools that they had
width: 400pxapplied, and changing the media query for 400px or smaller screens tomax-width: 320pxwould fix the issue. The code was fixed accordingly.
The colour scheme was tested using this Contrast Grid Test and, as explained previously in the Design - Colour Scheme section, my decision was based on the results shown here:
- The Website was tested on Firefox, Safari, Chrome and Edge browsers.
- The website was viewed on a variety of mobile devices such as iPhone7, iPhone 8 & iPhoneX.
- The organiser of Syncro Ireland Events was asked review the site to point out any user experience issues
The signup form was tested to ensure that the user could not submit without data in the required fileds. An example is shown below where the user has left the required Lastname field empty:
The next image is a snip from the Code Institute's form dump test page showing data correctly posted to the backend:
Googe Lighthouse in Chrome DevTools was used after deployment to test the quality and performance of the site. Initial results were satisfactory for Accessibility (100), Best Practises (93) and SEO (100), but performance was not so good with an amber score of 81. Examination of the audit trail showed that very large image file sizes were causing the lag in performance (particularly the hero image). Images were then optimized by first resizing using Birme, and then compressing using TinyPNG. After re-testing, the Lighthouse audit result was as follows:
- Supplied event promo video wouldn't play when embedded due to there being copyrighted music on the sondtrack.
- Fixed by editing the video to remove the copyrighted soundtrack
- Footer slightly off-centre on screens below 320px
- Fixed with media query edit
- Images in content (events page) are silighty off-centre at lower screen sizes
The live deployed site can be viewed on GitHub Pages HERE
The Project repository (repo) is at https://github.com/davewatters/syncro-ireland
Note: The project repo was initially generated from the Code Institute full template
Deployment of the site to GitHub Pages was done as follows:
After final git push to the project repo
- Login to your GitHub account
- Open the project repo
- Select the 'Settings' tab
- On the left-hand-side menu select the Pages option
- Select the main branch as the source, then click the save button
- A message will confirm that the site has been published at
https://YOUR-GITHUB-NAME.github.io/REPO-NAME/ - Test that the site has successfully gone live live by clicking on the link
- Whilst no major code was 'lifted' from other sources, I looked to many sources for inspiration and help: Code Institute walkthrough projects, other CI users' projects, live web sites, Stackoverflow, CSS Tricks.. and many others.
- README.md - The structure was arrived at by examining the Code Institute sample templates and some previous CI users' projects. In particular, the Table of Contents idea came from Daisy McGirr's milestone project HOTD
- All content created by the site creator David Watters. Whilst some copy was taken, with permission, from the Eire Syncro Facebook page and the UK Syncro Club site, most text was edited and reworded after discussions with an organiser of the Syncro Ireland event, Paul Gillett.
- All images were either supplied by the Syncro Ireland event organiser, Paul Gillett [ Vantopia.ie ], or supplied with kind permission by the UK Syncro Club. Some editing, retouching and resizing was done by the site creator.
- Many thanks to my partner Deirdre Treacy for removing the copyrighted soundtrack from the organiser's supplied promo video.
- My mentor Daisy McGirr for all her helpful feedback and knowledge. And for introducing me to the illuminating Chrome extension Unicorn Revealer
- The wonderful Code Institute community on Slack and the CI staff and students - newbies and seasoned devs alike - for all of their help and support.
- Thanks to fellow student Stephen Darcy [CI Slack: @Stephen_5P] for suggesting Birme for bulk resiszing of images - what a time saver it turned out to be!
- The joke on the 404 page is a reference to 90s British TV show The Fast Show, created by Paul Whitehouse & Charlie Higson. I have them to thank for 'Simon & Lindsey, The Offroaders' - two avid off road entusiasts who were always 'Gripped!' and 'Sorted!', and then invariably... got lost.