I had the pleasure to speak at Web Expo Guildford on Friday 12th October, and it was received very well despite my nervousness (it was my first speaking engagement at a web conference) and the fact that I forgot about half the points I was going to make. So I figured 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 Responsive Designer” and it focused on how my own experiences with working responsively and how the lessons I’ve learnt and the conclusions I’ve made have made me a better designer. One major conclusion (if you can call it that) that I’ve had is that if we as designers are making our sites so that they respond or adapt to whatever device or screen size is thrown at them, then shouldn’t we as designers also be as adaptive or responsive when working on our projects?
So with that brief intro over, you can see the main points of the talk below, along with the corresponding slides.
I should point out that whilst I do work responsively a lot, it isn’t always the best option, every project is different and there are no set rules in designing for the web and mobile, this talk/article is all about using your judgement, which may lead you to decide that a responsive site isn’t the best solution. Earlier this year I found myself talking one of my clients into not making their site responsive but instead making a mobile app at a later date, because it just made more sense that way. But if you are making responsive sites then this article may be of interest. Cheers.
The first thing I asked myself when I made my first responsive/adaptive site was “why” and although there are several reasons the most obvious and important (to me at least) is making your content readable. Or in other words — make the text big enough to read on a device without squinting or holding it right up to your face.
My early attempts made me realise that it wasn’t about “shoehorning” a desktop layout into a smaller one but thinking about the various layouts and viewports simultaneously. I then went on to show several examples 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 designing in the browser, working responsively has only increased this, I think because the sites I make now are so fluid that Photoshop 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 encourages simplicity, but I’ve learnt that simplicity isn’t an aesthetic, simplicity is something that’s core to your website, it’s in the ease of navigation, in how quickly your users can understand your message and achieve whatever it is they want to achieve whilst being on your website.
The notion of trends or fads in design is a real bugbear 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 evolving and adapting to the ever changing number of devices and methods that are being used to view our websites.
One thing I’ve been trying to educate my clients on is to not view the ipad/iphone viewports as a separate version, but to view all viewports as one. I think a big mistake a lot of startups in particular make is to get a designer onboard after a lot of the planning has already been done, I think this is a bad thing especially now when working on a responsive site as a designers insight can prove invaluable at the early stages of a project.
Also I think that RWD discourages gimmicks in our designs, which are really not needed in the first place. A good example of this is the recent influx of parallax scrolling sites, when done well and in moderation it can be beautiful but more often than not I find it really annoying, but my point is that often these sites have the parallax part “turned off” at smaller device screen sizes, WHY? Is it too distracting? Too complicated? Too greedy with your bandwidth? Well if it’s a yes then why isn’t it all these things on the desktop also? Or on a tablet? I think it is in many cases, why is OK for desktop users to have more distractions and a less content focused experience? I don’t think it is. This also goes back to my previous point of RWD encouraging simplicity.
In a perfect world everyone on the planet would have a MBP or ipad or iphone with the latest IOS/OS version and our jobs would be really easy, but that simply isn’t the case.
Our work is consumed on every type of device and screen size conceivable which means it isn’t enough any more to just have the usual “Apple breakpoints”. Our designs need to be as fluid and device independent as possible and our designs/layouts need to break when the content needs to.
Responsive sites at smaller device sizes can end up being quite text heavy but with the huge improvements in web typography in recent years and the emergence of Typekit, Fontdeck, Moveable type and Fontsquirrel etc this needn’t make your sites any less beautiful. In fact I find it a joy to read well set text on small screens in a well designed typeface.
Working responsively adds some restrictions when at smaller sizes, but restrictions always make you get more creative and more focused. I’ve really started to focus on the message and content of the sites I work on now (not that I didn’t before, just more so now). Content hierarchy is now one of my primary focuses, and because of that I’ve started to question some common practices. For instance it’s common to cut some content out from a website at mobile viewports, but why? There’s a misconception that users only use their phones to browse the internet when they are in a hurry and only want basic info such as contact numbers or an address. This simply isn’t the case and if certain content is deemed superflous to a site on a mobile, then why isn’t that content superfluos on a desktop? Why is the time of a desktop user less valuable than a mobile user? This is where good content strategy and hierarchy come into play.
One issue that I’ve been wrestling with lately is the idea of the right reading measure. The perceived wisdom is that an ideal reading length is between 45–75 characters per line of text, with 66 being the optimum length. There’s a really useful plugin from Josh Brewer for this. The thing is though that on smaller mobile devices (vertical iphone and smaller) at 66 characters per line the text is too small to read comfortably. I think around 30–35 gives a text size that is far more easy to read. I’ve seen a lot of responsive sites recently that have what would normally be a perfect measure but are just not easy to read and I end up using the reader function on Safari on my iPhone. Now I really love the reader button, 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 without that button? Especially responsive sites that are meant to take care of all that for us.
There are loads of pre-determined responsive grid frameworks out there and whilst I think that some of them are really useful (if you haven’t already, check out the brilliant work of Joni Korpi) I don’t think it’s good practice to start choosing grid frameworks or systems before you fully know your content. It feels a little like shoehorning again and also reminds a bit of the template culture from a few years back that happily we’ve (mostly) moved away from.
Take it apart, steal the parts that you like, and adapt them to your own way of working. — Joni Korpi
I’d like to think that one of the reason clients come to me to design their websites is that they expect a bespoke service, something individual, something that not only meets the needs of whatever service or product they have, but is also innovative and unique, relying exclusively on pre-written grids doesn’t encourage that (well not in my opinion anyway).
I’ve been thinking that if the websites we are all building now respond/adapt to their surroundings and whatever device or screen size is thrown at them, then shouldn’t we as designers be more like this also? Shouldn’t we be more comfortable in adapting to every new project or challenge 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 certain amount of control over how things looked, but now we need to stop being such control freaks and “let go” have the confidence in our own ability to use our experience and talent to solve problems on the fly in an ever changing environment, as every project has different requirements, content, expectations etc. So what worked on your last project might not be the right solution for your next one, so we need to respond/adapt to our surroundings.
Anticipate change and expect the unexpected. Things will change, the techniques we use will change, the devices our sites are consumed on will also change, progress is an inherent part of our industry. But because RWD is in it’s infancy as such, we all have a chance to add to the collective knowledge bank on the subject, every time we make a new responsive site we learn new stuff which we can share with everyone else.
We all have an opportunity to shape how responsive sites are made as there are no experts on the subject yet, only those who know a little bit more than everyone else.
I stole this line from Dave Rupert’s recent article on A List Apart (with his permission of course). The article was about responsive images but applies to RWD in general I think. Use your best judgement, use your brain, respond and adapt to the challenges each new project brings and above all enjoy yourself.
That’s it, thanks for reading, hope it kinda made some sense.
The typeface used for the slides is Relative Bold. Many of the pictogram style icons were purchased from the wonderful Noun Project and the illustrations were sourced from clipart.com.