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.

Alex Buga

A simple blog with a nice spiral notebook interface. The header features some fun doodles and the typography utilizes and bright, attractive color scheme.

Alex Buga

Twitter

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.

Twitter

Erskine Design

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.

Erskine Design

Web Designer Depot

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.

Web Designer Depot

Blip.tv

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.

Blip.tv

Mind Medium Creative

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.

Mind Medium Creative<

Procab Studio

Procab has a beautiful site that really shows off their work nicely. The dark grainy background and smooth gradients along with the traditional navigation make no compromises for the mobile environment.

Procab Studio

Coosh

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.

CAPTION

nclud

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.

nclud

Keypoint App

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.

Keypoint

Pixel Umbrella

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.

Pixel Umbrella

Please Fix the iPhone

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.

Please Fix the iPhone<

Nike Lab

This horizontally scrolling site actually felt a lot like I was using Flash on the iPhone. It’s very dynamic and interactive and really provides a rich experience not usually present on a mobile site.

Nike Lab<

iPhone Toolbox

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.

iPhone Toolbox Daily Wallpaper

Flickr Mobile

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.

Flickr Mobile

Powerset

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.

Powerset

m1k3

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.

m1k3

CrossLink Suite

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.

CrossLink Suite

Your Auxiliary

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.

Your Auxiliary

The University of Chicago

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.

The University of Chicago

DesignQuest

Yet another portfolio site that challenges mobile design trends by providing a layout and navigation area more traditional in full-scale sites.

DesignQuest

Information Architects

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.

Information Architects

Marina Yachting

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.

Marina Yachting

M Muller

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.

M Muller<

Federica

This site is fun and cartoony with bright colors great illustrations. The site seems to be about the same in large or mobile view but has been structured to scale exceptionally well for perfect viewing in either format.

Federica

Tanya Ryno

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.

Tanya Ryno

Ars Technica

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.

Ars Technica

Wacom

This one is a simple, no frills mobile site design that merely caught my attention because it looks so darn good.

Wacom

Matt Bango

This is another site made with Mobify. This one is a photographer site with a simple and attractive photo gallery.

]

Matt Bango

Deviant Art

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.

]

Deviant Art

Conclusion

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!