The future of responsive web design

Ben Moss.
March 25, 2015
The future of responsive web design.
It’s almost incomprehensible in 2015 to build a website that isn’t responsive. The technique has developed to the point that most designers no longer say, ‘responsive web design,’ we say, ‘web design,’ and mean exactly the same thing. Naturally, opinions differ on how to implement responsive techniques; many sites that claim to be responsive aren’t; most sites that intend to be responsive are only superficially so; there are even a few fixed-width devotees clinging on in the face of all reason. But broadly speaking a responsive approach is the default option for all websites. To understand where responsive design is going, we need only to look at where it came from…

Necessity is the mother of invention

The rise of responsive web design goes hand in glove with the expansion of the mobile web. Even if developing an m. site, the exponential growth of mobile devices and the accompanying variety of screen sizes makes responsive design the clear choice. [pullquote]Responsive web design is the only way the Web remains viable[/pullquote] Statistics are invariably out of date, but most commentators agree that the mobile web is fast approaching 50% of all web traffic. Responsive web design has been embraced out of an economic need: we could build hundreds, if not thousands of variations on a single site, and serve the most appropriate to whatever devices access it; but the cost of developing a website would become prohibitive. Responsive web design is the only way the Web remains viable. It’s easy to see responsive design as a definitive solution for the Web. However, as tech continues to develop, the way we approach responsive design will inevitably change.

Responsive design for wearables

Unless you’ve spent the last year in a sealed capsule (attempting to prove your suitability for the Mars One mission) you’ll be aware that Apple have launched a wearable device: the Apple Watch. The Apple Watch is not the first wearable, it’s not even the first smart watch, but it is the watershed device because the public will see the Apple Watch as ‘the best’ wearable — the iPod was not the first MP3 player, the iPhone is not the best smartphone, but both dominate their markets — thanks largely to the size of Apple’s marketing budget. The most notable thing about the Apple Watch is that it doesn’t have a web browser. It’s a fair bet that that’s the case not because Apple didn’t want to include a browser, but rather, because they couldn’t make it work. Even with the spread of responsive design, the 272px by 340px of the Apple Watch are insufficient to display anything but a couple of lines of text. An architect could design a building that’s 15 inches high, but no one would ever use it, because the human body is a fixed size range. Apple aren’t the only company facing the issue. Android wearables are exactly the same size give or take a few pixels, and are equally ill-equipped for displaying the Web. [pullquote]the Web does not work on a screen the size of a postage stamp[/pullquote] We can’t make devices larger because they become unwearable, and we can’t make them smaller because of our stubby inaccurate fingers. The cold hard fact is that the Web does not work on a screen the size of a postage stamp. Portions of the Web do work on wearables. Native apps connect to the Web (or to your phone, which connects to the Web) in order to retrieve data. The just can’t display full web pages. Buy a wearable now and you can read the tweets of a company CEO, but what an investor really wants to read is the full annual report. Buy a wearable now and you can check flight departure times, but what a traveller really wants to do is book a flight. The Web is inextricably linked to our lives, a few lines on a tiny screen does not meet consumer demand. Sooner or later (it’s probably already happened behind closed doors) someone at Apple, or Motorola, or Intel, will accept that to dominate the wearable market they have to deliver the full Web in all its jQueried glory.

The future of responsive design

As the tech industry continues to develop new devices, with new capabilities and limitations, the challenges we face as web designers will inevitably change. As Jeffrey Zeldman wrote a few days ago:
We’ve been through this before. It’s the history of web design. It’s the history of the web.
One of the key areas for focus in any responsive design is navigation, and one of the key developments we’re likely to see in wearables is a change of input method: sensors in a wriststrap could detect the tightening of tendons in the wrist, tracking the movement of 5 digits, or at the very least detecting the clench of a fist as a replacement for click or tap actions. The key development will be a means of presenting longform content on a wearable. And actually it already exists: the most viable option for delivering large amounts of data on a wearable device is audio. Audio input is already viable in the forms of Siri, Cortana, and OK Google. More importantly, audio output exists in the form of screen readers. With the relatively short lifecycle of devices and the increasingly long lifecycle of websites, the projects you build today will need to function with audio browsing. The simple answer is to make your sites accessible. Frequently, when products are innovative, we expect it to take some time for standards to evolve, but in the case of screen readers standards already exist. What’s compelling for tech companies looking to deliver a wearable web, is that a large proportion of existing websites already meet that standard. The future of responsive web design, or perhaps simply web design, is one in which designs are not just screen agnostic, but screen independent. In practical terms, it means dropping mobile-first, and adopting an audio-first approach. If your sites are optimised for screen readers, then they will function effectively on the next generation of web browser. Featured image uses device image via Shutterstock.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…