Rethinking the Header

Update 2019/05/14: we'll be taking this another step further in 2019 with rethinking the nav menu.

Update 2019/12/01: this has been completed and released as the Modern Mobile Menu

Update 2019/12/06: you should add an h1 tag to your homepage.

A very common question we get from customers is how to edit the header image, what's the best practices for sizing, and why is it so complicated. The truth is, it shouldn't be. This isn't a bashing of how Genesis is set up and they likely had good reasons for doing things their way, but the way it's set up causes an unnecessary amount of support requests.

We'll go over the issues we're looking to solve, and present a solution. The issues the header image before 3.1.6 are:

• improper use of a background image according to Google's guidelines, rather than foreground image
• improper use of h1 header tag for site-wide header (this is reserved for the post title)
• improper use of negative margins to hide the header text, which is explicitly against Google's guidelines
• header sizes being too large, reducing above-the-fold content and slowing pagespeed loading times

All themes version 3.1.6 have the modernized header implementation.

Update 2019/09/19: we've released the updated, optimized Modern Mobile Menu in the Feast Plugin.

Background vs. Foreground Image

Standard practice (and the behavior users expect) is to be able to click the logo to head back to the home page. Background images aren't clickable, foreground images are.

Foreground images are also much more straight-forward and intuitive to customize with CSS than background images.

Genesis uses a background-image, which has unintuitive styling properties and is difficult to modify, so we'll be changing this to a regular foreground image using the <img> tag.

As a best practice, the header image should be no more than 100px tall, and not be statically positioned (ie. they should not scroll down the page with you). Logos and header images are only important to the website owner, not the readers.

Update 2018/08/13: header images should be no more than 150px max, per best practices.

Website Title Text

Skipping the history of website titles and how they've affected search engines and changed over the years, we'll jump straight to what we're seeing with modern websites:

Site-wide title text is basically irrelevant and ignored - it's now a background item and largely unimportant as page-weight has surpassed domain-weight. This means that site-wide elements have little-to-no impact on the ranking of an individual page.

We can drop title text and simply use an image instead, with appropriate alt text.

This means that the H1 tag shouldn't be used for the website title, since it's purpose is to denote importance, and should instead be saved for the content for that specific page. Sidenote: This may not be a big issue, as search engines seem to be identifying what parts of the website are generic and unimportant (header, sidebar, footer) and applying their own down-weighing versus the actual content part of the page.

This is currently handled by Genesis by adding the site-title to the header and hiding it off screen using CSS. This is an explicit violation of Google's Webmaster Guidelines.

Another benefit is that this will remove custom fonts people embed for just the title tag. These are problematic because:

