Creating mobile-friendly content for websites

Use these four easy steps to create mobile-friendly website content and design. Photo: Missouri Division of Tourism

HARRISBURG, Pa., October 3, 2013 – In 2012, people spent 63 percent more time accessing websites and apps on their mobile devices than previously, and this number is projected to become even higher. Now more than ever, it’s important to have mobile-friendly content on websites and blogs. Here are the steps to make this happen:

1. Get the facts

Before making a blog mobile, it’s helpful to know how many people access the blog from a mobile device. This can be determined by using Google Analytics. Under the audience section, select Mobile > Overview. The devices page shows what devices visitors to the blog are using. That’s helpful to know, as different devices feature different screen sizes, and what’s accessible on one device may not be on another.

2. Test the site

After gathering essential background information, the next step is to test the blog’s mobile compatibility. This involves viewing and interacting with the blog using a broad range of mobile devices, such as the iPhone, iPad, Droid, etc. Google offers a website designed specifically to help with testing called How to Go Mo.* You can test sites by going to the Mobile Meter page, typing in the website address, and clicking “Test Your Site.” After clicking, Google will show an image of how the website appears on a mobile device. Next, it asks questions about the primary purpose of the site, if the content is readable and more. Based on answers to the questions, Google identifies issues mobile users might have and gives personalized suggestions for making the site more mobile-friendly.

3. Utilize a mobile-optimized theme

SEE RELATED: Using Instagram to promote your business

With a mobile-optimized theme, there is only one website, but an alternate version of the site is shown when visitors access it from a mobile device. WPtouch is an excellent example of a plugin designed to create mobile versions of websites. It works by creating a simplified mobile-optimized template for the content, keeping the more detailed version of the site intact but displaying the simplified version when users access the site on their mobile devices. The installation process for WPtouch is the same as for any WordPress plugin, making it a quick and easy procedure. Another plus? WPtouch is free.

4. Construct a responsive design

With a responsive design, content instantly adjusts to the size of the screen displaying it. This means that the same content could be laid out differently, varying according to the mobile device. With responsive design, certain things are important to keep in mind, such as:

Flexibility is key: Everything about responsive design (the grid, type, photos, etc.) must be flexible. Otherwise, there will be problems.

SEE RELATED: Apps for business-savvy people

Effective responsive design begins with a grid: High quality responsive design projects typically use a fluid grid. Based on the percentages, sites can scale proportionately, or they can be constructed based on a number of grid stops. Fluid breakpoints, which are determined by the overall design as opposed to pre-established stops, are also rising in popularity.

Image size and quality matter: The number of images doesn’t matter nearly as much as the quality of the images. This is especially true for mobile users who have a limited bandwidth anyways. Maintain a balance between quality and load time in order to avoid the unfortunate practice and bad habit** of using ineffective images. Cropping images before uploading them and saving photos at the smallest size possible while still maintaining visual quality, is the best way to ensure that images are responsive.

Videos need to be mobile-friendly, too: Like images that need to be posted with mobile devices in mind, it only makes sense that videos should be mobile-friendly as well. Tools like Fitvid or CustomCSS can ensure that videos are resized to accommodate mobile devices.

Type should be responsive: Line length is a crucial concept in the domain of responsive typography. The screen width should determine how the type is optimized in order to maintain readability. Fifty to seventy-five characters per line might be okay for websites, but on mobile devices, that number declines to 35 to 50 characters per line.

In addition to considering the number of characters on each line, it is also important to keep typeface in mind. Typefaces with dramatic, fancy lettering will be challenging to read on smaller screens. 

Navigation is important: Simple navigation is a crucial part of having a responsively designed site. Also, users who click or tap must be able to navigate. Navigational elements should be designed to be functional at the smallest sizes first. Then, larger sizes can be worked up to by adding more navigation features as needed. 

If users try to access a site that isn’t mobile friendly from their mobile device, they will most likely give up out of frustration. In order to ensure that all users have an optimal viewing experience regardless of what kind of device they use, especially for businesses using websites and blogs as marketing tools to stay at the top of their game, mobile-friendly content isn’t just a possibility any more:  it’s a necessity. 


  *Copy this link: 

  ** See:

This article is the copyrighted property of the writer and Communities @ Written permission must be obtained before reprint in online or print media. REPRINTING TWTC CONTENT WITHOUT PERMISSION AND/OR PAYMENT IS THEFT AND PUNISHABLE BY LAW.

More from Tech Tips in 10 Minutes or Less
blog comments powered by Disqus
Katie Elizabeth

Katie Elizabeth is a freelance blogger, content coordinator and communications grad student. She’s always on the lookout for the latest and greatest social media and tech tactics and thinking about the creative ways in which professionals can actually USE them. 

She’s worked in several different industries, including real estate, sustainability and career development. When she’s not writing or studying, she’s probably on her way to a concert or exploring flea markets and antique stores.


Contact Katie Elizabeth


Please enable pop-ups to use this feature, don't worry you can always turn them off later.

Question of the Day
Photo Galleries
Popular Threads
Powered by Disqus