Best Practices for Mobile Optimization of your Blog

Over the past few years, mobile Internet consumption has increased at an exponential rate.  A good portion of this can be attributed to the success of smart phone devices like Google’s Android platform, Apple’s iPhone, RIM’s Blackberry, and of course Windows mobile phones.

When phones first became Internet capable, it was common for developers to enable their web pages to work with the WAP browsers. Current smart phones are much more powerful, the browsers work with standards in-line with their larger computer brethren. This has led many developers feel that there is no need to create versions of their websites that work with WAP browsers.

While that may be true, some provisions  should be made to insure that your users will have quick access to your content using the slower Internet connections provided by their phones. Below i have outlined a few tips to make sure your website will satisfy your visitors on their mobile devices.

Create a Mobile Sub-Domain

Creating a mobile version of your website begins with creating a sub-domain of your current site. Most users have become accustomed to appending “m” or “mobile” so that your URL reads m.yoursite.com or mobile.yoursite.com. After creating a sub-domain, you have the choice in how you want your mobile site to work. Either it can be a mirror of your main sites content with a custom CSS file made for mobile browsers or you can choose to make an independent site that has its own content that you feel would benefit mobile users.

Targeting Mobile Browsers

A simple way to a mobile compliant website is to develop a customized CSS file that targets mobile devices. By using the media type declaration on your CSS file. For example adding:

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

will only load the CSS file that you define (mobile.css) when a handheld device is detected. This method may not work on all mobile browsers and devices, but should cover most of them.

Liquid Column Layouts

Like computer monitors, mobile devices are appearing in all different sizes and resolutions. The easiest way around the varying sizes is to use a liquid layout that will adjust to any screen size. One way to accomplish this is to not define content sections by absolute pixels and use percentages instead. This will allow the sections to only be able to take up X% of any given screen size. Another way around this is to not define anything in the CSS file and let the HTML render naturally. Of course this last method may not be visually pleasing, but it is a quick and dirty way towards getting mobile friendly. If you are a WordPress blogger, you can use the last free WordPress theme I made for this purpose :- WordPress Mobile Theme

Trimming the Fat

On the smaller screen, it is important to focus the user on the content they are looking for. On mobile browsers there simply is not enough space for the rich content that could be delivered on big screens. It is a good idea to remove the large pictures, and dozens of links that navigate around your site. What used to be a convenience to navigate around your site becomes a nuisance in its mobile version.

Here are some screen caps of ESPN’s web site in mobile form and standard view from my Android phone.

Even though the browser can render the whole page and all of its interactive elements they are so small that it is nearly useless.

When you move to the mobile version they have decided to go to large navigation tiles that drop down with extra content under them so that user can focus on what they are looking for.

I chose the ESPN website because it is a good example of doing it right. Their standard website is a very rich interactive space filled with current data interactive elements and links to everything about the company.  ESPN’s web developers have done a good job and studying their users and trimming their mobile sites down to what they need. In its mobile form its will take users what they need on the go quickly.

Conclusion

The tips above are a few ways to optimize your mobile website for the growing amount of traffic from smart phones. Of course before beginning work on the mobile version of your website you will want to take a look at the traffic that you are getting. Mobile traffic is a small portion of the Internets total traffic, a little more than 1%, yet it is expected to grow exponentially in the coming years. Now is a good time to look at how your site looks in mobile browsers to ensure future success.

Lawrence Hall, community manager Go-gulf, provides web design and development solutions in Middle East.