Responsive web design is not a new concept.
The term was coined back in May 2010—three years after the first iPhone was sold—in an article by Ethan Marcotte on A List Apart. Marcotte predicted that mobile web access would overtake desktop within three to five years. For this reason, he put forward a strong case for changing the way we design websites.
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.Ethan Marcotte, “Responsive Web Design”
Time to go mobile
2016 was a year of unforgettable events. It was a year began with the death of David Bowie, and ended with the election of Donald Trump. We saw the release of the iPhone 7, the first Google Home device and the Tesla Model 3. Everyone was talking about Pokémon GO, Andy Murray and that Game of Thrones episode. And then, of course, Brexit.
And, quite importantly, it was the year that mobile internet usage overtook desktop for the the first time. Almost simultaneously, Google announced they were beginning to experiment with using the mobile version of websites to determine search rankings. In other words, a mobile-friendly website had now become essential.
According to this year’s Wolfgang Digital KPI Report, 63% of all internet traffic is now coming from mobile and tablet. With the rollout of 5G, this is likely to increase exponentially. In other words, people now access the internet primarily through their phone. Reflecting this trend, as of this week, Google will be using mobile-first indexing and ranking for all new websites.
And all the while, the variety of screen sizes keeps getting bigger. Last year saw the introduction of a basic browser on the Apple Watch. This year we’ve started seeing foldable phones, and next year it’ll be stretchable displays. As a result, it is becoming more important than ever that your website works flawlessly for the user, no matter what device it might be viewed on, now or in the future.
A new approach to responsive design
At Taylor/Thomas, our designers are beginning to approach design in a whole new way. Where previously they would have designed three distinct versions of a site—mobile, tablet and desktop—and handed them over to the developers as finished products to be built, we are now constantly communicating throughout the design process. In particular, we’ll discuss how the layout will adapt, or how font sizes and spacing might increase or decrease in response to the screen size. As a result, we build a better product.
We can increase the target area on links for smaller screens, selectively show or hide elements that might enhance a page’s navigation; we can even practice responsive typesetting to gradually alter the size and leading of our text, optimising the reading experience for the display providing it.Ethan Marcotte, “Responsive Web Design”
By the time the build begins, our developers have a strong understanding of where the fluidity is needed. Using flexible grids, typography and spacing, we are creating websites that make no assumption of a browser window’s width. As the designs come to life on a screen, we continue to work together to identify where optimisations can be made. Before a launch, each website goes through a methodical testing process to ensure that it looks flawless, and functions effortlessly, at all possible screen sizes.
We may not know for sure what size our phones will be next year, or what device we might be browsing the internet on next, but we do know our clients’ websites will look great no matter what.
Some years ago, we were lucky enough to feature on Ethan Marcotte’s Responsive Web Design podcast to talk about the Fontsmith website.