The mobile web has a history of being a place filled with boring watered-down sites, fairly low in visual diversity and attractiveness.
The iPhone has largely been responsible for changing this trend and causing some truly great mobile sites to emerge. Today we bring you thirty inspirational website designs that have been optimized for viewing on an iPhone.
A simple blog with a nice spiral notebook interface. The header features some fun doodles and the typography utilizes and bright, attractive color scheme.
A site that needs no introduction, Twitter has recently revamped its mobile site to be more consistent with that of the full size pages. Though many will no doubt never give up their dedicated Twitter mobile applications, it’s nice to see that Twitter is still keeping up on both the visual and functional aspect of their site on mobile browsers.
This site is an excellent example of why mobile web design need not be over simplified and boring. Here we see all the aesthetic appeal and functionality of a full-size site merely arranged in a format ideal for a smaller screen.
Web Designer Depot used Mobify to build a simple but attractive version of the blog for mobile visitors. If you’re skeptical about reading blogs on your iPhone, cruise by this site and you’ll be pleasantly surprised at how the integrity of the experience is maintained.
YouTube isn’t the only way to experience video on your iPhone. Blip.tv has a fully functional mobile site that seems to fare quite well on an iPhone.
This site is more typical of what we saw in the early days of iPhone optimized sites with a simple, vertical menu layout containing large tappable areas. They’ve kept it unique though with nice custom graphics.
In the case of this site, I actually like the mobile version a lot better than the full size equivalent. The header graphic really grabs your attention and the images throughout the site take up most of the screen and really highlight the product well.
The Nclud mobile site maintains the branding and aesthetic of the full-size site with a slightly adjusted layout to accommodate the iPhone screen. The mobile version doesn’t require a special URL but instead automatically adjusts the content based on your browser.
This site is advertising an iPhone app for creating presentations. The site’s design incorporates a background that feels like it’s from the iPhone OS UI with the addition of some nice custom icons.
This site features a single page with a scrolling header. It’s nice to see someone bold enough to implement an animated jQuery slider on a mobile site! It works quite well and eliminates the standard necessity of scrolling through a gallery.
This site is a list of consumer complaints and suggestions regarding various aspects of the iPhone. I like the illustrated aesthetic, rounded corners and red/gray color scheme at work here.
Not too much to be impressed by here functionally, just a simple grid-based gallery. However, the site’s dark background and white image borders contrast nicely and make for an attractive page.
Flickr mobile features a great design that closely resembles what you’re used to on the full site. The tabbed navigation works quite well; browsing and using the site easy and enjoyable.
Powerset is a site that is meant to make Wikipedia both more attractive and easier to use. The mobile version of the site works really well and looks great.
m1k3 is visually very similar to Procab above with its dark interface. The large typography on the homepage really steals the show and the bottom navigation is a refreshing break from the norm.
The site is quite attractive but really shines with a few usability features. The text is large and easily readable, links are underlined, and the buttons have been extended horizontally across the screen for easy tapping.
This site features a vertical navigation menu with an accordion effect. Tapping on a category expands that section and reveals its content rather than taking you to another page. The way they showcase their work is really nice and utilizes the limited screen real estate very well.
The top right of this site actually features a dropdown navigation menu! You almost never see this on a mobile site. It’s implemented perfectly here to provide easy and quick access to any portion of the site.
Yet another portfolio site that challenges mobile design trends by providing a layout and navigation area more traditional in full-scale sites.
Another site that surprised me with a dropdown navigation menu. This blog features nice large, easy to read text and feels great on a mobile browser.
This is the only retailer that made the list. The online store is limited in functionality but is very well designed. It utilizes a mix of great photography, good UI elements and deep aquatic colors.
This is a simple but effective mobile portfolio that takes you right into work samples. I like the transparent, rounded corner borders on all the images. The full-size site is really an excellent specimen of design as well and is definitely worth checking out.
This is the single page website of a popular television producer who used to work on Saturday Night Live. The mobile site is very simple but makes great use of texture and color.
I really like the icon-based, tabbed navigation on this site. It’s a little vague, which reduces usability, but it looks great and is a good use of the limited space.
This one is a simple, no frills mobile site design that merely caught my attention because it looks so darn good.
This is another site made with Mobify. This one is a photographer site with a simple and attractive photo gallery.
Can’t get enough Deviant Art? Stop by their mobile site. It looks great and makes it super easy to browse artwork on the go.
If these sites are any indication, the web has a bright future where, Flash aside, neither functionality nor aesthetics must be compromised to optimize sites for mobile devices.
If you know of any great looking iPhone optimized sites, leave a link in the comments below so we can all check it out!