Redesigning and building my new website theme

Published on: 12th September 2017

About 3 months ago I wrote a post talking about how I updated my website from a simple hacked together wordpress.com blog to a site I had built myself, writing all of the HTML and CSS. It wasn’t perfect by any means, but I was proud of what I’d achieved nonetheless. Following that, I quickly moved onto learning how to move the site across to the WordPress CSS to make managing content much easier. So I was able to learn some very basic WordPress bits and pieces, such as using the loop.

Fast forward to this past week, I decided I wanted to give the site a fresh look. As I’ve mentioned before, I am by no means a designer, and while the site didn’t look hideous, I thought I could do a little bit better. And I’d also carried on learning more CSS techniques which I wanted to give a try. So I decided the time to had come to give the site a new look.

Disclaimer – I’m not a designer, at all, I’ve just gone with what I think seems to work okay and from looking from inspiration from sites that were put together by actual designers. These aren’t designer tips, but just thoughts I had while working on it.

old design

Before

new design

After

 

Look and Feel

I really struggled to decide how I wanted the site to look when I first set about rebuilding it a few months ago. And I more or less settled on something I could achieve, which ended up as a simple block background colour and black and white text. This time around, I wanted to try a couple of different things, and just improve how the site looked by breaking pages into sections, and contrast colours a bit better than I originally did.

Colours

One of the big things that has changed is the colour scheme. I’ve ditched the bluey colour and gone with what I feel are a bit bolder, but simple contrasting colours.

I was very conscious first time around about using white as a main colour as I thought it would look empty and almost unfinished. However, looking around for inspiration I found that I actually really liked how clean using a white background for content looks, and have embraced this for content areas on the site. I did still want to contrast this with some colour and when looking around for examples of colour schemes, I came across something I liked on a visme blog post, used on insidediscovery.pitchfork.com. I took their colour scheme and applied it to my heading areas, using the reddy/orange colour throughout the rest of the site through content sections and for some link styles.

Font

I looked at my old font and I really wasn’t sure why I picked it. I don’t think it is by any means a horrible font, but I just wasn’t really feeling it. I’ve swapped it out for the nice and simple, clean looking Lato, also using different font weights for main headers and sub headings.

Layout

With my old layout, everything just felt to be one big block of content, and the more I looked at, the less happy I was with it. I wanted to break items out into their own defined content area, to make the site look cleaner and more organised. Now, each area of the page has it’s own section – heading areas, individual side projects, content boxes – which I do feel has made a big difference.

New CSS techniques

I haven’t given as much time to learning during the peak summer months, as other things, mainly golf, has taken a lot more of my time. However, I have still found the time to work on it a little bit, and I wanted to try a few new things out. And in the spirit of good practice, I stripped out all of my old CSS styles (apart from the footer styles) and started completely from scratch to build my new theme.

Flexbox

A big change this time around is that I have used flexbox quite a lot throughout the site. I was aware of Flexbox but hadn’t got to that stage in my learning, however I finally learnt about this pretty recently on the Treehouse track I’m working through. It just seemed so powerful, yet relatively simple to build a nice looking, fluid layouts, and thought I could use it for a few different things I wanted to do.

As always seems to be the case, internet explorer proved a little tricker, and I found I needed to use a couple of work arounds to make sure everything was displaying as it should in IE. I spent quite a bit of time trying to figure out the problems and a few different things, but ultimately I was helped out immensely by finding a list of flexbug fixes from phillipwalton on github. If you are having some bug issues with flexbox it is definitely worth checking this out. It is also useful to check out caniuse.com to get a good idea of broswer compatibility with anything you are wanting to implement.

I’m sure I possibly used flexbox in areas I didn’t need to, and am aware that CSS grid is currently breaking through, but I enjoyed working with flexbox, and it definitely helped me achieve the layout I was looking for.

View Heights

With breaking the site up into content sections this time around, I thought using View Height to define the size of each section might be a good idea. Working on a mobile first approach, this was working great, and was really coming together nicely. I did hit a few snags when scaling up screen sizes, and if you do check out the code on my github, I have ended up using quite a few media queries to make sure the VH for my sections are as appropriate as possible, which I appreciate is not exactly ideal.

I perhaps relied on using VH a little too much, although I am happy enough with the outcome. If anyone can suggest better methods achieving this layout without using VH I’d be glad to hear it, so do feel free to tweet at me.

Not quite there

I did want to alternate the Image and Text for each section on the Side Project page, however I wasn’t able to get this working properly. I was wanting to use the row-reverse option that flexbox offers, but couldn’t get this working using nthchild due to the content sections not being children within the same sections. If anyone can suggest a different way of doing this (that a beginner could understand) then please do tweet me.

I feel I should reiterate, I am by no stretch a designer or a developer – but it is something I am incredibly interested in, and have a big passion for. Thankfully I am lucky enough to be a part of everyday working in this industry (on the client services side) with really talented people. I’m very happy with the outcome, and it’d be great to hear any thoughts or opinions on the new theme (good or bad!). As always the code is up on my github – any feedback on that would also be welcomed!

Until next time!