In re­cent years, re­spon­sive web design has be­come in­creas­ingly im­por­tant. Tom May ex­plains why we need to make our dig­i­tal de­signs re­spon­sive, and how best to do so

Computer Arts - - Contents -

In the fourth of our se­ries on dig­i­tal skills, we ex­am­ine how to make your dig­i­tal de­signs re­spon­sive

Back in the ‘olden days’ (be­fore 2010), most web design in­volved the cre­ation of two sep­a­rate web­sites: one for desk­top, one for mo­bile. Then Ap­ple in­tro­duced the iPad, and every­thing changed.

Be­fore long, the num­ber of dif­fer­ent de­vices hit­ting the mar­ket was in­creas­ing ex­po­nen­tially, and it was be­com­ing im­pos­si­ble to design a be­spoke web­site for ev­ery sin­gle one. To meet this chal­lenge, a new dis­ci­pline emerged, which its cre­ator Ethan Mar­cotte dubbed re­spon­sive web design (or RWD for short).

The ba­sic prin­ci­ple of re­spon­sive web design is that, rather than cre­ate a sep­a­rate web­site for ev­ery de­vice, you write one lot of code that will seam­lessly adapt your site to which­ever de­vice it’s be­ing con­sumed on.

This ex­plains why any qual­ity web­site cre­ated in 2018 will have a to­tally dif­fer­ent look when viewed on a widescreen lap­top than when viewed on smaller smart­phone screen. In­deed, even if you just re­size your browser win­dow on the for­mer, you’ll doubt­less see the lay­out morph and adapt to it in a de­light­ful, ‘au­tomagic’ fash­ion.

But re­spon­sive web design is not just about mak­ing a site look dif­fer­ent; in­creas­ingly it’s about mak­ing it act dif­fer­ently too.

“Es­sen­tially, re­spon­sive web design is about cre­at­ing the right ex­pe­ri­ence, ex­actly when and where the user needs it,” ex­plains Bill Kingston, part­ner at Lon­don design con­sul­tancy Elixirr Cre­ative. “The in­for­ma­tion users seek varies de­pend­ing on the de­vice – so we need to take this into ac­count when de­sign­ing. Hav­ing in­sight into user be­hav­iour and con­text is key.”

Joel May­nard, dig­i­tal de­signer at Hamp­shire agency Su­perrb, pro­vides a prac­ti­cal ex­am­ple. “How you han­dle nav­i­ga­tions on some sites, for in­stance, needs to be care­fully thought through,” he ex­plains. “Things like rollovers and hover ef­fects were re­ally fash­ion­able at one point – but if you’re re­ly­ing on the use of a cur­sor to un­lock th­ese fea­tures, that isn’t prac­ti­cal for touch de­vices, so you need to think about things like that up­front. Es­pe­cially be­cause, as well as smart­phones and tablets, touch desk­tops are be­com­ing more pop­u­lar now too.”


The main point is that a user’s needs, and of­ten the kind of in­for­ma­tion they’re look­ing for, may change based on de­vice. Th­ese dif­fer­ences may of­ten be only slight, notes Chris Robin­son, a design lead at dig­i­tal stu­dio ustwo Lon­don, but that doesn’t mean they’re not im­por­tant. “For ex­am­ple, at­ten­tion spans may dif­fer. A change in nav­i­ga­tion hi­er­ar­chy might be re­quired. You may want to pri­ori­tise cer­tain fea­tures or make sub­tle changes to the in­ter­ac­tion prin­ci­ples.”

Thank­fully, new tech­nolo­gies are mak­ing it ever-eas­ier to bake th­ese com­plex needs into re­spon­sive web design. “Pre­vi­ously, cer­tain lay­outs may have been dif­fi­cult or hacky to make re­spon­sive,” says Robin­son. “But new tools such

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.