Mobile-friendly web design matters more than ever
In recent months, with the release of the new iPhone 3G and other similarly web-oriented mobile devices (see here), organizations have started placing more and more emphasis on creating mobile-friendly versions of their sites.
This has taken on an even greater importance in recent months, with the release of the new iPhone 3G and other similarly web-oriented mobile devices (see here).
Generally speaking, you can use some code to detect what type of device/browser is attempting to access your site and redirect that visitor to a properly formatted version of your site that utilizes a mobile-friendly combination of CSS and HTML.
The most popular means of doing this appears to be via establishing a sub-domain (e.g. m.yoursiteURL.com).
There are many constraints that need to be taken into consideration when designing a mobile-friendly version of your site – I’ll touch on a few of them here briefly.
Smaller Screen Resolutions
This is one of the trickier aspects of designing for mobile devices – different devices have different screen sizes, and thus different resolutions.
A typical web site is designed for the industry-standard screen resolution – 1024×768, whereas some common mobile device resolutions are:
- 128 × 160 pixels
- 176 × 220 pixels
- 240 × 320 pixels
- 320 × 480 pixels (iPhone)
Consider using a single column design, which should work best across the variety of resolutions that your users will use to experience your site.
Bandwidth Limitations
Typically, users who are not near a WiFi hotspot will have frustratingly slow connection speeds.
Therefore, consider limiting the amount of images
on the mobile version of your site.
iPhone-specific Considerations
Tips on optimizing websites for iPhone
How to make an iPhone icon for your site to appear when adding it to the homepage of your iPhone
I’m sure others have lots to add – please give us feedback!
Comments
Great Post
Great post, Dave.
Another thing that makes things hard in the mobile world is the wild variety of screen sizes and web clients/browsers. iPhone has the most advanced one that is, screen size aside, almost identical to the desktop version of Safari (minus Flash). Then there is Opera – a decent, scalable mobile browser, which works on many devices but you have to download it manually on most. The Mobile IE is even buggier and more horrible than its desktop cousin. Plus a slew of home-cooked browsers…
You just wish everybody will carry only iPhones at some point. Well, maybe BlackBerry too, but that’s it. Hehe
Excellent resource for mobile design trends
This article in Smashing Magazine was passed along to me recently, and it does a great job of summarizing a lot of usability considerations, techniques, and more....
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
Designing for smaller screens
Designing for smaller screens is getting to play a bigger role. As you mention the iPhone 3G is becoming more popular, and I've notice a few hits from Android as well as a recent increase over the past year of netbooks. Having a separate style sheet for hand held devices is a good idea if you predict that a site your building will get a lot of traffic via mobile devices.
Good article Dave.
-josh
http://www.hititajans.net
Clever! Thanks, this really inspires me a lot. I hope this presentation comes with a video.web tasarımı I'm looking forward to other brilliant ideas and tips from you.
Post new comment