Consider this the beginning of our series on building, selling, and managing WordPress websites for clients.
We start our series on creating easy WordPress sites for clients from the top. The header is perhaps the most important piece of the website. After a large call-to-action or image on the front page, it is going to be the first thing a person sees when visiting their site.
The following resource discusses different header options and how to determine which is right for you or your client.
Why is header layout important?
In a study by the Nielsen Norman Group, it was uncovered that by default, users will read sites as they read standard book content, left to right. As they read, they will slowly lose interest in the content going down the page. This forms sort of an F website layout with the English language.
Take a look at this example from the popular gaming and nerd haven IGN.com. You will notice that they do a good job of following this pattern. They put the logo at the top left to promote the brand with the major new stories and menus. Next they have another breakdown of popular content. Below this, as the user starts to get bored, they introduce large blocks of image/video content.
In IGN.com‘s case, they are a digital publications, with loads of news and articles. It is natural here to give people plenty of content to read. But if you are selling a product or doing something different, you might need a different strategy. To get people to deviate from or fulfill these norms, your overall web design needs to be built accordingly.
Align your logo and content to the left on WordPress
We start with a look at left alignment of your header in WordPress. This is the most typical layout seen on websites. It is the defacto standard for web design, because it is where people start looking when they scroll with the eyes.
For a user, the first thing they would see is the logo, which shows them that this is the brand they are looking for and can trust. For this reason, left aligning content makes sense. It is where we naturally start when reading and is where the most important content should be.
Most WordPress themes (including many of ours) will use left-alignment as the default for the header.
The other major benefit of left aligning content is keeping the header small. This allows an emphasis on the lower content and less emphasis on the header. When you need to get important sales information across immediately below, this can be pretty helpful. If you work from home or manage your website using your home wifi, you may want to utilize premium residential proxies to keep your online data private.
What websites are perfect for left-alignment
Major publications
Informational websites
Landing page sites (software or download sites)
Websites with a LOT of page content
This barely scratches the surface, as most websites will default to this look.
Center your logo and menu on WordPress
While left aligning content is the norm, there are many case in which you will want to center align your header and menu.
For sites that place heavy emphasis on navigation (blogs / portfolio websites), it is a good idea to center your header in WordPress, because it brings attention to the menu in a way that other sites do not allow. You have to read past the navigation to get to the content. If you have categories or different portfolios to showcase, this is a good layout to have.
As a side note, centering content allows for a better reading experience, since it is distraction free. If you blog or tell stories on the internet, this is also the best alignment option to use.
Good alignment for responsive design
Centering your content is also perfect if you want to take the guesswork out of responsive design — design for mobile devices. Without sidebars on the left or right, your content is already good to go, so you can tell from a desktop view what your view is going to look like on mobile phones. It can allow for more freedom with what you put in the center of your content.
Websites that are good for center alignment
Design sites
Photography and photoblogging sites
Product sites
Blogging sites
You will notice with our Capture WordPress theme that everything is in the middle to bring emphasis to photography, fashion, or style blogs.
When to align your logo and menu to the right on WordPress
While a rarity, you might occasionally see websites with their logos and primary content on the right. This is more of a special use case, but you will see right alignment on sites where advertising is the primary draw. You might also see it on corporate news sites, where the focus isn’t so much on the brand in question, it is more about the contents of the site and navigation from a legal or white-collar perspective.
Right-to-left sites
Ad-heavy websites
Corporate news websites
Change header alignment on WordPress
We understand that you might want flexibility with how your header is displayed. Luckily, at the click of a button, our newest clean theme Symphony Pro allows you to adjust the alignment of your header, including the logo and navigation. From the Customizer, go to the Main Header section and change the alignment, as well as fonts, colors, site title, and tagline.
The customizer also allows you to also tweak the positioning of other navigation on the site, like the top menu and secondary menu (if you choose to use them).
If you have any other suggestions or tips on header alignment, let us know in the comments below.
We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure
