There are so many technical posts out there about how to build sites responsively but not many from an agency’s point of view. In this blog posts we’ll take a look at how we implement it, the advantages/disadvantages and ultimately the benefit to the client.

Responsive Web Design (RWD) is one of the latest web trends (*1). There are rafts of statistics being published in the media on the growth of mobile web and research has shown that mobile devices now surpass desktops as the most common way to go online (*2). With this in mind and the expansion of 4G network, mobile is only going to continue to grow throughout 2013.

As websites are now accessible across a plethora of devices – from mobiles, tablets, to TVs – one of our goals for 2013 is to build our first fully-responsive website to deliver the latest cutting edge web technology to our clients.

We have already started work on this, beginning development of our first responsive project for a client that needs to reach the widest possible audience. Their website must be accessible to people at all levels in society from grassroots organisations to corporate businesses, from children and schools, to their parents.

So with the way we access web content constantly changing, it is increasingly important for websites to adapt to the user. RWD is one way to do this.

Design stage:

To keep things simple we began the design with a desktop version. From the design perspective starting big and working down ensures that we get everything you want in the desktop size which can then be reviewed to establish how it can be reshuffled for different screen sizes.

With this in mind from the outset we chose a layout that we knew would scale well; for example the homepage mini-banners were structured in a 3×2 layout that would easily scale down into a column for narrower screens.

Another key consideration is the top/side navigation and how to accommodate this on the smallest screen size. We used a toggle feature which can be incorporated into the mobile sized design – this is a small icon that on selection the navigation drops down. We found that this needs to be ‘finger friendly'(*3) as if it’s too small users won’t be able to tap the icon or if the entire visibility is obscured by their fingers.

As this was our first time designing a responsive site, we began by designing the homepage template, to ensure that we were not putting together a specification for the whole build across the various scales that might not actually work.

Using this approach the first time round allowed us to trial the process one page at a time and apply any tweaks/updates to the design. This was the most efficient method to try out this new technique while also making it manageable task for design.

Some agencies may be holding off designing responsively as it seems more complicated, RWD is far from daunting, basically all it means is more work for design in working out the structure of the site over the 3 sizes, but with a little extra thought and time the end result is worth it.

We can’t show you what we have done yet as its still ‘hush hush’ but we will post a blog once completed to show you HarperJames’s first responsive website and share our experience of making the web a better and more accessible place for users.

(*1) The Next Web

(*2) Inmobi Mobile Trends 2013

(*3) Smashing Magazine

This blog was originally posted on Harperjames.com where I started my career in 2011 as a Digital Account Executive. 

http://www.harperjames.com/blog/responsive-web-design.html