Website Layout Ideas & Examples From Top Publishers & Blogs
Study after study continues to show the significant impact that a website’s layout plays in both the visitor’s experience and the total amount of revenue a publisher generates from ads and other digital revenue sources.
Website layout directly impacts how a visitor browses content and navigates from page to page.
The visitor’s engagement in the content, and the number of pages they visit, directly impacts the total number of ad impressions they see and the value of those impressions to advertisers on your site.
Below, I’ll review website layouts from across the web. We will look at several key things that many of the top sites have in common. I’ll also share some insights into why one site might choose something totally different from another using real data.
What website layout tips can we get from top news and media sites?
Let’s take a look at some of the most popular news and information sites. This should give us some insights from some of the world’s most popular publishers.
I picked 20 well-known news and media sites from across the web. I tried to make sure I included several that have well-publicized data science departments.
[ It is probably worth pointing out that it is really important to read all of the data in this article prior to jumping to any conclusions about what may work for your website. As we have shown before, redesigning your website can offer terrible ROI. In fact, the best research in the market suggests visitor segmentation may be the best way to approach website layout changes. ]
Looking at these 20 websites, I thought it would help put things in context by first understanding what the sites look like to visitors. I started with some of the more physical layout components.
Popular desktop sidebar location
Starting on the desktop version of the sites, it appears as though a right-aligned sidebar is the most popular amongst this group of sites.
Lifehack.org is a good example of this. They include both menu items, ads, and links to related articles in their right-aligned sidebar.
The next most popular desktop layout was no sidebar.
A good example of this is the New York Times. They include large banner ads at the top and floating ads at the bottom to make up for the lack of sidebar ad inventory.
Additionally, they include ad locations throughout the article and push all related article links and widgets to the bottom of the page.
Most popular mobile menu type
Desktop website layouts get a lot of fanfare; as it is often how publisher look at their own sites, but statistically, most visitors will see the mobile version of a website.
Mobile menus can play an important role in pageviews per visit. The locations and type of menu have been shown to impact visitor behavior.
The most popular form of overall menu type was a “hamburger” style menu. 90% of the sites we studied used this style.
The other 10% used a button labeled “menu”. These were the only two styles used among these 20 sites.
The hamburger menu has become a well-recognized symbol for a mobile menu.
The adoption of this style of menu from many top publishers suggests that users have come to recognize this symbol without much confusion.
As you can see above, there are many variations of this popular style.
The two most popular implementations of a hamburger menu were to bring the menu into fullscreen and also to bring the menu in as a left-side popout.
In the example above, you can see that USA Today uses a hamburger menu that expands to a fullscreen style of navigation.
Men’s Health uses a similar menu style and location but has their navigation simply pop-out from the left-side of the screen.
For what its worth, in this small sample size the left-side popout style of navigation was six times more popular than a right-side popout style of navigation.
Where were the majority of ads in these website layouts?
We know from tons of research that ad locations, types, and density play a huge role in user experience metrics and overall ad revenue.
We also know that more ads can often mean less money overall!!!
That said, where are some of these larger publishers choosing to put the majority of their ads?
As you can see, the most common location that these types of publishers overlap is ads above the fold.
This was once considered a bit of a controversial subject, but something that has definitely become the norm.
Last year Google lifted the ban on 300 x 250 sized ads above the fold on mobile devices, and now this is a very common size to see on these popular publisher sites.
Of these 20 sites, 95% displayed more than 1 ad type. You can see that every single one of them leveraged display ad units for monetization.
Aside from display ads, native ads — or content recommendation widgets — appeared to be the second most popular ad type.
What we continually learn from data is that testing makes all the difference.
Most of these sites are showing different combinations because they have found their respective combinations to work best with their visitors.
The best emerging research here suggests that every visitor should actually be treated differently.
Tyler is an award-winning digital marketer, SEO veteran, successful start-up founder, and well-known publishing industry speaker. Tyler also serves as the host of Pubtelligence, a publishers-only event hosted at Google offices around the globe. Tyler describes his core competency as learning. He has composed content for some of the world’s top publications and has over a decade of experience building businesses in the digital space. Tyler is currently the Head of Marketing at Ezoic and serves as an SEO and marketing expert for start-up competitions across the U.S.