Dashways Logo

What is Responsive Web Design? How Does Responsive Web Design Work?

Modern web design trends have focused on responsive web design. To put it simply, responsive design is the practice of designing web sites in a way that makes the site look good on whatever device is being used.

This might mean that the layout, features, content and media of a site looks different on a mobile phone than it does on a tablet or a desktop computer, but the site should still be usable and responsive to the device being used.

Increasingly, sites are being created that are responsive to the screen size of the device being used to view them. These are known as Responsive Web Design or RWD sites.

The term 'responsive web design' is also used to describe a design approach that adapts the presentation of a website to the device or platform being used to view it, usually on the fly and without requiring the user to refresh the page or click a link. For example, if you’re viewing a website on a mobile device, your browser will probably detect that the page is being displayed on a mobile device, and automatically render it using a mobile-specific style sheet.

This gives you a less cluttered view of the page while still showing you all the content, without having it being cut off or otherwise look and feel bad.

Why is Responsive Web Design Important?

Responsive Web Design

I've written an entire blog post about this topic about why responsive design is important. In short:

  • It improves your SEO rankings
  • It makes it usable on all devices, especially on mobile which has the biggest share of traffic
  • It improves lead generation, sales and conversion rates

The Two Main Methods of Responsive Web Design

Over the years, responsive web design has evolved into an intuitive approach. How we design responsive websites today is very different from how we do it in the past. Let me explain how this is done in the past, and now.

In the Past: Serving Two Different Sites Depending on Device

Previously, websites were designed based on fixed pixel sizes. This was done with the desktop user in mind, since they were the majority share of web traffic back then.

When mobile usage started to rise, web developers started to cater to this group, by creating a mobile version of the same site, usually with highly stripped down features. The mobile version will then only be served to the visitor if it's detected that the visitor is on a mobile device.

This meant that there were actually two deployments of the site, the main site and the mobile version. And if your website does not have a mobile version, it is a big pain trying to use it.

During this period, mobile users were still relatively low in percentage, simply because the experience of surfing the web on a mobile device was not great.

However today, with almost everyone owning a powerful smartphone, mobile web surfing is a whole new ballgame. And developers started to realise that were many disadvantages or creating a mobile version of a site, which I will be going through later.

Now: Serving One Site that Adapts to the User's Device

Responsive Website Animation

Today, responsive web design heavily relies on CSS, a style sheet language, to make the very same website responsive to all devices based on a fluid layout.

The web designer needs to understand that it is important to design websites with responsiveness in mind, and not be fixated on a single screen size, especially with so many devices and variations on the market today.

With this method, there is only a single deployment of the site, which brings about so much more benefits as compared to how it was previously done back then.

Now vs Then: Advantages of Modern Responsive Web Design

Modern responsive design comes with so many more benefits over the outdated way of serving two different sites depending on the device. Let me list the benefits here.

Easier Maintenance, Saves Time, Eliminates Hassle

Responsive Web Design Site Updates

The first advantage is that you only need to keep one site updated. This dramatically saves you time and eliminates a lot of the hassle of maintaining two different sites that serve the same content.

Apart from content updates, performing regular plugin updates is also critical in a security standpoint. Having one version of a website with a responsive layout means that you only need to go through the hassle once.

Optimal SEO Performance

Responsive Web Design SEO

By having two different sites, you are diluting your SEO efforts, simply because search engines treat them both as different sites. This not only causes duplicate content (which Google does not like), your backlinks to your site that you worked so hard for, will also be split into either one of the two sites.

Furthermore, it is really difficult to choose which version you want as your main site, as web traffic is so spread out from different devices these days, which just causes more confusion on where to direct your SEO efforts to.

Ability to Cater to Devices In Between Desktop and Mobile

Responsive Web Design Tablet

With the old method, you have only two versions of the site, desktop and mobile. This means that other devices that fall between may not be able to load an ideal layout on their screen. This could lead to content cutoffs, or unoptimized font sizes.