• Embedding external fonts slows website load speeds
• Website visitors are not really going to notice a custom font - this is for the website owner's ego more than anything
• They may violate GDPR - no one is really sure right now but you can Google it (how's that for irony)

The solution to using a pretty google font for your website header is to simply type it into the google font's preview page, screenshot it and upload it at whatever size you'd like to display it at. Full tutorial at: https://feastdesignco.com/how-to/foodie-pro-tutorials/custom-fonts-foodie-pro/

We recommend no more than 100px high, to preserve above-the-fold screen space for your post content.

Q: Isn't replacing an external google font with an image redundant?

It's an interesting question, but removing an external resource with an internal resource is a good move. External resources take longer to load because browsers need to go through a lookup process, which often takes 100-150ms, while downloading an internal image (header) rarely takes more than 20-30ms.

Header Size

One of the more frustrating aspects of customizing the theme is having to hard-code in the dimensions into the functions.php file - this not only gets overwritten in updates, but is also bad web practices. Stylistic decisions such as image sizing should be completely controlled by CSS, and not coding. This may be due in part to the above problem of using background-image instead of a regular <img> tag.

The solution here is simple: We'll let customers upload their own image to the "Customize" admin screen, and display it at whatever resolution they upload it at. This means that the size decision is made before ever uploading, and doesn't require editing code.

One thing we'll need to factor in, is mobile-sizes - setting a max-width property based on the viewport should allow graceful downsizing.

As a best practice, we'll also recommend customers use as small of a logo as possible. Generally speaking, the website owner is the only person who cares about the website's logo, and it provides no value to the website visitor. Also, smaller images load quicker and require less bandwidth.

• All formatting should be controlled 100% in a single location by the stylesheets, no inline or embedded CSS
  • Zero reason to require editing PHP files or hard-coding for changing headers
  • Do not use Google Fonts - slows page loading, visitors do not care

Summary

1. We'll remove the title text from the header of the website (not to be confused with the <head> metadata)
   1. It's no longer important to search engines, and hiding it off-screen using CSS is explicitly forbidden
2. We'll use a regular <img> instead of a background-image, with the title in the proper "alt" attribute
   1. As a best practice, this should be small since it provides little-to-no value to visitors
3. We'll link the header to the homepage

Considering all the above, the simplest course of action is to remove the Genesis functions handling the header/title and replace it with a simple image, able to be selected in the "Customize" admin panel. The image should simply display at whatever size the user uploads it at (whether that's 150x150 or 1000x150), with max-width adjustments based on viewport (mobile).

This apparently has been addressed previously (in 2013 of all things) in this post by bhwebworks. We'll use the blackhillwebworks code with a slight modification - using the header selected in the "Customize" panel.

Image Quality & Blurriness

You need to crop and save your logo image in your photo editing software (eg. photoshop, GIMP) before you upload the image. Make sure to use the "Skip Cropping" button when selecting the header. You may need to try a few different image quality settings to get the quality you desire.

Customizing The Theme

We do not recommend customizing the theme to apply these changes because it's a waste of time - simply update your theme to the latest version.

However, if it has to be done...

For older versions of the theme that use the old header behavior, customers will need to customize the theme. As a customization, customers  should use the Code Snippets Plugin to preserve the change when updating the theme, with the following code:

/**
 * Filter the genesis_seo_site_title function to use an image for the logo instead of a background image
 * 
 * The genesis_seo_site_title function is located in genesis/lib/structure/header.php
 * Original credit http://blackhillswebworks.com/?p=4144
 * Add to feast-customizations-plugin to preserve change during updates, not functions.php
 *
 */

	add_filter( 'genesis_seo_title', 'feast_filter_genesis_seo_site_title', 10, 2 );

	function feast_filter_genesis_seo_site_title( $title, $inside ){
	 
		$child_inside = sprintf( '<a title="%s" href="%s"><img title="%s" src="'. get_header_image() .'" alt="%s" />', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ) );
	 
		$title = str_replace( $inside, $child_inside, $title );
	 
		return $title;
		
}

With the code portion changed, we just need to clean up the CSS. In Foodie Pro up to version 3.1.4 you'll want to remove the following from the theme's Admin > Appearance > Editor > styles.css:

/*
.header-image .site-description,
.header-image .site-title a {
	display: block;
	text-indent: -9999px;
}
*/
/* Logo, hide text */
/*
.header-image .site-title > a {
	-webkit-background-size: contain !important;
	background-size: contain !important;
	display: block;
	height: 170px;
	margin: 10px auto;
	max-width: 320px;
	text-indent: -9999px;
}
*/

Note: Because you're removing this form the theme's stylesheet, it will be over-ridden when you update the theme in the future. This is fine because it won't be present in future versions of the theme anyways.

And finally, remove the inline CSS from that's loading the background image:

/**
 * Remove the genesis_custom_header_style - bad design practice to use code as styling - this should have been in the CSS
 * Foodie Pro versions after 3.1.4 include this by default, along with other changes 
 *
 * The genesis_seo_site_title function is located in genesis/lib/structure/header.php
 *
 */

	add_action('after_setup_theme','feast_remove_theme_filter');
	function feast_remove_theme_filter(){
		remove_action( 'wp_head', 'genesis_custom_header_style');			
	}

Default Setting

This will become the default header behaviour for Feast themes, starting with:

• FoodiePro v.3.1.6
• BrunchPro v.3.1.7
• CookdPro v.3.1.7
• CravingsPro v.3.1.7
• SeasonedPro v.3.1.7

Log in to your account to get the latest version of your theme.

Comments and feedback are encouraged!

• Should the pin="nopin" tag be added to avoid having the header inadvertently pinned?
  • Update 2018/07/31 - yes, following testing, pin="nopin" has been added to the header
• Facebook should pull the correct image via Yoast's settings - is there a fb-thumbnail="nothumb" tag?
• Update 2018/08/11 - Added fall-back text option instead of forcing use of image for version 3.1.7+