Featured

Web Design

Being responsive

by Carol Green on 31/08/2012

In the early days of the web, designs needed to fit onto 640 x 480 pixel monitors (who remembers that? Ugh). A few years later and the average monitor had grown in size to 800 x 600, then to 1024 x 768, and so it goes on.

Except it doesn’t. With the increasing ubiquity of smartphones, tablets, netbooks and cheap, widescreen, overgrown desktop monitors, designing websites has become a whole lot more complicated.

That’s where responsive design comes in. ‘Responsive’ because the design reflows and resizes according to the size of the viewer’s screen. And not just in terms of the width of the content, but also which parts of the design are delivered to each of those screens. This is done via CSS styles, media queries and whole lot of maths.

Want a demonstration? This site, Design Assembly, has recently been redesigned by the clever folks at Infinity. If you are looking at this on a desktop or laptop, resize your browser. Make it smaller. Make it smaller still – down to what you imagine you might see on a mobile phone. The layout changes as it gets smaller – from 4 columns to 3, then eventually to a single column, at which size some parts of the design disappear. That’s responsive.

How should you approach responsive design?

A good approach is ‘mobile first’; decide what does and doesn’t need to be on the mobile site; which images are nice to have but not necessary; how the menu will work; how big the text will be, and enhance from there for tablet, laptop and desktop screen sizes.

Text-images will almost always fail with responsive design since they will be resized with the browser and will often end up too small to read. Use the @font-face declaration instead, and don’t be afraid of web fonts.

Consider font size – make fonts for your mobile styles bigger than for desktop sizes – if your smartphone loads a properly sized, responsive design, you don’t want to have to pinch-zoom to be able to read the text.

Since touch devices provide no natural ‘hover’ state, hover-menus can be frustrating at best, and at worst, can break the site. Take the opportunity responsive design offers and redesign your menus for the smaller sizes; showing submenus which would otherwise trigger on hover, or increasing link/button target size to account for big, clumsy fingers.

Work with a proper grid structure, for example 4 columns for desktop, 3 columns for tablet, 1 column for mobile. Technically, this is where responsive design can get maths-heavy, since columns, margins and padding are expressed as percentages. There are templates and tools which will help: the 960 Grid System (whose website is – hilariously – unresponsive), the 1140 CSS Grid, both multi-column frameworks which you can use as a basis for your design; and Gridset, a tool with which you can build your own grids with custom breakpoints, without having to do any of the calculations yourself! Perfect! If you use a CMS framework, there are responsive themes for WordPress, Drupal, Joomla et al.

When should you not design responsively?

Know your target market. If you have access to site analytics, use them. What percentage of visitors are using mobile devices? If the figure is very low, you might decide the extra expense is not worth it, though bear in mind mobile traffic will increase and there’s always the ‘if you build it, they will come’ factor.

Be realistic. If your budget doesn’t stretch, don’t do it.

Your site might need a completely separate mobile version – separate content, separate styles, rather than a responsive stylesheet. For example, trademe.co.nz and touch.trademe.co.nz. This might be the case if you want your mobile version to behave more like an app, with interactivity quite distinct from a desktop version.

As a web designer, it is your responsibility to consider the idea of responsive design when you approach a new project. Discuss it in detail with your client and make sure they understand not only the benefits of responsive design, but also that designing and coding responsive sites is more expensive. At least twice as expensive because you are, in effect, creating two (or more) separate designs.

Do you have experience of the joys/pitfalls of designing responsively? Do you have a favourite tool or template for constructing responsive sites?