Tips on Building a Mobile Web

2010 is the year of the mobile web.  There seems to be record number of internet retailers converting their website to their mobile/smartphone audience.  Yours truly is engaged in the middle of a mobile web project which will hopefully be revealed soon enough.  Along the way, here are some of the tips I used and examples I've collected amongst some of industry's best practice.  I'm here to share three design tips to help you engage in a better mobile experience for your customers/audience:

1. Keep it simple and make it "Finger Friendly".
Best Example: Hotels.com
Hotels.com's mobile website is probably the best of breed based on my research.  Their user interface is clean and easy to use.  Menus are bold and easy to engage with fingers for touchscreens.  It seems like the project manager for their mobile web really understood their mobile clientele and offered all of their most relevant and important links right up front.  A customer can easily get to "View Reservation" or choose between different "Customer Care" numbers that engages the phone function with ease.  Another tip on "Finger Friendliness", its ususally the text-based hyperlinks where mobile webs run into trouble... don't be afraid to bump up the font size for a much better interaction.

2. Collapsable Menus and Sub-Menus are Mobile Screen's Best Friend.
Best Example: Wikipedia
There is no better way to manage the relationship between giving your audience a good overview while offering the flexibility of viewing details of each section or sub-sections.  For retailers with product descriptions and reviews or media sites with news headlines and stories, Javascript Collapsible menus are the best way to go.  The website that demonstrates this best is WIKIPEDIA.  With so much content, Wikipedia uses this technique to hide & show the information with various sections.  By default, all the sections are collapsed so the viewer can browse its categories and each section can be expanded individually.  Alternatively, some mobile web chooses to take the user to a different page entirely, while its an option, I personally find the collapsible menus more engaging on mobile.  Another tip around menu design is to give as much preview to your audience prior to an engagement (ie. if you are selling something within a category, provide a product count or if you are taking viewers to see customer reviews, provide a review count or ratings average); bottom line is to empower a user's mobile experience by saving them time and guess work.

3. Make sure all of your eCommerce Pages are Mobilized (cover all of your bases)
Many retailers assume that a consumer's mobile experience begins with a visit to their homepage from a mobile browser.  As a basic step, they've setup a simple user-agent detection and redirects a that user to a mobile homepage to begin the mobile experience.  They often forget that a consumer may enter their site using a mobile phone mid-way (ie. Received a marketing email or saw a blog post from their handset).  For me, this is something I'm always conscious of because other hats I wear at work involves other marketing initiatives and I always want to tie everything together harmoniously.  While I was drafting this blog post, I ran three examples and here are the findings; feel free to try this your self on a smartphone:

