The gadgets we use to access the internet are getting smaller and more powerful.
Take the once-humble cell phone. A 2009 study highlighted by the Mobile Marketing Association found that 64% of respondents had an internet-capable phone. Of those who can get online through their phone, 43% actually do. These numbers represent a growing share of American adults and teens. We used to not be able to get online anywhere but through a computer, but now that we can tap into the internet through our phones, we are doing so -- at increasing rates.
What does this mean for the web world? You need a mobile-friendly version of your site or else when visitors try to access you from a phone, they'll either get frustrated or leave. That's why YouTube rolled a new mobile site this week. Type in YouTube.com on your mobile phone, and you'll see a streamlined version of their site allows you to see top movies, log into your account, and browse the site with just a few taps of your finger. If you don't believe me, check out the screenshot below.

So what are the things to keep in mind when creating a mobile-friendly site?
1. Remember the medium. Laptop screens are most often 12 inches or more and desktop screens are even larger than that. But a mobile phone has a display of just a few hundred pixels. The iPhone screen is 320 pixels wide and 480 pixels high--much smaller than the header graphics most people will put on their sites. The average PDA is even smaller though, closer to 200 pixels by 300 pixels. Try making an image that size in a graphics program. You'll be surprised by how small it really is.
2. Scale down, especially with file sizes. Given the small screen you're working with, you will want to scale down your site. No bells and whistles on a mobile phone please. Not only will it be difficult to cram onto one small screen, but it could be time-consuming and expensive for the end-user as well. To use the internet from a phone, users have to pay their service provider for a data plan, a data plan that is often charged in cents-per-kilobyte downloaded. So strip the site of anything non-essential, particularly with graphics and dynamic elements (e.g. Flash displays). Your users will thank you.
3. Make navigation simple. When you pare down your site for a mobile phone, reduce your site to the main objectives that users would like to accomplish. Make your contact information prominent and, above all, make it easy and painless on a tiny screen and less-than-optimal internet connection. After all, the internet has made us all impatient, and if a task becomes too time-consuming, we will likely just leave (and, if we're geeks, we'll probably blog about it too).
With those tips in mind, consider a tale of two brands that I love: Southwest and the BloodHorse, a horse racing publication. Southwest has dramatically altered its usual web layout to make it easy for me to do what I'd like to do. Plus, since the page is so simple, it's quick-loading. I'm a happy customer.

Unfortunately for the BloodHorse, the opposite is true of their page. There is no effort to accomodate a mobile user, and so the site is illegible without zooming in and out, takes much longer to load, and is full of Flash elements (the little blue boxes) that my phone was unable to render.
So keep it simple and keep it lightweight, and I'll appreciate browsing your site the next time I'm wandering the internet with my trusty phone.
Recently for the last 2-3 years the importance of mobile friendly site has increased tremendously. With so many WAP enabled handsets and people using internet on their mobile the importance of a mobile friendly site has increased.
Thanks
Thanks for the great article indeed. Nowadays the huge part of the traffic which my website are getting goes from mobile users. After developing such miracles of technique like iPhone or new Blackberry, I think even more users will be browsing using their cell phones. So we (website developers) must be concerned about making our website more comfortable for mobile users to browse. I fully agree with all points that you have written in this article. Small weight images, no scrolling and other important parts. Thanks for the great article one more time.
Sincerely,
Brad Toddson from mobile application development
Post new comment