Take these 4 simple steps to optimize your blog for mobile browsing

[Editor’s Note: May 14 is the Guest Post Exchange, when bloggers in the 2012 WordCount Blogathon are swapping posts with someone else in the challenge. Today, you can read my post on 10 lessons about writing from authors in the 2012 Portland Literary Arts lecture series on Sarah Moon’s  book blog, Clear Eyes, Full Shelves. — MVR]

************

Sarah Moon is a Portland, Ore., writer and communications consultant. She teaches classes on blogging, social media and web writing and design at Pacific Northwest College of Art and works with creative types on web and writing projects. She blogs about books and reading at Clear Eyes, Full Shelves, and co-hosts The Postscript sports and culture podcast. Follow her on Twitter at @SarahSMoon.

I teach classes on blogging and web design at a local college, and when we get to the unit on mobile devices, I have students pull out their internet capable devices to see who uses what. I’ve seen it all: iPhones running various versions of iOS; Android smartphones ranging from old clunkers (like mine) to the latest and greatest; Blackberries, iPads, Nook Colors, Kindle Fires, iPods, you name it. Rarely does someone use a single device — in a class of 10, we’ll often as many as 25 gadgets on the table.

It’s important because today, mobile devices are the fastest growing way people are accessing web content, including reading blogs. As bloggers, you need to think about how your posts appear on these devices — otherwise, you could end up driving readers away.

Here’s what you can to do optimize your blog content for mobile devices:

1. Practice smart design. Before you leap into all the options available for mobilizing your blog, you can follow a few basic design steps to make it easier for mobile readers. These basic tips have the added bonus of making your blog more readable overall:

• Increase the body font for your blog to 14 points, or “14px” in web speak. Not only is this friendly to those of us with less than perfect vision, it reads better on a variety of devices than 12px, which was the old norm.
• Increase the line spacing of your content to 1.5 em (tech speak for a line and a half of white space between lines of text), which makes text much easier on cramped screens than single-spacing.
• Minimize drop-down menus. Sometimes they’re unavoidable, but drop-downs can be a nightmare to navigate on small touchscreens.
• Make sure navigation elements in sidebars, post meta area and top-level navigation are well-spaced so it’s easy for touchscreen users to click on the proper links.
• Remove Flash elements. Flash simply does not play nicely with mobile. Beware: many slideshow embeds still utilize Flash.

2. Consider using responsive themes and templates. “Responsive” is the new buzz word in mobile design, with good reason. These blog design themes scale to whatever screen a blog is viewed on. There are a number of them for self-hosted WordPress blogs, many are premium but there are a few freebies as well. These themes are kind of magical, as you can see content reflow as you adjust a browser’s window size; check out the Dear Author blog for nice example. A huge advantage of these themes over traditional “mobile” or “touch” plugins is that they maintain the integrity of sidebar content such as ads or category navigation. Additionally, mobile plugins can make commenting buggy but they play far nicer with responsive themes.

3. Look at mobile plugin options. If you’re happy with your current theme, you still have  options for making your self-hosted WordPress blog mobile-friendly. Many plugins detect the device your visitors are using to access your blog and display a mobile theme. The most popular is WP Touch, which has a number of options and an app-like look (the Pro version supports iPad). You can also install OnSwipe on your WordPress blog, which turns your blog into a slick, tablet-friendly site when accessed from one of those devices.

Keep in mind that it is absolutely critical to test these plugins on a variety of mobile devices to make sure all of your standard features — particularly comments and other forms — work properly when plugins are running.

4. Make use of what’s already available. Many free blogging platforms have mobile options built into their architecture. Unfortunately, those options aren’t also intuitive or obvious. Here’s what to know about mobile options on some of the most popular platforms:

Blogger. Two times out of three when I visit a blog powered by Blogger from my smartphone or tablet, the mobile template has not been activated. To do that, log onto your blog and then click on the “Design” link. Once this option is turned on, Blogger does the rest.

WordPress.com. If you use WordPress.com, you shouldn’t have to do anything — the mobile option is turned on by default. Should you accidentally unselect this option, WordPress.com provides these great instructions for reactivating your mobile theme. You do, however, have to do a bit of work to make your WordPress.com blog iPad-friendly. When logged into your dashboard, simply click Appearance > iPad and then check the box that turns on an iPad theme when someone visits using that device.

Squarespace. Many of my students love the lesser-known Squarespace for both blogging and websites. I’ve completed several projects on this platform recently, including my own blog for book lovers, and all the new Squarespace template options now reflow the journal — Squarespace speak for “blog” — to fit mobile screens. I’m a beta tester for the next version of Squarespace and the platform will be fully responsive in that release.

TypePad. If you blog on TypePad, you’re in a tough spot, because while it’s possible to customize a mobile template, the platform has no ability to auto-detect when readers are using mobile devices to read content. So, even though there are mobile options on that platform, without code-heavy jerry-rigging, there isn’t a method to ensure that mobile visitors will see the mobile version of your Typepad blog. I suggest that Typepad bloggers pay particular attention to my first tip regarding smart blog design.

Ultimately, you’ve got many decisions to make when it comes to making your blog mobile-friendly. Unfortunately, there is no single best solution for ensuring your blog’s compatibility with mobile browsers, especially considering all the platform-dependent variables.

My best advice is to practice smart design, stay up to date with what’s available on your chosen blogging platform and keep a eye on your visitor statistics so you can implement mobile strategies that best match the devices from which readers access your blog.

How have you redesigned your blog to accommodate smartphones or tablet computers? Let us know by leaving a comment.