Web Design Basics – Customize Your Mobile Header

Customize Your Mobile Header

Today, more than ever, mobile design is vital. A huge portion of every website’s readers are using a mobile device, and some people don’t even own laptops or desktop computers. Google has released new guidelines favouring mobile friendly sites in their search engine results, and have even redesigned their logo to suit a mobile environment. So, more than ever, you need to make sure your site is mobile friendly. There are many plugins and tools to help you do this, but there are also things you can be doing on your own.

Customize Your Mobile Header

Recently I had a client that requested I make her header larger on her mobile site. To be honest, the idea of changing the header in mobile view had never crossed my mind before that, but I’m really in love with the idea, and might even start to implement it on my own site and future projects.

When she first asked me to do this, I was stumped for a moment on how to go about it. Of course, the obvious answer is to use media queries to make the header bigger in mobile view. Easy right? Well, not so fast. In a lot of themes today, the header is set to a certain size, and you have to upload and crop your image to match. More often than not, this header is very wide and thin. This means, that if you were to scale your header larger to make the image bigger in mobile view, the image would extend wider than the page. There are of course, ways to get around this with CSS, but I like to take the easy road.

The simple solution is to upload a completely new mobile header to your theme, and make sure that it only displays in mobile view (in which case the desktop header would disappear). What is this magic, you may ask. Well, it’s a little piece of code called display:none.

The great thing about uploading a completely different image for your mobile header is that you can, well, upload a completely different image. You can change the size of your logo, add or take away info to simplify your image, and make your tagline text larger to make it easier to read on mobile. Look at your mobile header now and think about how it looks. It’s the first thing people see when they land on your site and you want to make a good impression.

So first of all, make your mobile header. You want it to be the same width as your regular header so that it stays in proportion with your theme, but you want it to be a lot taller, so you can scale your logo a lot larger. Make the changes you’d like to see and make sure you can read everything easily. Remember, this image will only be the size of a small screen, so it needs to be clear.

Next, find the place in your theme where your normal header is displayed. In Twenty Eleven, the header is rendered in the header.php file on line 72. Create a header.php file in your child theme (because you don’t want to edit the parent theme!!). Then, right about the default header (which is called branding in Twenty Eleven) create a new div called mobile header, and place your header image inside that div. Make sure you include the home link, so that when the mobile header appears, it still links to your home page like the default image does. This looks like this:

Then, in your css you also need to include this to make sure that the mobile header does not show up until you specifically tell it to.

#mobileheader {
display: none;
}

Then, decide at what point you want your mobile header to appear. An easy way is to set the mobile header to appear at 1000px and under. You also need to add the code to make sure that when the mobile header appears, the normal header (branding) disappears.

@media all and (max-width: 1000px) {

#branding img {
display: none;
}

#mobileheader {
display: inline;
}
}

See how the mobile header renders like this with no styling, and then add your own code as you need to get it into the perfect place. And voila, you’re done! You’ve got a header for your site that is optimized perfectly for both desktop and mobile. If you need help figuring out where to place your mobile header in your own theme, you can use a tool like Firebug to find out what the id is for your header div (like #branding in Twenty Eleven) and then search for that term in your php files to find out where to place your mobile header.

Do you have a header on your website that’s optimized for mobile? How did you implement it?

1 thought on “Web Design Basics – Customize Your Mobile Header”

Leave a Reply

Your email address will not be published. Required fields are marked *