Best Practices for Mobile Optimization of your Blog

Published On April 6, 2010
18 Comments Leave a Comment

Is your website mobile ready?

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.

ESPN Standard Website

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

ESPN Mobile Website

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.

18 replies on “Best Practices for Mobile Optimization of your Blog”

website development Reply

I specified up a WordPress blog site ages ago however it utilized
to obtain a lot of spam on the posts I composed, how do
you navigate that?

Junaid Raza Reply

Great! You have great info about mobile optimization. I think you just need to change your design a little. You don’t need to go to any where else. Because, you might face problems, google is checking your work and you will try to be more efficient, google might see you as spam. Subdomains idea may harm your page rank and google rank as well. I am still not clear about it. If you can help me, please share.

don moores Reply

Great info–here I was chasing around after reading another post and thinking going mobile would be a great contributor to my site – but thanks to you I will study this more and for sure slower to making the move to mobile–thanks

dubai web design Reply

Mobile internet usage in the Middle East and especially in Dubai has taken off, the two biggest mobile operators who are Etisalat and Du have reduced there tariffs for internet browsing which is a relief as charges are around 20 GBP for 200mb for Blackberry Services.

web design abu dhabi Reply

Thanks for the information on getting optimized for a mobile phone. I havent had a chance to really look into going with a mobile optimization for my website, but I will have to once I start getting the ball rolling and get my business all put together. It still is going to take some time, but it is something for sure to consider. I will have to bookmark this and take a look at it later once i get things started in the next few weeks. Thanks again!

Rupiningsih Reply

Hi author, I like your information. May I copy your post and link your page to my blog? thanks alot for your kindness… 😉

best regards
Rupi

Tom Dringer Reply

Thanks some great tips there. I guess using a subdomain gives you the ability to re-dseign the site to be completely mobile friendly so I see what you mean. Cheers

Salvador Reply

Very nice post and something to really think about with the growth of mobile traffic. We are at the moment configuring our site for mobile traffic. Thanks for the tips, take care

Hugo Reply

Hi, thanks for the topic, really complete !
But I must say I don’t totally agree with the idea of making a subdomain for your mobile version of the website.
Why ?
Simply because it’s quite bad for SEO; a website with 2 different URL for the same content can :
1) be considered as duplicate content
2) reduce the page rank of your content.

What do you think ?

Jai Reply

I don’t agree with you on this one. The reason being that Search Engines apply different techniques to differentiate between normal and mobile versions of a website.

Hugo Reply

Hi, I checked out and you’re right, it seems that Google considers mobile subdomains as a good idea.
But, to avoid Duplicate Content, it seems necessary to make a good cleaning of your code and remove some js/flash content.

Thanks for the post ! 🙂

Leave a Reply to itinhay Cancel reply

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