From CSS in Depth by Keith J. Grant

This article takes a look at the three principles of responsive design. We will start building a responsive page, and I’ll unpack each of them as we go. After that, we’ll take a look at images, which require some special considerations on responsive sites.


Save 37% on CSS in Depth. Just enter code learncss into the discount code box at checkout at manning.com.


In our modern world, the web is everywhere. We use it on our desktop in our office. We lie in bed surfing on our tablet. It’s even on some of our television screens in the living room. And we carry it everywhere with us on our smartphones. The web platform of HTML, CSS, and JavaScript’s a universal ecosystem unlike anything that has come before.

This poses an interesting problem for us as web developers: how do we design our site to make it usable and appealing on any device our users might use to access it while thinking about consumer flow? Initially, many developers approached this problem by creating two websites: “desktop” and “mobile.” The server would redirect mobile devices from http://www.wombatcoffee.com to http://m.wombatcoffee.com. This mobile website would usually offer a more minimal experience and a streamlined design for small screens.

This approach began to break down as more and more devices emerged on the market. Do you direct a tablet to the mobile website or the desktop? What about a large “phablet” phone? An iPad Mini? What if a mobile user wants to perform an action you only have available on the desktop version of your site? In the end, a forced dichotomy between desktop and mobile causes more problems than it solves. Plus, you must maintain an extra website to make it work.

A far better approach is to serve the same HTML and CSS to all your users. By using a few key techniques, you can make this content render differently based on their browser’s viewport size (or, occasionally, based on screen resolution). This way, you don’t need two distinct websites. You create one website that works on a smartphone, a tablet, or anything else you throw at it. This approach, popularized by Web Designer Ethan Marcotte, is called responsive design.

As you browse the web, make note of the responsive designs you come across. See how websites respond to different browser widths. Newspaper sites are particularly interesting because they’ve a lot of content crammed onto the page. At the time of writing, http://www.bostonglobe.com/ is a great example, offering a one-, two-, or three-column layout depending on the width of your browser window. Typically, you can resize the width of the browser window and see the page layout respond immediately. This is responsive design at work.

Three key principles make responsive design possible. First is a “mobile first” approach to design. This means not building a desktop layout until you’ve got the mobile version built. Second is the use of the @media at-rule to tailor our styles for viewports of different sizes. This syntax (often called “media queries”) allows us to write styles that only apply under certain conditions. Third is the use of fluid layouts. This is an approach that allows containers to scale to different widths based on the width of the viewport.

Mobile first

The first principle of responsive design is called mobile first. This means exactly what it sounds like: you should build your mobile layout before you build your “desktop” design. This is the best way to ensure both versions work.

Developing for mobile is an exercise in constraints. You have limited screen space to work with. Bandwidth is limited. The user on a mobile device has a different set of interaction options. Typing is possible, but cumbersome. The user can’t hover over elements to trigger effects. If you begin by designing a fully interactive website, then try to scale it down into these constraints, you’ll often fail.

Instead, the mobile first approach dictates you design your site with these constraints in mind from the beginning. Once you have the mobile experience working (or at least planned out), you can use progressive enhancement to augment the experience for large screen users.

The page we’re building is shown in figure 1. You guessed it; it’s the mobile design.


Figure 1 Mobile page design


The page has three main components: a header, the “hero” image with a bit of text superimposed over it, and the main content. A hidden menu can be shown by tapping or clicking on the icon on the top right (figure 2). This icon, with three horizontal lines, is often called a “hamburger” icon, because it resembles the buns and patty of a burger.


Figure 2 Mobile page with menu opened


A mobile design is mostly a no-frills design. Apart from the interactive menu, this one is highly focused on the content. On larger screens, we can afford to dedicate a lot of space to things like the header, the hero image, and the menu. But on mobile, users are often more task-oriented. They might be out with their friends and want to quickly find store hours, or another specific piece of information like a price or address.

A mobile design is about the content. Consider a desktop design that has an article on one side and sidebar on the other, where the sidebar has links and less important items. You want to ensure the article appears first on the mobile design. This means you want the most important content to appear first in the HTML. Conveniently, this coincides with concerns of accessibility: a screen reader gets right to the “good stuff” or a user navigating via keyboard gets to the links in the article before those in in the sidebar.

