What’s Your Mobile Layout Strategy?
Article updated on May 19, 2020
For most publishers, mobile traffic now makes up more than 50% of site traffic, with some websites seeing more than 75% of their traffic from mobile devices.
Mobile devices don’t have the same browser dimensions that you find on desktop, so it’s important to make sure your site is easy for visitors to read and navigate. The last thing you want is a desktop-style layout on mobile. Desktop layouts are designed for wider screens, and when rendered to fit in a mobile browser, they shrink the content down to an unreadable size, requiring the reader to zoom and scroll.
Mobile Responsive Themes
For most sites, the easiest solution is to use a mobile responsive theme, and the majority of WordPress sites are already using them. Mobile responsive themes are designed to adjust the layout depending on the width of the browser. For desktop, this generally involves an article content column and one or two sidebar/siderail columns.
But for smaller devices, two or more columns of content would force the text to be too small to read. When a smaller width is detected, a responsive theme will adjust the layout by moving the sidebar below the article content column, so the site is now displayed as a single column.
Mobile responsive themes are great for your readers. These themes keep your content front-and-center, and they ensure your text is large enough to read without zooming in.
These themes are also useful for publishers: the site’s images, colors and styling remain the same from desktop to mobile, and there’s no extra work of managing an entirely separate mobile layout. You can find many free and paid mobile responsive themes available for different platforms.
The downside of responsive themes is that you do need to consider any images or ads that are wider than a mobile phone’s resolution and either remove, replace, or resize them. For example, a header image can be adjusted to appear smaller on mobile. A 728×90 ad can be removed entirely for mobile or made responsive to display a 320×50 mobile banner ad instead.
Additionally, visitors rarely scroll down below an article to view all of the sidebar under it. You’ll want to consider which sidebar widgets you want to display on mobile and suppress the others so they don’t appear. Suppressing sidebar ad widgets on mobile is often recommended to improve the viewability of those ad units.
Separate Mobile Themes
A smaller number of publishers use an entirely separate mobile theme for their sites. Depending on the platform, this can be done using a mobile theme plugin, using a different stylesheet and layout code entirely for mobile, or by using an all-in-one service that provides a full mobile theme with article, image, and ad optimization.
Separate mobile themes often feature a single-column format with a mobile-optimized styling for each page that can be completely different than the desktop layout. A site’s logo and some styles are often preserved in the design, but the theme typically removes the sidebar entirely, and offers mobile-only features like slide-out menus, infinite scroll, and side-swiping actions.
These themes are often optimized for the maximum appeal to readers, with image-rich article excerpts, easy to access related posts, and user-behavior targeted ad placements. Some offer a variety of customization options, while others are more “plug and play”, following a specific template with limited options.
The downside of separate mobile themes is there is often a cost involved. You may be required to purchase the theme/plugin, or sign a contract with a mobile theme service, granting an ad revenue share to the service provider or their own dedicated ad placement. Free mobile themes typically offer fewer options, and while they may be optimized for mobile reading, they aren’t as stylish as some of their paid counterparts.
What About My Mobile Ad Strategy?
Whether you use a responsive theme or a separate mobile experience, you need an ad strategy that performs well within a mobile environment. We’ve got you covered on how to do that.