How to Optimize Your Mobile Website

Leopard Lady
Having problems trying to implement a mobile version of your site? The use of mobile and other wireless handheld devices for browsing the Internet is on the rise and it's now time to make your website mobile friendly. Keep in mind that specialized optimization is required to make mobile content easily accessible, searchable and easy to use. In this article you will find the guidelines for mobile standards, along with tools and plug-ins available to make your website mobile friendly.

One common question when developing a mobile presence is, "Do I need a .mobi TLD to serve up content for mobile devices?"

The answer is "no"; dot-mobi, the top-level domain for mobile Internet sites, has lived a short and unproductive life. It is generally felt that we will, in the end, be better off without it, as it is getting easier to construct websites for mobile devices without the need to jump through developmental and architectural hoops, or to have to deal with duplicate content issues.

The iPhone, in particular, has significantly changed the way the game is played, and given that it relies on Apple's Safari browser rather than some sort of proprietary mobile platform, it's made .mobi domains unnecessary. Even if you offer a mobile version of your website, an Apple iPhone will pull in the .com website over a .mobi version, assuming a mobile version exists. Currently in beta is Skyfire, a mobile web browser that does pretty much the same thing on Windows mobile devices; transcoding regular websites on-the-fly for delivery to mobile platforms.

I'd also like to point out that a .mobi version of a website is most definitely not the ideal solution where mobile SEO is concerned. A standalone .mobi website splits up traffic and inbound links; doubles the size of the index; can cause search engines to return the wrong page for a given medium (mobile or traditional computer); and can even cause search engine spiders to stop indexing pages of a website because it finds too many copies of the same pages with different URLs. The upshot is that you just don't need two separate websites (one for mobile users, and one for PCs).

Another common question is, "What can I do to improve my website for better mobile functionality?"

The answer to this is to implement a mobile-traditional hybrid. To accomplish this you will use one set of website content pages but at least two sets of CSS; one for PC monitors and one for alternate mobile versions.

This approach is unlike having a second copy of your pages on a .mobi version, which inadvertently becomes duplicate content. Instead, you can construct multiple versions of your site's CSS to accommodate different mobile browsers, with each version automatically rendered properly by its targeted browser. This option eliminates the duplicate content problems and is one of the better practices (if not the best) for mobile website design and is also the most cost-effective solution.

At this point in time it seems the most consistent way to present a handheld or mobile stylesheet is to use the on-page element:

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

This style sheet is recognized by mobile device browsers and used instead of the primary CSS file. The mobile CSS file can reformat the site's content for better usability on a mobile device and can strip out elements of the site that are too large or download-intensive for the average mobile device. The resulting user experience is a fast-loading, simplified version of the same webpage at the same URL, so when it's time to redesign or update the site, it only has to be done once and — presto — the mobile CSS file continues to render the new design in a mobile-friendly format.

For details on the parameters and standards of creating a CSS-driven mobile version of a website, view the W3C CSS Mobile Profile 2.0.

For testing how your pages look on mobile devices, the Opera Mini browser simulator is quite good at presenting most web pages as they would be rendered on mobile browsers; while the emulator also lets you see your site the same way that mobile phone users do, by "emulating" a real mobile phone's Internet browser.

Finding additional tools and information to help you with your mobile implementation is easy, with Google's Webmaster Help Center providing information on the mobile markup languages supported by the Google index, such as XHTML mobile profile (WAP 2.0), WML (WAP 1.2), and cHTML (iMode); as well as information about Google Mobile Sitemaps and more.

Users of the popular WordPress blogging platform have an advantage when it comes to developing mobile offerings due to the various plug-ins that are available for it. Although Wordpress is not natively mobile friendly, Alex King's WordPress Mobile Edition plug-in can optimize your blog to make it easily accessible on mobile devices. This plug-in supports standards, and comments can be submitted via mobile phone. You can also monetize your site using the Admob mobile advertising service using this WordPress plug-in.

One important thing that you have to remember when installing this plug-in is to not just unzip it into the plug-ins directory; you need to copy the "wp-mobile" theme over into the wp-content/themes directory and activate it as well. There is no configuration needed and it will automatically detect your mobile browser so you will see a mobile friendly interface for your blog.

You can also implement the WordPress PDA Plug-in, which enables your blog to be viewable by PDA and iPhone users. It is a really simple plug-in that detects the browser agent and then loads a simple theme on the fly. The plug-in comes with a theme folder that acts like normal theme with all the functionality of typical WordPress themes.

The plug-in doesn't have any advanced options to control, so if you want to customize the mobile display, then you can do it with the theme files. Installation of this plug-in is simple and straightforward: just extract the files into your WordPress plug-ins folder then activate the plug-in in the admin area's plug-in panel.

RSS feeds for mobile devices can also be optimized by using any of several services; including Feedm8, which lets users view your feed on their mobile phones and offers a publisher program through which you can earn money from your RSS feeds; along with Mobispine, a free mobile browser that allows users to search feeds and articles using this service and providing a way for mobile publishers to reach their mobile user base.

However you develop your mobile offerings or the platform you use for them, being careful to remember a few basics and to do your homework will pay big dividends.