Let's start by looking at the easiest layout pattern. This pattern doesn't require much effort. The layout is similar to the example reviewed under a past section, The Web is naturally responsive. It is typically a single-column web page.

Our layout has a header and a section containing the site's content. Since these elements automatically stretch and scale to the browser's width, only some minor changes are needed to make it more mobile-friendly.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<section>
  <p>Paragraph (p) - Collaboratively administrate empowered...<p>

  <h2>Heading 2 (h2)</h2>

  <p>Paragraph (p) - Efficiently unleash cross-media...</p>

  <ul>
    <li>List Item 1. Objectively innovate empowered...</li>
    <li>List Item 2. Proactively envisioned multimedia..</li>
    <li>List Item 3. Completely pursue scalable customer...</li>
  </ul>
</section>

The header section contains an h1 tag while a section tag contains the rest of the page's content. Inside the section tag, we have a second heading, paragraphs, and an unordered list.

CSS

body {
  font-size: 1em;
}

header, section {
  padding:0.75em;
}

@media screen and (min-width: 600px) {
  body {
    font-size: 0.875em;
  }

  header, section {
    padding:1em;
    margin-bottom:1em;
  }
}

Here, we have the styles for this layout with the media query highlighted. Now, remember we are styling these patterns mobile first; meaning the smallest screen-size styles are applied first and built on top of. This layout already scales width-wise the way we want it to, so we don't have to do much. All we are doing with CSS here is changing the font and padding sizes to make reading easier on smaller screens. I am setting font-size: 1em initially for the body and then decreasing it to font-size: 0.875em on screens larger than 600px. I am also setting the padding of the page (using the header and section tags) to a smaller value at first and increasing it on larger screens. This way there is more space for the content on smaller screens.

Since I am using ems instead of pixels for these examples, changing the font-size property on the body tag scales everything being styled with ems. Now, my whole typography system shifts by changing only one property. The padding and margin are scaling as well. That's why using ems in responsive design is so helpful!

Like the tiny tweaks layout, mostly fluid layouts are simple to implement as well. As seen in the following example, the layout is based on a fluid grid system that shifts depending on the viewport's size. Usually, the layout is comprised of columns that stack on smaller screens. The mostly fluid layout is the most popular of the ones presented in this chapter.

The preceding example has a primary article that spans the full width of the page and three smaller secondary articles. On smaller screens, the primary image centers itself on screen, while the three columns stack on top of each other.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<section class="clearfix">
  <!--Primary Article -->
  <article class="primary">
    <h2>Primary Article (h2)</h2>
    <img src="http://placehold.it/400x300" alt="">
    <p>Paragraph (p) - Collaboratively administrate...</p>
    <p>Efficiently unleash cross-media information without...</p>
    <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one...</p>
  </article>

  <!-- Secondary Articles -->
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
  <article class="secondary">
    <h3>Secondary Article (h3)</h3>
    <p>Paragraph (p) - Objectively innovate empowered...</p>
  </article>
</section>

Again in this example, we have a header. Next, we have the primary article with a class of primary, a heading, an image, and three paragraphs. After the primary article, we have the secondary articles. Each has a class of secondary, a heading, and a paragraph. To apply styles to all the articles, we can use the article tag.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

CSS

The mostly fluid example uses the same CSS as tiny tweaks, but adds the following styles. Let's look at the mobile styles first:

article {
  padding: 1em;
}
  article img {
    width: 100%;
    height: auto;
    max-width: 400px;
    display: block;
    margin: 0 auto;
  }

.primary {
  padding-top:0;
}

.secondary p {
  margin-bottom:0;
}

h2, h3, h4 {
  border-bottom: 1px solid darkgray;
}

The first important part is to make sure static width elements, such as images, scale with their columns. Here, we set all images inside the article to width: 100% and height: auto. We then give them a max-width and use margin: 0 auto and display: block to center them. Everything else except what is in the media query is there just for styling. The media query then looks like this:

@media screen and (min-width: 600px) {
  .primary img {
    float:left;
    margin: 0 0.5em 0.5em 0;
  }

  .secondary {
    width: 33.33%;
    float: left;
  }
}

Inside the media query, we are setting the image in the primary article to float: left at 600px or larger. This lets the text wrap around it, so we add a margin as well. Next, we set the width of each secondary article to 33.33% and apply float: left. The articles now appear on the same row. In the pattern-style.css file, we are using the universal selector, *, to apply box-sizing: border-box to all the elements. If you are familiar with the box model, you know that naturally if we set an element to be 100px wide, we then add 10px padding; the element will then be 120px wide (100px for the content and 10px on each side). Using box-sizing: border-box allows us to keep our set widths and have the padding subtract from the content area.

Websites can have side columns that contain additional information. We are used to seeing secondary navigation on the sides of pages. The column drop layout accommodates websites that utilize sidebar modules such as these. Normally, on larger screens, the columns are displayed while, on smaller screens, all sections are stacked on top of each other. Navigation columns are typically placed on top so the user can easily access them. Our example here has two columns and a section for the main content.

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<aside>
  <h3>Secondary Nav (h3)</h3>
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</aside>

<section>
  <h2>Heading 2 (h2)</h2>
  <p>Paragraph (p) - Collaboratively administrate empowered...</p>
  <p>Efficiently unleash cross-media information without...</p>
  <p>Completely synergize resource sucking relationships...</p>
</section>

<aside>
  <h3>Heading 3</h3>
  <p>Paragraph (p) - Phosfluorescently engage worldwide...</p>
</aside>

This pattern has three columns; two sidebars and one main column. The first aside holds what would be a secondary navigation, while the second holds complementary information.

