Your site's header provides navigation and is visible on every page. It's important for it to be usable and look good across desktop and mobile devices.
This class will show a range of simple to complex headers and describe how to build them.
Let's begin with some common header elements.
- Logo
- Site name
- Main navigation
Logo
Make sure the file you use is clearly visible, not too big, and optimized for the web. Use an SVG for maximum clarity and minimum filesize across devices.
Make the logo clickable to return to the home page, this is a common convention that users are used to.
Site name
It's common for blogs to display their name clearly in the site's header. If your name is visible in the logo, this may not be necessary, but you do want to ensure screen readers are able to see the name of the site.
Main navigation.
If you only have a few links, you can display them horizontally, and wrap to a second line on smaller screen sizes.
Here's what I came up with:
