I built the old design of my site with two goals in mind, “Make it load fast” and “Make it 100% your work”. I ended up nailing both goals by making a fairly plain and simple website, as a result it was dull as a white wall.
It has started to look super naff recently, so while fueled by Whisky and Kanye West, I chucked out most of the old build and started again.
I had a few websites I really liked the look of that I used for inspiration, here they are with my notes:
- Clara Labs - I really like the initial “Hi there! I’m Clara” then the fading in of the rest of the homepage copy.
- No Divide - If there is someone who knows how to design a site, it’s Dan Edwards. I really like how simple and clear the site is to use.
- Ed Poole - The way Ed has laid out his blog post is super content focused with little to distract the user, it works really well.
- Tom Kentell - I love the overall homepage layout & Toms use of responsive is awesome.
- Meeet - A lovely clean design that looks good and has little clutter that’ll distract the user.
- Jonathan Atkinson - I always like Jonathan’s work.
- Plasso - Similar to meeet.co in terms of a super clear layout.
I started doing initial sketches of what I had in mind for a layout and started coding. Here are some of the key changes:
A colour palette
I’ve found from experience having a set of colours that were documented in the project, helped keep me from building massively inconsistent webpages. With this in mind, I jumped over to Material Palette to get a set of colours that should work nicely together.
Material palette was super handy and even generated a nice Sass file with the colours defined. I think it’s helped keep the sites overall design not to messy.
I wanted to show off the tools and frameworks I’m familiar with on the homepage, but I didn’t want to dick around with making CSS sprites. Instead I converted the logos on the homepage into vectors then stacked them into a single SVG file. The result was 12 logos being served in a single http request without to much loss in quality.
This worked great until I opened the site in Safari (The above screenshot) and noticed they looked a bit off, so I opted just to put the SVG inline into the HTML instead.
Bower, Bootstrap and other things I decided against
I really wanted to mess around with a few of the new tools and frameworks that are out there to make front end a bit easier.
First off I tried bower, a front-end package manager tool. It seemed pretty nice, though I ended up feeling it was more faff then it was worth considering my site only uses a little JS on the homepage.
I also considered a CSS framework such as Bootstrap or Foundation to help get the layout kick started, but then I read A Complete Guide to Flexbox and decided I’d be better off just using flex where I needed it instead of bogging myself down with CSS I’ll never use.
I also removed a lot of the Microdata markup that I had on the old build, as I feel in the last year the support has fizzled out a lot.
My old server was costing me about €18 a month, which for a site that only gets around ~2k hits a month it was overkill. Instead I moved everything over to S3 & CloudFront.
It was a bit of a pain to get SSL setup for CloudFront but I followed this guide to find my feet. One of the main “Oh FFS” moments was when I had to setup CloudFront to only access S3 over port 80, instead of both port 80 and 443, otherwise it would error out.
I used to use Git to deploy my site, which was annoying to get the hooks setup on new machines. Instead I opted to use s3_website, a gem that pushes your _site folder to S3. It seems pretty solid.