How to Make Your Content Mobile Friendly

Mobile Accounting For Nearly 50% Of Content Consumption

When I think about the work I do these days very little of it actually needs to be done on a “real” computer.

Writing a post like this, creating a PowerPoint deck or maybe editing a video are things that are still best done by me using lots of computing power and a large screen or two.

Just about everything else – managing email, reading blog posts, participating in social media and consuming content in various forms – can be done, sometimes much more conveniently, using a mobile or tablet device.

As these devices become more prevalent and powerful people will adopt them for all but a handful of business and personal tasks.

Content consumption is already headed towards the 50% mark in terms of mobile vs. laptop as the reader of choice. On my site mobile devices account for right at 15% of all traffic today. That’s up over 150% over last year at this time and represents a 16% increase from just last month.

The point is you must package your content in ways that the growing legions of tablet and mobile consumers can enjoy or run the risk of turning this important readership away.

iphone content
Responsive design on iPhone
ipad content
Responsive design redispays theme for the iPad

There are a number of methods to consider in the mobile content display category.

Mobile Plugins

If you are a WordPress user you can add a plugin like WPTouch that makes your content much more consumable on mobile devices, but comes at the cost of very little in terms of design flexibility. In other words, it’s not the best looking option.

Mobile Only Content

You can also find mobile designers here or use a tool like Duda Mobile to recreate your site as a mobile version. This offers design flexibility and even allows you to highlight the most useful content that someone on the go might desire. The downside is this becomes another asset you have to update and maintain.

Mobile App

At one point the holy grail of mobile content was the custom app. Think about it, someone is going to download your app and then have total access to every bit of your content in a variety of interactive and engaging formats. What’s not to love about that? The problem is nobody (or at least not many) wants your app, no matter how much they might like your content. You can however, build your own cross-platform app pretty easily these days with services like Tiggzi.

Responsive Design

The option that is growing in popularity and that embraces the idea that all content should be viewed from one site design is something called responsive design.

Responsive design is design that responds to the viewing environment and adapts layout, orientation and size based on the screen. Design elements, images and text adapt via CSS rather than plugins or add-ons.

This site employs responsive design via a custom child theme on the Genesis framework and I believe the mobile experience and subsequent rise in mobile views, time on site via mobile and decreased mobile bounce rate attest to the value of the enhanced user experience. In my view, this is the approach that most websites should employ today.

Mobile Video

As a bit of a side note I want to add a thought or two about mobile video. With the expansion of 4G LTE video consumption on mobile devices has skyrocketed. A subset of responsive design is responsive video design. Use tools like FitVid or custom CSS to make sure your videos resize to tablet and mobile screens.

Use this mobile emulator from dotMobi to see how your content looks today on a variety of mobile devices and start moving towards making your content mobile friendly now.

Comments

There are 2 Comments. Add Yours.
  1. what about the google add on mobilize?
    i use this on my site
    ok i haven’t got everything correct as i have images for background which gets a bit covered by writing on phone sizes, but seems to do the job

  2. Hi John, thanks for a really helpful article. I could not get the mobile emulator to connect? regards, James.

What do you think? Respond.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>