Reading duration: 6 min

    Mobile-Friendly Design for Digital Magazines

    at User experience

    Does your digital magazine work on mobile devices? By work, I mean that it has great readability and user experience. Did you know that mobile internet users overtook desktop internet users in 2016?

    Mobile-friendly responsive digital magazine design

    Digital publishing is one of the sectors where people want to consume content everywhere and anytime, on any device. Audiences are, in a way, very spoiled nowadays and they can get very picky. While this can be a great challenge, it can be an even greater opportunity.

    In fact, almost every email, when sending a new issue blast, is opened on mobile devices first. Guess what? If it gives a bad experience to the reader at first glance, you won’t get a second chance.

    But what does a “good mobile magazine experience” really mean? Here are 5 key mobile-friendly magazine design factors to guide you.

    Quick Loading and Browsing Speeds

    People don’t like to wait. If your content doesn’t load instantly, someone else’s will. As soon as the reader hits the link to open your digital magazine, something needs to happen immediately. Your user judges your digital magazine at this critical moment and, if you fail, you’ve likely lost them.

    They’ll start exploring everything in a sort of non-verbal trouble-shooting mode. How does the site feel? Does this or that thing load instantly? If not, it’s felt as a bad sign about your online magazine. For instance, a loader that indicates to the user that the magazine is loading or maybe the magazine cover converting from grayscale to color, or from blurry to sharp. Cues are appreciated, even during longer loads. No cue + a long load = a frustrated reader.

    If your magazine cover is lightweight and can be made to load quickly, do it. If there’s even a slight possibility that it will load with delay, take that into account and give your users a pleasant experience while waiting. Color is good. So is a cute, but professional load icon.

    Covers, UX, and Preloading

    The cover should not take a noticeable amount of delay to load. Ever. This scares readers and leave a bad first impression.

    And while the magazine cover loads, start preloading the pages the user can visit within one click in the background right away. These pages are usually next, but the previous page and every page that can be reached with one click from the cover and the TOC can be too. You have them linked, right?

    It’s way more important how a site feels to the user than the actual loading speed numbers. However, the numbers help you keep track when optimizing. Some great tools to keep track of these numbers are GTmetrix and Google page speed insights.

    Intuitive controls and user interface

    The goal is to give the feeling to the user like he knows what to do and feels confident when interacting with your magazine interface. Never make the user feel stupid: he’ll start subconsciously resenting your magazine. At first, make sure all intuitive controls work well on your mobile magazine interface, such as scroll, swipe to the next section/page, zoom, slide out menu for TOC, linked magazine content with big enough area to click, etc. Then, and only then, after all these intuitive controls are working, start adding new unique things if necessary. It also helps if you create some easy to understand explainer interface.

    Don’t forget — simple and intuitive is always best. The best case scenario is when everybody knows what to do without a tutorial.

    User experience is also judged by the design of your magazine layout. It needs to clearly state where the headline, body copy, image caption, video that can be played, etc. are.

    Good mobile-friendly readability

    This may seem obvious, but so many digital magazines are lacking this important “feature.” Any type of digital magazine needs to be readable without zooming or other input from the reader’s side. We had a great blog post about digital magazine readability and how to achieve it.

    There was a great study done not that long ago by Mequoda covering consumer expectation form digital magazines.  71% of the study participants said that readability is the most important aspect of a digital publication to them.

    Follows Google Guidelines

    The web used to be the wild west some time ago, but things are changing: standards and regulations are riding into town to keep the peace, so to speak, making it easier for the user.

    One of the biggest changes lately was the EU GDPR law on data collection. It helps users clearly understand what data is collected by the website that is visited and asks for permission. If you are serving EU customers, you should learn more about GDPR and implement at least some of its practices into your website. You can learn more about GDPR and check your website here.

    One of the biggest regulators on the web is Google. They tend to come up with new standards and rules in their attempts to make the web a better place. How do they do it?

    They suggest new best practices and reward the websites who take action by giving them better search result rankings, and on the flip side, they punish those who ignore best practices by lowering the rankings. Some who game the system are simply removed (that is, banned) from the Google search result pages.

    Magazine websites that use secure HTTPS website connections are favored. So are sites which avoid using intrusive popups that cover more than 40% of the website on mobile devices. Some other guidelines and suggestion from Google can be found using Google’s “Testmysite” tool.

    Effective Ads

    Ads are extremely important to every digital magazine, but so many advertisers fail to realize that ads need to be optimized for mobile devices. Well, they don’t have to be optimized necessarily, but if you want your campaign to be successful, you should do this. Here is a quick checklist of things to consider when optimizing your ads for mobile:

    • Do not use spreads; mobile screens are mostly used in a vertical orientation, so it’s best to present the ads as single-page or banner ads.
    • Mobile devices do not allow autoplay, so, if you are using video, you should add a play button of use GIFs instead.
    • Use larger fonts. Small print might become unreadable on smaller screens.
    • Clickable elements should be intuitive. Design them to make it obvious where to click (if the whole ad isn’t already clickable).
    • Ad click-thru landing pages should be responsive and mobile-friendly.
    • Do not use flash: nobody will see it. Flash gets blocked most of the time, even on desktop devices, not to mention mobile devices.
    Liked this article?
    Subscribe to get the most out of our blog! We have bonus content ready exclusively for our subscribers.

    I hope you’ll be able to optimize your magazine for mobile devices better after reading this. If you need help doing it, reach out to Flip180 Media.  We’ve provided mobile-friendly magazine design increasingly as a main design focus. We’re always here to help!


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Real Time Analytics