Search the site:

Copyright 2010 - 2024 @ DevriX - All rights reserved.

Design for Content Heavy Websites: Approaches for Digital Publishers

Design for Content Heavy Websites: Approaches for Digital Publishers

What is a digital publisher website and what makes it different from a regular business website or a blog?

Quite a lot, actually.

A digital publication is a type of website that puts out numerous articles on a daily basis. It is, basically, an online newspaper or magazine, or a viral publishing platform like BuzzFeed.

These types of websites are usually content heavy and text rich, and, as such, they require a different design approach as compared to an eCommerce store, business website, personal blog, or any other kind of website.

The layout utilized in such digital solutions is commonly known as the magazine style.

While there is quite a well-saturated category of such designs in theme marketplaces, before they choose a solution digital publishers should know the basics of online magazine and newspaper design.

In this article, we’ll be talking about how to design content heavy websites to improve usability and user experience.

Read on and take notes!

What Makes a Publisher Website Different?

There are two major differences between digital publisher websites and regular ones.

The first obvious one is the amount of content.

Digital publications are content-heavy websites that may have tens of thousands of pages. Also, they are text-rich, more often than not, they feature a lot of images, and have a lot of strategically positioned ad spaces.

Now, of course, there are other types of huge websites, especially eCommerce ones like Amazon or eBay that most likely have way more content. However, those are platforms that get content from the website users, rather than generate it themselves.

Publishers have editorial teams that work full time to produce original content on a schedule – they research topics, investigate stories, post breaking news, and so forth. Just like a newspaper does.

That’s what differentiates published websites from content syndication and news aggregation platforms as well – original content.

The other major difference is the source of income.

A company website like Coca Cola does not generate its income from the website, instead it comes from its products. Most company websites have awareness and branding purposes, and serve as part of the company’s digital presence.

However, a digital publisher’s income comes from the website itself.

How?

Ads!

(Which is pretty much how Google and Facebook generate most of their income.)

Ads, most decidedly, run the web and are the main priority of many websites. Their content is focused on bringing in as many readers as possible so that they can see the ads on their pages and click on them.

This is how both the publisher and the advertiser make money.

That’s why, from a design perspective, ad layouts are one of the main priorities of online newspaper and magazine websites.

4 Key Elements of an Ad-Friendly WordPress Layout

How to Design Content Heavy Websites

Let’s take a look at some large publishers with content heavy websites like Variety:

Let’s first talk about the content layout.

A large header with many links – hamburger on top, search, call to actions and then even more menu items. The goal is to give easy access to all the categories of content. This is in a stark contrast with many business sites that have less than 10 pages (excluding blog pages).

After that – a large box for the main article. This is a good design decision. It makes it easier for your visitors to decide what to do. If there are 10 equally important elements, the mental strain of choosing one over another could make some users bounce off the page. With a clear visual hierarchy of important to less important items, a designer can make users stay longer on a webpage.

To the right – an ad and a “Most Popular” widget, which is just what most users would like to see. In order to fit in so much content, Variety has decided to make it into a scrollable area.

This is the type of layouts you would be mostly going after with larger publishers.

BuzzFeed is another example of a layout that is made to work for text heavy website design.

Here, though, the design is more playful with vibrant colors and attention grabbing shapes (like the three buttons at the top right corner).

There is more “ranking” as the 1, 2, 3 on the Trending to the right, the bright red label for “Breaking” news, and so on.

One major trend in a similar design is to go for the user’s attention. That attention must be well directed, however, as you wouldn’t want to split it between two equally important items.

Here is an example of the wrong approach where everything tries to be at the top:

We are well aware that the purpose is completely different and the site above might in fact turn a good profit, but it illustrates well the principle of “everything trying to get your attention”

Digital Publishers and Advertising

As mentioned, designing around advertisements is another major topic for publishers.

Considering that it is the main source of income, it’s also the top priority.

However, for publishers it’s vital to strike the balance between revenue and UX. Otherwise they may drive their readers away.

To avoid this, there are a few things a designer should consider, first of which is getting feedback or good information from the AdOps team that understands well the requirements and the functionality of these ads.

