Friday, March 29, 2024

Building Responsive Web Page Headers

Building Responsive Web Page Headers

With people surfing the Web on a plethora of devices these days, it’s important that your site look good on all of them. Unfortunately, the page layout that people have come to expect on a smart TV is not the same as on a smart phone. In the former, the layout tends to flow horizontally whereas mobile devices may view a page in either letter or landscape orientation. Just as browser sniffing was a largely wasted effort, so too is device sniffing. Your best bet is to design your layouts in a fluid manner so that they can adjust to the size of the screen. That layout style is known as responsive design. In today’s article will focus on the web page header. Specifically, how to get your navigation links to go from a horizontal style to a vertical one.

What Should Go in the Header?

Which page components are included in the page header will differ from site to site, but common elements include:

  • a logo
  • photo
  • site, person, or company name
  • navigation
  • contact info such as a phone number or email
  • slogan or quote

Many sites will place the navigation links below the main header, but we’ll include it along with the page title for this exercise. Then we’ll watch what happens to the full-size page when the viewport becomes too small for the header content to be displayed on one line.

With that in mind, here is the full page will look like:

header_demo_large_display.jpg

To make the page responsive, we’ll have it automatically adjust the header elements to fit within a narrow viewport:

header_demo_small_display_(no_menu).jpg
Test Page in Small Viewport
header_demo_small_display.jpg
Test Page in Small Viewport with Expanded Menu

As you can see, the look of a mobile site differs from the full-size one in a couple of ways:

  1. Links are stacked vertically.
  2. Links are accessed via the “Trigram for Heaven” ☰ character.

Constructing the Basic Page

Unless you want to specifically target mobile devices, you can start by building your standard full-size site.

The header content is easily identified by the <header> element. It represents a container for introductory content and/or a set of navigational links. The links themselves are enclosed within an unordered list, as is commonplace these days.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>
      Responsive Header Demo
    </title>
  </head>
  <body>
    <header id="header">
      <div class="container">
        <h1>
          Header Demo
        </h1>
        <nav id="nav">
          <ul>
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Services</a>
            </li>
            <li>
              <a href="#">History</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="content">
      <div class="container">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex
          ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat
          cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.
        </p>
        <p>
          Nulla efficitur pharetra leo. In convallis lobortis
          nisl, ut pretium purus aliquam eget. Maecenas
          vestibulum venenatis eros, a volutpat mi malesuada eu.
          Cum sociis natoque penatibus et magnis dis parturient
          montes, nascetur ridiculus mus. Nam mollis vitae eros
          quis congue. Ut eget massa semper, cursus ligula et,
          euismod lacus. Sed neque metus, tristique eget
          scelerisque vitae, luctus at metus. Proin vel
          ullamcorper arcu. Praesent dapibus eleifend turpis et
          euismod. Sed tincidunt lobortis erat, nec elementum
          libero molestie sed. Phasellus eget tristique lorem.
        </p>
        <p>
          Maecenas dictum molestie nisi, eu ornare mauris posuere
          a. Proin tempus est ligula, ut varius risus faucibus
          nec. Morbi ultrices leo et vulputate facilisis. Nunc
          congue, leo a facilisis dictum, metus neque tempus
          arcu, ac aliquet nulla mi a felis. Maecenas quis
          euismod velit. Curabitur dapibus ipsum vitae
          ullamcorper auctor. Nullam nec ultricies urna.
          Curabitur lacinia nec ipsum a condimentum. Quisque
          lacinia faucibus augue, sed efficitur enim mollis eget.
          In et metus non ante interdum varius nec in sem.
        </p>
      </div>
    </div>
  </body>
</html>

Browsers should present the above markup as a plain ole vanilla page:

header_demo_content_without_css.jpg

All appearance-related attributes should be set using CSS, ideally within a separate file:

body {
  background: #6699ff;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.container {
  position: relative;
  margin: 0 auto;
  width: 94%;
  max-width: 1100px;
  font-family: helvetica, sans-serif;
}
.content {
  position: relative;
  padding-top: 80px;
}
.content p {
  margin-bottom: 10px;
}
#header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #222;
  color: white;
}
#header h1 {
  top: 0px;
  margin: 0px;
  text-transform: uppercase;
  font-size: 1.2em;
}
#nav {
  position: absolute;
  right: 0;
  top: -15px;
  height: 60px;
}
#nav ul li {
  float: left;
  list-style: none;
}
#nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 0 10px;
}

Feel free to play around with the above rules to see what effect changes have on the document layout.

You should notice immediately that it looks quite good on a desktop monitor, but not so much in a mobile browser!

header_demo_without_responsiveness.jpg

Adding in the Responsiveness

The key to making your pages responsive is to include media queries in your CSS. Introduced in CSS3 media queries use the @media rule to include a block of CSS properties based on a condition. They can evaluate a couple of useful attributes that pertain to responsiveness, including the min and max width of the viewport.

For our simple demo, we’ll change the layout to fit within a viewport width of 599 pixels or less. Note that rules that are applied regardless of viewport size that are duplicated by the @media block are effectively overridden by the latter:

@media (max-width: 599px) {
  #header .container {
    width: 100%;
  }
  #header h1 {
    padding-left: 3%;
  }
  #nav {
    width: 100%;
    top: 60px;
  }
  #nav:before {
    content: '\2630';
    display: block;
    position: absolute;
    right: 3%;
    top: -50px;
    line-height: 40px;
    font-size: 1.4em;
    cursor: pointer;
  }
  #nav ul {
    background: #222;
    width: 100%;
    margin: 0px;
  }
  #nav ul li {
    float: none;
  }
  #nav ul li a {
    padding: 10px 3%;
    line-height: 20px;
    border-top: 1px solid #333;
  }
}

To test out the responsiveness, gradually drag the right edge of the browser window so that the viewport becomes progressively smaller. At some point, just before the navigation links begin to overlap the site title, the layout should change to the mobile one.

Conclusion

In the good old days, all you had to worry about was making a page look good across all the major browsers. Today, there are devices of all sizes to contend with. With the popularity of wearable devices exploding, there’s bound to be even more challenges on the horizon. The one comfort is that job security seems to be assured!

Rob Gravelle
Rob Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured