What is Responsive Website Design?

Before the year 2000, there were relatively few ways of viewing a webpage.  You were most likely on a desktop computer, viewing sites on a monitor, while navigating the web with your mouse and keyboard.

Since then, a larger variety of devices like cell phones, laptop computers and tablets are used for browsing the web.  This is a great thing, many of us now take it for granted that web access is always nearby.  That said, having different types of devices and screen sizes is something we need to take into consideration when building a website.

A website on a computer screen next to a phone with the same full screen version of the website

Without responsive design it’s more difficult to navigate some websites on smaller devices

 

If you have ever tried to view a full sized webpage on your cell phone, you know that it can be a bit cumbersome to navigate and find the content you’re looking for.  At the same time, websites that were designed with small cell phone screens in mind seem to look very simple and waste a lot of space on large desktop monitors.  Buttons that are easy to click on your computer are too crowded to tap on your phone.  Basically, the design ideas that work for one device don’t work so well on others.

Diagram of the same content arranged to fit optimally on a desktop computer and a phone

With responsive design, the same content flows to fit the size of different devices

 

Web developers have come up with a few different ways to solve this problem.  One of these solutions is called Responsive Design where your content is thought of like fluid; it flows to fill it’s container.   For example if your website has 2 or 3 sections across on a desktop monitor, they might look cramped on a cell phone’s smaller screen, so responsive design stacks those sections vertically to better fit.  Responsive design also uses containers that fill to fit all sizes of spaces.  The text and other content in those containers often wraps to fill the width of the container it’s contained in.

Responsive design is a great way to have similar content across devices without needing the same rigid layout.  Visitors won’t have to zoom in and out or scroll side to side on a phone, but your website will also make use of the wide screens on computers.

Did you know Google now checks websites to see if they look good on mobile devices? If your site doesn’t look good on mobile phones it might show up later in Google’s search results. Check your site by clicking here and entering your site’s url.