Responsive Web Design

What is responsive web design, and why is it important?

Yannis Anthymidis - April 17, 2020

“Responsive” design is when a website tailors itself to how your device looks and works. It’s a simple idea that states that a webpage should feel at home on any platform.

That’s the super-short version, but what are the reasons that it’s so important in quality web design? Why is it only becoming mainstream? And why is it so hard, sometimes attracting a premium?

All our designs are responsive, and we consider it a minimum for our customers. We will answer all these questions to show you the value of responsive web design in this short article.

Responsive design in a nutshell

An example of responsive web design

One website, multiple forms. The bread and butter of responsive web design.

Responsiveness exists as a term because historically, websites were poor at adapting to mobile. The truth is, they still are; it takes exceptional effort from web developers to ensure their content works smoothly across both desktop and mobile.

Smartphone penetration was over 70% in Singapore in 2013, and this is now the case in most advanced economies. It’s now so common that few research firms look into phone use in advanced economies. Statistics show that a significant chunk of web browsing is done on these devices, both home and away.

The iPhone’s introduction in 2007 made browsing on mobile popular for the first time. This soon led to what is called “mobile-first design”. Websites designed in the late 2000s and early 2010s typically had two versions; one for mobile and one for desktop.

The problem with mobile-first design is that everyone is getting a different, often reduced experience. Since mobile phones have entered our lives, they are a major part of the web, but at work and home, the traditional PC remains steadfast. They all matter to a business.

Customers expect websites to work and work well, no matter what they find themselves on. Instead, websites should aim to be responsive and mobile-friendly, without prioritising a single experience but accepting how people like to interact with technology, and giving them the best possible experience on any platform.

Mobile-first: A remnant of the old school

These are many surviving examples of ‘mobile-first’ design, even on major sites like Reddit. The popular community site isn’t mobile-first in the traditional sense, as its tradition of long posts is more associated with reading and writing on the PC.

Reddit has been trying to move away from the longform text culture towards media content requiring small attention spans, like images and videos. To that end, they have improved their front-end and even run a hosting platform for posting pictures and videos to Reddit.

Reddit segregates its service into three: website, mobile site, and mobile app.

The New Reddit, for the purposes of this screenshot (there’s an alternate version with the classic design, but neither one is mobile-friendly).

The mobile site.

Not shown in screenshots is the very first thing when you land on Reddit’s mobile site: a prompt asking you if you want to continue in-browser, or install their app (20 MB+) for a better experience.

The design differences between the desktop site, mobile site and app are staggering.

Reddit communities (subreddits) like IAmA have their own identity and branding, like the purple background, banner, and logo shown above. There is no technical reason the background couldn’t carry over and be the same on both, or at least be adjustable. Reddit’s users are its stakeholders, and they’ve long expressed frustration with Reddit’s compartmentalised configuration.

In summary, the differences are the following:

  • Weaken Reddit’s brand
  • Hurt the subreddits’ brands (communities hosting themselves on the platform)
  • Create an inferior user experience as the featureset is different.
  • Increase the burden on Reddit for tweaking and maintaining the site, as they have several versions to update

Apart from the cost of rewriting their code, there are valid reasons as to why Reddit keeps to this approach:

  • Compatibility with older phones and less featureful browsers, like Samsung Internet
  • They drive people to their app
    • They can do more sophisticated analytics on the app
    • Native applications are often faster and more power-efficient than websites displayed in your browser

While Reddit’s mobile-first approach has serious weaknesses, the site has moved from strength to strength and its community has changed over the years to produce shorter, snappier content ideal for light entertainment on the go. The distinct mobile experience is key to that, so its design goals have been met.

Responding to all devices, by example

An example of responsive design done right comes from the BBC. They are chosen for their simple and clear layout in this example, but I wish to emphasise here that design complexity isn’t a limiting factor; any website can be responsive, from functional news sites to genuine art pieces on the web.

But for now, something simple and easy:

