Weddings are hard

You may have missed it but in November 2014 Matthew and I got engaged!

(Not us - just wanted to use this picture!)

Since then we had more than a year of doing very little about it as moving in together and starting new jobs made our life quite busy. What I was most excited about though was the website - at the time Matthew was studying HTML and I had just discovered the CSS Zen Garden so I was already thinking about what information should be on the site.

We knew we'd have a smaller budget so what we wanted was a place where all the information could sit rather than using thousands of bits of paper - through the colours, fonts and images we also wanted to convey what kind of style and level of formality we were expecting. As far as concrete design principles go all the information should be on one page and the layout should be responsive.

Design 1

Here's my initial design. Right at the top you can see my biggest concern was that my email was nowhere on the page. Eventually I set it up info@jordanandmatthew.com to get around that problem although js-mailer seemed like a good solution as well.

When I started building it - this design looked terrible. It was cluttered and the images weren't in a consistent format. So:

Design 2

Much better! The content hasn't changed and the layout hasn't changed that much but everything is more consistent.

And here's the finished product!

Sorry for the rough quality. Enabled by ScreenToGif

The most difficult / fun part was probably working out the flexbox on the "wedding party" section. After my 3rd attempt at "width: x%; float: left;" refused to work I remembered reading about flexbox in .Net Magazine and looked into it a little more. I still don't completely understand how to use it but it was very helpful in this case!

There's still a whole section 'Schedule' missing at the moment because we still haven't confirmed the timings of the day and what kind of ceremony it will be. Originally (you can see in the wireframes) I thought this should be a parallax scroll element that adds items as you scroll down but as I couldn't think of another use for this feature maybe it would be jarring to add it in just for one section?

I suppose I'll just have to try it and see!