I had the plea­sure to speak at Web Expo Guild­ford on Fri­day 12th Octo­ber, and it was received very well despite my ner­vous­ness (it was my first speak­ing engage­ment at a web con­fer­ence) and the fact that I for­got about half the points I was going to make. So I fig­ured I’d write a quick overview of my talk and include some of the slides as well. You can see the video of my talk on vimeo.

The name of my talk was “The Respon­sive Designer” and it focused on how my own expe­ri­ences with work­ing respon­sively and how the lessons I’ve learnt and the con­clu­sions I’ve made have made me a bet­ter designer. One major con­clu­sion (if you can call it that) that I’ve had is that if we as design­ers are mak­ing our sites so that they respond or adapt to what­ever device or screen size is thrown at them, then shouldn’t we as design­ers also be as adap­tive or respon­sive when work­ing on our projects?

So with that brief intro over, you can see the main points of the talk below, along with the cor­re­spond­ing slides.

Adden­dum

I should point out that whilst I do work respon­sively a lot, it isn’t always the best option, every project is dif­fer­ent and there are no set rules in design­ing for the web and mobile, this talk/article is all about using your judge­ment, which may lead you to decide that a respon­sive site isn’t the best solu­tion. Ear­lier this year I found myself talk­ing one of my clients into not mak­ing their site respon­sive but instead mak­ing a mobile app at a later date, because it just made more sense that way. But if you are mak­ing respon­sive sites then this arti­cle may be of inter­est. Cheers.

The first thing I asked myself when I made my first responsive/adaptive site was “why” and although there are sev­eral rea­sons the most obvi­ous and impor­tant (to me at least) is mak­ing your con­tent read­able. Or in other words — make the text big enough to read on a device with­out squint­ing or hold­ing it right up to your face.

My early attempts made me realise that it wasn’t about “shoe­horn­ing” a desk­top lay­out into a smaller one but think­ing about the var­i­ous lay­outs and view­ports simul­ta­ne­ously. I then went on to show sev­eral exam­ples of my work in such a way as to show the progress I’ve made with each new project, though I won’t bore you with them all here.

I’ve always been a fan of design­ing in the browser, work­ing respon­sively has only increased this, I think because the sites I make now are so fluid that Pho­to­shop comps just don’t make any sense to me any more and feel out of context.

One thing I like about RWD is that it encour­ages sim­plic­ity, but I’ve learnt that sim­plic­ity isn’t an aes­thetic, sim­plic­ity is some­thing that’s core to your web­site, it’s in the ease of nav­i­ga­tion, in how quickly your users can under­stand your mes­sage and achieve what­ever it is they want to achieve whilst being on your website.

The notion of trends or fads in design is a real bug­bear of mine, so I was quite keen to point out that I think it’s wrong to think of RWD as a trend, it’s just web design evolv­ing and adapt­ing to the ever chang­ing num­ber of devices and meth­ods that are being used to view our websites.

One thing I’ve been try­ing to edu­cate my clients on is to not view the ipad/iphone view­ports as a sep­a­rate ver­sion, but to view all view­ports as one. I think a big mis­take a lot of star­tups in par­tic­u­lar make is to get a designer onboard after a lot of the plan­ning has already been done, I think this is a bad thing espe­cially now when work­ing on a respon­sive site as a design­ers insight can prove invalu­able at the early stages of a project.

Also I think that RWD dis­cour­ages gim­micks in our designs, which are really not needed in the first place. A good exam­ple of this is the recent influx of par­al­lax scrolling sites, when done well and in mod­er­a­tion it can be beau­ti­ful but more often than not I find it really annoy­ing, but my point is that often these sites have the par­al­lax part “turned off” at smaller device screen sizes, WHY? Is it too dis­tract­ing? Too com­pli­cated? Too greedy with your band­width? Well if it’s a yes then why isn’t it all these things on the desk­top also? Or on a tablet? I think it is in many cases, why is OK for desk­top users to have more dis­trac­tions and a less con­tent focused expe­ri­ence? I don’t think it is. This also goes back to my pre­vi­ous point of RWD encour­ag­ing simplicity.

In a per­fect world every­one on the planet would have a MBP or ipad or iphone with the lat­est IOS/OS ver­sion and our jobs would be really easy, but that sim­ply isn’t the case.

Our work is con­sumed on every type of device and screen size con­ceiv­able which means it isn’t enough any more to just have the usual “Apple break­points”. Our designs need to be as fluid and device inde­pen­dent as pos­si­ble and our designs/layouts need to break when the con­tent needs to.

Respon­sive sites at smaller device sizes can end up being quite text heavy but with the huge improve­ments in web typog­ra­phy in recent years and the emer­gence of Type­kit, Font­deck, Move­able type and Fontsquir­rel etc this needn’t make your sites any less beau­ti­ful. In fact I find it a joy to read well set text on small screens in a well designed typeface.