Product Detail Page:
* UrbanOutfitter (SKU #18151712) - Successfully Rendered this page in Mobile
* BestBuy (SKU #9558089) - Successfully Rendered this page in Mobile
* Sephora (SKU #1283712) - Successfully Rendered this page in Mobile
 Category Page:
* UrbanOutfitter (Men's Top) - Successfully Rendered this page in Mobile
* BestBuy (iPod & MP3) - Successfully Rendered this page in Mobile
* Sephora (Skin Care) - Successfully Rendered this page in Mobile

Bonus Tip:  Keep the Search Box available on each page, preferably on the top of each page.  Mobile users will grow frustrated if search is not readily available on everypage.  Site search is probably your most powerful eCommerce tool, it will prove to be even more powerful on mCommerce.  While you are at it, make sure the mobile search results page (SERP) is optimize for mobile!

Building a mobile website has been fun thus far; being as passionate about mobile experience makes me think about every ecommerce website component in a different light on mobile devices (ie. site search, menus, images, videos, product display, recommendation engines, store locator, etc...).  When in doubt, keep things simple and go to as many websites as you can to gather ideas and best practices.  If you run into a hard time with keeping things simple, rely on your web metrics to tell you what is important to keep for mobile.

Tory Burch Launches Mobile Web with Free Shipping

Tory Burch, the popular women's shoe/fashion designer has just launched a beautiful mobile website fully capable of commerce at m.toryburch.com.  The site is powered by Digby and I was quite pleased with the design, functionality of the site as well as the quality behind the site. 

What I found interesting is the fact that Tory Burch is offering free standard shipping on all mobile web purchase, pretty start strategy to entice customers shopping on the go.

SierraSnowboard Introduces Mobile Site

Sierra Snowboard is probably one of the coolest ecommerce site/community for snowboarders, I've been a big fan and customer for a while now.  They have just introduced a small mobile initiative for their members.  I don't believe it is mobile commerce enabled but since I like them so much, I'm definitely making a plug for them!

To get to their mobile site, you have to type in the following URL into your mobile browser (someday in the future if this site becomes an all out mCommerce site, I hope they enable auto detect mobile user agent): http://www.sierrasnowboard.com/mobile

USPS is the only Mobile Friendly Mailing/Shipping Website

I'm not exactly sure what Fedex and/or UPS is waiting for but I'm pretty tired of not able to track my package easily over my smartphone browser when I visit their website on my iPhone.  On the other hand, the United States Post Office actually has a mobile enabled website allowing me to track my package on the go.  Lets see if I can make this any easier for Fedex or UPS, your tracking number is probably one of the most emailed information in the world; more and more people are accessing their emails from their mobile device; it might make sense to enable your website to allow easier access on a mobile device.

 

Whats your Mobile Internet Data usage?

Lately, it seems like everywhere you look, the topic of unlimited internet usage "cap" seems to pop up and upset the general public either for your smartphone or home broadband. While I find it as much oxymoron calling a plan "unlimited" data with a cap as the next guy, I was curious to find out just exactly how much unlimited data I was using up, the results are not that extreme (approx.):

July: 89MB
June: 76MB
May: 114MB
April: 125MB
March: 63MB

I am using an iPhone 3G with AT&T's $30 unlimited data plan (w/ a 5GB cap). I use my iPhone in the morning and afternoon to get the latest news and check on emails. Occasionally throughout the day, I'd check on emails, weather or directions/maps. I find myself using the mobile internet more when I am out of the house (waiting for an appoint), out of town(business trip) or on vacation. I'm kinda curious to know how many of you actually come close to the 5GB cap because you stream live music via Pandora or listen to MLB broadcast through respective apps. Furthermore, if you are a Palm Pre, Android user, what is your monthly data usage?

Some interesting data I found on the web:
Hong Kong: average 44MB per user (as of April, 2009)
UK Orange: mobile data doubled year over year (as of May, 2009)
Sweden: increase 4.5x year over year (as of Aug, 2009)
Australia: iPhone Browser avg session is 2.07MB vs. 0.30MB (as of Sept, 2008)

OpenTable.com Mobile Experience

OpenTable.com, the popular web-based restaurant reservation service is totally mobile ready. In addition to already having a mobile optimized website (http://m.opentable.com)and a free iPhone application, they are launching an app for your shiny new Palm Pre. This new Palm Pre app can be downloded over air (which is a welcome addition to the currently meager catalog) will also feature GPS/Location based service to tell you the nearest table sourround you. Next time you are hungry, simply pull up your smartphone and give OpenTable.com a shot. For the Android and WinMo guys, stay tuned here to be notified if they will ever release a native mobile app for you!

Chase Mobile Website Brings Great Mobile Experience

On my commute home this afternoon, I was reminded by my iPhone calendar that a Chase Bank credit card payment is near due. I decided to see if I can make my commute more productive and pay for this on the bus. Right after I typed in Chase.com to my mobile Safari, it auto detects the browser user agent and kicked me over to Chase.mobi. When I attempted to login, Chase Bank's routine security feature required an extra step to verify I am truly the account owner since this is a device I had not used previously. Normally on a desktop PC, I'd ask Chase to send me an email on the verification/activation code; in this cause, I wanted an uninterrupted user session, so I elected it SMS to one of my phone numbers on profile. Moments later, iPhone's SMS system promoted the activation code ridden SMS which floats atop of my browser screen. I memorize the 8 digit sequence and plugged it into the browser continuing to pay.

Once logged in, the mobile site is very similar but very stripped down from the desktop experience. You can quickly browse through your accounts (bank, loans or credit cards) and select some basic actions. I went right to the credit card I intend to pay, and selected the "make a payment" link. In the next five steps, I was able to pick the payment amount, payment date and payment source to complete my task. From beginning to finish, it took all about 3 minutes.

Keep in mind that I have already had my profile and payment setup from prior desktop experience, hence the smoothness in this example. I didn't venture off to see if I can update a new payment source or change my phone number through the mobile browser. All in all, I find Chase's mobile attempt very user friendly and will add tremendous value to the overall mobile experience for its customers. For whatever reason, I always find mobile applications in the financial sector extra empowering!

Scottrade Mobile is Here to Serve

In a typical we have asked and vendors have listened fashion, Scottrade has released a mobile trading site which conveniently makes it compatible to all smartphones with a mobile browser. Normally, I'd given preference over a mobile application but in this case, Scottrade has opened itself up to all of its customers with a smartphone browser, it addressed the mobile OS hurdle with one simple solution.

Customers of Scottrade can enjoy the following benefits while accessing m.scottrade.com:
* Stock and ETF screeners
* Market research and news, including commentary, analyst views and a brief market calendar
* Stock quotes and research, including charts, options, fundamentals, insider transactions, earnings
* ETF quotes and research, including news and charts, options, portfolio, expenses and Lipper rankings
* SmartTextTM, which summarizes complex charts and information into plain English that is easy to understand

In general, I love mobile applications or sites from discount brokerage firms; it really empowers everyday Joes with the ability to handle their financial needs on the go. This is the kind of stuff that really enhances total mobile experience.

Google Base/Product Search Goes Mobile

Kind of an interesting timing considering I've been working our company's product feeds to be rolled out today on Google Base for the past months. I come home to check on the news and sees Google taking their product search to mobile platform on iPhone and Android. What else can I say, Google is hands down the leader in Mobile web apps.

Real Time Stock Quotes from Mobile CNBC

Need to check on the stock prices on the go? Want to get real time quotes (not 15-min delayed)? Now you can get NYSE and NASDAQ stock prices on CNBC Mobile Site (http://mobile.cnbc.com). While I've been waiting for the big discount firms to release applications allowing me to stream real time stock prices as well as carry out some basic transactions on the fly, this is the closest to real time quote for a mobile site as I can find. Prior to this, I had to use iPhone Safari to log in to a brokerage account in full version. Glad to see folks at CNBC stepping up.

KBB.com Goes iPhone Friendly

Kelly Blue Book, your most trusted source on automotive resell value, is now ready to serve you, in your pocket. If you think about this, the folks at KBB.com are really progressive bunch. As a kid, when I visited a car dealership with my father, the greasy sales guy would pull out a little pocket book to look up the resale value of our Oldsmobile Cutlass Supreme. Few years later, in high school, I remember accessing Kelly Blue Book's website from home to print out a car's value prior to going to a car dealer to negotiate. Kelly Blue Book people have always strive to bring their services to the consumers utilizing technology. And now, they are bringing their service via mobile technology.

Today, KBB.com is committed to provide their information to you, in your pocket. The only thing is, unlike that greasy sales guy back in 1989, you'd be pulling the numbers out of your pocket via an iPhone/iPod Touch. (No offense to greasy car salesmen everywhere, perhaps you guys will be pulling car data out of your iPhone on the lot, instead of "checking" with a manager in that backroom where I know you were just stuffing your face with another donut).

I visited KBB.com on my iPhone, the first time around it pulled up the normal HTML website on mobile Safari. The folks at KBB asked that I try visiting iPhone.kbb.com if problem persists, but I never had to do that. The second try redirected me to the iPhone-optimized page. Overall, the core functions of what we've come to known for Kelly Blue Book are there, ie. new/used car make, model, trim, pricing and resell value. The site is designed with simplicity in mind and it has achieved that. There is the ability to set my location, however, I am not sure if at this stage, the iPhone-optimized site is taking advantage of that info. Which leads to my feedback: I wish after a vehicle has been searched for, KBB.com can provide 1). nearest dealerships and 2). the inventory of the said vehicle at each dealership. Additionally, the overall design of the iPhone site is not friendly with anyone who's got fat fingers. As you can see from the screenshots provided, the menu buttons are narrow; it gets a little narrower as you go deeper into the sub-menus (of models and trims).

Beyond that, I think KBB.com has made great effort in providing their service to consumers (first the internet, now mobile internet). I always applaud large companies taking their initiatives onto the mobile platform; these companies are the ones more likely to succeed in the new age, because by the time mobile net hits critical mass; they will be the "experts" of such practice. Kudos to Kelly Blue Book.

Mobile Marketing Showcase: Bank of America iPhone App

There is no doubt about the way iPhone and APPLE's app store is going to change the way mobile commerce is going to be in the near future. I am always interested in seeing the big players make their moves in this new territory. Starting with this thread, I will create a new series called 'mobile marketing showcase'.

Bank of America is not holding back any, I saw a paid search ad (Content Targeting, actually) in my GMAIL inbox and it took me to this landing page.

It is nice to see the aggressive move made by BoA to introduce their commitment in mobile banking. I am not a BoA customer, but something like this can easily be viewed as a value add from a financial institution.

NYC Subway MTA Site Goes Mobile

Folks with smartphones are in luck. If you live in New York City or plan to visit the Big Apple soon, leave those paper maps at home. MTA's website is now mobile friendly. Just visit MTA.info with your mobile browser to get all the information you'll need for all MTA services including: Subway system, Long Island Railroad (LIRR), Metro-North Rail, and Bus lines running throughout the 5 boroughs. The MTA mobile website is formatted to give you quick access to maps, schedules and other relevant information. When I signed on this morning, it provided alerts and delay information due to the rain storm we have this morning. This is a great example of a public service taking advantage of emerging technology to provide convenient and cost-efficient services to the public.

Island Def Jam Mobile Website

Island Def Jam Records has teamed up with netomat to launch amobile website allowing fans to stay connceted to artist news, pictures and tour information. Simply by pointing your mobile browser to http://IDJmobile.com and you will be connected to all the information under Island Def Jam's wing. Fans can now follow the latest updates from artists including Mariah Carey, Rihanna, Kanye West, Fall Out Boys, Rick Ross and more right from their mobile phones.

I am always glad to see companies taking a chance with their mobile development and create a mobile platform to anticipate the shift in media. “Island Def Jam is a big believer in mobile. Our partnership with netomat shows our commitment to giving our fans access to the latest content and the best fan community experience whenever they want, on the devices they carry everywhere they go,” said Christian Jorg, Senior Vice President of New Media and Commerce at Island Def Jam.

In today's mobile space, a mobile portal is largely used as an extra channel for branding initiatives. This is no doubt a smart move for IDJ as they've positioned themselves to the core users of multi-media rich smartphones such as the Sidekick, Chocolate or LG Vu. The mobile portal will also include community functions for posting messages and promotions. It will also include a premium service for exclusive mobile content.

Screenshots for IDJmobile.com

BBC's Updates Mobile News Site

BBC has refreshed its Website for mobile today. Giving more dynamic, content-rich information over mobile handsets. They hope to be able to offer more key coverage such as the upcoming Beijing Olympics event. According to this article:
"Research firm Nielsen Mobile said that the BBC's mobile browser service is the most popular mobile site in the UK, attracting 2.7 million unique users per month and seeing year-on-year growth of one million users."

In addition, BBC also announce an iPlayer which allows streaming its programs over WiFi on iPhone and iPod Touch.

The Bookmark that Got Me Started (PDA Friendly Bookmark)

Two years ago, I got my hands on a shiny new Blackberry 7100t and I made sure I signed up for TMobile's slower than dial-up GPRS data plan so I can be truly mobile and surf the web on the go. Because the data connection speed was slower than the claimed 33KB/s, surfing normal websites on that smartphone was as painful as getting a root canal. I set out to find as many PDA-friendly websites that are either formatted for the smaller screen or utilizing the WAP standard. After compiling a short list of websites, I have decided to host it on a website so I can share it with friends and not having to worry about exporting them in the future.

The bookmark ended up having a dozen or so links and many of them were developed for old-school Palm devices. Majority of the news publishers, content providers and ecommerce stores at that time did not have a platform for the small screens.

Today, I have decided to give that old bookmark an update that is long overdue. To my suprise this time around, almost every publisher and vendor I can think of now have a WAP site dedicated to smartphones. Many of them are sharing the same URL strings as the main website (ie. www.USATODAY.com) so that you don't have to point your mobile web browser to a dedicated URL that contains "pda" or "wireless" (ie. wap.USATODAY.com). This, obviously, is a natural progression as the major wireless providers in the U.S. now offer some type of 3G data connection. Even though the need to gather a PDA friendly bookmark is not as important today, here is the most updated BOOKMARK for old times sake.