Getting Started with Responsive Web Design

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.

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.

1. Use a viewport meta tag to control content width

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">
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.

2. 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; }
A 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 a more fluid grid

3. 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;
}
}
A more mobile friendly layout thanks to Media Queries

4. 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 changed the width of the div elements to a percentage of their parent. Flexbox can handle any width on the child elements.

These were four introductory steps to take when starting a website upgrade using Responsive Web Design. The article was originally posted at http://appsbyjohn.com/learn/. I invite any questions or comments through Email or Twitter. Below are a few additional resources that I have found helpful:

About The Author

John MacAdam is a Professional Engineer and Mobile Software Developer from Columbus, Ohio. John builds websites & apps to help people reach more mobile users. You can learn more on appsbyjohn.com or connect with him on Twitter or LinkedIn.

Professional transportation engineer, web designer, and mobile app developer from Columbus, Ohio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store