Allthingsdev.com » Mobile Site Design

Great Mobile Testing Website

Jeff Purcell — Sun, 30 Sep 2007 15:53:01 +0000

So I’m reading through Cameron Moll’s book Mobile Web Design, which I love by the way, and came across a few mentions of Ready.mobi. So I thought I would check it out.

Ready.mobi allows you to test your mobile website against common problems and short comings that mobile web users have. Such as page size, display abnormalities and loading time and then gives your page a score from 0 – 5 (5 being the best). Also, while the software is crawling your mobile site, they display some very helpful mobile web design tips. What nice gentlemen.The scan runs several tests to make sure your mobile website is as optimized as possible for all mobile web users. Here’s a list of some of the tests it runs:

MIME types
Character encoding
Pop up windows
Alt texts
Image maps
Specify image sizes
Page title
Use of stylesheets
Stylesheets dependency
Redirection
Default input mode
Page size limit
Large graphics
Caching
External resources
Avoid free text
Structure
Form submit buttons

A visualization module is also provided. So you can see your site loaded in a handful of popular mobile phones.

Ready.mobi is a quick, simple and cheap way to test your mobile website against many different variables we face as web designers.

Tags: mobi, mobile, mobile web design, web design, web standards

Book Review: Mobile Web Design

Jeff Purcell — Sat, 08 Sep 2007 20:02:43 +0000

You’ve probably seen many reviews on Cameron Moll’s book Mobile Web Design around recently. I thought I’d add my own.

I purchased Cameron’s book on Wednesday and have been thumbing through it off and on. I find it extremely enlightening. Not only is the book well written, he provides links to some very informative pages about mobile standards and good mobile design practices. I’ve added quite a few new feeds to my reader after reading this book.

The book is 104 pages long, comes in pdf format and will set you back 19 dollars. This book is well worth the small fee. Cameron has posted a sample of the book(pdf). I suggest taking a gander, you won’t be disappointed.

FYI: If you purchase a copy of the book by September 14th, you’ll be entered into a drawing for an iPhone.

Designing a Mobile Version of Your Website

Jeff Purcell — Sat, 28 Jul 2007 22:44:34 +0000

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.

Tags: mobile, website design, usability, accessibility, mlb