Back to blog home

A buyer's guide to responsive design

By 2017, figures suggest that more than 90 percent of internet users will access online content through their phones. For brands and business, this has felt like a revolution as well as an assault on both the senses and budgets, as launching a responsive or adaptive site needs more than just a new lick of paint.

What you need to know:

You’ll need to know some of the jargon and top of the list are Breakpoints – the point at which the layout or styling of a page changes or ‘breaks’, which is dictated by device screen sizes and browser window widths.

When and why you need breakpoints?

With over 300 screen sizes on the market today it would be extremely complex to create a responsive site to accommodate breakpoints for every possible scenario. Even addressing the top 10 devices would make the task too hard to the point of near impossibility. Therefore, it is critically important that you identify your audience and the devices they use to give you some generic guidelines to design to.  

What is the best approach to responsive design?

In an ideal world you could take a mobile-first approach and allow the content of your site to dictate where breakpoints are needed, rather than fixing definitive screen widths. Once the content begins to look messy and unbalanced as the demand for screen space increases, you would insert a breakpoint.

Mobile to tablet and tablet to desktop are the obvious breakpoints and are the bare minimum your budget should accommodate. From there you could implement mobile and tablet landscape versions which will throw up some interesting questions such as:

  • Are there crossover design elements?  
  • Does the landscape tablet version look like the desktop, but with device based navigation?

As the questions flood in, it’s easy to assume you’ll need many more breakpoints, but the key element here is not to over-engineer your site too early. More breakpoints means more UX (user experience considerations), more design, more front-end development, more back-end development, and more QA.  

The multiplier effect (aka where did my budget go!)

Introducing an additional two breakpoints sounds simple BUT can increase your development budget dramatically, which is why allowing the visual balance of the content to dictate the breakpoints enables you to govern your project far more economically. If, upon launch you see that users are accessing the site in unforeseen ways, you can look to reconfigure existing breaks or bring in new ones dictated by usage data to guide you.

Today, two breakpoints <BP> is pretty much the norm as this displays a site in three ways.

mobile <BP> tablet <BP> desktop

An MVP however might be: mobile portrait <BP> desktop / tablet

A richer requirement set-up is to use five breakpoints to create six displays (for mobile portrait, mobile landscape, tablet portrait, tablet landscape, desktop normal, and desktop wide).

Do more breakpoints <BPs> equal more time-cost for my project?

Absolutely - even if you use a popular base theme like Bootstrap, Omega or Zen. Put simply, more breakpoints equals more work. Let’s crunch the numbers.

Let’s say the homepage has 10 content types. For example, the navigation, image carousel, and social media feed among others.

  • A non-responsive site has 10 blocks of content to design, theme, test
  • A two breakpoint site has the same 10 blocks to design, theme and test, but each must display in three different sized views requiring 30 permutations
  • A five breakpoints, the homepage alone requires 50 different displays.

How much more does this cost?

Although there are a lot of variables involved (the design, design approach, levels of interactions and number of templates, for instance), going from two breakpoints to five can easily equate to 40% more work.

For example, the social media feed is likely to be mainly text-based. In general, this type of content block scales well with only a few tweaks required as it becomes smaller or larger. However, an image with text overlay often means that at certain sizes, the text becomes too long or covers the image. In these instances, conditional code must be written to reduce the font, change the text or remove the text all together, for example.

Take a look at Lush or the Missguided site to see this in action. Drag your browser in while focusing on particular areas like the navigation; it changes behaviour at several, but not all breakpoints.

As you can imagine, the more breakpoints the more conditional code you need to write and the more QA help you need to help track all versions. You must also consider the editor’s experience when using the site. Additional functionality may be required to enable an editor to load a shorter headline for a mobile display, for instance. More testing and training would then be required.

A key impact: design workflow

All told, responsive front end projects presents numerous challenges and one of the biggest is the design workflow. The traditional means of using Adobe PhotoShop for design and wireframes for layout / functional guides are under extreme duress. If done well, you’d really need a design and wireframe for each breakpoint. Not only is this significantly more work for your designers, but the content used in examples often covers just one or two content types and is not representative of the final content the site will feature.

Let us also not forget the extra dimension mobile provides - interaction (touch gestures) and the lack of default web behaviour on a desktop like hovering your mouse!

The traditional design flow therefore needs a fresh approach. New tools such as the fantastic Pattern Lab help make sense of this. Instead of designing pages in Photoshop and layouts of templates (wireframing), Pattern Lab allows you to abstract the content types and focus on each of these for every breakpoint. The entire practice is in real code (HTML, CSS) which allows us to focus on the interactions and each element in turn. Then, when you have a library of content types, you can create views (collections of content types).

We’ll share our experience and advice for working with Pattern Lab very soon as it has become a valuable addition to all our teams, especially our dedicated design and creative department.

Conclusion

Can you say with confidence that your site caters for the 60% of people using at least two devices to go online each day? Are you also aware that Google now penalises websites which aren’t mobile-friendly? What are your costs for managing both a mobile and a desktop site?

The costs of not being responsive can quickly spiral, and although a responsive site comes with a price tag, the ROI can be significant. Here’s a list of 14 brands which increased conversion rates via responsive design if you want to look at the numbers.

We see responsive design as one of the most rewarding steps a brand can take in their digital development. The arrival of tools such as Pattern Lab have redefined how we work, just as brands must now rethink how they sell themselves and their services and products to a mobile-hungry audience.

 


Article update
This article was originally published under iKOS Digital, which unified with Inviqa in June 2016. For more information about the unification visit https://inviqa.com/new-era.