is loading...

gif of a loading icon
  • Home
  • What is responsive web design?
Website Design

What is responsive web design?

Parker Austin | February 23, 2022

We all know people access websites from many different devices. Whether it's a desktop computer, tablet, or mobile phone, they all have different screen sizes. This is where responsive web design or RWD comes into play. Having a responsive website means your website will load appropriately across all screen sizes. Below, we will discuss how it works and why you need it. 

How does responsive web design work?

To keep it as simple as possible responsive web design works through Cascading Style Sheets (CSS), using a mix of different settings to serve the proper style settings for each page. It makes your website fit within varying screen sizes, resolution, orientation, color capability, and browser differences. There are four main principles for RWD, the fluid grid system, fluid images, media queries, and breakpoints. 

The fluid grid system allows for your web content to be "fluid" so it can move to different container sizes (otherwise known as screen size) smoothly. It doesn't matter what size the end-user is using because the fluid grid system will make your web content appear in the proper size and proportions. 

Fluid images are unique to RWD. They allow your images to be "fluid" and scale across screen sizes adequately. RWD requires a CSS command like "img { max-width:100%" which allows your images to scale appropriately across all screen sizes. This means it will minimize or maximize the size of the image to make it fit correctly. 

Media queries are one of the essential aspects of RWD. Media queries are responsible for changing your layout based on specific parameters. For example, media queries are why when you view a website on your desktop computer, it has four columns, but it only has two if you use your phone. 

Breakpoints are a predetermined point on your website where the content changes column size to fit the screen properly. Like the example above for media queries, a responsive website changes the number of columns to fit the screen.

Is my current website responsive?

If you aren't familiar with Chrome DevTools, you can pull it up simultaneously on your desktop computer and phone. You can tell pretty quickly if your website is responsive. If it loads poorly on one but is good on the other, then it's not a responsive website. 

A better way to check if your website is responsive is to use the Google Chrome DevTools. This is the preferred way because you can quickly look at your site's desktop, tablet, and phone versions from one place. You do this by: 

  • 1.Open your Google Chrome browser.
  • 2.Go to the website you want to check on.
  • 3.Right-click on the website and select inspect from the list. 
  • 4.Then in the upper left corner of the Chrome DevTools window, click on the tablet and phone icon. 
  • 5.Then you can select dimensions at the top of the page. You can choose from a number of the most popular devices or choose your custom dimensions. You can also use the throttling tab on the top to see if your site has issues loading in specific environments. 

Why does having a responsive website matter?

Having a responsively designed website is vital for several reasons. The first and most important is creating a positive user experience across all devices. The second might be surprising if you are new to this world but having a site that loads poorly on mobile is terrible for your SEO. This is so important to google; they even created a tool to track if your site is mobile friendly and up to their standards. If your site fails this test, Google can push your site down in its search rankings, killing your organic traffic.

Share

Parker Austin

My name is Parker Austin and I am an expert Wordpress developer. I have been working full time on Wordpress, Shopify, and bootstrap sites since 2014. And have built, developed, or fixed over 500+ sites since then.

Leave a reply

Leave your comment below.