Best Practices for Creating Mobile-first Content
Why is Content so Important for Mobile-first Websites?
Mobile screens have smaller viewports than a desktop; you have much less real estate on a mobile screen to showcase your content. For most users, mobile is the primary device to connect to the internet. Mobile readers expect excellent user experience when they visit a website. So, if they can’t view the primary content on loading, and instead have interstitials staring at them, it’s a case of bad user experience. You can expect to lose rankings and customers to your content optimised competitor websites.
How to Create Mobile-first Content
Read on for some best practices to create mobile-first content.
Begin With Your Primary Content
The centre and top half of the screen receive the maximum eye attention. So, you must begin with your primary and most compelling content at the top of the page and above the fold.
Keep Content Concise and Relevant
When it comes to mobiles, less is more. But it doesn’t mean that longer content does not work. The trick is in knowing which piece can be kept short and which needs in-depth treatment. If possible, break one long post into meaningful short ones. Use short sentences and paragraphs.
Use Short and Engaging Headlines
Short and engaging headlines can captivate the reader instantly. Clear and simple headings that tell the reader what exactly they can expect from the content is a great way to get the reader to scroll down further. Use smaller fonts if needed to keep the headings in the above fold.
Use Short and Catchy Titles and Descriptions
Titles and descriptions help to increase click-through rates. Mobile screens may not be able to display the complete text. Keeping the keywords at the beginning of titles can help to display relevant titles and descriptions in mobile search results.
Include Local Information
More than half of local searches are done on mobiles. If your business has a local element, include location keywords in the metadata. This will help to rank your mobile content for local searches. Add contact information like phone and address on every page.
Avoid creating big chunks of text. Break into short paragraphs and use subheadings wherever possible. Using bulleted lists give an impression of organised content and improves readability.
Break Up ‘Wall of Texts’ with Images and Videos
Images and videos work two ways – they add visual appeal and break large blocks of text, and get shared more often. You need to ensure that they are used in supported formats, compressed to reduce loading times and are relevant to the context.
Page Covering Interstitials are a No-no
A very common mistake is interstitials or overlays that cover a page partially or fully. This leads to bad user experience and can lead to high bounce rate.
Pep-up Your CTAs
Avoid using watered-down versions of CTAs designed for desktop websites. Create mobile-first CTAs for mobile-first sites. Use icons and buttons instead of text. Place them in the high thumb activity area of mobile screens. Ensure that your CTAs lead to pages that are able to load on mobiles.
A clean and simple design allows you to load the site fast and draw attention to the content. Keep only those elements that are immediately necessary on page loading. You can use search functions for the rest of the resources. Provide clear navigation and place buttons at comfortable distances.
Optimise for Social Media
Nearly 80 percent of users log in to Social Media on their mobiles. Users expect clearly and prominently placed social share buttons on websites when viewed on mobiles. Ensure that your posts, webpages and other content are easily shareable. Use relevant, concise and informative content. Make content visually attractive with images and videos.
Viewports – The visible area of a webpage on a device. The viewport will be smaller for a mobile screen than a desktop.
Interstitial Ads – Interactive full-screen ads that cover the interface of the site.
CTAs – Call To Action are buttons, on a webpage (usually landing pages) that a user needs to click to take an action.
Examples – Sign up, Subscribe, Learn more.
Metadata – Provides information about other data. Examples – author, created or modified date, file size etc.