Responsive Designs vs. Traditional Builds

Posted on

What is Responsive Web Design

Ethan Marcotte’s excellent “A List Apart” article coined the term “Responsive Web Design” all the way back in 2010.

In short, it refers to how a site can react to being viewed in different contexts; most obviously mobile, tablet and desktop, but also different resolutions that are common in those settings, portrait and landscape orientations and to people with really big or really small screens.

The means to make this all work usually involve some high end CSS3 media queries and there are several CSS frameworks which aim to make building a responsive web site easier, usually by having the elements of the page conform to a grid.

Sidebar: Do I need a grid?

Before I start, I should clear up that grids are only one way of achieving responsiveness. Almost the simplest thing that could work would be this plain CSS3:

@media (max-width:500px) { body { font-size: 90%} }

With no grids, floats, ems or percentages, this is a responsive web design. If you make your browser window smaller (or view your site on a device with a limited width) it will decrease the body font automatically.

Slightly more useful might be hiding elements which are using horizontal space up which is better used for the body content itself:

@media (max-width:500px) { .sidebar { display: none } }

This example is adapted from the Mozilla Developer Network Media Queries documentation.

What is a grid?

Grid systems pre-date responsive web design, becoming really fashionable with frameworks like 960.gs in the mid 2000’s, but really having been around since people started putting writing on paper.

The basic idea is that most designs can fit onto a regular grid. Normally we actually only care about the widths of things, so they are often represented as vertical stripes, with padding between them. Most things on the page will be take up multiple spaces, so your grid should be chosen to make how design elements are laid out.

For example, if you have one single width box and a double width box at the top of the page, and then a row of four adverts, you will need to use a number which is divisible by both 4 and 3 (that is; 12). 12 is very common in grid frameworks; it’s the default for 960.js, Twitter Bootstrap and Pure CSS.

If your design included a row of five icons, the full width of the page, you would be forced to base your grid on 60 columns, as it’s the smallest number divisible by 5, 4 and 3.

Process

For many web companies, a full design is produced in Photoshop, which is used as the basis for a chop or cut when rendered into CSS and HTML. When this is the case, the Photoshop files are generally the gold standard and the web developers who are implementing the design will try to match it “pixel perfect”.

Because responsive designs will look different in various orientations and with different device capabilities, it’s not normally feasable to mock all of these up as whole designs in Photoshop.

This requires some more imagination and faith from the customer as they may receive just one complete mock up and have to wait until CSS and HTML is ready before they can see how it looks at different break points, or the designers may just create individual elements of the design in Photoshop and work directly with the web developers to produce the desired layouts in CSS.

Performance

Loading a whole desktop site on a mobile device and then selectively hiding parts of it and scaling images down to the device’s width is wasteful of resources. This actually requires the mobile browser to be more capable than the desktop equivalent as it will also have to deal with media queries which aren’t executed on a full desktop.

There’s three main approaches to dealing with very constrained devices in this situation: a separate mobile site, server side detection, and “Mobile First” design.

Separate site

Having a separate site for very constrained devices (phones, especially when using 3G networks) can allow you to tailor the image quality and functionality for users with less powerful devices (feature phones) and with poor connections, like 3G, EDGE or GPRS. It does mean having two sites, but for some kinds of site a cut down version for on-the-go makes sense.

With a separate site you can still incorporate responsive design, as you can target the “full” site at small and large desktops and tablets – all of which can generally be expected to load the full site.

Server side detection

It’s possible to serve completely different style-sheets to different devices. In a way, this is something that RWD was trying to avoid, as it’s very close to the “two sites” problem that having a separate site introduces. Luke Wroblewski writes about an approach on his blog – breaking the page up into parts and conditionally outputting different content depending on if a mobile browser is detected.

This can be done in concert with RWD and media queries, but it can be used, for example, to serve lower resolution images to devices so you can avoid scaling and wasting bandwidth.

This approach has downsides too, aside from more complexity (conditionals in templates) and more difficult testing (it’s not enough to resize your window, you need to fake your user agent or frequently re-test with real devices) it also makes it very hard to serve your site correctly from an HTTP cache like Varnish or a CDN like Fastly.

In the worst case, you might have to instruct your cache or CDN to serve a different version of the site to every different user agent, greatly reducing your ability to be cached and resulting in a slower site.

Mobile First

Another term that means different things to different people “Mobile First” can be thought of as starting with the simple version of your site, typically the mobile view, and then layering additional functionality and media on the larger and more powerful devices.

Where RWD is often Desktop > Tablet > Mobile, Mobile First RWD is Mobile > Tablet > Desktop.

This is covered in more details on this web3canvas post. Though it uses phrases like “mobile is exploding” to justify the approach, as mentioned below, you need to think about your users and how they will use your site.

Answering the question “how can I tell if a site is Mobile First”, Jason Grisby suggests that if the site loads fewer and smaller resources on mobile than it does when visited on a desktop browser, it can be considered Mobile First.

For CSS, you can put richer background-images and @import inside a media query. Dave Rupert’s tests show that smarter browsers will only load a custom web font if it’s actually used in the page, so media queries can save your mobile user’s bandwidth bills, too.

For Javascript, you can conditionally load based on the document.documentElement.clientWidth property, like this:

<script>
if (document.documentElement.clientWidth > 320) {
(function() {
var scr = document.createElement('script'); 
scr.src = 'http://your.optional.javascript/optional.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(scr, s); })();
}
</script>

(This code adapted from the Google Analytics Async Tracking examples)

Complexity and testing

While the benefits of responsive design are obvious, by targetting more devices and resolutions you could be greating increasing your testing burden. Cross browser testing and compatibility, even in the age of web standards compliant browsers, is still a great deal of work.

Although Internet Explorer 11 will be out within the next few months, there are still users on Internet Explorer 7 (released in 2006!) and 8. Infact, because IE8 will be the last Internet Explorer for Windows XP this situation is likely to continue for some time.

Older browsers, particularly Internet Explorer, can require polyfills and other hacks to fake CSS3 media query support, and all of this needs to be tested and, if it doesn’t work first time, debugged.

Even on modern browsers, you will have to test the website at each of the different breaks that you’re supporting. With Bootstrap, for example, that’s three different sizes per browser.

For our Magento development, iWeb tests against the latest two Internet Explorers, latest Chrome, Safari and Firefox. Adopting a responsive design brings the combination of tests up from 5 to 15, which can have an obvious effect on budgets.

If you’re explicitly targetting mobile devices, you can add the last two versions of MobileSafari (on iPad & iPhone), “Old” Android (2.3-era devices) and newer 4.0+ devices, and you may want to test with Internet Explorer Mobile and Chrome for iOS too!

Cloud-based testing services like Scout from Saucelabs make it possible to perform these tests without a sea of different mobile devices at your disposal, but it still takes a considerable investment in time, which must be weighed against the expected benefits.

Conclusion

Like with any new technology, it’s tempting to jump on the bandwagon because of the coverage that web developers are giving to responsive. Responsive web design offers real benefits for content heavy websites which are regularly used by a wide audience from different devices.

The UK Government Digital Service cautions that you need to think about context – that is, where and how your web site or application will be used.

Want to discuss a project?

Talk to our Magento experts on 01785 279920

Request a callback