What is a “digital publisher website?” It’s a website that focuses on putting out a lot of articles on a daily basis. It’s a level above a “blog”. It is basically a news-site or viral publishing platform like BuzzFeed.
There is a difference in the design approach for such a website compared to a product sales, business, personal blog, or any other kind of website. Its layout is often known as the “Magazine” style, which is also quite a well-saturated category in theme marketplaces.
What Makes a Publisher Website Different?
There are two major differences between a publisher website and a more regular one.
The first obvious one is the amount of content. Now, of course, there are huge websites, especially e-commerce ones like Amazon or eBay that most likely have way more content, but those are platforms that get content from the site users. Publishers have editorial teams that work full time to produce content on a schedule. Just like a newspaper does.
The other major difference is the source of income. A company website like Coca Cola does not generate its income from the site, instead it comes from its products. Most company websites serve the purpose of simply being a digital presence.
Knowing this, it’s probably obvious that a publisher’s website income comes from the site itself. How? Ads! Which is pretty much how Google or 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 layouts.
From a design perspective, this is the main priority of publisher and magazine websites.
Designing Websites With a Lot of Content
Let’s take a look at some large publishers like Variety:
First thing that one sees is a large ad at the top. We will look into that more in a second, before that – 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 – another 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 layout that is made to work with larger quantities of text. 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:
Digital Publishers and Advertisement
Designing around advertisement is another major topic for publishers. Considering that it is the main source of income, it’s also the top priority. There are a few things a designer should consider here, first of which is getting feedback or good information from the AdOps team who understands well the requirements and the functionality of these ads.
Examples for this are 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 some 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!
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.
- 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)
Publisher Website’s Performance
A major contributor to bad performance are setups with 8+ ads trying to load with tons of other scripts around. 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 it’s own, and one the designer could help out with. To understand all this, you first need to understand a little about browsers
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, press would utilize the CPU or the GPU. If an animation for example 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:
- 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.
- Keep images relatively small. This would allow developers to load smaller sized images which would save weight on the site.
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. On mobile as well is where most of the optimizations are also needed as the majority of the devices are not high-end flagships but $200-$300 smartphones.
On Mobile, your focus is to keep content readable while presenting ads in a clear way. Keep distance between any clickable element and ads large to remove any accidental clicks on the ads. If possible, reduce any animations and overlays that might make the site feel less snappy.
Publishers focus on lots of content and lots of ads. 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 put out 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 such as DevriX.