Responsive web design

Whether or not we design a website to be responsive to mobile/tablet devices (i.e. adapt both functionally and visually to the device its being viewed on) is the million dollar question in all web projects we get involved in at the moment.

All the statistics (see here if you are interested: this site), together with the data we see from our clients sites tell us one thing; that year on year we will see big growth in the number of devices (i.e % of people with smartphones), the use of these devices to access the internet, together with an increasing variety in the types of these devices (e.g. smartwatches to widescreen TVs). With 4G just around the corner here in the UK as well, it becomes pretty clear that making sure your website works across as many of these different devices as possible is highly desirable if you are building a new website today.

The problem as is often the case is cost. Given how relatively new an area this is in web design, coupled with the explosion in the range of devices available, making a web design responsive can literally quadruple the build time (and therefore costs).

There are basically 2 opposite ends of the scale to consider here:

1. Bespoke responsive web design

This option involves creating bespoke web designs for each page in the site. The process typically starts with a UX desiger prototyping key wireframes, leading onto a graphic designer mocking up the working version of the pages. This is no different to how any web project has been done. What is different however is that separate wireframes and designs will be required for all the screens sizes (viewports) we have decided to cater for.

Take this site we have recently built for example: http://www.butterfliesanddragons.co.uk/. As this is an ecommerce site being responsive was vital, at the same time (given the subject matters of children and toys), the client wanted a very creative, and in build terms, challenging design. When sites are as complex as this, adapting a page layout from what we can do on a widescreen monitor compared to a phone is a big challenge, and it requires a completely different design. This site in fact has 5 completely separate designs for each page, all starting out as wireframes, which then get individually hand crafted into real designs, and then get tested and refined. Finally the developer has the painstakingly manual task of making it all work on the web. Unfortunately for this level of control and detail there is no alternative or compromise.

The price is a lengthy design and build time. The result is a wonderfully creative and usable website that works across all devices.

2. "Out of the box" responsive web design

On the opposite end of the scale to this bespoke responsive web design approach, we have what are called "out of the box themes", and most of the big platforms offer these (e.g. http://wordpress.org/themes/responsive). These are basically precreated designs which are coded to work with these platforms. They are typically cheap to purchase and easy to install. These can either be used exactly as they are (the quickest option), or more typically they will be refined by a designer and developer to fit with the style wanted by the client.

Somewhere in between these 2 extremes we also have responsive web design frameworks such as Twitter bootstrap, or Foundation. These provide a base framework and structure within which a designer can create a site. Their purpose is to make bespoke designs quicker to build and more robust.

So to summarise then whilst the above options are an over simplification of a very complex set of options, they hopefully show the 2 ends of the scale which are "out of the box" Vs "bespoke design". Which option we choose in a project will depend on a balancing act between budget, how important being responsive is, required functionality (e.g. are any of the platforms like WordPress suitable?), as well what the design imperatives are (e.g. will the design requirements with an out of the box solution).

If you are interested in any of the eCommerce web design solutions mentioned above please do get in touch with us today at the Skiff in Brighton. We can very quickly help you determine which option might be best for you, and in most cases we have demo sites of platforms setup which you can have a play around on to see what you might be getting. You can either call us on 01273 603995, or email us at info@accu-web.co.uk.