BBC website 4:3-ish aspect ratio

The BBC’s main desktop design, at traditional 4:3-ish aspect ratio.

BBC website - widescreen aspect ratio

A scaled-down screenshot taken at a fullscreen resolution of 2560×1440 px (widescreen aspect ratio).

Note the blank space left to the sides – it’s intentional, as reading speed decreases the longer a line is horizontally.

This is the same reason why many blogs (like this one!) also don’t use the full width of your screen; overlong lines decrease comprehension and make reading a pain. The compact design is therefore smart and well-considered for the fast-moving news the BBC delivers.

BBC - mobile landscape view

Scaled to tablet size, in portrait mode. The same layout is used for mobile devices in landscape view.

The featured article has now moved to the top, and all other articles have been arranged underneath it. There are far less items in the top bar, which are hidden under the ‘More’ section.

BBC-mobile-portrait-view

Layout on mobile (portrait).

This is optimised for scrolling down a list of news items, which is a highly engaging pattern of web design replicated on social platforms (Twitter, Facebook) and news websites.

The secondary stage of categories like World, Business and Politics have now been merged into a three-line ‘hamburger’ menu (≡). When you tap the menu icon, it shows this:

BBC mobile menu

The same entries you saw before, but now arranged in a menu you must tap, as there are so many entries you wouldn’t want to press by accident.

What did we learn from the BBC’s design?

  • Their design is simple and effective. It’s made more intuitive by the fact the design language remains the same when you move from desktop to mobile and vice versa.
  • The BBC is able to easily maintain tight branding regardless of how visitors access their content.
  • The same layout code is shared across all versions of their site. It’s really just one version that changes dynamically. In fact, you can access every version of their site just by resizing your browser window. If you want a small version in the corner of your monitor, you are welcome to have it.

We’d be remiss if we failed to mention the cons:

  • It takes a lot of work to get it to work flawlessly on each browser and display.
  • They have less leeway with article formatting as one version must work on all devices. This means the BBC’s feature articles are not as visually appealing as the New York Times’ or Vox’s.
  • It may still be a poor experience on old phones with low-res displays.

The final point hurts a lot of responsive sites, which do not take anything other than widescreen desktop and portrait mobile into account. Tablets and older monitors tend to be left out.

Mobile-first or responsive?

This is a relatively easy decision to make: use the 80-20 rule. If 80% of your target audience is on desktop use, responsive design; if 80% are on mobile phone use mobile-first.

Great you say, but what if my users are split 50-50? You need to see where the usage trends are going, what your budget is and where your business will be in 3 years. The safer option would be to have a single, responsive website, as you have to only update one website and can focus your efforts on that. For an all-digital business, it might be better to create two distinct forms if you are confident you can deliver an equally great user experience for both. 

We are responsive by default

We make the effort to design responsive sites and believe our customers should expect it as the default. Our rules of thumb are based on time-tested web development principles and predate mobile browsing.

  1. The website should gracefully degrade to be compatible with a range of devices. If the visitor is using an old web browser or unusual configuration, all features should still work. For example, designer fonts may have to default back to system fonts like Arial, but the text will still be readable.
  2. Use a single, adaptive design to create a consistent house style, as well as reducing the cost of maintaining the page.
  3. Compatibility matters. Test the website on devices of all shapes and sizes.

We believe that, correctly applied, responsive design techniques are more mobile-friendly than mobile-first, because they recognise and work with the visitor’s tech preferences, instead of against. Our offerings for clients are responsive by default, and we’re proud to make that extra effort with each new site we host on the web. If you want a CX Vibrancy design for your company, please drop us a line.

Yannis Anthymidis
Yannis is an in-house writer for CX Vibrancy. Elsewhere, he's known as a contributor to open source software, where he holds a number of credits, and as a rabid history buff.
Subscribe to our Newsletter 

  We write about web design techniques, money-saving SEO tips and other trending web development topics!
 
Cool! Sign me up!