Over the last couple of years, mobile devices have managed to gain mainstream popularity. With iPhone, making mobile Web applications finally usable by broad masses, web design can now be applied to mobile applications as well. In this post we are focusing on designs that are specifically optimized for mobile devices, in particular iPhone.
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).
In the showcase below we present some of the interesting, interactive and beautiful designs that are optimized for the iPhone. You will also learn about some handy tools that will help you optimize your website for the iPhone.
Also consider our previous articles:
- How to Create Your First iPhone Application1
- iPhone Apps Design Mistakes: Over-Blown Visuals2
- 100 (Really) Beautiful iPhone Wallpapers3
1. News / Entertainment
2. Business / Corporate
3. Shopping / E-Commerce
This design doesn’t really meet the expectations from WalMart — however, the design is still in beta. The usability is good, though: it is very easy to search for products and stores. You can also create shopping lists.
4. Portfolio / Blog
5. Education / Content
Last but not least, some words of wisdom…
Tools to design a website for iPhone
There are some libraries and kits available to help you iPhoneize your design.
iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s a perfect tool to see how your web creations will look on iPhone.
- Test iPhone73
A web browser based simulator for quickly testing your iPhone web designs.
- iWebKit74 (Demo75)
iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. Comes with various ready-to-use themes.
- Intersquash77 (Demo78)
Not really a helpful tool for designing, but you can instantly create an iPhone compatible site from your RSS feed url.
For WordPress users: WPtouch transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from an iPhone or iPod touch.
- Jaipho Gallery80 (Demo81)
If your website features a photo gallery, Jaipho will optimize it for iPhone users.
Don’t stop here. Check out these other great tutorials and guidelines.
- iPhone Reference Library82
Apple’s official iPhone reference library for developers. It has everything you need to get started: guidelines, code-examples, tutorials, etc.
- How to build a website for iPhone83
This step-by-step tutorial includes everything you need to do when building a website for iPhone. Instructions for orientation direction also included.
- iPhone Compatible CSS layouts84
Free website layouts which work in all the common web browsers including Safari on the iPhone and iPod touch.
- iPhone Interface Samples85
This includes samples for iPhone interface elements like buttons, fonts, text, design patterns, hacks 6 more.
- iPhoneWebDev Examples86
Very helpful examples for alot of things. Direction change, events, fonts, compression, etc.
- iPhone Application UI Design Patterns87
A showcase of designs optimized for iPhone.
- 1 http://www.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/
- 2 http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
- 3 http://www.smashingmagazine.com/2009/01/06/100-really-beautiful-iphone-wallpapers/
- 4 http://m.sevnthsin.com/iphone
- 5 http://m.sevnthsin.com/iphone
- 6 http://blip.tv/
- 7 http://blip.tv/
- 8 http://m.nbc.com/
- 9 http://m.nbc.com/
- 10 http://zinio.com/iphone
- 11 http://zinio.com/iphone
- 12 http://zinio.com/iphone
- 13 http://www.idean.com/iphone/spin/
- 14 http://www.idean.com/iphone/spin/
- 15 http://iphonetoolbox.com/dailywallpaper/
- 16 http://iphonetoolbox.com/dailywallpaper/
- 17 http://iphone.horoscopes.aol.com/
- 18 http://iphone.horoscopes.aol.com/
- 19 http://iphone.horoscopes.aol.com/
- 20 http://omg.yahoo.com/iphone
- 21 http://omg.yahoo.com/iphone
- 22 http://m.dpto.com.br/
- 23 http://m.dpto.com.br/
- 24 http://mindmediumcreative.com/iphone/
- 25 http://mindmediumcreative.com/iphone/
- 26 http://www.oilandgasdeals.us/iphone/
- 27 http://www.oilandgasdeals.us/iphone/
- 28 http://www.nike.com/nikelab/
- 29 http://www.nike.com/nikelab/
- 30 http://www.procab.ch/iphone/
- 31 http://www.procab.ch/iphone/
- 32 http://www.monterilla.cl/
- 33 http://www.monterilla.cl/
- 34 http://i.viget.com/
- 35 http://i.viget.com/
- 36 http://i.viget.com/
- 37 http://iphone.bataliassociates.com/
- 38 http://iphone.bataliassociates.com/
- 39 http://iphone.readyforiphone.com/
- 40 http://iphone.readyforiphone.com/
- 41 http://elementfusion.com/
- 42 http://elementfusion.com/
- 43 http://www.vw.com/mobile/iphone/
- 44 http://www.vw.com/mobile/iphone/
- 45 http://tornrobes.com/
- 46 http://tornrobes.com/
- 47 http://coosh.com/iphone/
- 48 http://coosh.com/iphone/
- 49 http://walmart.com/iphone
- 50 http://walmart.com/iphone
- 51 http://walmart.com/iphone
- 52 http://blog.worldending.jp/i
- 53 http://blog.worldending.jp/i
- 54 http://www.signalelement.com/iphone
- 55 http://www.signalelement.com/iphone
- 56 http://i.ocs13.com/
- 57 http://i.ocs13.com/
- 58 http://m.mit.edu/
- 59 http://m.mit.edu/
- 60 http://www.101cookbooks.com/iphonerecipes/
- 61 http://www.101cookbooks.com/iphonerecipes/
- 62 http://pleasefixtheiphone.com/
- 63 http://pleasefixtheiphone.com/
- 64 http://www.1881.no/iphone
- 65 http://www.1881.no/iphone
- 66 http://iphone.food.aol.com/
- 67 http://iphone.food.aol.com/
- 68 http://iphone.food.aol.com/
- 69 http://deviantart.com/
- 70 http://deviantart.com/
- 71 http://deviantart.com/
- 72 http://www.marketcircle.com/iphoney/
- 73 http://www.testiphone.com/
- 74 http://iwebkit.net/
- 75 http://demo.iwebkit.net/
- 76 http://code.google.com/p/iui/
- 77 http://www.intersquash.com/
- 78 http://www.intersquash.com/feed/a70c0c00
- 79 http://www.bravenewcode.com/wptouch/
- 80 http://www.jaipho.com/
- 81 http://www.jaiphodemo.info/
- 82 http://www.marketcircle.com/iphoney/
- 83 http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
- 84 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
- 85 http://groupaware.mobi/iphone/
- 86 http://www.iphonewebdev.com/examples/
- 87 http://flyosity.com/application-design/iphone-application-design-patterns.php
- 88 http://www.cssiphone.com