How to Optimize Content Heavy Websites for Mobile

Mobile optimization of websites is crucial. Did you know that currently nearly 55% of web traffic worldwide comes from mobile devices, and that about 70% of traffic from publishers’ sites come from Google Searches which also happens on mobile? Astonishing, isn’t it?

As such, mobile devices have become an indispensable part of our lives. They have not only changed how we communicate, shop and entertain ourselves, but they have also transformed how we search for and consume information. And because we work and live in a mobile-first world, mobile design should not be overlooked.

Optimizing a website for mobile, especially a content-heavy one, entails much more than creating a responsive design. You have to consider how users behave on these devices, understand their needs, their wants and preferences, as well as all the elements that enhance a mobile user’s experience.

So, in this article, we’ll share with you how to optimize your content-heavy site for mobile. We will start with defining what a content intense site is, and outline why mobile optimization is so important. Also, we’ll give you some tips on how to achieve this with a more specific focus on digital publisher sites.

Let’s get to it, shall we?

What Is a Content Heavy Website?

Before we head into our practical guide of how to optimize a content heavy website for mobile devices, it’s worth first defining what a content heavy website is.

Content heavy or content intensive sites belong to organizations which naturally produce large amounts of information. This is typical for news outlets, digital publishers, universities, eCommerce, online portfolios of creative agencies, and more.

Such organizations strongly rely on content such as this as it is how they fulfill their mission. For them, this is not just some strategy to generate traffic, it’s how their information and knowledge is distributed.

Considering everything said it’s no surprise that mobile optimization and design of content heavy sites is a complex process. This is owed not only to the columns of content they have to accommodate, but also to their revenue model.

For example, large eCommerce websites like Amazon for the most part rely on user-generated content, and companies like Coca Cola, don’t profit from their sait per se, but from their products. However, in the case of digital publishers the story is different.

Publisher websites generate their income through ads. Because of this their goal is to have as many people as possible see these ads. As such, from a web designer’s point of view this is a main area for optimization.

Readers also enjoy: Design Approaches to Publisher Websites

Why Optimize for Mobile?

Mobile is king, today! According to TechJury, there are currently over 4 billion mobile users worldwide, and the mobile share of page views in the US alone is now over 53%. With such strong viewing power, it’s no surprise that optimizing for mobile devices is so necessary.

Mobile optimization of content-heavy websites, however, is more than just providing a responsive design. In fact, it’s about designing a great mobile UX (user experience). This means creating a site that readers enjoy interacting with, because it provides them with a meaningful and relevant experience, thus taking the whole user journey into consideration.

There are six elements of an effective mobile UX design, which Peter Morville has organised in the user experience honeycomb shown below.

This model provides another point of view when designing for content intense sites. It helps balance content with usability. It supports a targeted approach to redesign and optimization. And each part of the honeycomb can be used to transform how designers see what they do so they can iterate and innovate.

To provide your mobile readers with the best experience possible, you need to take a different approach to design compared to enhancing for desktop. You have to fit your content on a much smaller screen with a different way of navigation, that is, in 94% of the cases, looked at vertically. And you have to do all of this, while ensuring that your design is recognizable irrespective of the device it’s viewed on.

To help you achieve this successfully, there are the six key activities you should engage in.

1. The Users’ Needs, Habits and Goals

Any design project has to put the user first, especiallywhen it comes to mobile users’ needs, habits, and goals. When you understand your viewers well, you’ll be able to retain engage them for longer. What is more, you will know exactly why a particular section should be optimized and you’ll have good ideas on how to achieve that.

Catering to your users’ preferences successfully, requires the creation of a native mobile experience. This means ensuring that your website can adapt to the specifications of different devices without compromising the user experience.

Here are two ways to ensure this – responsive or adaptive site design. Responsive design is one that changes its layout depending on the screen size. Whereas adaptive design is one that completely shifts based on the screen size.

The design style of your content heavy site has an effect not only on the loading speed but also on your site’s elements. If you only focus on having a super fast loading site, you risk removing too many styling elements which in turn leads to a very bare or boring looking site.

Of course, it’s important to know how different elements can affect its speed. In fact, you should strive to create either a responsive or an adaptive design when optimizing.

2. Make the Navigation Intuitive and Finger Friendly

Navigation plays a key role when it comes to optimising. When users go to your page they should be able to instantly find their way around it. If they struggle, they will be more likely to leave. As such, mobile sites need to have more intuitive navigation compared to desktop sites.

