Mobile comes first: responsive web design in a mobile world

The rise of mobile

UniKent mobile app iconThe University of Kent, like many UK universities, now has a dedicated student-focussed mobile app. It’s great, and early indications are that students find the key aspects of the app (timetables, maps, PC availability) really useful. The Kent mobile app isn’t native to any particular device, but is a web app wrapped up to make it look and feel somewhat like a native app. This means that a single app can reach users of iOS, Android, and Blackberry. Since iOS covers the vast majority of smartphone mobile access, providing for these three platforms reaches most potential users.

The private sector has been in the app world for a long time. For good reason. Smartphones are now becoming the standard mobile device, particularly as old contracts come to an end. Moreover the world is fast becoming mobile: there is very good evidence that in the next two or three years most web browsing won’t be happening on desktops.

Some general things to consider in this regard:

Device agnosticism

So I think we’ve established mobile is “An Important Thing”. How does it affect web developers and designers?

People are now viewing web content on all sorts of devices. Forget the Internet Explorer vs Firefox faff we had a decade or so ago. Now it’s mobile, tablet, desktop, tv… each with different operating systems, browsers, screen sizes, and screen resolutions. It’s getting complicated.

I’ve been writing this post in an iCloud enabled app in markdown on a mix of iPad 3, iPhone, and retina MacBook Pro (a lot of web sites really don’t look great on retina thanks to low resolution images). I’ve got no real idea what this will look like on the blog itself, although I believe it looks fairly different between iPhone, iPad, and MacBook thanks to the default WordPress twenty-eleven theme. And of course maybe you’ll end up reading it somewhere other than the blog I had in mind anyway. In many ways I don’t care too much what it looks like because I don’t know who will be reading it, and in what context. To be honest I’m just happy if someone reads it at all and it makes sense to them!

One approach to cope with this diversity is to try to have a unique site for each type of device that you might conceivably be reading this on. Including, I suppose the “printed on paper” device. A common approach would be to have a mobile site and a desktop site. Perhaps a tablet site too. Maybe even a pdf somewhere. This split is generally provided on the grounds that desktop users have loads of time to spare. They will want and need a ‘rich’ experience, whereas mobile users have less time and just want some kind of potted version they can casually thumb their way through while walking down the street. This may be a valid point. But it may not. As Ethan Marcotte points out in his book Responsive Web Design:

"But just because desktop users can sift through more content, does that mean they need to? In other words, why is easy access to key tasks only the domain of mobile users? Why can’t all users of our sites enjoy the same level of focused, curated content?" 

So yes, a different approach to this is what’s become known as responsive web design, a term coined only a couple of years ago by Ethan Marcotte in an article for A List Apart. Let’s try to treat the content as the important bit, keep things simple, and let each device deal with rendering the content in its own particular way. We can use HTML5 and CSS3 to do this. All good.

In fact there are now some nice tools and frameworks that make it even easier, like the rather lovely Twitter Bootstrap. Even better.

The process of making a site work across devices focusses the mind on what that site is really there for, because it forces you to think about the content, who might want to look at it, and why. Got three javascript menus linking to 100 other pages? Well, perhaps thinking about mobile, tablet, tv, etc. will make you question whether anyone really ever needs or could be bothered with those links, as opposed to just finding the pages through a search tool. I suppose they might want that many links on a desktop, but they certainly wouldn’t on an iPhone, iPad or tv set. Simple really can be beautiful. And beauty can be very effective.

Mobile first

Taking the prevalence of mobile to its logical conclusion is the idea of developing primarily for mobile, and letting other formats flow from that. An proponent of this approach is Luke Wroblewski.

The idea is that if mobile is already so important – and will only gain in importance – then why not treat it like we used to treat desktop web design. Make it the default at which we aim our design. Desktop design is a bonus. The principle of simplicity applies. If something works on mobile then surely it’ll be ok for desktop.

This is perhaps an over-simplification. Life isn’t always that simple, and there will of course be times when what works on a smartphone just won’t transfer at all to a tablet or a desktop environment. But to me as a general approach it surely makes sense to aim to have all kinds of web browsing kept as simple as possible.

Do I (really) need an app for that?

I’ve been talking about mobile web design, but what about apps?

A few years ago organizations rushed to get some pretty poorly-conceived apps out into the wild, just so they could say they had an app. Thankfully the University of Kent wasn’t among them. We’ve taken our time to build a web app which is actually useful to students.

The problem was that people didn’t think about why they needed an app, and just ended up looking stupid. As an antidote, recite after me:

Apps are for tasks. Web is for content. 

This is something I came across from Paul Boag. There are exceptions to this but basically it does make sense. Why would you want to go to the not inconsiderable effort of building an app for content when you could more easily just put it on a website?

Summary

Mobile really is the next big thing. This is not to say we’ll all be using iPhones or Galaxy S3s for all our web browsing by 2013. There’s still a place for desktop. But it will quickly become only one way of interacting with websites.

It follows that web design needs to deal with this shift by taking a mobile-first approach, in which a single site can adapt intelligently to multiple devices and platforms.

And don’t bother with the effort of building an app unless you’re providing some kind of unique task or functionality. The web is where content lives and breathes. Make it easy for people to access it and they will love you for it.

One response to “Mobile comes first: responsive web design in a mobile world

  1. Responsive web design is the way forward for sure, but I haven’t seen so many large websites progress with the idea as yet. I’m also worried about the design aspect of websites becoming more technical rather than creative, creative in an artistic sense. It would be a shame if beautiful designs started to come second to technical needs in every design.

Leave a Reply

Your email address will not be published.