September 23, 2019
Let’s be honest, science fiction didn’t get much right about what the year 2019 would look like. There aren’t extra-terrestrial citizens living among us, we don’t have flying cars (outside of tragic and very temporary circumstances), and our cities aren’t walled by bubble-domes. One prediction that science fiction absolutely nailed however, is that we’re now all ubiquitously connected to data through mobile communication devices.
What the old movies never quite got right though, was how to make those small interfaces believable in the way they conveyed data. In the world of web design, presenting information effectively with half a forearm’s worth of on-screen real estate is a finicky task, and clever designers have created methods to solve these issues in the form of responsive web design and adaptive web design.
So what is Responsive Web Design?
The thing is, in the final moments of the third act when the hero pulls up the reactor’s schematics on their suit’s wrist-puter, where did that information come from? Was it custom designed for wrist screen, or was it a larger document that Mission Control transmitted to the hero from their computers? Isn’t it convenient that the schematic happened to be wrist-sized, and what would’ve happened if the red wire was actually off-screen and the hero missed it?
On the web, when mobile phones first gained Internet access, custom web designs for mobile needed to be separately created, built, and maintained alongside their desktop-sized counterparts. Without a mobile site, users would just see the desktop version, resized down to be impossibly small and unusable. The problem was, the sheer amount of effort to maintain two websites was often more than enough to dissuade businesses from embracing the new technology. To bridge that gap, responsive web design was born.
With responsive web design, a single website’s content can be instructed to resize and fit depending on the constraints of a user’s screen, whether they’re on a 29 inch 1080p monitor or a mobile. In the interests of efficiency, responsive web design foregoes pixel-perfection for a more fluid way to design for the huge number of screen sizes that exist today. The benefits to usability and flexibility are undeniable, and most agencies offering web design services nowadays are no longer recommending multiple, custom, ongoing web design and development commitments from clients anymore.
Okay, but what’s the difference between responsive and adaptive web design then?
Many people get the two terms confused, but an easy way to think of adaptive design is like thinking of putting rigid boxes inside rigid boxes. As long as the size of your screen is big enough for the rigid, fixed design to sit in, it will display that layout. In adaptive design, a series of fixed designs are declared, and once the screen size reaches the next declared limit, another box/design gets loaded instead.
By comparison, responsive designs will continually reshape to fit the available space, even as you drag your browser window’s corners. This is something adaptive designs won’t do, and gives back some of the design control without needing to fully revert to the days of web design companies needing to custom build and maintain multiple websites.
How about this mobile first responsive web design I keep hearing about?
As a web design company looking to adopt responsive web design, a decision then needs to be made about where to begin designing a user experience. Let’s cut back to our sci-fi action thriller to illustrate – reactor schematic please!
If Mission Control knew that the hero would need the schematic to be displayed fully via wrist-puter, then wouldn’t it be smart to make sure all the information was designed for that size screen first? Any supporting crew’s devices could be deprioritised, but the critical audience of the schematic is the hero.
Specifically catering to the mobile experience first, and then looking at how content spreads out for larger screens, is the core focus of mobile-first responsive web design. This type of consideration is particularly relevant nowadays for ecommerce web design, where mobile purchasing now frequently represents the largest segment of website users, and ensures that customers can shop seamlessly no matter the device they are using.
Does Google prefer responsive web designs?
Google definitely acknowledges the importance of mobile responsive web design, and the rise of mobile users as a customer demographic, to the point where Google’s search algorithms now include numerous criteria specifically surrounding how well a website presents on smaller screens.
The most telling example of this direction was Google’s introduction of mobile-first indexing, which began rolling out in 2018, but there have been many indicators from even earlier on. Accelerated Mobile Pages (AMP) have been encouraged, mobile load speeds have steadily become more prominent as a performance metric within Google’s set of developer tools, and without proactive maintenance of canonicals, the old mobile-specific websites that once saw favour could now be incurring duplicate content penalisations.
There are clear benefits to investing in responsive web design, and there should be no argument against its importance. After all, what use is a website that doesn’t present information effectively on certain devices? As the online representation of a business and brand, the customer should always be met with your best foot forward, and in order for the customer to find you in the first place, it would do well to align your web design efforts with Google’s search algorithm requirements as well.
Fortunately, for both Google and the customer that design direction is one and the same, and the end result will be an exceptionally usable, fluid and intuitive user journey, whether they’re on desktop, tablet, mobile… or maybe one day even a wrist-puter.
About The Author
William Siu is the Managing Director of Web Ignite Pty Ltd, situated in sunny Brisbane, Australia.
Will is a 12-year veteran digital strategist with a history of servicing clients globally in data analytics, SEO, PPC, web design and web development. His passion is to make the web easier and more profitable for growth-focused organisations.
