Seven years ago, mobile responsive websites were an up and coming thing. Today, if your site — including the header — isn’t mobile responsive, you’ve missed the boat. You’re late to the party.
And you’re paying for it in reduced (or nonexistent) traffic. Because Google ranks on the basis of mobile first. I’ve written before about why you should pay attention to mobile – you’ll find those articles here, and here. (To see all the articles that talk about mobile responsiveness, check out this list.)
Back in 2013, I wrote an article about using a plugin to create a mobile responsive header for your WordPress site running a StudioPress theme.
That was then, this is now, and absolutely nothing about that original post is applicable in 2020.
What’s In The (Mobile Responsive) Header?
The header includes your logo or site title, tagline, and primary navigation.
Eight years ago when I started this site, headers were mostly full width and took up a good portion of the screen at the top of the page. Here’s a screenshot of the WordPress Building Blocks homepage in January, 2014.
Notice how the header area – the two navigation bars and site title – take up about 1/3 of the vertical space at the top of the screen. That was typical at that time.
Today, in order to accommodate mobile, that’s all changed. Logos are much smaller, and a site’s header area is relatively small. In the homepage for Big Brand Systems, for example, the header occupies only about 1/6 of the vertical space, with a hero image on the homepage using the rest of the screen space.
The header here consists only of the Big Brand System logo and the single line of navigation.
What do these look like on a phone screen? Well, back then, my homepage looked like this.
Obviously, the homepage was not mobile responsive back then (although my header was!). Today, of course, the site is completely mobile responsive.
WordPress today, especially with the Gutenberg block editor, is built to be mobile responsive. There’s absolutely no excuse for having a header that isn’t.
Start With the Theme
To make sure your header will adjust to accommodate viewing on computers, tablets, and phones, start with the theme.
Choose a theme that is:
- HTML 5 ready
- Mobile responsive
- From a reputable designer
Follow the theme designer’s instructions for uploading a header image of the correct size. A well developed theme will provide that information within the Customizer. To find it, navigate to Appearance / Customizer / Site Identity. You’ll see the dimensions there, or may appear when you click the Upload logo button.
If you don’t size the logo image correctly, it may be cropped, or it may appear out of proportion. The best way to make sure your logo looks the way you want it to is to size it correctly for the theme you’re using, before uploading it.
Once you’ve uploaded a properly sized logo image, your well chosen theme takes care of the header’s mobile responsiveness and you shouldn’t have to do a thing.
If you’re not sure how your header looks on a mobile device, there are several online tools that let you view your web page the way it shows up on different devices. One I like is Responsive Design Checker, which lets you choose specific devices and screen sizes to view.
If you’ve uploaded a correctly sized logo and it’s not displaying properly in different devices, switch to a theme that is genuinely mobile responsive. In 2020, nobody should need to jump through hoops to make that happen.
