If your Web Design isn’t Responsive, you can forget it

It seems everyone is talking about responsive web design these days, and with good reason; as the number of web-enabled devices continues to grow – each with differing capabilities and features – it’s no longer sensible to build fixed-width websites.

Truth is, it never was. Yet until now, it was considered best practice to design experiences that made a number of assumptions, be they around screen resolution, bandwidth or input method. If you’ve ever designed a 960px-wide website, only to view it on a friend’s small screen netbook, you’ll understand why this wasn’t a particularly clever approach. Now, with smartphones and tablets thrown into the mix, it’s clear that our traditional methods are no longer fit for purpose.

Thankfully, CSS media queries and a growing acknowledgement that the web is a medium in its own right, means we’re starting to embrace the true nature of the platform, accepting that its universality is a strength, not a weakness, check out www.alfredhomes.co.uk and www.househamhenderson.com as a good example of ones we recently finished.

The keys to Successful Responsive Web Design:

Layouts

Unsurprisingly, for an industry that has historically treated the web like print, fixed-width layouts have permeated many of the deliverables we produce. As we begin designing for an adaptable medium, new approaches are being considered that allow us to solve problems and communicate ideas while acknowledging the fluid nature of the medium.

Page description diagrams

While wireframes can often imply layout (and thus assume a certain type of device), page description diagrams remove this assumption and instead describe the individual components, arranged in the document in terms of priority.

Style tiles

When communicating design ideas with clients, we can find ourselves presenting ‘paintings of websites’. If we are not careful, clients will rightly ask to see concepts that demonstrate how a web design will look on other devices too. This can force us into an unsustainable situation of producing multiple pages for multiple devices. We have thought about this problem and come up with style tiles. These sit somewhere between mood boards (but less vague) and fully realised comps (but less precise), and help us communicate typography, button styles and masthead treatments. They also encourage a more mature level of discussion with our clients.

Mobility design game

This exercise can work really well during collaborative web design workshops. In this exercise, everyone writes down on Post-It notes the elements that may appear on a certain page. These are then stuck to the wall in order of importance as if they were appearing linearised on a mobile phone. The resulting discussion may generate some surprising conclusions. For example, you may realise that navigation is not the most important component on the page. This could follow through to the design, where a skip link at the top of the page links to the navigation in the footer.

Approach to design

That’s not to say there isn’t scope for web designers to think about how a design may work outside the confines of any particular device.

We initiate visual design from the perspective of the desktop. We begin by defining an overarching design language and visual aesthetic, often basing initial explorations around a core piece of content. For example, if we are designing a food site, we’ll start with a recipe page; for a news site, a story page.

Not only is this an important page on the site, but it probably includes enough structured content for us to build up a typographic palette. We’ll also think about how the layout may adapt – even if it’s just in the back of our minds at this stage.

Typography

Large headings can work well on wider layouts, but on smaller screens, they can take up a lot of vertical space and therefore require additional scrolling. As line lengths alter, you should consider line heights and other typographic treatments too.

Links

How will your web design work on touchscreen devices? While we don’t have an easy way to detect these yet (meaning we should take touch into account in all aspects of our design), designing for a narrower screen can give us an opportunity to think about target areas for links and other interactive elements. The iOS guidelines recommend that these be at least 44 pixels/points square, which is a good figure to aim for.

Navigation

This will probably be the most awkward component of any responsive web design, especially if your site has many sections and a deep hierarchy.

Superfluous content

Is some content not required? Does other content only need to be shown in certain scenarios? We don’t advocate hiding content based on what device a user happens to be using, but techniques like conditional loading can help us serve up smaller pages that only load complimentary content when required.

Creating a narrower layout helps us stress test a design

Designing two contrasting layouts reinforces the idea that a design will adapt while ironing out potential gotchas early on. While this sounds like a doubling up of work, bear in mind that we are not designing every page to pixel-perfect precision. Instead, we’re focusing on building a scalable web design language – one that will evolve as we start to implement it in code, and one that is based on individual modules and components.

Responsive Web Design Services

Here at Rooster, we offer fully responsive web design solutions for all types of businesses, that are easy to use. Speak to us today about your web design project by email at [email protected], the contact form at the bottom of this page or alternatively, call us on 01962 841 200.