In this Pen Publishing Interactive blog series, we will explore Responsive Web Design (RWD). Let’s get started with an introduction to RWD.

What is RWD?

If you haven’t heard of Responsive Web Design (RWD), now is the time to learn about it. RWD is a design technique that allows website content to adapt to multiple devices' screen sizes. This technique consists of three basic elements:

• Flexible Grid-Based Layout
  
• Flexible Media
  
• Media Queries
  

Within the flexible grid-based layout of RWD, the website content can be viewed large on a desktop screen and then shift itself around to fit within a tablet or mobile phone screen. Rather than rely on pixels and points, the grid uses percentages to adjust its page sizes.

Flexible media elements such as pictures or videos are coded to be responsive to the screen they are being displayed and served on in RWD.

Media Queries were introduced in CSS3, the latest evolution of the Cascading Style Sheets language, as a technique to help define screen breakpoints. The breakpoints allow for styling and layout of website design elements for different screen sizes and are a key part of RWD.

Previously, websites were built on fixed elements and laid out in tables. These sites were designed to be viewed on large computer screens. These fixed elements couldn’t shrink or respond to smaller screens. The experience of users browsing a website on a smaller screen was subpar. The navigation of the website and content became hard to read and utilize. Size and navigation needed to be usable with the touch of a thumb. Website design had to change.

In 2001, RWD was first developed for Audi.com and by late 2008, web designers were beginning to shift toward that flexibility. Then in 2010, Ethan Marcotte invented the term, Responsive Web Design and the rest is history.

Give your own website a test by doing the following:

Type in your web address on your mobile phone browser. Look at the following items:

• Are your website content and graphics responsive to the smaller screen or do you have to zoom in to view elements on the site?
• Is the text readable?
• Is your website easy to navigate?
  

If you answered no to any of these questions, then you need to look at adding RWD to your website.

Below is an example of RWD in action, notice how the design elements responds to the screen size.

How Does Your Website Benefit From RWD?

Responsive design allows a single website to be viewed on many different sized screens. 

Additional benefits include:

• One URL to Maintain
• Higher SEO Ratings
• Easier Navigation
• Positive Viewing Experience  
  

And, the biggie – RWD is Google recommended. Websites that are responsive get higher rankings from Google.  Google likes and encourages “mobile friendly”. That’s a big boost to websites and their SEO ratings.

According to Statista, mobile internet usage accounts for 52.64% of online traffic. Today’s viewers expect a website to provide information quickly. If a site is cluttered and hard to navigate, those potential customers will move on.  

If you have additional questions about RWD and how to apply it to your website, take the next step and set up a consultation.

In part two of this series, we will explore things to consider when developing content, graphics, and navigation of a website in RWD.