Designing a Mobile Version of Your Website
July 28, 2007 by Jeff Purcell
I’m a baseball fan. Specifically a San Francisco Giants fan. Yes, I know they are horrible this year, but that’s what makes me a real fan…I don’t care if they win or lose. One sentence in to this post and I’m already off topic.
MLB.com has a mobile website that, in my opinion, is one of the best and most useful mobile sites around. Today I’m going to dissect there mobile home page and tell you exactly why I think this site is so great.
First things first. A truly well designed mobile site uses access keys. Access keys allow mobile users to access a link by pressing the corresponding button on their mobile phone. For instance, if you visit the MLB’s mobile site, you’ll notice a number one next to the Scoreboard link. If you were to press the 1 key on your phone, the link would be activated and you would be sent to the Scoreboard page.
Secondly, to design a useful mobile home page, you need to decide what is the most important content on your site that users need access to from a phone. In the instance of MLB.com, it is game schedules and outcomes. The MLB has decided that game schedules and scores are the most important feature of there website and therefore would be accessed most often on their mobile site. Therefore they put the link to there Scoreboard section first along with an access key set to 1.
Another great design tip for mobile website design is to keep it as simple as possible. Not only are mobile phone screens very small, so is their bandwidth. The need to keep the overall design of the page as simple as possible is a necessity. Images, other than logos and content related images, should be avoided. They will slow down load times take up too much of that much needed screen real estate.
Some of the more obvious mobile design tips are:
1. Usability and Accessibility play a major role. Many mobile web users turn off images, styles, javascript, cookies, etc to save on load times and bandwidth usage. Your site will need to function with all of those turned off just as well as with them on.
2. Alt attributes are a must. A large portion of mobile web users, myself included, turn images off. Nothing annoys me more than a mobile site not making use of the alt attribute.
Mobile website design is becoming more of a necessity these days. I hope this helps you the next time you need to design a mobile website.
I’ve actually been working on a mobile version of my blog. I’ll have to keep you in on the dev process
You seem to have forgotten to leave a link to your blog. I’d be very interested in seeing the development of a mobile version.