How to create mobile friendly content for your website

In today’s age, internet users are turning to their mobile devices as opposed to desktop computers to search the web. Due to the rise in mobile internet use, Google rolled out its mobile-first index in 2018. Mobile-first indexing refers to Google crawling the mobile version of a page, and not the desktop version, in order to determine its ranking. Times are changing and our mobile phones are our number one source for conveniently and quickly searching the web. Because of this, it’s important to create mobile friendly content on your website. It’s important to create content that is optimized for mobile devices.

This article will break down how to create mobile friendly content on your website, tips on how to optimize content that adapts well to mobile platforms, and why this is increasingly important for content marketers to keep in mind.

Why mobile is important

When searching the web, users have the option to view the same content on multiple devices, but users are typically accessing the web through mobile devices, so optimizing your content to be mobile-friendly should be a priority.

Users read content a lot differently on a mobile device than on a desktop. A webpage that is designed to be viewed on a desktop computer will be harder to read from mobile devices.

The screen is smaller, so there is less room for extra content on the page. Users often have to drag the page left or right and zoom in to view and read the context of the page. Visitors will quickly switch to a more mobile-friendly site if they have this kind of experience on a mobile device.

Here are some tips on how to make your website and content mobile friendly:

Responsive design

As previously mentioned, a traditional webpage can be problematic to view on a mobile device. Responsive web design automatically adjusts the layout of a web page to match the size and type of device accessing it, while keeping the website content the same. This helps make sure that the experience is as seamless as possible. Responsive design can also have a positive effect on rankings.

You must build a site knowing that users will access it using different devices and test that experience to make sure that the site is accessible from multiple devices. Google conducted a study and came up with 25 suggests, which were divided into five general categories:

  • Homepage & Site Navigation
  • Site Search
  • Commerce & Conversions
  • Form Entry
  • Usability & Form Factor

As with most designs, it is important to know why users go to your site. Usually, it’s to find information or make a purchase. Customers want to find what they are looking for as quickly and easily as possible.

Test, test, and test some more

Usability testing that focuses on the mobile version of your site will help identify what needs to be changed and how you can change it.

Cascading Style Sheets, or CSS, are used to style and format webpages. You can use CSS to position content and properly scale images and text. You can also use CSS to format the website to make it responsive and change the page layout depending on the type of device that is accessing the site. This helps to make sure that all content is formatted the same on the page while modifying the page layout to maximize the user experience for that given page.

In this example, you can see the way ShareAble for Hires webpage is streamlined to be easily accessible from both the desktop and mobile view.

Desktop view:

ShareAble Desktop compressed
ShareAble Desktop compressed

Mobile view:

Image Source

As you can see, the page size reduces to fit on a mobile screen. The menu headers located at the top of the desktop page are now conveniently located in a dropdown menu in the top right corner of the mobile page. Notice the content remains the same but is now easily accessible for users viewing the page from their mobile device.

Make sure your content is easy to read

Once the user has found the information that they’re looking for, it should also be easy to read. Large blocks of text can be overwhelming, so break up content into small paragraphs and even paragraph indentations to make the text less intimidating.

Don’t be afraid to make use of white space.

White space refers to the space on a page that is not taken up by text or images. This makes the page more visually appealing thus making it easier to find and read what you are looking for.

Use headers and subheaders so that people know what section they are in and what information they should expect to find there.

Use bullet points rather than listing multiple items in a line. This adds white space and makes the content easier to find.

Images are important as they help break up the text into smaller chunks, while also serving as a guide to what information is in the text surrounding the image. It also adds visual interest to your article, making it more appealing to the user.

Make sure your content is easy to find

You want users to be able to find the information that they are looking for on your website quickly and easily. Include dropdown menus that are easily clickable from a mobile device and be sure to group the headers and subcategories of those lists in a logical manner.

It helps to do some A/B testing before publishing to make sure information and categories are where people expect it to be.

AB testing is a test that companies can conduct for their users using two different versions of their website in order to evaluate the data of the overall user experience.

Remember, on mobile devices users navigate through your site with their fingers, so make sure the text is large enough and easily accessible with a fingertip. Consider making your buttons span the width of the page when on mobile to allow for better click-ability.

SmartMove expanding button example

A great example of expanding a button across a screen to make it easier for readers to press can be seen on SmartMove’s mobile blog page:

SmartMove compressed

Image Source

Preview before you publish

The only way to know if your site is usable from a mobile device is to test it. Read through the content putting yourself in the user’s shoes and determine whether the content flows. Then find someone who is not familiar with the site, to test it. This can be beneficial for you to see how a user naturally navigates their way through your site.

As a final step to ensure your website and its content are mobile friendly, use Google’s mobile-friendly test.

google mobile friendly test

Simply input your URL, click test and it will identify whether your website is mobile-friendly. If it isn’t, it will give a list of reasons why, so you are aware of what you need to fix.

Mobile is a must have not a nice to have

The HostingFacts team predicted that in 63.4 percent of mobile users will access the internet in 2019 from their mobile device, so it is imperative that you create mobile friendly content on your website. Follow these few steps to tweak your website content to be mobile friendly, make your site more appealing and easily accessible to your users, and rank better in SERPs.

Emily Banks

This guest blog article was written by Emily Banks. She is a Bay Area Native who got tired of SF’s cold beaches and decided to move to San Diego. She is currently the editor for the human resources section of 365 Business Tips. When she is not typing away on her keyboard, she can be found eating street tacos in the sunshine.