Building mobile applications and designing mobile sites are some of the hottest topics in tech in 2009. It’s no secret that the iPhone is the mobile platform with the most momentum in terms of applications – mostly due to the simplicity and usability of its user interface.
Smashing Magazine has put together a showcase of top Web designs optimized for the iPhone. Keep in mind that these are not iPhone apps. These are Web pages designed for the iPhone’s 320×480 screen. Apple sometimes refers to these as iPhone Web Apps. Here’s how Smashing Magazine describe the iPhone-optimized Web sites:
“Though iPhone’s Safari browser is able to render any Website just like you would see it on a desktop browser, the available screen area is much smaller than in common ‘classic’ displays. This poses a new challenge for designers and developers who now can reach millions of users that use mobile Web. Websites that are specifically optimized for the iPhone utilize the screen to the fullest extent, and use less bandwidth (which is necessary, because the connectivity is not always optimal). The iPhone browsing experience is quite different than the regular browsing experience. The buttons and hyperlinks have to be bigger because our fingers are not as sharp as the mouse pointer. Optimizing a website for iPhone is not rocket science. It’s the same HTML, CSS and JavaScript that you already know. The only major difference is the screen size.”
Then Smashing Magazine provides a collection of what its editors consider the best and most usable Web designs optimized for the iPhone screen. It divides them into five categories:
- News/Entertainment
- Business/Corporate
- Shopping/E-Commerce
- Portfolio/Blog
- Education/Content
Each category includes links and screenshots to the top sites in each category. For example, check out the designs below from the MIT mobile site, the NBC mobile site, and the site pleasefixtheiphone.com.
The other thing Smashing Magazine offered was a list of links to tools that can help developers design sites for the iPhone:
Also see the following TechRepublic articles: