What Is The Best Responsive Website Header Size for Your Site?

Introduction

Its true what they say – first impressions count. Your website’s header is the first thing people see when landing on your site. Multiple eye-tracking studies have discovered humans scan computer and mobile screens starting at the top and making a zig-zag pattern down the screen. The website header’s primary function is navigation. But it also plays an important role in communicating your brand’s style and look. In this guide, we’ll explore the world of website headers and tackle the question of what the ideal website header size should be.

Website Header Key Principles

1. Branding

Begin with creating an image, graphic, or other visual concepts that show the essence of your product or service. The graphic should show the brand of your business and have a logo as well. An artistic header will have a proper choice of style and color that matches your website that inspires readers.

Big, bold, unconventional: Atlassian

Atlassian’s header is big and bold. Perhaps a nod to its namesake, Atlas the Greek Titan God who “carried the heavens upon his shoulders”. Atlassian’s blue brand is featured throughout hyperlinked copy, call to action buttons and imagery.

Atlassian

Muted, minimal: Apple

Few brands can achieve the kind of minimalist feel that Apple does. For an organization with many divisions and over 130,000 staff worldwide, it excels at simplifying everything and visually communicating its brand so succinctly.

Apple

Action-driven: Oxfam

Global NGO Oxfam use their header to drive the most important action: donations. The placement, size, color and prominence of the “action bar” serves not only as a navigation tool but a way to communicate their purpose but most importantly to encourage action.

Oxfam

Search front and centre: Shutterstock

Stock image site Shutterstock is all about search. The search bar is prominent and branded seamlessly utilizing the brand font, color and iconography.

Shutterstock

2. Size

For websites selling products, the header is a useful tool for showcasing popular products and promotions. Carousels or sliders are frequently used to rotate through featured products or sections serving as a launching point into key parts of the site.

Zara’s header serves almost as a roadblock, highlighting a carousel of collections. The carousel indicators (dots) are shown vertically in the bottom right while the header fills the screen 100% with navigation overlayed at the top. Its a striking look.

Zara

Internet.org is another example of a full-frame header with muted top navigation. But instead of a carousel it uses the left side of the header as a dual navigation and content area. When the user makes a selection the site slides to the left, moving the hero image to the left side revealing the body content on the right side.

Internet.org

In this full-width variation from Virgin Galactic, the header serves as a hero navigation element with background video providing awe-inspiring visuals.

Virgin Galactic

3. Content

Every element in your site header must work together. The location and size of each object in the header gives users visual clues about how to navigate and use your website when they immediately land. The color of a button, the spacing and padding around elements or the font size of a title can mean all the difference between the user taking the desired action, or not.

The Image Carousel

An image carousel is used commonly in website headers because they achieve a number of things:

  • Communicates one piece of content at a time to avoid confusion
  • Relies heavily on visual communication (which is best because people generally scan content, as opposed to read content)
  • Gives prominence to important content
  • Behaves like pre-navigation, enabling the user to explore different content without leaving the main page
  • Familiar and expected website element that users know how to use and interact with: swipe through or tap the dots to advance the slides

HTC’s header has three slides featuring three new technologies:

HTC

The Call to Action (CTA)

Sometimes you just want the user to take action. In this case, The Information wants to capture the visitor’s email address. By removing every other element and focusing 100% on the CTA, The Information is able to optimize for the desired action:

The Information

The Editorial style

BMW have reimagined their site as if they were a publisher and present stories and articles to the user starting with the hero article in the header about the history of the M logo and colors:

BMW

The Catalog style

Target’s website emulates their physical catalog with the header used to showcase Women’s New Arrivals followed by the various other departments within the store mixing collections, promotions, individual products and information.

Target

How to find the right size Using WordPress

The best place to start is to check your “Media Settings” under the “Appearance” tab from the WordPress Admin.

  • The best image width for an image in a blog post (for example, 1024px is for the Showcase Pro theme), and
  • What size image will work best in your theme’s sidebar (300)

However, this section won’t provide optimal image dimensions for your Home page, Header image, or page banners.

WordPress media settings

Depending on your theme, WordPress should list optimal image sizes for your home page/ header image under Appearance —> Customize —> Front Page Header Image. Most sizes shown here are around 1600 px by 1050 px.

How to find any page header banner Image size

Enter the URL of your website on Chrome Browser and use Inspect to get the exact image size using the following steps:

  1. Right + Click / Control + Click (Mac) on the web page
  2. Click Inspect
  3. Click on the 3 dot menu so you can view the Elements at the bottom so the page view is not responsive
Inspect Element

Here’s the Element at the bottom of the page:

Element setting
  1. Right-click the header image. Choose an image which is the same as the header banner
  2. Dimensions: Set exact image size used in the theme’s demo

In this example below, the size is 2548 px x 227 px. While the width of the header is responsive, the height of the header might be too small to be a header.

Style setting

What? Not every header banner image is the same size

If the Home header (1600px x 1050px), it is not the same size as the Blog header banner (1080px x 960px), use images that look good in long and narrow spaces.

Recommended website header image pixel size for your website

While screens are getting larger, a header width of 1024px is still the most popular size. Websites are designed for 1024 x 768px resolution.

If you intend to use a header that is more than 1000 pixels, use one of these header sizes:

  • 1280px
  • 1366px
  • 1440px
  • 1600px
  • 1920px.

These are high-resolution sizes that can adjust to maintain resolutions of more than 1920 without a problem.

What is the right size for your website?

The most popular header sizes for websites:

HEADER SIZEWIDTHHEIGHTRATIO
Header size 102410242564:1
Header size 1024 One Third Page (Extra Height)102430024:7
Header size 1024 Half Page10243848:3
Header size 1024 Full Page(Hero Header)10247684:3
Header size 1280 One Third Page128026724:5
Header size 1280 One third Page (Extra Height)128037524:7
Header Size 1280 Half page128040016:5
Header Size 1280 Full Page (Hero Header)12808008:5
Header size 1366 One Third Page136625616:3
Header Size 1366 Half Page136638432:9
Header Size 1366 Full Page (Hero Header)136676816:9
Header Size 1440 One Third Page144030024:7
Header Size 1400 Half Page144045016:5
Header Size 1440 Full Page (Hero Header)14409008:5
Header Size 1600 One Third Page160030016:3
Header Size 1600 Half Page160045032:9
Header Size 1600 Full Page (Hero Header)160090016:9
Header Size 1920 One Third Page192036016:3
Header Size 1920 Half Page192054032:9
Header Size 1920 Full Page (Hero Header)1920108016:9

In conclusion

Think first about what you want your users to do when they land on your site and optimize your header for that action. Ensure your images are no larger than 72 dpi and that they use the RGB color format. The less elements you have in your header the more focused the desired action. Conversely the more elements in the header the more the user is burdened with scanning the content and interpreting what is most relevant to them. There is no right or wrong, it all depends on your typical user journeys and intended action you want to drive. Keep in mind, the more rich media in your header, the longer your loading time and larger your website page size. Always check your website load speed with SEOptimer to ensure you strike a good balance of optimal user experience and optimal load speed.

Share your love

Leave a Reply

Book Your Chance Now

Joining Giveaway is free . No additional costs. Cancel anytime.