Responsive design has brought about a massive change in our industry over the last couple of years. When we redesigned the Zone website, responsive was a leading factor – at the time very few agencies in the too 100 lists had responsive websites, so it would give us a big advantage over our competitors, but there was also a bigger business need. We were advising our clients to include responsive in their digital strategy, so it was only right that we lead by example.
The site is designed around the versatile 1000px grid that I’ve developed and used across a number of other projects. It turns pixels into percentages so makes designing for fluid responsive site much easier than other grids.
The design kit
To make the process even more efficient, I also created a design kit, which is a sheet of core components from the site. Combined with wireframes, this negates the need to design lots of templates, so I only needed to concentrate on a key few.
The design kit also allowed me to be quite modular in my designs, and this really helped with the responsive aspect of the site. One of my key insights is that, with responsive, a modular, content first approach is far better than concentrating on fixed screen sizes.
The page designs
While the site was based around a core set of templates, I also wanted some pages – particularly the case studies – to have a bespoke, custom feel.
The site has been really successful and has helped to secure quite a few responsive-based projects, as well as receiving industry recognition for the quality of the execution.