Skip Links

Back

If you take a look at the history of web design, you’ll see that design trends have changed massively over the last few decades.

RIP American Online and Myspace.

But it’s not just the appearance of websites that have changed.

The way we use them has, too.

This shift in behaviors of how we use the internet has resulted in new design strategies. And, as a result, there’s a new bunch of terminology that people other web designers need to know: marketers, project managers, product managers, and developers.

One of those is responsive web design (RWD).

In this guide, we’ll explain what a responsive web design is—and why it’s important that your business uses one. We’ll also share how you can build your own mobile-friendly site that’s future-proof.

What is a responsive design?

Responsive website designs move on-page elements to fit different screen sizes.

For example: A desktop computer screen is much larger than a tablet, and a tablet has more pixels than a smartphone. But a responsive website design recognizes these screen sizes, and automatically re-jigs the page to suit the device’s screen size.

(It’s much easier than pinching to zoom, and scrolling side to side, when viewing a mobile site that isn’t responsive.)

The term “responsive design” was coined by Ethan Marcotte in a blog post published back in 2010. He said:

“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.

In short, we need to practice responsive web design.”

How does responsive design work?

The visible area of a browser window is called a viewport. (If you’re viewing this page on mobile, your viewport would be much smaller than on a tablet. You aren’t able to see as much content due to the smaller screen size.)

Traditional website designs were created based using pixels.

You’d typically have an element (like an image, for example) that you’d set to 200px x 500px. It’d show the same size—regardless of the viewport size of the device it was being loaded on.

However, design elements on responsive website are sized using proportions.

Using the same image example, you’d set the column width to 20%. The image column would then take up 20% of the page, no matter whether it was being loaded on smaller screen (like a Blackberry viewport) or large screen (like a desktop computer.)

You might also responsive elements named ‘flexible images’ or ‘flexible elements,’ purely because they automatically change size depending on the screen width.

The importance of responsive web design

In 2020 and beyond, a responsive website is simply table stakes. You don’t have an option to have a horrible web experience if you want your brand to be taken seriously.

It might sound like a lot of effort, because it is.

…But it’s worth it, as these three statistics prove:

1. Mobile internet usage is on the rise

Did you know that mobile accounts for over 51% of web page views? August 2019 was the first time in history that mobile internet usage overtook desktop.

(It’s no surprise really: 4.68 billion people, scattered all over the planet, own mobile phones.)

The only problem with this shift in online behavior is that traditionally, websites are designed on desktops.

Web designers would use desktop applications to create a custom design. But if people are ditching desktop browsing in favor of mobile, you could be alienating a huge chunk of customers… Unless your design is responsive.

A responsive site looks the same as your desktop version. Visitors can view a beautifully-designed version of your website even if they’re using mobile devices, such as iPhones or Android phones. On-page elements will simply move to fit their screen.

One of my favorite parts of working at Clique is sitting alongside our developers as they create a responsive version of our designs. It’s like watching a painter paint or a sculptor sculpt. 👩‍🎨 It’s magic.

2. Search engines use mobile-first indexing

Google receives over 75,000 searches per second. (That equates to 4.5 million every minute, or 6.3 billion every day.)

People who are hitting the “search” button on search engines have different intentions. Some might be looking for advice, whereas others are looking to purchase a product.

That makes SEO a key part of any website’s marketing strategy—not just for ecommerce.

However, there has been a recent change to the way Google’s algorithm works that impacts web designers. Back in 2018, they announced that they’re taking a mobile-first approach to indexing. They said:

“Our crawling, indexing, and ranking systems have typically used the desktop version of a page’s content, which may cause issues for mobile searchers when that version is vastly different from the mobile version.

Mobile-first indexing means that we’ll use the mobile version of the page for indexing and ranking, to better help our–primarily mobile–users find what they’re looking for.”

Wondering why this changed?

It’s because of the statistic above. Google want to point their users in the direction of sites that have great user experience. And, because the vast majority of searchers are using mobile, it’s crucial that the mobile version of a site fits the high quality criteria.

3. By 2021, almost 54% of retail e-commerce is expected to be from mobile

There are several different devices that you can purchase products from besides a traditional desktop. In fact, smartphones and tablets are overtaking desktop in terms of online shopping, with 54% of ecommerce expected to be done using a mobile device by 2021.

A responsive design is more important than ever—especially if you fancy taking a slice of that pie. Why? Because mobile users spend over 3.5 hours per day on their mobile phones.

If you don’t have a mobile-friendly website, the visitors landing on your site won’t be willing to open their laptop to complete their order. It’s too much hassle. Instead, they’ll head back to their mobile search results and find a competitors’ website that is responsive to make a purchase.

How to create a responsive design

Ready to create a mobile-friendly responsive website?

You can edit your website’s code—including CSS and HTML code—to make a website responsive. You’ll need to think about the screen width (or browser width) of any device.

RWDs use breakpoints to determine when these flexible elements will change. It’s a small bit of code added to your style sheet, which typically are:

  • 320px and 480px for a smartphone
  • 768px and 1024px for a tablet
  • Above 1024px for larger devices

For other design elements, such as font sizes, you’ll need to use viewpoint code.

For example: A traditional website would set the font size to 12px. However, responsive design would use CSS to pick a font size based on the viewpoint based on the device width, shown in the example below:

Creating a responsive design can be tricky if you don’t have a web developer on-hand to help.

…But that’s no excuse.

There are thousands of responsive website themes that you can purchase on WordPress, ThemeForest, or StudioPress (what my personal site runs on). You can pick one of these premade templates as your starting point, and customize your web design knowing that it’s responsive.

Final thoughts

As you can see, a responsive layout is key for businesses as we head into the mobile-dominated internet world.

Resizing design elements—such as font sizes, images, and layouts—is essential.

This is why 100% of our designs at Clique are mobile responsive. Here are a few of our favorites.

Granted, it might take some time to build a responsive website. But with new devices launching every year, it’s worth future-proofing your website’s design by making it responsive.