Even with a full featured browser, physical size limitations demand a custom interface.  Navigating a desktop site with your finger instead of a mouse is possible(and works quite well).  The main issue comes from the need for speed.  A mobile site can greatly benefit the user experience by decreasing page load times, simplifying navigation menus, and displaying media in an optimized format.

We recently began using WPtouch for our mobile site and it has performed quite well.  The pages load much faster over Edge/3G, the navigation is easily performed with your finger, and the images are resized to fit the smaller screen.  However, we would like to take it to another level and that is why we have begun developing a custom system.

A review of our web site traffic shows that over 10% comes from an Android device.  This is obviously slanted since we report on Android news, but it shows how significant it can be.  Once our mobile site is redesigned and we release an update to our news widget, I think the mobile traffic could account for 25% of the site.

Example Mobile Sites

In order to design a good mobile site, it is important to review what others have already done.  This is a good way to play around with different ideas and look for improvements that can be made.  I did a little search and came up with five mobile sites to look at.

Geek Squad Mobile Site

Geek Squad
http://m.geeksquad.com/

About:  Geek Squad is the computer repair service offered from Best Buy.  Their mobile site allows you to review services offered, check the status of a repair, locate a store, and contact them.  I’ve never used their service, but I worked for CompUSA many years ago.  When customers checked their PCs in for repair, some would call several times a day to check the status.  Allowing customers to view the repair status from their phones is a huge benefit.

I like:

• Large buttons for menu navigation
• Good use of jQuery for animations and to reduce entire page reloads
• Call Us button launches the phone dialer
• Search located at top

Needs improvement:

• Lacking features of full site – blog, promotions, and self-help tools
• iPhone beta branding – site should just be HTML compliant for all smartphone browsers

College Humor Mobile Site

College Humor

http://wap.collegehumor.com/

About:  College Humor is a comedy site that offers content geared towards the university aged demographic.  Their desktop site is media intensive with many original videos.

I like:

• Good backlog of videos in a mobile format
• Images and videos are formatted for mobile screen size
• Simple design – fast load time

Needs improvement:

• Navigation menu is at the bottom of the page
• They offer a custom iPhone site, but nothing for Android
• No Search option

The Onion Mobile Site

The Onion
http://mobile.theonion.com/

About:  The Onion is my favorite, fake news network.  Their site has many features forms of media including articles, video, radio, and a store.

I like:

• Good use of space – many categories fit in a small space
• Radio clips that work with the Android player
• Images formatted to fit the mobile screen

Needs improvement:

• No search feature
• News articles lack paragraph structure – hard to read
• Navigation menu at the bottom of the page
• Lacks much of the content found on the desktop site
• Missing videos

Volkswagen Mobile Site

Volkswagen
http://www.vw.com/mobile/iphone/

About:  Volkswagen is an automobile company based out of Germany.  Their mobile site allows you to get information about their current lineup of vehicles, locate a dealer, and call for emergency help.

I like:

• Call Emergency Assistance launches the dialer
• Find a Dealer page has large numerical buttons for easy touch input
• Large buttons on Our Cars listing
• Nice full screen image gallery with touch controls

Needs improvement:

• Take iPhone out of the URL
• Image gallery needs to be reloaded in landscape mode to see full screen images
• Weird formatting issues – car details page does not load correct in landscape mode

A List Apart Mobile Site

A List Apart
http://m.alistapart.com/

About:  A List Apart is an online magazine for people who make websites.  Topics cover content, culture, and design.  Updates are published twice a month.

I like:

• Simple design – quick load times
• Nice authors detail page
• Top level navigation bar
• Excellent formatting – articles are easy to read

Needs improvement:

• No search option
• Weird formatting issues – images squish text in landscape view