Getting Started with Responsive Web Design

Get this guide as a PDF

An increasing number of people are using a mobile phone to access the web. A lot of websites were built on the assumption that most visitors used a computer and unfortunately do not serve mobile visitors well. This leads to less impact, less conversions, and less attention.

TL;DR jump to the full screencast video.

One way to better serve a mobile audience is to upgrade your website using Responsive Web Design. This post will cover the basics of making a website more mobile friendly with Responsive Web Design.

Before diving in it is best to keep a few things in mind:

  • Most mobile devices have smaller screen sizes. Obviously.
  • Most mobile users are comfortable scrolling vertically. It is okay to have content initially below the visible screen.
  • Mobile users should not have to zoom & pan to read text on websites. Scrolling vertically is more expected.
  • Most content should be accessible to all visitors, regardless of their device. Hiding content for mobile devices is not ideal.

How to upgrade an existing site using Responsive Web Design

I would like to cover four practical steps to get started with Responsive Web Design:

  1. Use a viewport meta tag to control content width.
  2. Eliminate fixed width elements.
  3. Use media queries to adjust styles based on screen size.
  4. Use Flexbox to align items.

Using a viewport meta tag to control content width

This is what a website looks like on a mobile device without the viewport set:

As you can see the mobile browser attempts to fit the existing design into the smaller window. This often makes text difficult to read without zooming. By declaring a meta viewport tag we inform the browser our code is optimized for any screen size.

Here is a sample viewport declaration:

<meta name="viewport" content="width=device-width, initial-scale=1">

This is what the same website looks like on a mobile device with the viewport set:

The text size is more reasonable but the user has to pan around to view all content due to fixed width elements. We have more work to do.

Eliminate fixed width elements

Converting from a static layout to a fluid layout can be accomplished by converting fixed width elements into fluid elements. In most cases an element with a fixed width can be converted from #elem {width: 1000px;} into a more flexible #elem {width: 100%; max-width: 1000px;}. Take the example layout with static widths:

Sample HTML

<div class="container">
  <header>
    <h1>Site Tagline</h1>
  </header>

  <section>
    <div>
      <h4> ... </h4>
      <p> ... </p>
    </div>
    ...
  </section>

  <aside>
    <h4> ... </h4>
    <p> ... </p>
    <p> ... </p>
  </aside>

  <footer>
    <span> ... </span>
  </footer>
</div>

Sample CSS

.container {
  width: 1000px;
}

section {
  width: 600px;
  margin-right: 40px;
}

aside { width: 360px; }

Here is a video of the fixed width layout at various screen sizes:

As seen in the video this layout does not work well at screen sizes under 1000px. Converting exact widths into percentage widths makes this layout more responsive.

Improved CSS using flexible widths

.container {
  width: 100%;
  max-width: 1000px;
}

section {
  width: 60%;
  margin-right: 4%;
}

aside { width: 36%; }

The layout fits much nicer on screen sizes under 1000px thanks to the more fluid grid:

Use media queries to adjust styles based on screen size

A flexible layout is not enough to fully deliver a good mobile experience. The layout shown in the previous video technically fits on smaller screens but cramps existing content. CSS Media Queries allow us to reposition content based on specific breakpoints. Our sample layout begins getting cramped around a screen size of 600px. The following declaration changes the layout for screen sizes under 600px.

CSS with a Media Query

@media screen and (max-width: 600px) {
  section,
  aside {
    width: 100%;
    margin: 0;
  }
}

This video shows a more mobile friendly layout thanks to Media Queries:

Use Flexbox to align items

After implementing the first three steps there are likely individual styles that need improved to complete a responsive upgrade. A common issue is with the spacing of items. In our example the existing div items were perfectly spaced for a 1000px layout.

Sample HTML

<section>
  <div>
    <h4>Section Header</h4>
    <p> ... </p>
  </div>
  ...
</section>

Sample CSS for equal padding between all div elements

section {
  margin-bottom: 40px;
}
section div {
  width: 240px;
  margin-top: 40px;
  margin-left: 40px;
}

Spacing of the div elements is perfect at full width but becomes inconsistent on smaller screens. The flexbox layout makes it easy to evenly space items within a container regardless of the container size. Here is the same example using flexbox.

Upgraded CSS using Flexbox

section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
section div {
  width: 40%;
  margin-left: 4%;
  margin-right: 4%;
}

Flexbox handles spacing of these items no matter the screen size. Much better! A few things to notice:

  • Most of the styles are set on the parent element in this example.
  • The flex-direction and flex-wrap commands can be combined into one shorthand flex-flow: row wrap; command.
  • I also changed the width of the div elements to a percentage of their parent. Flexbox can handle any width on the child elements.

The entire tutorial can be viewed in this screencast:

These were four introductory steps to take when starting a website upgrade using Responsive Web Design. I invite any questions or comments through Email or Twitter. Below are a few additional resources that I have found helpful:

Get this Guide as a PDF

Subscribe to the Apps by John Newsletter. I will send you a PDF of this guide and send announcements of future guides!