That said, this isn’t always a hard and fast rule. You could probably make the argument that our hero image isn’t as important as the content below it. But it’s a striking part of the design, and in this case, I think it’s worth having close to the top. It also contains little content, which means it takes little effort to navigate past it.

Now let’s consider our design for larger breakpoints. We’ll code the mobile layout first, but keeping the overall plan in mind helps guide our decisions as we do that. We’ll build a medium and large breakpoint. The medium layout is shown in figure 3.


Figure 3 Page on medium viewport


At this viewport size, we have a little more space to work with. The header and hero can afford more padding. The menu items fit beside each other on one line, and they no longer need to be hidden. The hamburger icon is gone because we don’t need it to open the menu. And the main content can be arranged into three equal width columns. Most of the elements fill to within 1em of the sides of the viewport.

The larger viewport is the same. We’ll increase the margins on the sides of the page and make the hero image even larger. This design is shown in figure 4.


Figure 4 Page on large viewport


We’ll build the mobile design first, but it’s important to have an idea of how the larger viewports looks as well, because it might influence how we structure the HTML.

Create a new webpage and stylesheet. Link up the stylesheet and add listing 1 to the HTML’s . The markup looks pretty much the same as that for a non-responsive design. I’ve made a couple of considerations for the mobile design, which I’ll highlight momentarily.

Listing 1 Page markup

 

 

 

 
?
?

Single-origin

We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then careful roast in small batches to maximize their potential.

?

Blends

Our tasters have put together a selection of carefully balanced blends. Our famous house blend is available year round.

?

Brewing Equipment

We offer our favorite kettles, French presses, and pour-over cones. Come to one of our brewing classes to learn how to brew the perfect pour-over cup.

? “Hamburger” button for mobile menu

? Main menu which is hidden by default on mobile

? Add row and columns for medium and large viewports


When writing the HTML for a responsive design, it’s important to ensure it has everything you need for each screen size. We’ll apply differing CSS to each, but they must all share the same HTML.

In this markup, we have the button to toggle the menu for mobile inside the nav. The “nav-menu” is in a place where it can meet our needs for both mobile and desktop designs. And the “row” and “column” classes are in place to allow for the desktop design. You may not know that up front, which is okay.

Let’s begin styling the page. First, we’ll add some of the simpler styles like the font, headings, and colors. This makes the page look like figure 5. Because we’re concerned with “mobile” styles, make sure your browser is resized to a narrow size. This helps show you what the page looks like on a small screen.


Figure 5 First set of styles applied


These styles are shown in listing 2. Add this to your stylesheet. This establishes border-box sizing, font, and link colors. It also adds the responsive viewport-based font size. Then it defines styles for the header and the main body of the page.

Listing 2 Page initial styles

 
:root {
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);   ? 
}
 
*,
*::before,
*::after {
  box-sizing: inherit;
}
 
body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}
 
a:link {
  color: #1476b8;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #1430b8;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: #b81414;
}
 
.page-header {   ? 
  padding: 0.4em 1em;
  background-color: #fff;
}
 
.title > h1 {    ? 
  color: #333;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0.2em 0;
}
 
.slogan {        ? 
  color: #888;
  font-size: 0.875em;
  margin: 0;
}
 
.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans.jpg); ? 
  background-size: 100%;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.3em #000;     ? 
}
 
 main {          ? 
   padding: 1em;
 }
 
.subtitle {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  font-size: 0.875rem;
  text-transform: uppercase;
}
 

? Base font size scales slightly with the viewport

? Page header and title

? Use a background-image to add the hero image to the page

? Dark text shadow helps light text remain readable in front of complex background

? Main content


These styles are mostly straightforward. They transform the page title and the subtitles in the body to all caps. They add some margins and padding, and adjust font-sizes for the various components of the page.

The text-shadow property in the hero image element might be new to you. This consists of several values which together define a shadow to add behind the text. The first two are Cartesian coordinates, indicating how far the shadow should shift from the text’s position. The values 0.1em 0.1em shift the shadow slightly right and down. The third value (0.3em) indicates how much to blur the shadow. Finally, #000 defines the color of the shadow.

A mobile menu

At this point, we’re left with the most complicated part of the page: the menu. Let’s build that now. When we’re done, it’ll look like figure 6.


Figure 6 Opened nav menu on mobile device


Sometimes it takes a few passes over certain parts of the HTML to get it right. On this page, the menu took some careful consideration. I originally tried to place the