The Right Website Header Size and Why It's Important

Branding is key. Start by creating graphics and a unique logo that shows off your business. Your branding should be easily recognizable and memorable. Now with a well designed & established brand, you can easily create an artistic header that has a proper choice of style and color that matches your website.

Half Page Banner Images - Nike

Nike's header is beautifully simple. The website displays their logo in the top left of a solid white background - it makes their iconic brand easy to identify. The half-page image design excels at being concise and intuitive. The size of the header allows the website to have a clean & organized experience for users, without overcrowding their website.

‍

‍

‍

‍

Medium Banner - Showcase Pro Theme

This theme implements a medium-sized banner. The website layout is simple, making it easy to read text while still being visually appealing, artistic, without overcrowding the website with unnecessary information or extra graphics.

‍

‍

Full Page Hero Header - Zara

Zara's website header design is the very definition of minimalism. The striking image captures the user's attention. The hero header design excels at garnering interest & draws the user thus, decreasing the bounce rate.

‍

‍

Hero Image - Mercedes-Benz

In this example, the hero image implementation does a great job at using the Mercedes-Benz logo and color scheme. The website header is very effective because it shows off their new upcoming model without overwhelming the user. At the same time, the navigation is clear and easy to use.

‍

‍

‍

‍

A cluttered header can be a turnoff for the user, who might get lost in all of that text. It's important to make sure every piece fits together in a complementary fashion; otherwise, you will not get your message across effectively. Thinking about the size of your images and text when creating a header is important. Too much overwhelming text will disengage users.

The Samsung header serves as a roadblock, highlighting popular products and promotions. The carousel indicators are shown horizontally at the bottom while most of the screen is filled with sliding pictures. With the navigation overlaid at the top, you can easily and quickly get from one section to the next. This design does a great job of implementing both worlds without compromising on the effectiveness and user experience.

‍

‍

Mastercard's website header is modern and sleek. Users are immediately drawn into the site by an engaging video, which takes up the whole screen!

‍

‍

‍

Ikea's muted navigation is one of a kind. It turns all the attention towards their logo and search bar but is still visible enough for someone who is trying to navigate through their website. Their gallery-style page effectively showcases who they are and what they are about without being obstructive to site visitors.

‍

‍

‍

‍

The header of your site is the first thing users see and it's crucial for them to understand how they navigate around. Every element in this part must work together, from fonts size or color choice down to where elements sit on a page - you want every detail standing out so there are no issues with navigation!

‍

The Image Carousel

• Uses one piece of content at a time to avoid confusion
• Visual communication is the best because people generally scan content, as opposed to reading.
• Draws attention to important content
• Acts like pre-navigation allowing the user to explore different content and stay on the main page
• Popular and familiarized website element that most people know how to interact with (swipe through or tap the dots to advance the slides)

‍

‍

HTC's header has six slides featuring six technologies:

‍

‍

The Catalog Style

Walmart's website shows their physical catalog and leverages the header to put an emphasis on using the search bar to quickly find what you need.

‍

‍

The Call to Action (CTA)

Uber's homepage is designed to capture visitors' information. By removing every other element and focusing 100% on the CTA, they're able to optimize for one desired action: have the user sign up to drive.

‍

‍

Front Page Header Image

Apple's homepage banner size is designed to catch your eye. They removed every other element and focused 100% on the fullscreen header image which targets their new launch of MacBook Pros and AirPods. Using this strategy helps them with conversions and purchases of their new items.

‍

‍

‍

‍

We recommend starting by checking "Media Settings" under the "Appearance" tab from the WordPress Admin Dashboard.

• The optimal image dimensions to use for a blog post is 1200 x 628 pixels

‍

However, this section won’t provide optimal image dimensions for your home page or header.

‍

WordPress lists optimal image sizes for your home page and header image under Appearance —> Customize —> Front Page Header Image. Most of the sizes that are shown here are around 1600px by 1050px.

‍

‍

Enter the URL of your website on any browser and use the "Inspect Element" tool to get the exact image size using these easy steps:

‍

1. Right Click / Control + Click (Mac) on the website page
2. Click Inspect Element or Inspect
3. Click on the 3 dot menu so that you can view the code & Elements at the bottom of the page (desktop full-width view)

‍

‍

Select cursor pointer at the top right of the Element:

‍

‍

1. Get the Element out of the way and find your picture
2. Hover over the image
3. Find the image dimension on the image information pop-up

‍

‍

‍

If the Home header (1600px x 1050px) is not the same size as the Blog header banner (1080px x 960px), use photos that are suitable for long and narrow spaces.

‍

The most common size for a web page's header is still 1024 pixels wide, despite the fact that screens are getting larger. Websites are built to be viewed at a resolution of 1024 x 768 pixels.

‍

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

‍

The file sizes shown above are for high-resolution images that can easily scale to maintain higher than 1920px resolutions.

‍
‍

‍

The most popular header sizes for websites:

‍

‍

Think first about what you want your users to do when they land on your site and optimize for that action. Ensure images are no larger than 72 dpi, use the RGB color format, have a few elements in the header so it's focused on the main content can help keep them busy scanning instead of reading everything - there is no right or wrong here but it just depends on how typical user journeys work! Don't forget rich media like video adds extra dimensions which may be helpful depending on the intended goal with website visitors/users.

‍