With alternative devices today such as tablets and oversized smartphones, our website needs to cater to much more than just desktop or mobile. We need to take a more fluid approach to responsive web design that is able to load perfectly on any screen size, for both the desktop and mobile user.

Principles of Modern Responsive Web Design

Designing responsive websites requires a good grasp of CSS and how we use it to create fluid layouts.

How does responsive web design work? For a comprehensive guide, make sure to visit this guide from W3Schools. Here are some of the most important concepts for responsive website design.

Fluid Grid

Design used to be based on a fixed grid of 960 pixels, divided into 12 or 16 columns. Then it became adaptive with different pixel sizes at different screen sizes. Now we typically use a fluid grid, also known as a flexible grid, which are based on percentages instead.

In fluid grids, we do not think in pixels anymore, rather we think of the entire grid being divided into manageable columns. With knowledge of CSS, we can then stack these columns up according to how we want it to, which is generally more focused horizontally on desktop views, and vertically on mobile views.

As the screen size of the browser window changes, the columns themselves also change in a fluid manner. Inside these columns, our content and elements will be adjusted in relative to the parent container.

Fluid Images and Media

Images and media should be sized in relative units rather than in absolute dimensions such as in pixels. This ensures that your images and media displays how you want it to be no matter the screen size. You will also not have to worry about images being too small on desktop or too large till it gets cut off on mobile.

Here is a great video by Google Chrome Developers on how you should be managing responsive images.

CSS Media Queries and Breakpoints

Another approach to responsive web design is to use media queries to give you a more fine-tuned process to display your website contents. Media queries are also often used in conjunction with the fluid grid system for a well-covered responsive website. It can also be used by itself as a more adaptive design approach.

Media queries help you to set certain CSS properties and layouts depending on the size of the screen, and we use a breakpoint to determine the screen size the visitor is on. We can also use as many breakpoints as we want, giving extreme flexibility to our website layout.

On my homepage, you can see that I have an obvious breakpoint for the mobile view. My layout has been designed to be generally more vertical-focused, while still keeping with the design flow. I've also dropped some graphics elements that I felt was not necessary in the mobile view.

Desktop Web Design
Mobile Web Design

Using Relative Units & Min and Max Values

Relative units ensure that our content is displayed at an appropriate size, whether you are browsing on a smaller or larger device with higher screen resolution.

Take font size for example. Using relative units such as 'em' or 'rem' instead of absolute pixel sizes, we can make sure our font sizes are displayed in relative to the parent element's font size, or the root element's font size.

With media queries, you can still specify absolute units depending on the screen size. So ultimately, this is a very flexible approach that each designer can choose to take.

Should I Design Mobile First or Desktop First?

This is a question many web developers ask themselves before commencing on the project. I personally do not think that there's a right or wrong answer, but there are benefits from choosing one over the other.

What's the difference between both?

Mobile first simply means that we start designing our website based on a narrower screen size like how we view on a mobile device. Whereas a desktop first approach just means that we start designing based on how we want the desktop version to look like first.

Is there a benefit of using any approach?

There is a slight benefit in terms of load speeds for whichever you choose to design on first. So if you choose to have a mobile first approach, your page will display faster on mobile or smaller devices, because your CSS and media queries will be loaded earlier.

However, all websites have different requirements, and some of them are just much easier to design with desktop first. This is especially if you or your client prioritizes a very specific desktop layout.

So I generally would not harp on too much on which approach is used, as both gets the job done and the end user experience is similar.

Mobile First Indexing vs Mobile First Design Approach

They both refer to two very different things. Mobile first indexing is just a search engine's way of choosing a mobile view of your website to base it's indexation on, rather than the desktop view which was traditionally done.

Mobile first design approach on the other hand is whether the web designer chooses to design a website for mobile view first, then optimize it for desktop.

Some Tips on Responsive Web Design

Here are some useful tips I have when you are designing for a responsive website.

1. Watch your margins and paddings

I've came across websites with zero screen padding on mobile view. This creates a very unprofessional look and may even display a lack of design sense. Too much padding is also another problem where your content will be squeezed into a narrow column, making it both difficult to read and making your website feel out of proportion.