Work­ing respon­sively adds some restric­tions when at smaller sizes, but restric­tions always make you get more cre­ative and more focused. I’ve really started to focus on the mes­sage and con­tent of the sites I work on now (not that I didn’t before, just more so now). Con­tent hier­ar­chy is now one of my pri­mary focuses, and because of that I’ve started to ques­tion some com­mon prac­tices. For instance it’s com­mon to cut some con­tent out from a web­site at mobile view­ports, but why? There’s a mis­con­cep­tion that users only use their phones to browse the inter­net when they are in a hurry and only want basic info such as con­tact num­bers or an address. This sim­ply isn’t the case and if cer­tain con­tent is deemed super­flous to a site on a mobile, then why isn’t that con­tent super­fluos on a desk­top? Why is the time of a desk­top user less valu­able than a mobile user? This is where good con­tent strat­egy and hier­ar­chy come into play.

One issue that I’ve been wrestling with lately is the idea of the right read­ing mea­sure. The per­ceived wis­dom is that an ideal read­ing length is between 45–75 char­ac­ters per line of text, with 66 being the opti­mum length. There’s a really use­ful plu­gin from Josh Brewer for this. The thing is though that on smaller mobile devices (ver­ti­cal iphone and smaller) at 66 char­ac­ters per line the text is too small to read com­fort­ably. I think around 30–35 gives a text size that is far more easy to read. I’ve seen a lot of respon­sive sites recently that have what would nor­mally be a per­fect mea­sure but are just not easy to read and I end up using the reader func­tion on Safari on my iPhone. Now I really love the reader but­ton, I use it all the time but isn’t it a bit of a shame we even need it in the first place? Wouldn’t it be great if all sites were that easy to read with­out that but­ton? Espe­cially respon­sive sites that are meant to take care of all that for us.

There are loads of pre-determined respon­sive grid frame­works out there and whilst I think that some of them are really use­ful (if you haven’t already, check out the bril­liant work of Joni Korpi) I don’t think it’s good prac­tice to start choos­ing grid frame­works or sys­tems before you fully know your con­tent. It feels a lit­tle like shoe­horn­ing again and also reminds a bit of the tem­plate cul­ture from a few years back that hap­pily we’ve (mostly) moved away from.

Take it apart, steal the parts that you like, and adapt them to your own way of work­ing. — Joni Korpi

I’d like to think that one of the rea­son clients come to me to design their web­sites is that they expect a bespoke ser­vice, some­thing indi­vid­ual, some­thing that not only meets the needs of what­ever ser­vice or prod­uct they have, but is also inno­v­a­tive and unique, rely­ing exclu­sively on pre-written grids doesn’t encour­age that (well not in my opin­ion anyway).

I’ve been think­ing that if the web­sites we are all build­ing now respond/adapt to their sur­round­ings and what­ever device or screen size is thrown at them, then shouldn’t we as design­ers be more like this also? Shouldn’t we be more com­fort­able in adapt­ing to every new project or chal­lenge that comes at us?

So how do we do that?

Web design has its roots in graphic/print design where the designer was used to a cer­tain amount of con­trol over how things looked, but now we need to stop being such con­trol freaks and “let go” have the con­fi­dence in our own abil­ity to use our expe­ri­ence and tal­ent to solve prob­lems on the fly in an ever chang­ing envi­ron­ment, as every project has dif­fer­ent require­ments, con­tent, expec­ta­tions etc. So what worked on your last project might not be the right solu­tion for your next one, so we need to respond/adapt to our surroundings.

Antic­i­pate change and expect the unex­pected. Things will change, the tech­niques we use will change, the devices our sites are con­sumed on will also change, progress is an inher­ent part of our indus­try. But because RWD is in it’s infancy as such, we all have a chance to add to the col­lec­tive knowl­edge bank on the sub­ject, every time we make a new respon­sive site we learn new stuff which we can share with every­one else.

We all have an oppor­tu­nity to shape how respon­sive sites are made as there are no experts on the sub­ject yet, only those who know a lit­tle bit more than every­one else.

I stole this line from Dave Rupert’s recent arti­cle on A List Apart (with his per­mis­sion of course). The arti­cle was about respon­sive images but applies to RWD in gen­eral I think. Use your best judge­ment, use your brain, respond and adapt to the chal­lenges each new project brings and above all enjoy yourself.

That’s it, thanks for read­ing, hope it kinda made some sense.

Colophon

The type­face used for the slides is Rel­a­tive Bold. Many of the pic­togram style icons were pur­chased from the won­der­ful Noun Project and the illus­tra­tions were sourced from clipart.com.