3 Ways to Create Mobile-Friendly Content

three-ways-to-create-mobile-friendly-content

[[p]]It&rsquo;s no secret that mobile traffic continues to soar. According to Statista, mobile accounts for [[a href="https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/#:~:text=Mobile%20accounts%20for%20approximately%20half,since%20the%20beginning%20of%202017." target="_blank"]]51.92% of all web traffic[[/a]]&nbsp;and mobile usage typically surpasses desktop use, affecting everything from shopping to communication behaviors.&nbsp;Despite this widespread use of mobile devices, some marketers have yet to optimize their websites, ads and images for mobile success. If your mobile optimization efforts are still lagging behind, here are three ways to ensure you&rsquo;re ready to face a mobile-heavy marketing world.[[/p]]

[[p]]To create mobile-friendly content, you first need to understand how people read content on mobile devices. There are some key differences between desktop reading and mobile reading.[[/p]]

[[p]]The following two viewing patterns have been generally accepted for desktop-based reading based on research trials:[[/p]]

[[p]]1. The &ldquo;[[a href="https://www.creativomedia.com/compelling-copywriting-for-your-mobile-users/" target="_blank"]]golden triangle[[/a]]&rdquo; is a viewing pattern in which viewers primarily look at the upper left corner of a search engine page or website. The principle resulted from eye-tracking studies in which the majority of rapid eye movement covers a triangular pattern.[[/p]]

[[p]]2. The "[[a href="http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/" target="_blank"]]F-shaped pattern[[/a]]" is a more popular reading pattern in which users look at the top, left to right, down, left to right again and then down further. It makes the shape of an &lsquo;F&rsquo; in eye-tracking studies. This pattern does not apply to mobile readers because there&rsquo;s not enough screen space to merit such sweeping vertical and horizontal movements.[[/p]]

[[p]]When it comes to a mobile screen, as the image below shows, users give 68% of their attention to the center and top half of a mobile site and a full 86 % to the upper two-thirds. Anything below this point on the screen is rarely viewed; however, it&rsquo;s best practice to optimize all your content.[[/p]]

[[p]]To make sure that your content has the biggest impact possible, follow these steps:[[/p]]

[[p]][[strong]]1. Headline:[[/strong]] Your headline should be short so that it doesn&rsquo;t take up the majority of the device&rsquo;s screen. CoSchedule suggests that headlines with about 6 words get the highest amount of click-throughs. The Emotional Marketing Value Headline Analyzer also scores shorter headlines (up to 5 words) the highest. You can also test your title&rsquo;s usability on a mobile device with [[a href="http://coschedule.com/headline-analyzer" target="_blank"]]CoSchedule&rsquo;s[[/a]] headline analyzer. We used the analyzer on this blog&rsquo;s headline with the following result:[[/p]]

[[p]]Your mobile headline should also pique the user&rsquo;s interest and give a clear indication of what to expect from your content.[[/p]]

[[p]][[strong]]2. Summary[[/strong]]: Some marketers are big fans of including a summary at the top of their posts. Consider this a TLDR (&ldquo;too long, didn&rsquo;t read&rdquo;) for the top of your content. You can also incorporate a summary-type style into your first paragraph by clearly outlining what the reader will learn from the piece.[[/p]]

[[p]][[strong]]3. Body:[[/strong]] Use &ldquo;chunking&rdquo; to make your mobile content easier to consume. Chunking is the practice of grouping related content into easily digestible &ldquo;chunks,&rdquo; or groups. Below is an example of what mobile sites look like, first without chunking (on the left) and with chunking (on the right).[[/p]]

[[p]]Use the following to chunk your content:[[/p]]

[[ul]]
	[[li]]Images[[/li]]
	[[li]]Styling (italics, bold)[[/li]]
	[[li]]Subheaders[[/li]]
	[[li]]White space[[/li]]
	[[li]]Short paragraphs[[/li]]
	[[li]]Summary[[/li]]
[[/ul]]

[[p]]Additionally, you may want to consider shorter, more precise words in your mobile content. The American Plain Language Action and Information Network has a list of some of the [[a href="http://www.plainlanguage.gov/howto/wordsuggestions/simplewords.cfm" target="_blank"]]words you can simplify[[/a]] in all your content - and not just mobile - such as &ldquo;some&rdquo; instead of &ldquo;a number of&rdquo;, or &ldquo;so&rdquo; instead of &ldquo;consequently&rdquo;.&nbsp; Here&rsquo;s a list of 50 of the most used wordy phrases and their simpler alternatives from [[a href="http://www.dailywritingtips.com/50-plain-language-substitutions-for-wordy-phrases/" target="_blank"]]Daily Writing Tips[[/a]]. The [[a href="http://www.hemingwayapp.com/" target="_blank"]]Hemingway app[[/a]] is a great tool for helping you simplify your content in these ways and more.[[/p]]

[[p]]As we&rsquo;ve seen in the chunked content examples, images are a great way to make your content more &lsquo;readable&rsquo; on mobile devices. Screenshot, graphics, memes and more, add a visual punch to your content that keeps users interested. But there&rsquo;s a catch: your images must be optimized for mobile. Otherwise, they could take up too much real estate or become illegible.[[/p]]

[[p]]Studies show that [[a href="https://www.easel.ly/blog/text-vs-images-which-content-format-effective/" target="_blank"]]mobile users look at images[[/a]] more than they look at text. (Note: KG stands for Knowledge Graph &ndash; the entity results, panels and carousel summary are provided by Google.)[[/p]]