2. Use minimal animations on mobile

I get that some owners want to impress their visitors with fancy animations and high quality graphics. This is totally fine, but I would suggest keeping that to the desktop view only. On mobile, everyone tends to be a little more fast paced, and it's important to get your visitors to your content with the least resistance possible.

3. Don't Neglect Ultra Large Screens

A common mistake I see web designers do is that they optimize the site layouts for all kinds of devices from desktops to mobiles, but they skip out on on larger screens. Although not as common, some visitors may use an ultra large screen such as a 32in iMac. Depending on what kind of approach you use to align your elements, such as using floats, your website may just fall apart on these larger screens.

4. Users Can't Hover on Mobile

With a desktop, you have a cursor to hover over elements such as flip boxes. However on touchscreen devices like our mobiles phones, the :hover pseudo-class will no longer work. It is therefore important to make sure the experience on the desktop can match the one on mobile.

5. Make Sure the Page Does Not Require Side Scrolling or Has Content Cut Off

This happens usually on mobile devices where the content is larger than the screen. Depending on the relevant CSS overflow property, you website may require side scrolling (which provides a terrible user experience), or is entirely cut off (making it impossible for the user to see). Make sure to wrap your content properly and avoid this at all cost.

Listen to this post

Why is Responsive Web Design Important?

In the past, websites were designed to be viewed on specific devices. However, in today’s world, users use a variety of devices to access their favorite websites. In fact, it is estimated that 80% of shoppers begin their shopping on a mobile device.

This means that it is crucial to your business’ success in 2021 and beyond to have a website that is optimized for all devices, especially mobile devices. Otherwise, you are missing out on a significant amount of potential customers.

In fact, as of 2021, over half of the online traffic is coming from mobile devices, and this is expected to continue to grow in 2022 and beyond.

As more and more people are using mobile devices to look for products, it is important for businesses to ensure they are mobile friendly and are not missing out on potential customers, by having responsive web designs.

Here's Why It's Important to Have a Responsive Website

Why is responsive web design important? Here are 7 reasons I would like to share with you today.

1. To Improve Your SEO Rankings

Improve SEO Rankings

Google is aiming to make the mobile web more accessible to consumers, by prioritizing mobile-friendly websites in their search results. Since 2019, mobile first indexing has been Google's default indexation method for new websites. If your website is not responsive today, it could mean that your customers may not even find you on Google.

Having a website that is responsive or adaptive will help you rank highly for search terms. This will increase user engagement and traffic to your site as you'll be able to rank for those terms that people are searching for in such a way that they find what they're looking for immediately.

This is no surprise that lot of SEO professionals recommend using mobile responsive web design for all websites, as responsive website design plays a part in today's SEO and search engine algorithm, and is one of the few ranking factors of Google since 2015.

2. Mobile Users Have a Bigger Share of Traffic Than Desktop

Not only are there more mobile devices than computers in the world, but more of them have fast internet connections than ever before. Based on this market research, mobile users have been the majority share of traffic since 2017.

This means that the traditional way of designing websites for just the computer screen is a very outdated approach. It is already time for us to pivot to a mobile-first approach to web design.

3. Makes it Usable on All Devices So You Never Lose Customers

Now you know that mobile users make up the majority share of traffic, you should be making sure every page on your website is fully responsive for all devices. Mobile users need to have the same experience as a desktop user, even if they have a smaller screen size.

They should only need to scroll down the page, and not have to pinch and zoom, and scroll sideways. This will prevent customers from getting disappointed by the difference in screens, which helps to maintain or improve your bounce rates on all screen sizes.

4. Increase time spent on page, lead generation, sales and conversions

Mobile User

If your website is not responsive, customers are unlikely to take the effort to go through your content if it does not display well on your screen. For example, if your text is too small, your viewers will have a hard time reading your content.

