(Read in entirety at Search Engine Land – September, 2010)
The 2010 retail holiday season kicks off in just 60 days. If you’re like me, you already sense the Christmas shopping budget is sunk, having to decide not which mobile device to purchase, but how many. Kindles for the kids? New iPhone for the wife? iPad for the family? What about the grandparents? And what about me? Fortunately none of them read my articles so I’m not spoiling anything.
But as visions of sugarplums, smartphones and mobile presents dance in the heads of consumers, retail brands have to focus on their mobile presence these next two months for a serious chance at converting a record number of mobile shoppers into record mobile sales and new customers. Why? The mobile web experience for most major brands is a disaster—and an opportunity for brands who act swiftly.
Whether your mobile shoppers find you by directly typing your URL, or through mobile-search, mobile-display or mobile-social ad pushes, here are 23 specific recommendations to optimize your page performance with mobile shoppers this season.
Interface: Should be clean and most importantly, load quickly. This is the single biggest frustration users experience with today’s mobile web. Even with 3G networks, mobile page download speeds are more akin to the speed of a 56k modem. Yet standard merchant web pages often have dozens of images and bloated HTML that can easily weigh in at over 300 kilobytes per page, with each element adding seconds of incremental latency to page-load times. Mobile shoppers simply find it rude for a site to expect them to wait on 15 or 30+ second page-load times. And for good reason: they are increasingly paying for usage. Merchants who “tax” their customers just for popping into the storefront will quickly lose those customers to competition this season.
Branding: Right now the experience matters more than the appearance. Keep the look consistent with your native site, just simpler. No graphic spacers, flash or fly-out menus.
Navigation: Keep it minimal (your logo and 3-5 most important links). Keep it consistent across all pages.
Search: Box should be prominently placed, results should be relevant and load fast.
Store locator: Link should be prominently placed and functional.
Links: Should be intuitive and clearly labeled for more information. Avoid “click here” anchor text.
Calls to action: Should be clear. Add to cart. Click to call. Share with a friend. Track it all.
URLs: Some merchants outsource their mobile landing pages to a provider. That’s a good idea in many cases. But don’t let those mobile pages live at a subdomain on your provider’s domain. You should brand them on your own domain instead using proxy rewrite rules or other means. And shorten your URLs to under 40 characters. Don’t make users type the page filename (.htm) or the name/value pairs, or directories, or even the subdomain. Your SEO’d keyword URLs may be appropriate to use here (if they’re not too long).
Sharing: Give each page a share button to crowdsource promotion to users. Let them post to Twitter, Facebook, SMS themselves as a reminder or of course, email. Branded and super-short URLs are critical to effective sharing.
Page size: Think dial-up speed in designing these pages. Minimize page retrieval and user bandwidth costs by compressing your mobile pages to under 100 kilobytes, and under 10 kilobytes if possible.
Scrolling: Eliminate need for horizontal scrolling and do not require users to pinch/zoom to use your site. That’s like looking at the world through a keyhole. You are begging shoppers to abandon you.
Titles: Smaller browser sizes mean only the first 45 characters are displayed and the rest is truncated. If your page gets bookmarked by a mobile user, only the first 25 characters are displayed in the bookmark section. Contrary to SEO best practices, you will increase your mobile page usage by leading with your brand, followed by the category or product name. And whatever you do, do not use your keyword-rich SEO titles (remember page-weight, above).
Mobile detection: Use some form of device detection like user-agent, cookie-based or scripts to automatically direct mobile users to appropriately formatted content. Each approach has pros and cons, but is better than doing nothing. While relying on “mobile site” links may be appealing to some, they are as demotivating for mobile users as a Sasquatch hunt. For starters, the mobile user doesn’t know if a mobile site link exists on the site or not. If it does, they don’t know where to hunt for it (the top of the page or bottom?). Worse, to hunt it down, they have to wait two minutes for the home page to load to then conduct painful pinch and zoom exercise to hunt it down. They could have literally searched out another merchant and purchased in that amount of time without having to think. You should however, provide a link back to your traditional site from your mobile page footer for those who want it.
Next click: Admittedly, connecting mobile-friendly landing pages to a mobile-search or display ad is better than not, but… it is seriously disappointing for consumers when their next click drops them into the bowels of your traditional web site—or worse, your home page. Don’t make users re-navigate or re-type information unless you are kissing them goodbye. Make sure the outbound links in your landing page takes users to the appropriate next page, and that it too is mobile friendly.
Images: Brands love using graphics for spacing effects. But each graphic that must be downloaded introduces incremental page load latency. Avoid using for spacing. Try to keep product thumbnails to around 110 px wide. Use alt attributes to help users navigate when the thumbnails are slow loading.
Tables: Avoid using tables in the layout—particularly nested tables. Some devices do not support them.
Error messages: Fat finger URL typos happen frequently. Be gentle on your users. Employ custom 404 or 500 page handling.
Event scripts: Chances are, much of your website interactivity (especially navigation elements) relies on Javascript commands built for a mouse and keyboard. But mobile users are interacting with the screen directly. Such Javascript event handlers will need be upgraded to Touch or Gesture-type handlers, or eliminated to prevent page bloat. Some examples to search your HTML code for: OnKeyDown, OnKeyPress, OnKeyUp, OnMouseDown, OnMouseOut, OnMouseOver, OnMouseUp, OnResize and more.
Forms: Smartphone users are typically typing with their thumbs. Avoid free-text editing as much as possible and instead give them options to select from a menu.
Sizing: Use relative sizing except for images.
HTML: Make as efficient as possible to minimize retrieval time and bandwidth costs. Remove Javascript bloat as above. CSS support is device dependent but smartphones do support it. So ideally use a single external file call, and cache if possible.
Personalization: Use cookies to learn (and remember) which customers use which device and append that information in your CRM. You can then personalize promotions later.
Tracking: Set up custom toll free lines for mobile users to place orders. These can be vary by device as well (iPhone vs Blackberry). Other analytics are important for optimizing the channel going forward, but don’t compromise your URLs to gain them.
In my next post, I’ll explore how to test different mobile landing page creative and use mobile metrics to further optimize results this coming holiday season.
Categories
Submit a Comment