github dribbble twitter facebook google arrow-up arrow-down arrow-left arrow-right menu close

Foolproof Markup: Creating a Flexible Document Structure

October 25, 2015

We’ve been having better focus in web design over the past few years. The shift has been heading towards a more minimalist, clean and modular aesthetic. Designers and developers aren’t worried about “the fold” anymore, we know that users have no problem scrolling. We also know that users are going to be viewing your site on a multitude of devices and screen sizes as well as a variety of internet speeds. So the emphasis is more to speed and responsive sites.

Because of this, there have been some general patterns that have surfaced in our designs and markup. You see a lot more full width, fluid designs. Full width background images and colors. A focus on typography. Gradients and drop shadows have definitely gotten more subtle.

The Example Website Design

Before I go into how I generally structure my document markup, I want to present an example website design that I threw together to demonstrate the type of patterns you might find in your projects. All markup you write will vary depending on the design, so this will be a good case study to show how I’d tackle a specific design along with some tips and tricks on making them easy to write, maintain and reuse.

Example Website Template

This example design shows some common features that I highlighted in the intro. There are some very clearly defined segments and that will be the key for laying out our structural markup.

Tackling the Markup Structure

When talking about document structure, I’m referring to the markup that would appear on a site’s layout template. It’s the foundation of every other page that a site will have. In general this would define the header, footer and main content area but not necessarily deal with our grid.

<body>
  <aside class="topbar">
    ...
  </aside>
  <header class="header">
    ...
  </header>
  <div class="banner">
    ...
  </div>
  <div class="main">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <footer class="footer">
    ...
  </footer>
</body>

You’ll notice that we have a section defining each area that is segmented with a different background color or image. We won’t be using these elements directly to establish our grid, but it does give us a hook for each of these sections. Here’s an example of how the div.main element would be marked up using a class based grid system:

...
<div class="main">
  <div class="container">

    <div class="services row">
      <div class="col col-4">
        ...
      </div>
      <div class="col col-4">
        ...
      </div>
      <div class="col col-4">
        ...
      </div>
    </div>

    <p>...</p>

    <div class="action row">
      <div class="col col-8">
        ...
      </div>
      <div class="col col-4">
        ...
      </div>
    </div>

  </div>
</div>
...

The benefit of separating any sort of grid styles from the section wrapper is that the element remains full width at all screen sizes. So we can apply a background color to a section as well as have a class hook for applying styles to that specific section. This technique can be used to encapsulate a set of markup and styles and makes them independent from its context and can then be moved, replaced or built on top of depending on your needs.

The grid system that I use uses a container element that sets the site’s minimum width and left/right padding. So that’s one consistent thing we can add to our starter markup that will always be the same where the number of rows and columns will vary depending on the section. I also add an HTML comment to the end of each div since the containing content may be long and this improves readability. So that would look like this:

<body>
  <aside class="topbar">
    <div class="container">
      ...
    </div><!-- .container -->
  </aside><!-- .topbar -->

  <header class="header">
    <div class="container">
      ...
    </div><!-- .container -->
  </header><!-- .header -->

  <div class="banner">
    <div class="container">
      ...
    </div><!-- .container -->
  </div><!-- .banner -->

  <div class="main">
    <div class="container">
      ...
    </div><!-- .container -->
  </div><!-- .main -->

  <div class="feature">
    <div class="container">
      ...
    </div><!-- .container -->
  </div><!-- .feature -->

  <footer class="footer">
    <div class="container">
      ...
    </div><!-- .container -->
  </footer><!-- .footer -->
</body>

At this point, I would go ahead and finish marking up the rest of the design. But for the markup we’ve just written, you can go ahead and start adding background colors, images and padding for our structural markup.

body {
  background: #243546;
}

.header {
  background: #1abc9c;
}

.banner {
  background: rgba(26,188,156, 0.6);
}

.main {
  background: #fff;
}

.feature {
  background: #ecf0f1;
}

Notice that we don’t need to add a background color for the top bar and footer. That’s because we’re going to let that color be set by the body element.

Quick Tip: Make sure to give the <body> element the background color of your footer. This prevents a different background from showing on an over-scroll at the bottom of the page.

Body Background Example

Conclusion

This is a very simple and basic example but it’s one that demonstrates how you can write the base structure of many sites are have it be flexible and reusable. With some modifications, you can pretty much use this structure markup as the starter for most of your projects.

You can download the source markup of this project and the Photoshop Document if you’d like to use these materials for yourself.