Responsive Web Design

When a website design is able to automatically adjust the screen size of the device or browser being used it’s known as responsive web design. With responsive web design, you no longer have to create multiple versions of your website to ensure all users have a good experience.

What Responsive Web Design Does From a Technical Perspective

Creating a unique web design for each device and screen size would be totally impractical, especially given that new devices are being released all of the time. It would take a substantial amount of manpower to try to keep up. 

Responsive web designs are coded so that the layout grids, text, media queries and scripts are flexible enough to reconfigure web pages automatically. 

Websites with responsive design adjust to the:

  • Screen size/resolution
  • Platform
  • Orientation 
  • Scripting abilities
  • User settings/preferences
  • Media types

Fully flexible web designs are created using a combination of CSS style sheets, media queries, Javascript, HTML and meta tags.

Creating Responsive Layouts

In responsive design the page layout can be shrunk down or changed altogether to fit nicely in a viewport. Typically, a main default style sheet is used the define page elements, backgrounds, colors and fonts as well as default flexible floats and widths. When that default doesn’t fit the device being used it automatically switches to another sub style sheet that uses the default style elements but restructures the layout. 

Parameters are set to determine which style sheet will automatically load. One key element is putting the meta viewport tag at the head of the document. This will tell a browser how to scale the page and adjust the dimensions. To match screen width for device-independent pixels use  width=device-width. Additionally, initial-scale=1 can be used to set a 1-to-1 relationship with the CSS pixels and device-independent pixels. 

You can also use media queries (part of CSS3) in style sheets to make a web design responsive. Media queries make it possible to target device classes and physical characteristics of devices before delivering a style sheet. A media query consists of media type and a particular media feature to inspect along with a targe value.

Below is an example of a media query specific to an iPhone:

@media screen and (max-device-width: 480px) {

     .classForiPhoneDisplay {

          font-size: 1.2em;

     }

}

Media queries can be combined. It’s common to combine max-width and min-width queries to apply a layout within set dimensions.

Most of today’s devices support CSS3 media queries, but Javascript can be used in the mark up as a backup for those that don’t.

Creating Responsive Images

Automatically adjusting images can be trickier than the layout. Images are either cropped or resized to fit the viewport without losing quality. One of the most common ways of doing this is to set the max-width in CSS to 100% of the screen/browser width and make sure no other styles conflict with the setting. This will keep images in their original width unless the viewport resolution is narrower than the image. When that happens the image is automatically resized. Using this method there isn’t a set size for the images. The size is based on the screen resolution using CSS guidelines.

Responsive image issues still crop up from time to time. When it happens there are meta tags, like the viewport meta tag, that can fix the problem and ensure web page elements load properly.

Creating Responsive Content

Using CSS it’s also possible to choose when to display or hide content based on the screen size. You can use display: none in a style sheet to hide an HTML block element. This can not only lend to a better layout and readability but help you tailor different versions of the content for mobile and desktop. 

How does your product stack up to the competition?

Get the 2019 Product Benchmarks report to learn more.

Download Report

Impact of Implementing a Responsive Web Design

Web designs that automatically adjust will clearly look better on the screen, but the benefits of responsive web design goes well beyond the visuals. 

User Experience (UX) 

Improved user experience is one of the primary reasons responsive web design exists. Today, people access the Internet on a myriad of devices. User analytics can tell you which devices, operating systems and browers users utilize the most, but at the end of the day, you want all users to have a good experience using your website. 

Loading Speed

Because responsive web design is automatically adjusted for the device being used, page load speeds are typically faster compared to mobile-only web designs. 

One thing to watch out for is image sizes. Large images can slow page loading down on mobile devices. If this is a concern the Filament Group responsive image technique using Javascript and HTML should be used to both resize images and shrink the resolution on smaller devices.

Organic Search

Responsive web design became more important when Google announced they were making the switch to mobile-first indexing. Google has stated that responsive design is their recommended design pattern, in part because it creates a better user experience and pages load faster. Therefore, responsive web design is now considered an integral part of technical SEO.

 

Example of Responsive Web Design

Below are a few visual examples of responsive web design in action. They showcase how adaptable the layout is using just two devices for comparison. The websites would look different still in other browsers and on other devices. 

Dropbox

13” Chromebook/Google Chrome Browser

iPhone 7

 

ACL Festival

13” Chromebook/Google Chrome Browser

iPhone 7

SnorgTees

13” Chromebook/Google Chrome Browser

iPhone 7

Learn how to pick the metrics that matter for your business

Download the free Guide to Product Metrics today.

Get the Guide