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.
DESIGN
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.
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.
Articles Should look Good in Portrait or Landscape Orientation
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 motionlessly.
CONTENT
-
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, estimable 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.
FUNCTIONALITY
-
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 iPhone's. Identify any added content that is unsupported on mobile, such as Flash video or license-constrained media, and replace with mobile-friendly options, like HTML 5 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 discover ability of your content online, as well as improving your SEO performance by increasing the number of back-links 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-through than just including a headline.
-
Give the Option to View the Replica Magazine
Always give readers an easy route back to the flip-book 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 Flip-book’ 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.
If you are a publisher who has yet to optimize your publication for mobile then the good news is that Real-view have done all of the heard work for you.
F & Q PixelMags
No comments:
Post a Comment