For example, ad sizes. There are 300×250, 300×600, there are 728×90 as well as 300×50.

  • Some might stick to one side of the screen where you can scroll past different points.
  • Some might stay in their own little corner, others would stick on top of the page always.
  • Others would show up in pairs of two 300×250 or one 720x90px.

How do you know about all of this and what are the requirements?

So yes, step one would be to collect all that information.

An easier way to look at it is in terms of Layouts. A single post can have multiple layouts depending on the goals of the publisher. Sometimes there are less ads, sometimes there are more. Sometimes ads change size for different loads, other times they remain constant. It can all change rapidly, though, as new trends and rules come out. Often on a daily basis!

For example, Google tends to update its ad density and interstitials regulations to align with user experience.

Some of the important things to keep in mind would be:

  • Ads with height might load. This means that content would be pushed down and design that is made to fit a certain widget above the fold would fail.
  • Ads might need backgrounds. This could be a light gray background surrounding the ad, touching the corners of the screen.
  • Ads often need spacing around them to avoid accidental touches. 20-30 pixels is а good distance between ads.
  • You would want to add an “Advertisement” label before/after with the goal of appealing more to ad providers, and informing the user that the content in the ad box is provided by a third party and has promotional purposes.
  • There shouldn’t be too many ads! The sweet spot for this is what an AdOps team would work on figuring out for a specific publisher, specific page, and even specific traffic (like Facebook, Snapchat, etc.), as well as Google’s latest rules.

Digital Publisher Website Performance

A major contributor to bad performance are setups with 8+ ads trying to load with tons of other scripts around.

This can compromise a page’s core web vitals and ad density, and cause major UX and SEO issues.

Why is this a designer’s concern when it’s all in the code? Can’t the developers just optimize it?

Well, yes, but that is nearly a full time job on its own, and one the designer could help out with. To understand all this, you first need to understand a little about how browsers work.

Browsers can utilize the CPU or the GPU of a machine depending on the way a certain element is coded from a front-end developer.

Sometimes, actions like animations and interactions on hover, or press would utilize the CPU or the GPU. For example, if an animation utilizes the CPU, it’s quite likely that there would be lag, if it’s the GPU, then it’s possible to get better performance. The requirements of the designer might be the difference between the two.

Here are a few general tips, to improve the performance of content heavy websites:

  • Use little to no shadows. Shadows are very expensive to render especially on low-end mobile devices and laptops.
  • Don’t use backdrop filters or blurs (or any filters) as they are also very expensive.
  • Keep shapes simple as much as possible to reduce additional computing.
  • Do not request animations of elements that affect the layout (other elements). Design around that as much as possible. Anything that overlaps or is a popup is a better choice (still, beware of how popups may affect UX).
  • Keep images relatively small. This would allow developers to load smaller sized images which would save weight on the site.
  • Keep animations, in general, to a minimum, especially on site load. Same applies to layout shifts. The first load is the most CPU intensive time for a website when all JavaScript is being applied.

Source

Priority of the Design

The majority of the traffic on publisher sites comes from mobile. So the time most spent on polishing all details should go there.

Furthermore, it’s not only about the layouts and overall design that need to be mobile-optimized, content should also be made mobile-friendly.

Your focus is to keep the information readable, while presenting ads in a clear way. Keep distance between any clickable element and make ads close-buttons large and easy to remove, as well as reduce the chance of any accidental clicks on the ads. If possible, avoid any animations and overlays that might make the site feel less snappy.

Simply put, invest all the time you can in holistic mobile optimization.

Summary

Digital publisher websites are content heavy and ad and, as such, have special design needs.

In general, landing pages and archives take less priority than single views as traffic often comes directly to the articles from other ads. As a designer, your focus is to find the most optimal way to position ads, add the proper spacings, and to separate them well from the main content to keep everything readable and usable.

Keep complex UI elements to a minimum to improve speed performance as well as request as few animations as possible.

To nail down everything well, publishers often need to work with development agencies that have a good experience with AdOps, follow the latest trends, and tech stacks in the business.

If you feel that you need some help improving the performance of your digital publication, don’t hesitate to give us a call. Here at DevriX, we’ve worked with many publishers over the years and know how to boost both your UX and SEO.