When prioritizing on-page elements for your mobile site, and to ensure a smooth flow, an accepted practice is to include recognisable design patterns and icons like hamburger menus or a “home” icon for the home menu. You also really need to keep the screen size in mind.

One of the main constraints with mobile optimization of websites is the size of touchscreen targets. Fingertips are much less accurate when clicking on page elements, so you need to ensure that when a user taps the target, they can complete the action successfully.

Additionally, you should also consider the hand position controls on mobile devices. You need to be aware which areas of the screen can be easily accessed depending on how a person is holding their phone.

According to UX Matters, 49% of smartphone users use their device with one hand, 36% adopt the cradled position, and 15% use it with two hands. To create a positive user experience, you should be aware which areas fall within the so-called “thumb zone” and ensure that all interactive and calls-to-action (CTA) content is placed there.

Make sure to remove any unnecessary clutter from the mobile layout, so you don’t overwhelm your audience. Concentrate on minimizing navigation options by using menus and sub menus.

It should be easy to move to the next page, register online, or simply browse the site. Don’t forget to also eliminate any non-essential elements that might slow down or confuse users.

Some tips on how to achieve this include:

• Add sufficient contrast to design elements.
• Have a clear typography hierarchy. Use larger fonts and easy-to-spot titles and headers, shorter paragraphs, and bulleted or numbered lists.
• Use clear transitions and animations. These provide signals that the user’s action had an effect and are key to creating a satisfying user experience.

3. Monetize Ethically

We mentioned earlier that for most content heavy sites, especially those of digital publishers, having a considerable amount of traffic is necessary for their revenue. Such sites owe their income to the ads they show. The more advertisements they have, the more profits they’ll be able to generate.

Even though readers aren’t too happy with seeing a lot of ads,publishers can’t remove them because they need them. So, here comes another tricky part of optimizing a content intensive site for mobile: how to include ads on mobile without damaging the readers’ experience?

Here are three tactics by DigiDay you can try:

Leverage the Scroll and the Swipe

While exciting content might be King, UX tools are the Queen. Users are very used to scrolling and swiping, for which these actions play a vital role in increasing engagement. Most readers only skim content and don’t like scrolling through boring articles. So to keep them interested you should give them other options to discover new content by grouping your titles in instantly understandable sections.

Place Ads Carefully

Ad placement has a detrimental role when it comes to user experience. Disruptive ads that are only seen once will annoy your readers. This is why you should aim for creating sustainable ad placement so that you can keep your readers engaged and returning to your site.

These are the mobile ad formats you should stay away from:

Best practises for ad placement include:

• Do not insert banners at the double this page because users first Instinct is to scroll down.
• Avoid misclicks by adding spaces between content and ads.
• Avoid placing ads between links, lists, or blockquotes.
• Keep ad density at 30% maximum.

Speed up Your Ads

When you optimise your page speed, don’t forget about your ads. When a mobile site loads quickly the user might start scrolling before the ads have loaded. This results in a white ad space that can ultimately ruin the impression of your site.

To avoid this from happening you should prioritise the ad that you want users to to see first and optimise both your page speed and ad viewability. First, divide your page into chunks and prioritise the order in which you want them to load. Then prioritise your ads in their order of appearance.

4. Keep it Speedy!

Fast loading times area must-have for any site, and especially when it comes to content heavy websites and ensuring good mobile optimization.

Because these sites create large volumes of content, most of their traffic comes from organic searches like Google search. When a user looks for an answer to their query and decides to click on your site, they have yet to evaluate if it will be helpful.As such they won’t be patient for it to load if that takes over a couple of seconds.

Speed is especially important for mobile optimization. Even though many places have 5G data, 4G is still the most widespread network in terms of technology,. And because users don’t really consider this when browsing online, it’s up to site owners to ensure that their content intense page will appear correctly on any device.

Realistically, you won’t be able to load all your content at once, especially when you have loads of if, so the key is to prioritize which elements have to appear sooner and which can appear later.

As UX Design puts it, it’s a balancing act between loading content that will be used and preloading elements that visitors will likely see next so that you create the perception of speed.

Final Thoughts

Mobile optimization of content-heavy sites is a tricky task. There are many things to consider such as understanding the users’ needs to how fast your page loads. Not to mention monetizing your site in a way that it doesn’t scare off your readers.

Be sure to always remember that the user comes first and design with this in mind. Your mobile UX has to be straightforward, intuitive, and functional.