RESPONSIVE WEB DESIGN
In recent years, responsive web design has become increasingly important. Tom May explains why we need to make our digital designs responsive, and how best to do so
In the fourth of our series on digital skills, we examine how to make your digital designs responsive
Back in the ‘olden days’ (before 2010), most web design involved the creation of two separate websites: one for desktop, one for mobile. Then Apple introduced the iPad, and everything changed.
Before long, the number of different devices hitting the market was increasing exponentially, and it was becoming impossible to design a bespoke website for every single one. To meet this challenge, a new discipline emerged, which its creator Ethan Marcotte dubbed responsive web design (or RWD for short).
The basic principle of responsive web design is that, rather than create a separate website for every device, you write one lot of code that will seamlessly adapt your site to whichever device it’s being consumed on.
This explains why any quality website created in 2018 will have a totally different look when viewed on a widescreen laptop than when viewed on smaller smartphone screen. Indeed, even if you just resize your browser window on the former, you’ll doubtless see the layout morph and adapt to it in a delightful, ‘automagic’ fashion.
But responsive web design is not just about making a site look different; increasingly it’s about making it act differently too.
“Essentially, responsive web design is about creating the right experience, exactly when and where the user needs it,” explains Bill Kingston, partner at London design consultancy Elixirr Creative. “The information users seek varies depending on the device – so we need to take this into account when designing. Having insight into user behaviour and context is key.”
Joel Maynard, digital designer at Hampshire agency Superrb, provides a practical example. “How you handle navigations on some sites, for instance, needs to be carefully thought through,” he explains. “Things like rollovers and hover effects were really fashionable at one point – but if you’re relying on the use of a cursor to unlock these features, that isn’t practical for touch devices, so you need to think about things like that upfront. Especially because, as well as smartphones and tablets, touch desktops are becoming more popular now too.”
The main point is that a user’s needs, and often the kind of information they’re looking for, may change based on device. These differences may often be only slight, notes Chris Robinson, a design lead at digital studio ustwo London, but that doesn’t mean they’re not important. “For example, attention spans may differ. A change in navigation hierarchy might be required. You may want to prioritise certain features or make subtle changes to the interaction principles.”
Thankfully, new technologies are making it ever-easier to bake these complex needs into responsive web design. “Previously, certain layouts may have been difficult or hacky to make responsive,” says Robinson. “But new tools such