CSS

aside, section, header {
  padding: 0.75em;
}

@media screen and (min-width: 600px) {

  aside {
    width: 25%;
  }

  section {
    width: 50%;
  }

  aside, section {
    float: left;
  }

}

First, we are giving all three columns padding. All that is left to make this pattern work is a media query to set the width of the columns on larger screens. At 600px or higher, we are applying width: 25% to both aside tags and width: 50% to the main section tag. We are then applying float: left to both so they appear next to each other.

The layout shifter pattern starts to get a little more complicated. It is similar to the last two examples, but requires a little more effort. This pattern changes the most for different viewport sizes. It usually has a different layout for small, medium, and large screen sizes. The example we are using changes at 600px and 800px.

This pattern has three different layouts—small, medium, and large:

The layout shifter pattern with a one, two, and three column layout

HTML

<header>
  <h1>Page Heading (h1)</h1>
</header>

<aside>
  <h3>Secondary Nav (h3)</h3>
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</aside>

<section>
  <h2>Heading 2 (h2)</h2>
  <p>Paragraph (p) - Collaboratively administrate empowered...</p>
  <p>Efficiently unleash cross-media information without...</p>
  <p>Completely synergize resource sucking relationships...</p>
</section>

<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p>Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</article>
<article class="secondary">
  <h3>Secondary Article (h3)</h3>
  <p> Paragraph (p) - Objectively innovate empowered...</p>
</article>

Here again we have a side column, a main section, and secondary articles. Having six items on a page is great for the layout because six is divisible by two and three. This means we can have three equal rows of two each and two rows of three. In the layout shifter pattern, we will do just that. We will also repeat what we did for the column drop pattern and shift the aside tag's position as well:

CSS

.secondary h3 {
  border-bottom: 1px solid darkgray;
}

@media screen and (min-width:600px) {
  aside {
    width: 25%;
  }

  section {
    width: 75%;
  }

  .secondary {
    width: 50%;
  }

  aside, section, .secondary {
    float: left;
  }
}

@media screen and (min-width:800px) {
  .secondary {
    width: 33.33%;
  }
}

Now we are seeing two media queries altering the page's layout. The first is changing the width of the aside tag and the section tag for screen sizes larger than 600px. Here, they are now split 25/75. Next, we are setting each secondary article to take up half the screen creating three rows of two. Lastly, for this media query, we set float: left to all three elements so they appear on the same row.

The next media query kicks in on screen sizes larger than 800px. The only thing we are changing here is how many secondary articles appear in a row. Setting the width of each secondary article to 33.33% creates two rows of three.

The biggest problem we have seen with these patterns so far is that most of them put all the content in one column at smaller sizes. Off canvas layouts are a solution to this. You may have used an off canvas layout in a mobile app. Usually, they have menus in columns that slide in from the right or left when opened. This doesn't mean we don't see this on the Web. Off canvas layouts require JavaScript (JS), though. There are purely CSS solutions, but these are hacks and come with their own problems.

The first two screenshots show what secondary navigation looks like when closed and opened on smaller screens. To toggle the navigation in this pattern, we will detect clicking on the Menu button with JS.

HTML

<body>
  <header>
    <h1>Page Heading (h1)</h1>
  </header>

  <aside>
    <h3>Secondary Nav (h3)</h3>
    <ul>
      <li><a href="#">List Item 1</a></li>
      <li><a href="#">List Item 2</a></li>
      <li><a href="#">List Item 3</a></li>
    </ul>
  </aside>

  <section>
    <button class="menu-toggle">Menu</button>
    <h2>Heading 2 (h2)</h2>
    <p>Paragraph (p) - Collaboratively administrate...</p>
    <p>Efficiently unleash cross-media information without...</p>
    <p>Completely synergize resource sucking relationships...</p>
  </section>
</body>

This layout's elements are the same as we've been using in other examples. The only difference is the Menu link. Here, I added a button with class="menu-toggle". Again, this will come into play when we get into the JS.

CSS

aside {
  display: none;
  width: 30%;
  max-width:200px;
}

section, aside {
  float: left;
}

.open aside{
  display: block;
}

.open section {
  width: 70%;
}

@media screen and (min-width: 600px) {
  .menu-toggle {
    display: none;
  }

  aside {
    display: block;
  }

  section {
    width: 70%;
  }

}

First, I am hiding the aside tag using display: none since we want it to be "off canvas" on smaller screens. Notice that we are not really having the aside element pushed off screen. Instead, we will create the illusion it is waiting right where we can't see it.

The next important style is for the open class. You may have noticed that we are not using the open class yet in the HTML. We will be! Using JS, we will add and remove the class from the body element. When the open class is added, display: none will change to display: block for the aside. Also, the main section will shrink to a width of 75%.

On larger screens above 600px, we set aside to display: block, so it doesn't matter if there is or is not a class of open on the body tag; the aside element will show. We also hide the Menu toggle link since we will no longer need it.

JavaScript

var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {
    document.getElementsByTagName('body')[0].classList.toggle('open');
}

Out of all the layout patterns, this requires the most complex code. Don't worry though; this is actually very simple JavaScript! If you don't know JS, you can just use the code provided. I recommend reading the following explanation though to understand what is going on. Don't be afraid of JS. It is very easy to learn.

This snippet of JS first creates a variable, menuTog, that stores the first instance of the class menu-toggle. Next, we will create a function to trigger when the menu button is clicked. Inside this function, we are using the toggle method. We want to use this to toggle the open class on body. If body does not have a class of open, it will add it. If it already does, it will remove it. The CSS then does the rest and changes the styles depending on whether the open class is present.