Official website for Web Designer - defining the internet through beautiful design
Author: Steve Jenkins
7th February 2014

The three pillars of responsive design

Responsive design is an ever-evolving animal, but it still retains its core elements to create. Here’s a quick guide to working with RWD

The three pillars of responsive design

Responsive web design is compiled of several components of development, which are put together to create the whole process. 

  • Fluid grids are based on page element sizing rather than the use of pixels or points.  They are more carefully designed in terms of proportions, so whatever size device is being used they will fit the screen.
  • Media queries basically allows information about the site user to be gathered and used to conditionally apply CSS styles, based on the characteristics of the device the site is being displayed on.
  • Flexible images are sized in relative units to keep them within their own element.

These three technical ingredients, when put with a more modern way of thinking and designing, produce flexible sites with no preconceptions about a browser window’s width.

RWD is still a relatively new concept and the advantages for users are numerous, not least of all being the way it can fit any screen size, so they can access the same site on any device.  This multi-device functionality provides a consistency without the need for the secondary mobile site, which is a large plus for any website.

For the designer this can pose new problems.  Recently, James Young carried out a survey to find out what problems development agencies were experiencing, one of them was testing the new website on such a wide variety of devices.  Unless the designer owns all the devices on the market, this is not an easy task. As mobile devices are constantly being updated, it could create a huge expense for small businesses to check a site works correctly across the many platforms now available.

It appears the only solution to this could be device sharing, which although not yet common practice, has been started in some creative communities and is a concept worth considering.

There are also mobile site validators or mobile emulators on the market that could be used, although even with these you would need more than one to cover all devices.

Demonstrating RWD to clients

Rather than trying to explain RWD to clients, the best way is to show them what it can do.  This will be much more impressive than speaking to them in very technical terms they do not understand, most of them will not have heard of fluid grids or media queries, even though they are every day terms to designers.

Start by showing them a site on a range of devices, and let them see how wireframing and sketching can be much more powerful tools. They will no longer have the pixel perfect visuals to see before their site is completed.  This may have been easier for them to understand, but with RWD they will typically have a more usable site.

Some agencies, such as Mays Digital believe that RWD is the only way forward as websites can be adapted to suit the clients needs, including accommodating the touch and swipe feature on most tablets.

Overcoming the problems

As with any new technology, RWD has had its problems, but most of them have been overcome without too much difficulty. To start with some developers had trouble with tables, navigation and images, but the use of scripts, SVG, and icon fonts together with good consistent design overcame these niggles.

People who already have an old fixed width style site face another potential problem.  The fact there is such large differences in creating the two types of site also raises an additional problem. When a designer is faced with this problem there are a couple of options open to them:

  • Reverse engineer: This is definitely the least favourable option, and is often more time consuming than a rebuild.  Occasionally, due to certain factors, they are left with no choice.
  • Rebuild: Creating new templates and style sheets from the ground up is often quicker and cheaper.  It allows the designer to build a better RWD site, taking into account the different ways in which content must be structured.

Another potential problem for RWD is when a consumer browsing your site is using an old version of IE.  This can lead to a site that often appears too small for the browser window.  Thankfully there are also relatively easy fixes using filler.

Should you use RWD?

Any company that doesn’t use Responsive Web Design is potentially seriously limiting its audience.  This can obviously be bad for business.  With consumers using an ever increasing variety of devices and browsers to view your website, it is common sense that the most engaging will produce the best metrics.  This will lead to better conversion rates of browsers into buyers/customers, which is after all the whole reason businesses require a presence on the net.

Recent surveys have shown an increasing number of people only use their mobile devices to browse the net, and do not access the Internet at all on a desktop computer or laptop.  So not only does a lack of responsive web design make it awkward when people are on the move, it excludes a large portion of browsers completely.

The ever increasing options available for browsing the Internet, and their increased availability means that RWD is here to stay, and will quickly become the only way to build a top notch usable site.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.