WDD 231: Web Frontend Development I

W01 Learning Activity: Site Header

Overview

The site header for the assignment this week will contain an SVG logo which you will find or create. The header will also contain the site name, which will be your name, and a hamburger icon on small screens to show and hide the navigation.

You will use CSS Grid and grid-template-columns to create a header that is responsive to the page width.

Prepare

Logos

A logo is a graphic mark, emblem, or symbol used to aid and promote instant public recognition. Logos are used by commercial enterprises, organizations, and even individuals to promote their brand, identity, and products. A good logo is an important part of a website because it helps to create a strong first impression and establishes a brand identity. It also helps to create a sense of trust and credibility with users.

Here are some things to consider when building a good logo.

• Timeless: A timeless logo remains effective and relevant even if trends change.
• Simple: A great logo should be easy to understand and remember, which means using a simple design.
• Memorable: A great logo should be unique and stand out.
• Relevant: A logo should fit the brand so that it is recognized immediately and leaves a strong, lasting impression.

For example, note how these popular websites' icons meet the above criteria.

Navigation Icons

While there are many kinds of small screen navigation patterns that are recognized, this course will use one that is very common. Small screen navigation links will be stacked vertically using a ☰ character to show the links and a × character to hide the links. On large screens, the hamburger button will be hidden and the navigation links will be displayed horizontally.

For the navigation button on small screens, a <button> element is used, and CSS inserts the correct character. Note the CSS escape for each character that will be used in the activity:

HTML Structure Example

As you look at this sample HTML below, you should notice there are three separate items in the header, the site logo, the site name, and a button.

<header>
  <img src="images/logo.svg" alt="site logo" width="24" height="24">
  <span>The Site Name</span>
  <button id="nav-button" class="hamburger" aria-label="Toggle navigation" aria-expanded="false"></button>
</header>

Notice that the <img> tag has a width and height of 24px, which matches the first grid column below. Setting the real dimensions lets the browser reserve the space before the image loads.

CSS Layout Example

CSS Grid will be used to lay out the header. In this example, the grid has three columns. The first column will be fixed at 24px wide for the logo, the second column will take the remaining space for the site name, and the third column will be 44px wide for the hamburger button.

header {
  display: grid;
  grid-template-columns: 24px 1fr 44px;
}

Design for Touch Devices

When designing for touch devices, it is important to consider the size of the touch targets. Touch targets are the areas that respond to user input, such as buttons and links. If the touch targets are too small, users may have difficulty tapping them accurately.

Touch targets include the area that responds to user input, in this case, the button. An icon may appear to be smaller but the clickable area needs to be large enough to touch easily.

• Apple's Human Interface Guidelines recommend touch targets of at least 44 × 44 points.
• The Web Content Accessibility Guidelines (WCAG 2.2) set a minimum target size of 24 × 24 CSS pixels.
• The Android Accessibility Guide suggests touch areas be at least 48dp by 48dp.

  The Android Accessibility Guide uses the term dp, which stands for density-independent pixels.

  Density-independent pixels are a unit of measurement that is used to ensure that touch targets are the same size on all devices, regardless of their screen resolution.

JavaScript Example

Use the JavaScript querySelector method to grab a reference to the hamburger button element. Set up a click event listener for the button. When the button is clicked or tapped, it will toggle the class attribute value of 'show' on the button and update aria-expanded so that assistive technology knows whether the navigation is open.

const navButton = document.querySelector('#nav-button');

navButton.addEventListener('click', () => {
  const isOpen = navButton.classList.toggle('show');
  navButton.setAttribute('aria-expanded', isOpen);
});

Use CSS to Display the Icon

To change the icon for the button all you need to do is change the CSS when the class of 'show' is applied.

.hamburger::before {
  content: "\2630";
}
.hamburger.show::before {
  content: "\00D7";
}

In this example, the hamburger button will display the open icon when the class of 'show' is not applied and the close icon when the class of 'show' is applied using the principle of CSS specificity.

Activity Instructions

Follow along with the videos below and start to create a header for your site that contains a logo, site name, and a hamburger button. The header should be responsive to the page width and use CSS Grid to lay out the items in the header.

Watch WDD231 Site Header 1Finding and modifying an SVG logo

Watch WDD231 Site Header 2Building the header using CSS Grid

Watch WDD231 Site Header 3Adding JavaScript to change the entity icon and hiding the icon for larger screens.