Responsive Website Case Study
The Brief
As a side-project, I built a fully responsive wedding website with the following requirements:
- Functionality for guests to RSVP
- Ability to add to a Spotify playlist
- Pages detailing timings and other useful wedding information
- A gallery page including functionality for guests to upload photos
My main aim when designing and building the site was to make it accessible and intuitive, particularly given the likely varying ages and technical abilities of the users.
Design
I began by identifying the content required and splitting it into logical categories, which became the basis for the pages. I identified the main purpose of the website to be the RSVP functionality and the couple also mentioned they were keen for guests to add to their Spotify playlist, so these two sections became my starting point.
As most of the guests would be receiving the wedding invitation by email, which would include a link to the website, it was likely that most guests would view the website primarily on mobile devices. I therefore designed the site mobile-first.
As the couple had already chosen a template for an invitation, I began by creating a simple colour palette using the image on the invitation as a starting point.
Whilst the initial colour palette was WCAG compliant, once I had begun building the page it became clear that the colours in my design were not bold enough when viewed on mobile devices. I therefore increased the colour contrasts to make the text clearer and the design look bolder and cleaner.
As the site was to be relatively light content-wise, I decided to add a background image to the header of each page to add some visual interest. Beginning with the RSVP/Homepage, I chose images that broadly matched the theme of the wedding invitation and the tone of the copy the couple had provided. The challenge I faced with adding the images when building the site was making sure the text was still readable, particularly on mobile devices or low resolution screens.
The Build and Functionality
My main focus was again on the RSVP form, this being the primary reason for users to visit the site.
As many of the guests would be RSVP-ing on behalf of their partners or families as well as themselves, I included a dropdown box to allow users to select how many guests they were RSVP-ing for. Selecting an option from the dropdown box would then show an extra section of the form for each guest. Including the vegetarian and dietary requirements checkboxes for each guest individually meant the database would have clear dietary information per guest.
As the website design was relatively simple with only 4 pages, I used standard HTML, LESS and JavaScript. For the RSVP form, I used React.
