Why You Should Be Designing Responsive Websites in 2020

Photo

Web design is a discipline that continually evolves. The techniques used to create websites in the early 2000s would not be appropriate today. They'd be cluttered, insecure, and slow, thanks to out of date technologies like Adobe's Flash.

Like with clothing, web design fashion trends change over time. In the late 2000s, glass effects and rounded edges were popular, sparked in-part by the Windows Vista Aero theme. By the mid-2010s, solid colors and straight lines were all the rage. This can still be seen today with the tiles used by Microsoft and the straight lines and block colors on the BBC and Reddit websites.

In the last couple of years, the most notable design trend has been to offer a “dark mode” where the background are switched to black, instead of white or other bright colors.

Responsive Web Design
Another trend that started in the 2010s was that of responsive web design. Before the launch of the iPhone, most websites were only designed to work on larger screens like those found on desktop and laptop computers.

To accommodate the new, smaller screens of mobile devices, designers began to create separate mobile websites, often using a subdomain like “mobile.example.com” and redirecting mobile users there. This became problematic when manufacturers began to create devices in a myriad of sizes, meaning a site designed for a 4 inch iPhone wouldn't appear correctly on a tablet or a 9 inch iPad.

Instead of having a mess of different mobile sites for each screen size, Ethan Marcotte proposed the use of media queries, flexible images, and a fluid design to create something he called “responsive web design”.

Today, any web designer who wants their website to be enjoyed by their users needs to make it responsive. Here's why:

Everyone Uses Mobile
In 2019, 53.3% of all web traffic in the world was from mobile devices like smartphones and tablets. That's a rise of 222% over six years. Around 60% of organic traffic, people who visit your website from a search engine, comes from mobile.

Whichever way you look at it, more people are using their smartphones more often to access the internet.

Even people who are using a desktop computer may also use their smartphone at the same time. For example, gamers may be playing a game on their computer screen, and also be using a smartphone to look up guides on how to complete a particular level or get hints and tips that could make them more successful.

For example, while learning to play card games you might use your smartphone or tablet to access a guide on how to play poker that can act as a reference for which hands are best. For players of old school games from the PlayStation or PlayStation 2 era, a smartphone provides a great way to access cheat codes and keep them handy while playing.

Photo

You Can't Discount Computers
With the majority of traffic coming from smartphones, you may think you'd be better off designing a mobile-only website. However, if you went down this road you'd still be cutting off almost half of your audience.

Additionally, computer users typically convert into more sales than mobile users. This is often because people use their mobile to do research but move to their computer to complete their transactions. For example, Target found that 75% of its customers start their customer journey on a mobile device, sometimes even while shopping in-store, to compare products.

As a general rule, it's better to design your website for both desktop and mobile.

Responsive Web Design is Less Work
It's easier to create and maintain one responsive website than have a set of sites designed to work on different devices. Doing so would require a lot of work, such as testing multiple versions and ensuring the sizing is correct each time. Responsive websites automatically adapt to the size of the screen by changing the size of images and moving from horizontal to vertical alignment as appropriate.

Having a single website also means that there is less to go wrong. You don't have to ensure your automatic redirects aren't accidentally sending desktop users to your mobile site and vice versa. It also means you can spend your time, energy and resources building and ranking one site to get to the top.