Few digital designers and web developers would argue that responsive web design (specifically, that made possible by wide support for CSS3 media queries) has been a game changer for cross-platform browser services, making it possible serve a single version of a page and present users with an optimised experience, whatever their device size. We can specify different layouts, text size, image resolution and even content for different screen sizes, all with the same mark-up. Media queries became part of the CSS recommended standard in 2012 but were supported by WebKit browsers (including iOS and Android browsers) at least two years earlier.
Technically, the same tailored experience was achievable before CSS3. We could make a look-up table of all the devices we want to support, their OS versions and browsers, we’d produce designs and mark-up specifically tailored to each one, and when requests for web pages are received, the server checks the target device and serves the correct version (device detection). Major sites like BBC actually did this, but the overhead in maintaining the supported device information was huge.
Responsive design has given every web team the capability to deliver brilliant mobile web experiences for five years, but many have been slow to go responsive. ‘Mobile first’ has been the most touted buzzword in UX of the last few years, but my experience is that few are practising this, and mobile web can be an afterthought at best.
Why is this?
The app vs web feud
Mobile web is booming. Mobile accounts for over a third of the browser traffic of the services I’ve worked on this year (that’s phone devices only, tablet traffic is nearly as much again), and is significant’y up on last year, and the year before. This is in no small part because of apps; we communicate and are marketed to via email, Facebook, Twitter and WhatsApp, all of which increasingly drive us to the mobile web.
Yet for as long has I have been working with mobile, the digital media industry has been obsessed with native apps. Industry ‘experts’ have spent years claiming that mobile web is dying or already dead, while many companies have been dismissive of mobile web. From designers right through to CEOs, there is a belief that having an iPhone app equals success [I did mean to refer to iPhone, specifically]. This is illogical, ignoring the mobile web is like claiming that the web is dead; how many companies would actually be prepared to cut their desktop browser offering?
Those that fell into the app-trap found themselves sucked into a costly rabbit hole, struggling with unfamiliar platforms, complex maintenance issues and app store restrictions (and all too commonly rushing to market with an ill-considered product that no one wants to use).
Although strategically it would have been much better for app-fanciers to go responsive, building a mobile audience and gaining insights to how their existing product could translate to small-screen devices, responsive happened without the fanfare of Apple marketing, hardly registering beyond the developer community.
While the app-trap is still taking its victims, in my opinion it’s a bleak time to be launching a new app. Smartphone users are increasingly savvy to the fact that apps can snoop, hog battery, space and bandwidth, or just not be useful enough to be worth the time it takes to install them. The home screen is for ‘everyday apps‘ and others don’t get a look-in.
Most are now waking up to the need to prioritise a great mobile web experience, but are playing catch-up and find it hard to retro-fit responsiveness to their now well-established desktop sites.
Design tooling and process
I think tooling is a major factor of why responsive design isn’t done well (or at all), and the ‘mobile first’ doesn’t happen or make sense in most organisations.
Although there are fantastic tools for building responsive websites, like Chrome’s element inspector device preview, design tools are a long way behind. Typically, our design tools are intended for static output and are rarely sufficient to communicate the intricacies of an interaction. Prototyping tools and wireframes help designers to specify interaction but fall short of being able show how a module should scale across a set of responsive breakpoints. The easiest way to do that is to actually build it with HTML and CSS (you could look at InDesign’s liquid layouts but you’d be better off learning to code), and indeed it can be difficult to understand how a module could scale, without understanding the mark-up.
Designers without coding skills are left having to produce separate wireframes and mocks for every breakpoint, and additionally to evaluate them on device (because it really is impossible to evaluate a mobile layout on a desktop screen), ensuring that scaling is appropriate at for key devices sizes and right across the breakpoint. It’s slow, fiddly work, and without prototyping support it’s almost impossible to do well.
The ‘mobile first’ approach reduces this work by focusing on designing the mobile presentation, then scaling up only when this has been decided and defined. There is real value in this as an exercise, it can help strip back and hone an interface, identifying the critical features, but I don’t think it works as a real-world design methodology for responsive web. Here’s why:
- It is impossible to make good decisions about how a feature without considering it at every breakpoint and possible input device (touchscreen, mouse, keyboard)
- Scaling from mobile to desktop is no easier than going the other way, and is unlikely to lead to an optimal desktop experience. Why not start with tablet?
- Scaling still needs to be considered upfront; mobile devices aren’t all the same size, landscape orientation is part of the mobile use case
- Stakeholders want to see what it will look like on their laptop (I suspect this is the biggest reason why ‘mobile first’ isn’t implemented)
In my opinion, there are no shortcuts to responsive design. Go to the browser as early as possible, check everything on device, on as many devices as you can, distribute responsive prototypes for sign-off, not flat mocks.
What next?
Now is a critical time to be investing in mobile web. Although start-ups and corporations continue to be fixated with apps, web traffic speaks for itself and mobile web is at last being taken seriously.
For me, responsive design is as exciting now as when CSS media queries were first introduced to me in 2011, and also as challenging; screen size is diverging and users have become accustomed to slick mobile experiences in apps. Responsive designs need to be robust; providing an optimised experience on not just a handful of target devices, but across the entire range of possible viewports.
With more collaboration, more prototyping and more thorough processes, designers and developers can produce better responsive experiences. Tooling will undoubtedly catch up, but until it does all designers with an interest in responsive should take the time to learn HTML and CSS. Having a solid understanding of what goes on under the hood is the path to better creative problem solving.
I hope that one day we’ll be responsive first.