Today, most users will simply leave your page, knowing that they can find content elsewhere. In fact if you do not implement responsive design in your website, viewers will have the impression that it's out of date or even broken. If you are running a lead generation campaign or generating sales online, you will have a hard time convincing the customer to submit any of their personal details on a website that is not functioning properly in their eyes, and it leads to poor conversion rates.

You need to understand that unresponsive websites are a huge conversion killer, and have no place in today's website standards.

5. You Get to Selectively Show Certain Elements and Contents Depending on the Device

Responsive Web Design

When you are using a desktop, you have a larger screen and you are usually on stable wifi or ethernet. Depending on the type of industry you are in, a good web designer will make use of this opportunity to integrate eye-catching features such as animations, high resolution graphics and interactive elements to display on higher screen resolutions.

However on mobile devices, most users will appreciate websites that omit all these features, simply to have a better user experience such as faster load speeds, less data usage and getting to the content quickly. Most of the time, mobile users just want to reach your content as fast as possible. So by selectively removing certain design elements depending on their device type, you will be improving the user experience. This is an important technique for responsive design.

6. A Frustrated User Will Visit Your Competitor Instead

Imagine running expensive marketing campaigns such as SEO and paid ads, only for viewers to immediately leave your site and find a competitor instead, just because your content does not fit well on their screen. You are in fact providing free marketing to your competitors.

A frustrated user will always remember the experience he or she had when they were on your website. It is not a good impression, and that's where a well planned responsive website comes in to serve customers no matter the device they are on. Do a search on Google and see how many of your competitor's sites implement responsive design, and you will have an idea of where your website stands.

7. Remember that People Don't Just Browse the Web, They Shop Online Too

Ecommerce Mobile

Nowadays, the e-commerce customer journey usually begins on mobile. People are reading personal emails and newsletters on mobile apps. These promotional campaigns will usually have a call to action that leads users to their e-commerce site or a promotional landing page. If everything runs seamlessly, you should be able to see high conversion rates.

But, if your site does not display well on their mobile devices, it is a huge obstacle for the user to move to their desktop to continue the journey, which ultimately defeats the purpose of the well thought out marketing campaign. Therefore all kinds of websites, including e-commerce websites, need to implement responsive web design.

How Do You Check If Your Website is Mobile Optimized?

Actual User Test

Well the first thing is to simply load your website on your mobile device and make sure you to do an actual user test. Your goal here is to focus on responsive web design. Here are some key points to look out for:

  • All font sizes are readable and not overly large or small
  • Content should not be cut off
  • Layout should have reasonable margins and paddings
  • There should not be any side scrolling needed to navigate around your website
  • You should not need to be zooming in unnecessarily to view any of your content

Google Mobile-Friendly Test

Click here to access the Google Mobile-Friendly Test tool

This is a crucial test because it involves Google, and we rely heavily on them for our SEO. This is more of a technical tip than a design tip, and is a tool for you to check if your website's mobile version is considered mobile-friendly according to Google's eyes.

Plug in the URL of the page you want to test from your website, and the app will analyze it usually under 1 minute, and give you the results immediately. It is important that you pass this test on all your pages, so that you will have a better chance of ranking on the search engines.

What you want to see: Page is mobile friendly

Page is mobile friendly

What you don't want to see: Page is not mobile friendly

PAge is not mobile friendly

Simulated Browser Testing

In order to check if your website is responsive on all devices, does it mean that you have to own all of these devices? Of course not. There are ways to simulate browser testing with free or paid platforms. A great free tool that I use to check my sites for responsive design in my initial testing is Chrome Developer Tools.

Chrome Developer Tools
Chrome Developer Tool

If you would like a more accurate simulation, you can also use this responsive tool from BrowserStack, where you can load your URL and test your website interactively on over 2000+ browsers and devices.

BrowserStack
BrowserStack

So I have outlined why responsive web design is important. It allows for better SEO rankings, increase conversion rates, lead generation and sales opportunities. I hope this blog post has been informative in deciding whether to update your website or redo it with a responsive layout. Enquire about our responsive web design service for a great starting point.