Web sites that do mobile right

It’s easy to forget that when the iPhone first came out, Apple didn’t have apps. It promoted the development of mobile-friendly Web sites that used JavaScript and other basic Web technologies to provide both content and functionality. As you’ll see in the screenshots later in this article, you can have good mobile Web sites if you design them right. Ironically, apple.com is not at all mobile-friendly — a flaw common to most tech vendors’ sites; IBM.com is a partial exception.

A year later, Apple introduced the App Store, and most people forgot about mobile-friendly Web sites. That’s too bad. There are some great iPhone apps you can use instead of going to popular Web sites — such as the New York Times, NPR, Amazon.com, LinkedIn, and Google Earth — but the truth is that most Web sites don’t come as apps, so mobile users are typically frustrated when visiting them. It was cool to navigate the New York Times site in your hand when the iPhone first came out, but two years later it’s not so satisfying, especially after having used the Times Phone app.

Plus, having an iPhone app does you no good if you have a BlackBerry, Palm Pre, or Android device — and the apps for these other devices are rarely as good as those for the iPhone.

It’s time to rediscover mobile-friendly Web sites, those that automatically deliver a version optimized for the mobile screen found in the iPhone, Android, WebOS, and similar large-screen devices (and yes, with an option to go to the full “desktop” site if you want). The sad truth is that there aren’t many good ones available.

My favorite mobile Web sites are truly optimized for the mobile experience; they do more than reformat the site so that the text falls in a skinnier column and excludes all the navigation and advertising “framing.” Sites like Slashdot.org and Cnet.com offer that kind of basic mobile optimization, but they typically have tiny text and hard-to-use navigation links or — like CNN.com — oversimplify the presentation and navigation options. They’re basically standard Web pages designed for a 320-by-480-pixel screen, and they make you work too hard to get what you want.

Others, like IBM.com and Sears.com, have pretty good UI for mobile usage — except that there’s endless drilling down that makes them a pain to use.

Still, these less-than-successful mobile sites are usually better than their counterpart desktop sites on a mobile device.

Here are some of my favorite mobile-optimized sites, in no particular order. (If you can’t see the example screenshots, go to the original article at InfoWorld.com.) As a user, you’ll enjoy them. As a Web site developer, they should be your models.

The text at this reference site could be a tad bigger, but what’s genius about this site is how it uses show/hide buttons in its articles. This lets you see very quickly the type of information available for whatever you’re looking up, then see just what you want. So you get the whole article, but don’t have to wade through all of it to find what you need. Note that Wikipedia’s home page is not mobile-friendly, but if you go to specific articles from a search engine, those pages are mobile-optimized.

MLB.com: It’s easy to follow your favorite teams on the Major League Baseball mobile site, though the stats are a bit buried. But it’s a much better experience than NFL.com, NBA.com, and NHL.com, all of which are too dense and hard to work with on a mobile screen, or Sports Illustrated’s SI.com, which is complete but a little hard to read and navigate.

The people at the online shopping site have a great iPhone app that makes it really easy to shop. But they also have a great mobile Web site that lets you check your cart and orders, as well as shop. It’s an impressive example of how to simplify a complex site without losing its richness or functionality.

AA.com, Delta.com, and JetBlue.com: These three airline sites all seem to use the same template, except for color schemes. They’re not fancy, but they are good examples of straightforward service sites that let you check your flights, book a flight, or do other basics when on the go.

Many news sites use a disappointing technology called mDog that essentially delivers an RSS-style list and usually strips out graphics. The San Jose Mercury News’ site is more like an iPhone app in that it uses menus and offers functionality like search — plus displays the content — in a very useful way. (Full disclosure: Like most tech-article sites, InfoWorld uses the dreaded mDog as the default for mobile users, but you can get our beta optimized mobile site at infoworldmobile.com, if you’re coming from a modern mobile device. You can compare the two from a desktop browser at the InfoWorld Mobile page.)

WellsFargo.com: Bank of America has a good iPhone and Android app, but its Web site is not mobile-friendly. By contrast, Wells Fargo’s banking site makes it easy to do basic banking from any mobile device — it’s simple but not dumbed-down, and oriented to getting tour transactions done quickly. Wells Fargo also offers an iPhone app, but note the alleged Wells Fargo app in the Android Market is a scam.

Make no mistake: There’s a place for great apps for your favorite mobile device. But any site useful for people on the go really should offer a mobile-friendly version, so you’re not confined to any one mobile platform. Let these examples lead the way.

Don’t forget to be part of the InfoWorld Mobile Patrol: Send in your tips, complaints, news, and ideas to comments@infoworldmobile.com. Thanks!

This article, “Web sites that do mobile right,” was originally published at InfoWorld.com. Follow the latest developments on mobile technology at InfoWorld.com.