[[p]]This image shows that a user&rsquo;s eye is drawn to images over text. Intent, query, content, relevance, and location are irrelevant to the principle that the human eye is drawn to images. That can be good or bad. It&rsquo;s good if your images add to your argument or make your point; it&rsquo;s bad if they are simply distracting. To achieve the best results, offer your most valuable information directly after an image on both mobile and desktop devices.[[/p]]

[[p]]Load times are one of the biggest deciding factors for users engaging with your content or bouncing back to the search results. You need users to see your content quickly, and slow load times are detrimental to this cause. Here are some tips for ensuring your images load speedily:[[/p]]

[[ul]]
	[[li]][[strong]]Use Compression[[/strong]]: Compression allows you to make your large files smaller without compromising appearance. Tools such as [[a href="https://tinyjpg.com/" target="_blank"]]TinyJPG[[/a]] are ideal for ensuring this is done properly.[[/li]]
	[[li]][[strong]]Try Responsive Resizing Tools[[/strong]]: We&rsquo;ll talk more about site responsiveness later, but if responsive images are on your list, tools like [[a href="https://embed.ly/display" target="_blank"]]embedlyDisplay[[/a]] can help.[[/li]]
	[[li]][[strong]]Create Pre-Optimized Images[[/strong]]: There are many tools available that create pre-optimized images for emails, social media, websites and more. Try a tool like [[a href="http://canva.com/" target="_blank"]]Canva[[/a]] to get started.[[/li]]
[[/ul]]

[[p]]It may seem like an obvious idea, but you should always run your content (including images) through a preview process. Use your mobile device to check and see if you have enough white space to keep content readable. Try to imagine yourself as the end-user. Would you want to read and view most of the content and images on the page? Do the images have a clear purpose?[[/p]]

[[p]]Mobile video consumption rises by [[a href="https://www.insivia.com/28-video-stats-2018/" target="_blank"]]100% each year[[/a]]. And, by 2022, online video content will account for around [[a href="https://biteable.com/blog/video-marketing-statistics/" target="_blank"]]82% of all web traffic[[/a]]. If you want to encourage mobile users to watch your videos, follow these two tips.[[/p]]

[[ol]]
	[[li]][[strong]]Create Readable Text[[/strong]]: First, make sure the text in your videos is readable on mobile devices. Then, make sure you have a transcript of the video for those that prefer to read versus watch. This will also help you increase the SEO value of your page. Many users play videos without the audio. In fact, [[a href="https://instapage.com/blog/closed-captioning-mute-videos" target="_blank"]]85% of video[[/a]] on Facebook is played without sound. Make sure your video makes sense without it.[[/li]]
	[[li]][[strong]]Optimize Your Tech[[/strong]]: By embedding third-party video hosting services like [[a href="http://www.youtube.com/" target="_blank"]]YouTube[[/a]] or [[a href="http://www.vimeo.com/" target="_blank"]]Vimeo[[/a]] on your site, you can ensure bitrates, compression and more have already been optimized. If you choose to host your own video, invest in a paid tool like [[a href="http://www.wistia.com/" target="_blank"]]Wistia[[/a]] or use [[a href="http://www.jwplayer.com/html5/hls/" target="_blank"]]Apple&rsquo;s HTTP Live Streaming[[/a]].[[/li]]
[[/ol]]

[[p]]You might have been thinking we&rsquo;d leave this one out. After all, aren&rsquo;t images and words what constitutes design? The answer is not completely. You&rsquo;ll have to follow some steps on the technical side to make mobile content work.[[/p]]

[[p]]We briefly mentioned it earlier, but what does it really mean? Some marketers incorrectly equate mobile design with responsive design&mdash;but they&rsquo;re not the same. Responsive design should be used across all platforms. It means that as screen sizes change, your content changes to fit within them. See this image (from the Boston Globe website across different platforms) as an example:[[/p]]

[[p]]On desktop, sidebars can be a great way to facilitate the buyer&rsquo;s journey and improve the user experience. On mobile devices, however, they&rsquo;re simply a distraction. It usually gets pushed down to the bottom of the page and is rarely used.[[/p]]

[[p]]So, unless you can create a fancy sidebar like [[a href="http://www.engadget.com/2012/10/10/google-mobile-web-revamp-brings-hidden-sidebar/" target="_blank"]]Google did,[[/a]] it&rsquo;s probably better to remove it altogether for mobile users. See this [[a href="https://www.crazyegg.com/blog/remove-sidebar-increase-profits/" target="_blank"]]CrazyEgg blog[[/a]] for more info.[[/p]]

[[p]]Navigation menus and other elements on your desktop website may also need to meet the same fate. Again, try your site out for yourself and see what&rsquo;s valuable--and what needs to go.[[/p]]

[[p]]Though they haven&rsquo;t been heavily-tested or widely adopted (yet), AMP pages may help you get ahead of the mobile marketing curve. These HTML pages follow a specific format and were developed by Google and its partner brands. These pages get priority in the search results of mobile users for [[a href="http://9to5google.com/2015/11/25/googles-amp-launch-date/" target="_blank"]]certain relevant queries[[/a]].[[/p]]

[[p]]They&rsquo;re extremely fast, and Google is encouraging companies to try them out. To see a demo, use your mobile device and search for something on [[a href="http://g.co/ampdemo" target="_blank"]]g.co/ampdemo[[/a]].[[/p]]

[[p]]As mobile traffic continues to grow, it&rsquo;s our responsibility as marketers to keep up with the trends to provide an excellent user experience, no matter what type of device they may be using.[[/p]]

3 Ways to Create Mobile-Friendly Content

Related Free Video Lessons