We have seen digital publishing trends evolve a lot over the last several years, but no change has been quite as impactful as the widespread shift towards mobile.
Creating a mobile-optimized magazine that engages readers forces publishers to rethink their approach to digital publishing. Simply taking the same desktop edition and shrinking it down for
smartphones or tablets is not only cause for a terrible user experience, but it also fails to take into account the unique behaviors and requirements of mobile readers.
There are many components to creating a mobile-friendly version of your magazine that delights readers, including design, content, and functionality. To help you get started with your own mobile publication, here are a list of best practices that you should keep in mind during the planning stages.
Navigation should be easy and intuitive.
It is an undisputed truth that as screen size decreases, so too does our tolerance for bad mobile design. As a result, publishers need to make sure that they are creating a mobile-friendly version of their magazine that allows readers to quickly find the content that they are after. To ensure that everything is only one or two clicks away, it makes sense to restructure your magazine based on individual articles and organize them into category sections. This way, readers can easily jump to a specific article instead of needing to flick back and forth between pages to find what they are after.
Articles should look good in portrait or landscape orientation.
When designing for mobile don’t forget that readers will be inclined to view the magazine in different orientations. While long text articles are easier to read in portrait, interactive elements such as videos and image galleries will make better use of the available screen space in landscape. Make sure paragraph text flows and does not require horizontal scrolling. Adopting a responsive site design will ensure that your articles adapt to any device’s screen size and orientation and leave your readers with a superior mobile user experience.
Keep clutter to a minimum.
Since you are working with limited screen real estate on mobile, it makes sense to remove anything extraneous from the design that doesn’t add to the overall user experience. Think strategically about how you organize your magazine content as well. Don’t design so that users have to scroll for flick between articles excessively to find what they are looking for. Instead, each screen view within your mobile magazine should have just one central focus. Running one article per page will promote a simple, organized magazine structure and will prevent any confusion when it comes to sharing articles.
Use colors that translate well online.
While it is important to use colors that match either your print edition or overall brand palette, make sure these colors look good online. Secondly, contrast is key! Avoid using pale colors for blocks of text, especially against a white background as this will lead to eye strain and cause reader frustration that could have been easily avoided.
Instead, use color strategically; to highlight important content, create order, invoke emotion, and to form a stronger brand connection with your readers. You can draw attention to important CTAs with the use of loud, vibrant colors for buttons that stand out against a minimalist background.
Pay attention to your choice of fonts.
Ensure all fonts you use are practical, functional, and appropriate for their particular use. Mobile reading behavior is broader and much more fragmented than with desktop, with both on-the-go reading, and extended lean-back reading common. As a result, it is crucial that the font you use makes for easy skim reading, as well as longer reading sessions.
Steer clear of fonts that are too fine, condensed, pale, or otherwise too difficult to read on small screens as this will result in a poor user experience. Your font typeface should also maintain clarity even when used at its smallest size. When combining fonts, make sure they compliment each other. This may be a matter of trial and error, so play around with a few different choices and see which combinations are most effective.
Optimize images to keep load times short.
Images will often account for the largest downloads when loading a website. As a result, simply optimizing the images in your mobile magazine will greatly improve overall site performance and save your readers from wasting all of their mobile data. Most pixel-based photo editing programs, like Adobe Photoshop, will have an ‘optimize for web’ setting built in and will allow you to play around further with the image dimensions and quality so that you can find an image setting that you are happy with.
If you are using a mobile-first publishing solution for your magazine then this optimization process should be taken care of automatically for you.
Design your magazine for touch.
A superior mobile magazine interface will need to do more than simply shoehorn the same desktop design into a small screen. It should take into account the physicality of mobile interaction, and the lack of precision with finger and thumb touches. When designing with mobile ergonomics in mind, avoid links that are tightly packed together as this will lead to touch errors and heightened user frustration. Also, ensure that all buttons are large enough to press without zooming in on the screen. Accommodate common mobile hand gestures such as swipe to collapse menus or to navigate to the previous/next article article.
Keep subscription processes simple and login forms minimal.
Filling out a subscription or registration form can be tedious even on desktop. Shrink the whole experience down for small mobile touch screens and it becomes every smartphone user’s nightmare.
Make sure readers can subscribe, pay, and get access to your magazine content as quickly and seamlessly as possible. Don’t ask users to manually fill out the same lengthy forms you use on desktop. With most virtual mobile keyboards obscuring at least a third of the screen, users will not be happy if they have to spend their time zooming in and out to locate all of the form fields.
Create a logical order through sign up forms, requiring minimal free text entry. Explore easy one tap sign in methods, such as connecting with a social media account. For purchasing subscriptions, include a card-free payment option so access to content can granted frictionlessly.
Create article ‘teasers’.
A teaser is a short preview of each of your articles which aims to inform and inspire readers to click through to read the article in its entirety. To create teasers that drive reader engagement you will need to include the most important elements of each article, including the headline, the lead image, and a very brief, skimmable summary of the article. The summary for each lead article can be displayed on the home page, and the summary for every article organized into each section list.
Use interactivity to improve the user experience.
Add optimized videos straight from YouTube, image galleries, and interactive maps to your articles to delight and engage readers. Make sure to keep both user experience and mobile design in mind when adding any form of multimedia. If the element is not contributing anything worthwhile to the article (whether its purpose is to be informative, entertaining, or functional) then it is best to leave it out.
Always give the reader control over how they choose to engage with the multimedia content in your mobile edition. You can do this by avoiding the overuse of auto-play videos or audio tracks. Not only are these features highly annoying for the reader, but they are a major drain on data.
Advertising should be interactive, unobtrusive, and effective.
There are numerous creative ways for publishers to grow their advertising revenue strategy on mobile. Make sure to explore your options thoroughly to find what will work best within your mobile magazine. The last thing you want to do is drive readers away because of poorly executed advertising. Avoid over the top ads that will disrupt the user experience, or otherwise have a negative impact on your editorial content. Instead opt for banner or interstitial ads, these can be added at the top of the page or intermittently throughout your articles. Sell these spaces to your print advertisers for more exposure, or paste in ad server code from online ad networks like Google AdSense so that Google sells the ad spaces for you.
If you are running native ads (or sponsored articles) in your mobile magazine then make sure that you set a clear line between what is editorial and what is paid content by labeling the latter accordingly. Failing to do so can result in a loss of brand trust.
Keep content fresh.
Unlike your print (or print replica) edition, when you publish your magazine as HTML articles you will quickly realize you now have much more flexibility over how you manage your published content. You can give old magazine articles new life by going back and modifying the content days, weeks, or months after they were originally published. This can include updating the ads and promotions, publishing results of polls, or adding brand new evergreen articles into the issue for improved SEO performance.
Test thoroughly for technical problems.
Load the magazine on mobile devices that range in screen size, operating system, browser preference, and processing power. Use Google’s Mobile Friendly Test tool to see if your mobile edition meets their standards. Loading time should be quick and without any lags, whether using wifi or mobile data. Another thing to look out for when testing is to make sure that your site responds to device-specific commands and gestures, such as Safari’s back swipe on iPhones. Identify any added content that is unsupported on mobile, such as Flash video or license-constrained media, and replace with mobile-friendly options, like HTML5 animations and open source media.
Include customization options.
Reading preferences come in all shapes and sizes. Provide users with a superior mobile experience by letting them maintain a level of control over how content is displayed or organized for them. This can be something as simple as letting readers adjust the text size or font in your articles to allow for accessibility requirements. You can take this one step further by including individualized features like bookmarks, search filters, location settings to display relevant articles or ads, or even custom language options.
Make articles shareable.
Allow readers to easily share issues or individual articles to their social media account or to email them to a friend. You can do this by including mobile-friendly social sharing buttons at the start and end of each article. This can help you boost the discoverability of your content online, as well as improving your SEO performance by increasing the number of backlinks to your mobile site. While you are at it, have a think about how shareable your content is too. Headlines should be concise and and attention grabbing since this is what will display in readers’ social media feeds. Remember, articles which can be shared with an image will be more effective at driving click-throughs than just including a headline.
Give the option to view the replica magazine.
Always give readers an easy route back to the flipbook edition of your magazine so that they can experience it in its replica format. Keep the mobile optimized edition as your default view and include a ‘View as Flipbook’ link in the menu, which will load the same issue you are currently reading in its replica format. Readers should be able to easily and intuitively switch between these different modes without getting lost.
Incorporate mobile-specific functionality.
Mobile devices have features like SMS, GPS, phone, camera, and a range of other functions that simply are not possible on desktop. Have a think about how you can leverage these features in your mobile edition to create a stronger user experience. A really easy way of doing this is by including Call Now, or Get Directions buttons to your ads to drive conversions.
These are the building blocks for a mobile-friendly magazine that engages and delights readers.
If you are a publisher who has yet to optimize your publication for mobile then the good news is that Realview have done all of the heard work for you.
If you are struggling to create multiple versions of your publication for each device or platform then click through to find out how Partica, our new mobile-first digital publishing solution, can help you take on the mobile market and come out on top!