Questions? Feedback? powered by Olark live chat software

How to Make Your Content Mobile Friendly

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.

How and Why to Make Your Website
Tablet and Mobile Friendly Now

Talk about mobile and tablet usage dominates computer hardware conversations and the implications are one of the hottest topics in marketing right now as well.

photo credit: waferbaby via photopin cc

Website visitors are now consuming content from our sites in a dizzying array of devices, formats and orientations. There was a time when browser compatibility was a designer’s primary concern. Today, designers and site owners need to be increasingly concerned with media compatibility or more to the point, the size and shape of the viewer’s screen.

The use of mobile and tablet devices for browsing has crept past 10% in my stats and my guess is this is undereported as some device detection goes unreported. The number one device is the iPad, with the iPhone a close number two.

Tablets, including Samsung Galaxy, Kindle, Nook and Google’s Nexus 7, as well as the still dominate iPad, are poised to make huge strides in adoption and usage in 2013 and may take usage on some sites into the 25% range.

So, yes, now is the time to get serious about making sure mobile and tablet visitors to your site have a great experience.

The first step might be to get a picture of where your site is currently. Test your site’s mobile readiness here, view your site as it might look on dozens of devices here and check out this great education resource.

Whether you decide to hire someone to do it for you, do it yourself or find a solution in the middle, one term that’s important to understand is media queries. Media queries allow web developers to change the layout of a page based on the media that’s displaying it — whether that means adapting it to fit a smaller screen or just stripping it down to the essentials before it heads to a printer.

The term and concept has been around for years – remember visiting a site that had a print friendly option – that site was using what we call today a theme switcher to change the design based on a media query.

This concept is what drives a great deal of what goes on behind the scenes in device specific design.

Below are some of the options you might explore as you determine the best strategy for adopting mobile and tablet design experiences for your website.

Build it for you

You can simply hire a designer to create a mobile friendly design and then integrate it into your current design. In many ways this is how you might get the most useful, yet most costly design. A good mobile designer should understand that good mobile design is more than simply making everything smaller. The best mobile design starts with understanding intent and delivering the must have content beautifully.

The IAB has a nice directory of mobile site builders and long time player moFuse has a hybrid

Add a Plugin

One very simply fix for WordPress blog sites is to explore a number of plugins that do the heavy lifting of detection and switching and come with mobile themes built in. Plugins such as WPTouch Pro and WPMobile Detector are good options. You might also consider simply adding a mobile theme, such as Mobile Pro as your theme.

Automatic mobilization

There are a growing number of what might be called automatic solution – services that take your current site and automatically create a mobile version. These tools attempt to make sense of the navigation and core content, but also allow for some amount of customization and addition of widgets for things like social sharing, contact forms and eCommerce functions.

Dudamobile works very well and has several large integrations including Google Mobile Ads. bMobilized is another player that includes some great customizations, including a large library of widgets.-

Adopt Responsive Design

Another growing option that is preferred by some is something called Responsive Design. The idea behind this concept is that instead of using mobile sites or themes, the design uses media queries to determine the best way to show the content based on the user’s device. The practice makes use of CSS, fluid grids and flexible images to create one experience responsive to many environments.

WordPress theme makers are quickly creating responsive design themes that can replace the need for mobile and tablet specific tactics. Studio Press has many responsive design themes and the Responsive theme also draws high praise.

For those that want to dive in and learn more about this topic check out Responsive Web Design by Ethan Marcotte, The book explores CSS techniques and design principles, including fluid grids, flexible images, and media queries

If you want to explore fluid grid design in a truly geeky way have a look at Gridpack.

Build Your Own App

Of course one final option that you might explore is the app route. There are a number of tools that make it fairly simple to build your own apps. This assumes that you have content that people will want to visit using your their device’s native operating system rather than the web.

It’s a fun option, but might not be the most useful for many businesses.

However, if you want to explore jQueryMobile is a good place to start and check out drag and drop options such as MyAppBuilder and AppMakr.