How To Manage The Responsive Header

Apr 10, 2017

In creating a header for the responsive theme, we've aimed to strike a balance between flexibility and simplicity. We want it flexible enough for stations to achieve their branding requirements — and simple, so we can ensure it works at all device sizes and is easy to maintain.

The header is comprised of a background color, a background image, a logo, a tagline, and a few buttons, all of which are optional and which stations can configure on the Header Config page. In addition, there are some masthead and logo behaviors that stations can also set. I'll go through these one at a time. 

Just the specs: The header background image should be 155 pixels high by 1600 pixels wide. The optimal logo size is roughly 600x400 pixels. However, the header is flexible and can handle various sizes for both the background image and the logo.

Where to Start

Everything that we describe in this tutorial is found on the "Header Config" page, which Station Admin users can get to by clicking the Configure Corepublisher button in the shortcuts bar and selecting "header" from the Homepage Management options (see image below). 

Click on "Header" under Homepage Management to get to the page where you can manage your site's responsive header.

Overview of the Header Config Page

This page is divided into sections for creating and modifying key aspects of your station's header, from uploading a new logo to editing your station's tagline. Whenever you make any changes, make sure you scroll to the bottom of the page, where you can save or preview the header using the Save and a Preview buttons. Let's go through the sections on this page one at a time, starting with the first section — Logo Image.

The Logo Image Section

The Logo Image section is where you go to upload a new logo and, optionally, make it link to somewhere other than your site's home page. If you have a logo image file ready to go, simply click the Select Media button and upload the file. Then scroll to the bottom of the page and click Save — or preview first and then save. 

The "Logo Image" section is where you update your site's header logo.

By default, the site logo will be clickable and will link to your station's Core Publisher homepage. We recommend this behavior because it's what users typically expect. However, you can over-ride it — that is, link to somewhere else — using the over-ride logo link field (see image above). Simply type the desired destination web address into the field and the logo will link there instead of to your homepage. Vermont Public Radio links it's Core Publisher site to a parent web site using this method.

Logo Image Details
Ideally, your logo should be a transparent .png or .gif, which will enable you to place it on top of a variety of background images or colors. This may not be an issue right now (say, if your logo sits on top of a white background), but it's a good idea to be flexible enough to handle a variety of possible future conditions.

Next, we recommend cropping the logo right up to the edge of the image without any extra margin or padding, which will help it display at a larger, more readable size on small screens. 

White space around the logo on the left should be removed so that the graphic is tightly cropped, as on the right.

Logo Size and Placement
There isn't one perfect size for your logo. The header is flexible enough to handle a variety of shapes and sizes, but a good rule of thumb is to upload an image that's around 600 pixels wide by 400 pixels high — or  close to 4o0x400 if you have a square-shaped logo. 

The logo goes into an area that has a maximum width of 204 pixels and a maximum height of 110 pixels. It will display as large as it can be within those constraints.  

This shows how the header would handle each of three different logo, a rectangular one, a square one, and a horizontal one. The square logo (lower left) is constrained by height; the horizontal logo (lower right) is constrained by width.

Why not simply make your logo 204 pixels wide? You can, but a larger size will look sharper on high resolution screens like retina displays. 

Favicon — Shortcut Icon

If you want to change your station's favicon or upload a new one, do it here (a favicon is the tiny, logo-like image used by browsers as in the example screen-shot below). Click the select media button and upload an image file with the .ico extension. If you don't already have the file on hand, you may need to work with a designer to create one.

Example of favicons for NPR, Michigan, The New York Times, and Youtube.

Header Background Section

Use this section for updating your header's background color and image. You can change the color, upload an image, and choose from among a few image-display options that we'll review one at a time.

Background Color
Set the header background color by entering it here. Colors are typically given in hex values, which look like this: #ffffff for white and #000000 for black. You may need a designer to help you choose a color that works well for your site, but if all you need is some help finding a hex value, there are free online resources such as colorpicker.com

