We updated our website – why we did it, and how

2 min read
Watb Team
Watb Logo

Our website has served us well, the original design won an honourable mention on Awwwards and was used as an example of card based design on blogs and in magazine articles. Good design should be timeless, but as a company we’re quite different now and our site needed to reflect that. There was also some technical aspects that needed improving.

The first of these was the grid. Previously built using the Foundation grid, we couldn’t quite achieve what we wanted. Switching to flexbox gave us greater control over the layout, and allowed us to re-arrange content more easily, as well as easier centering. Secondly, we wanted to cut down on the CSS filesize. To be honest, when I was writing CSS and Sass a year ago I was nowhere near as organised and working on our website was always a chore. I cut out a lot of unused CSS, including the old grid as well as re-writing some sections of code for a more lean file size and better organisation.

Whilst improving the technical aspects, we also tweaked the design, maintaining the original but addressing some issues with the previous. This included a reduced header size that meant on smaller screens more content was visible without scrolling. We also refined some mobile design elements.

End Result

You’re reading on it right now! If you remember the old site, the current iteration probably isn’t a drastic departure, but we hope you have noticed the improvements. The CSS file size dropped from 250kb to 76kb, and the flexbox layout allows the design to make more sense across devices. We also feel this version of the site says a lot more about us, our personality, reputation and ethos.

We hope you like it – why not let us know your thoughts on Twitter?

Related Posts

Posts you may also like