Designing Your Blog for Mobile Readability

Why is considering blog design for multiple devices important? Because according to the latest Pew research report (PDF), 74% percent of the teens in the US access the Internet on their smart phones occasionally, and 34% of them are cell-mostly internet surfers. Although this figure will vary across the world, countries with high cell phone penetration have opened up access to the Internet, which was earlier restricted because of high device costs. And if the current trend is anything to go by, this figure is set to rise in the next few years. How does that impact your business blog and your business blogging practices?

Responsive Blogs

People read blogs to stay updated, know more about products, or as a leisure activity. The thing is, most of these activities are now increasingly done using mobile devices when waiting in a long queue, on airports, train stations, and in coffee shops. To make sure that your business blog provides a good reading experience to the reader, the blog design should respond to the device screen size. You can help your users by doing following:

  • Use a responsive theme for your blog, or
  • Create a separate sub-domain for a mobile site, and
  • Submit a mobile sitemap to search engines

Avoid Horizontal Scrolling

Well this has been advised for a long time for computer screens. Mobile device interfaces are much smaller, and the advice becomes a must-have feature of a responsive blog design.

The smaller interfaces already require readers to scroll down multiple times to read long texts, but as many of you must have already experienced, having to scroll horizontally to read each line is definitely more frustrating. For example, this popular website (, which shares news from the entertainment world is not optimized for mobile devices. It uses the same 3-column layout for a mobile website that it uses for a desktop or laptop.

Designing Your Blog for Mobile Readability image indiatimes compareDesigning Your Blog for Mobile Readability

Although the website is responsive to the size of the device, it crams all the content on the small screen, which makes it difficult to read. The readers then have to focus on one part of the website to zoom in, but the website then manages to display only half the content at a time to the user and the user must scroll horizontally to read or explore other parts of the website. The design also wastes valuable screen real estate with the left-hand sidebar that has no content.

A Better Example

Compare the above site to the Huffington Post website’s mobile version that is designed for mobile devices. The regular website of Huffington Post has a standard 3-column layout. But the mobile version is optimized to fit all the content within the screen size in a single column and you don’t need to scroll horizontally. The mobile website is also much less busy than its regular website designed for larger desktop and laptop screens.

Designing Your Blog for Mobile Readability image huff compareDesigning Your Blog for Mobile Readability

Pagination Over Scrolling

That’s that then, no horizontal scrolling. But what about vertical scrolling, can you address that part? An alternative to vertical scrolling is displaying your blog post content as pages. The content of the page will, of course, have to be dynamically divided according to the interface size. This feature reduces the number of times the user must interact with the interface to move to the next chunk of text.

Information displayed as a page also gives the reader a guide to where the text begins and ends on the screen, along with the page count.

An Easy Solution

Responsive is good. However, certain websites with too many visual elements in the interface, which might look good on a large screen, appear cluttered on small devices. If your business blog is mainly text and you want the readers to go through long articles, it is important to strip your website of all the non-essential elements when viewed on a mobile device.

If you are a WordPress user, you can do this quite easily using the Readability plugin. The plugin provides your readers with an option to view only the content in the browser and strips down all other elements of the web site. Readability apps are available for all mobile devices and browsers, but I believe it is better to provide the service as a publisher rather than have the user install multiple applications on their mobile devices.

Designing Your Blog for Mobile Readability image readabilityDesigning Your Blog for Mobile Readability

The Readability plugin also helps your readers define other reading options such as font size, color, the column width along with an option to choose if they want to view the images in the post.

Designing Your Blog for Mobile Readability image readability optionsDesigning Your Blog for Mobile Readability

You can try all of these options on the RightMix Technologies blog with your mobile device by clicking on Read Now at the beginning or end of a post.

What attributes of websites annoy you most while surfing the web on your mobile device?

More Social articles from Business 2 Community:

See all articles from Business 2 Community

Friend's Activity