Background Image
Upload a new background image here by clicking the Select Media button. Ideally, your background image should be 1600 pixels wide by 155 pixels high, but you may not always have the perfect asset. As an example, let’s imagine you have this picture of a wave, below. It isn't a great size for the header because it's much too tall and it’s only 1024 pixels wide. By default, it will be vertically centered and displayed at it's natural size — not stretched to fill the background area. If you were to set the background color red, it might look like the example below on wide screens. 

The image on the left isn't wide enough to occupy the optimal 1600 pixel-wide header.

To handle this, you have several choices. 

1. If the background color of the image is flat and consistent, as in the illustration below, set the background color to match the illustration's background color. The browser can go as wide as possible and the header will look good. 

The illustration (top) has a flat background color. Simply set the header background color to match it.

2. If the background color isn't consistent, try fading out the right and left sides of the image, and set the background color to something compatible. You may need a designer to help you do this well. 

The image above fades out on the right and left. By setting the background color to a compatible blue, the header image looks good even on very wide browsers.

3. In many cases, an even better solution would be to make the image "scale-to-fit," which will cause the image to stretch and fill the entire header area, no matter how wide. The Background Image Size section of this tutorial (a little further below) explains how to do this. 

The narrow wave image from above will fill the entire header if Scale to Fit is selected.

Background Image Position
This setting gives you some control over which part of the background image is displayed in the header. For example, an image that's too tall, like our wave example, will display the middle part by default (see image below). Select top or bottom if you prefer those parts of the image. 

A tall image such as this wave can be positioned to display the top, center, or bottom portions by selecting the top, bottom, or center radio button.

Background Image Size
You have two choices for this setting. "Normal" means that the image will simply display at its actual size. "Scale to fit" will stretch the image so that it covers the entire background no matter how wide it goes. This works better for some images than others, and is something you might want a designer to help you with. 

Background Image Repeat
If you want the image to repeat horizontally, click the "Repeat" radio button. We recommend leaving it set to "Don't repeat."

Tagline & Tagline Text Color

Tagline Text
The tagline is an optional part of your station's header. The maximum character count is 128, including spaces, but we recommend making it quite a bit shorter for optimal readability — 35 characters is a good target length, but feel free to see what works best for you. Use the preview button at the bottom of the Header Config page to see how different taglines look. 

Tagline Text Color
If you have a tagline, use this field to set its color — or leave it to the default, which is dark gray. 

Header Button Colors — Menu, Listen Live, and Donate
Use this section to set colors on the buttons and icons in your header (see the image below). At desktop size, your header will display Listen Live and Donate buttons. At tablet size, it will also display a Site Menu button, which enables users to access the primary navigation. At smartphone size, the Site Menu button is replaced by a simple menu icon.

You can also set the button text color. This applies to the text on all of the header buttons (listen live, donate, and site menu). Generally, it works well to set this to white (#ffffff).  

Click to expand this image if the text isn't readable.
Tip: You can check that your colors look right by clicking on the PREVIEW button at the bottom of the Header Configuration page. If you like what you see, go back to the form (click Return to Editing) and save.

Header Height

Reduce Header Height on Inner Pages
If you want your header to remain the same height on all pages, uncheck this box.

By default, the header on desktops is 155 pixels high on the homepage and 86 pixels high on posts and other pages. This means — on desktops only — logos display at a smaller size on post pages than on the home page.

We did this to help users focus on the content — for example, a news story — rather than on graphics related to brand. However, certain logos — particularly those that are square-shaped or have relatively small type — don’t render as well in the smaller header. You can over-ride this default setting by unchecking the Header Height box at the bottom of the form.

Leave the Header Height box unchecked, like this, if you want the masthead on inner pages to maintain the same height as on the home page.
 

Questions?

Contact Station Relations at http://info.ds.npr.org/support.html