Hey folks. If you haven’t heard, responsive design is the new web standard. With mobile devices quickly dominating the web viewing experience it is imperative that sites take their mobile market into consideration when it comes to design. That is why StudioPress adopted responsive design. This allows the same great desktop designs to be used on mobile devices without unneeded clutter. The themes have come a long way but one major limitation is the logo.
Your logo should look great on any device. Trying to scale a desktop logo down for a mobile platform won’t work and for most users the mobile logo just isn’t going to cut it for the desktop.
That is where the Genesis Responsive Header plugin comes in.
Your logo should look great on any device
With the Genesis Responsive Header plugin you can set a different header image for the major device sizes: 768px, 480px, 320px, and 240px. This means your logo will look great on each device and if you set the right size image for each of these sizes you also reduce the load time, which is a huge factor for mobile visitors. Someone with an old Android based phone doesn’t want to wait white your big, beautiful 1140×200 logo gets loaded and then tries to scale down to 240×40. Instead, make a great looking 240×40 logo from the start.
What You Need
You absolutely must have a Genesis child theme for this to work right. The CSS won’t work for other themes and the plugin won’t even activate on other themes. You also must have a responsive child theme. The code will actually output even if the theme isn’t responsive, but it is bound to look really weird and stretched on mobile devices. Please don’t think this plugin will make a theme responsive. It works with existing responsive themes.
You should probably get at least one logo that is intended for use on mobile devices. This plugin supports up to 4 logos, but you don’t have to work with all 4.
As you can see, the settings screen is very simple. There are two options for each device width. You may upload an image, use a URL, or select an image from your gallery. The image is used without cropping. One thing to watch for is the option for the image size should be set to full size unless you wish to use the scaled WordPress image sizes. This is just like the uploader used for WordPress post images.
Each device size can also have a specified Header background color using the built in color selector.
How it Works
This is the really cool part. The extra CSS only outputs if you fill these values in. If you setup the 480px device width it will not change your logo until you reach that width. The 768 device width will still show the default header image. However, if you add the 768px logo image it will scale that and use it for smaller devices as well.
make sure your image is at least as wide as the device size you are setting it up for, otherwise things are going to get stretched and that won’t look good
You don’t need to set the height of the image anywhere. This plugin uses some PHP to get the height and set that value automagically. This is one of the key features that make things work right. just make sure your image is at least as wide as the device size you are setting it up for, otherwise things are going to get stretched and that won’t look good.
Once you add an image, the plugin does the rest. It will remove the existing header background on the mobile sizes and add some fallback CSS to ensure the header sizes right. Instead of setting this image as the background for #header it sets it as the background for #title-area. This is important because if you have anything in the header right widget area it would overlap your image if it were set for the #header background. The fallback CSS makes it so the header right widget area will rest just below your logo. It should be nice and neat.
Sometimes you will want to set a background color for the #header so that you have something behind the header right widget area and behind your logo, especially if it has a transparent background. You just need to set that color using the Header Background Color option for your device width.
How it Looks
For demonstration purposes I setup a demo site with very basic “logos” which simply state the device width they were created for on a white background. I have also used bright/high contrast colors for the header background colors to show where that shows up. The theme is the same semi-custom theme I use on this blog. You can view the demo using the StudioPress Responsive Testing tool by clicking on this screen shot from that tool.
How to Get it
I put a link to the files at the top of this article. I am doing an early beta on this because I know a lot of people are very interested in this type of functionality. You will install the zip file just like any other plugin then activate it. As noted above, you will have a new menu item under the Genesis menu in your dashboard for “Responsive Header.” Everything you can do with the plugin is there. So you don’t have to scroll all the way up, here is that link again: Get the Genesis Responsive Header plugin.
Since this is an early beta I’m looking for feedback. I’d like to make sure this is working well on all the responsive themes. I went through just about all of the ones from StudioPress already, but there are responsive child themes for Genesis that aren’t from StudioPress. Also, people customize things and my fall back code might not take those things into consideration. Everything should work great but please help me test this and leave a comment if something isn’t right or if you are looking for more functionality.
Also, please post a link to your site after you setup the Genesis Responsive Header to show off just how good your logo looks on mobile devices now.