Not long ago, it was believed that Google would prefer m.sites because they were specially optimized for mobile users, but that’s certainly not the case today. Big G states “Google does not favor any particular URL format as long as they are all accessible to both Googlebot and Googlebot-Mobile.”

The above link mentions the 2 most common misconfigurations: faulty redirects and smartphone-only errors.

Faulty redirects

Google reports it’s a common error for sites that employ user agent detection and redirection to pages on a mobile domain to send users to the wrong URL, such as the home page. Because the user experience is so poor when you don’t deliver the right page, Google advises it’s better to redirect to a desktop page than to an irrelevant page.

Peter McLachlan, chief architect at Mobify cautions that using proxy vendors that rely on device databases contribute to these errors, as these databases are often incomplete, and there is no authority that mandates device manufacturers register with them. With thousands of devices in users’ hands, going responsive is a safer bet for new and fringe devices.

Smartphone-only errors

404 pages are painful, but shutting mobile users out of content that exists on desktop is downright cruel. Common snafus include incorrect handling of Googlebot-Mobile (sending it to the feature phone page instead of smartphone, redirecting to desktop, creating an infinite loop of redirects), and (headsmack) making the smartphone-friendly page itself a 404.

But wait, there’s more…Google hints that you should care about all their recommendations for optimizing the mobile experience.

Unplayable videos

Some video can’t be played on smartphones (cough, Flash on iPhone). Google suggests standard HTML5 tags for video, steering clear of formats that are not supported by all mobile devices.

App download interstitials

It’s tempting to pimp your app to visitors that hit your site from a smartphone, and it can be smart. But when your request is a splash page, or even lightbox overlay, you risk turning visitors (and Google) off.

Some sites use the less disruptive method of showing a banner above or below content. So long as it’s not disruptive to users, Google’s cool with it (and recommends it).

Irrelevant cross-linking

Bad linking will get you in SEO trouble, and mobile offers a new way to mess up. Similar to the redirect issue, a common glitch is when a website allows users to switch from the mobile version to desktop, and vice versa, but points the link at an irrelevant page, like — you got it — the home page. Google crawls links. It’ll catch you if you do this.

Slow loading pages

Just like on desktop, every second counts (though mobile users are reportedly willing to wait longer than the 2 second threshold for desktop, mobile users are often using flakier connections). While redirection can slow down page load, responsive sites can be slow if they’re not optimized. (Heads up: next week we’ll look at 5 ways to ensure your responsive pages are loading lightning quick).

Why Google recommends responsive design on smartphones and tablets

1. A single URL makes your pages easier to link to, share in social networks, email to other users and bookmark with tools like Google Bookmarks for users, and for Google’s algorithms to assign indexing properties to.

2. Google’s goal is to deliver the best quality results to users at all times. User-agent detection and redirection is not foolproof, and can degrade your site’s user experience and increase page load time (though responsive sites, if not optimize for page load speed, can also frustrate users).

3. Googlebot has less work to do when your content lives on one URL. Rather than crawling your site multiple times with different user agents (and at different times), Google can efficiently keep up with your site, and keep indexed content consistent across devices.

Igor Faletski, CEO of Mobify suggests a fourth reason for a one-URL approach — PPC. Google Adwords now treats tablets and desktop as one, leaving smartphones as the only device left in the mobile bucket. One URL is easier to maintain and scale in paid search campaigns.

How dangerous?

To be clear, Google will not penalize you for not using responsive design. You may not even be penalized for doing one or more of the above (there’s a difference between a penalty and just having less ranking power). It’s also important to note Google doesn’t play favorites with responsive sites, it recommends responsive because in some ways it’s better for users and search bots. If you’re not using responsive, maximize your mobile SEO by correcting any misconfigurations your mobile set up may have.

Join Linda Bustos at the Shop.org Merchandising Workshop July 16 for Mobile Commerce: Is Responsive Right for Retail?

The 3 key challenges in delivering successful digital projects survey respondents were identified as:

1. Not enough designers and developers. New and innovative projects that require skilled resources, and capacity to get the job done, and responsibility often falls on the shoulders of an already stretched IT team.
2. An inability to respond fast enough. As with many IT projects, time to market for new digital experiences is hindered by resource and technology constraints.
3. Unsuitable technology. Existing enterprise applications are often not equipped to handle multiple devices, clients and create a consistent customer experience across channels and touchpoints.

Only 25% of IT professionals report they have enough designers and developers, while 16% believe they respond to changes and new devices fast enough, and 25% believe their existing services and systems cannot support mobile demand for scale or performance.

The IT Bottleneck

Extending commerce experience to new touchpoints requires exposure of back-end data and services (such as customer profiles, ERP, CRM, CMS, personalization engines, reviews, etc) can be highly complex. No matter which department beats the drum for moving these projects forward, it’s mostly IT that bears the implementation burden. 80% of companies require direct IT involvement — 51% place the entire effort on IT groups, 29% develop the strategy within a different group (marketing, product, etc) passing implementation on to IT.

Indirect IT involvement is possible – 12% take a “self serve” approach, enabling other groups to design the user experience using APIs, middleware and other system and data access strategies provided by the IT function. The remainder silos each touchpoint with their own development teams, with no coordination across touchpoints.

The preferred approach

Forrester found that “what is” is not what IT pros believe is best. Though most businesses surveyed are not using the self serve method, 66% believe unifying platform capabilities into a consistent set of APIs is the most desirable approach for ecommerce (58% for content management solutions).

The benefits of this approach were cited as:

1. More secure. Access and authentication through just one interface vs. many is far more secure.
2. Easier to use. Complex enterprise systems involve a variety of APIs that can be very different from each other, including their programming language and semantics. Using a unified API smooths over inconsistencies and provides developers with one consistent way to work with multiple applications and data systems.
3. Easier to scale, with increased performance. When well constructed, it’s easier to scale to a variety of modern touchpoints in a functional way.
4. More suitable to integrate. Unified APIs combine resources into a simpler format that can be pushed to new touchpoints from across platforms.

The result is companies using a unified service layer (middleware or API) were twice as confident in their ability to support mobile in terms of scalability and performance, and three times better at delivering mobile apps.

Businesses are not failing at digital projects for lack of strategies and ideas. Improving efficiencies on the IT side can increase the number of successful, on-time deliveries. A unified service layer simplifies the job for designers and developers (and enable IT teams to scale up when needed with less skilled resources), and can empower the business user with self-serve capabilities. Using this approach can help an organization keep pace with and future-proof against with the demands of customer experience on emerging technologies.

Interested in the full report? Access Unified APIs Lead To Success In Digital Customer Experience free.

Click to enlarge infographic

Tweetables

• Consumer data collection is a $3 Billion industry in the US Tweet this

• Acxiom is the largest data broker. It keeps a database of over 500 million consumers worldwide “nearly every US consumer” Tweet this

• Acxiom tracks avg of 1500 data points on each consumer, placing them in one of 7018 socioeconomic data clusters Tweet this

In today’s digital economy, customer experience is the driving force behind revenue generation, customer satisfaction and loyalty.To succeed in customer experience management, your omni-device strategy should be augmented with native capabilities that take into account the preferred content a user is looking to purchase and engage.

Responsive design vs. native monetization

Traditional ecommerce was built around the desktop experience — the mouse, keyboard and web browser with the home page, category menu, product pages, cart and checkout. Today, this experience may be pushed to a variety of mobile devices through adaptive and responsive design, but only a few intelligent systems can differentiate the presentation layer from a contextual user experience.

Content consumption now happens within the context of life, with various sized screens to suit that context. While a responsive approach ensures content can be viewed across devices, native monetization extends the experience you want to deliver, determining what devices make sense for the experience, then layering commerce capabilities to support your business model. (Note: Native monetization is a term typically applied to native advertising, its application is not limited to B2B ad sales, encompassing direct-to-consumer monetization models for digital content as well as baking commerce functionality into digital retail experiences you want to build aside from your website.)

Native monetization and the ‘textbook of the future’

One example of native monetization in action is the ‘textbook of the future,’ a prototype we built using Elastic Path Cortex. The digital textbook experience is best suited for tablets and e-readers, students will never carry a desktop to class, and are toting laptops less and less, making the textbook of the future is a natively tablet experience.

Within the tablet textbook lies a wealth of monetization potential that can match a variety of higher education business models, such as subscription, license, rental or access bundled with tuition. In an app-like way, the content itself can be integrated with commerce capabilities to support in-book transactions with real or virtual currencies and credits.

For example, supplementary video, tutorials, exercises, practice quizzes, study guides and more can be unlocked through microtransactions.

In traditional ecommerce, to access supplementary content, a student would visit the publisher or title’s website, navigate through a catalog of SKUs, add items to cart and complete a checkout funnel, download the purchase to the device (or sync from desktop), and perhaps open in its own application. With native monetization, there is no browser and no SKUs, the cart and checkout are embedded into the content itself. Commerce pieces like profile and payment details, entitlements, order check, order history, cross-sell and upsell, review content, cart management and order processing are layered right into the digital product, and transactions become native to the experience.

Touching content unlocks a cart and checkout overlay. Using touch gestures, the student can drag items to a native cart, with pricing applied based on user’s entitlements (subscription status, available credits, etc).

The customer’s payment information stored in the commerce system is pulled into the textbook, so the student can frictionlessly confirm payment with a swipe, or update payment information from the cart (student in the textbook’s logged in state has already provided account password).

Here it is in action:

How it works

In this example, to make content itself transactionable requires the ability to pull pricing, SKU information, entitlements and the like from other systems, such as an ecommerce engine or subscription system, and merge these capabilities with content from a CMS. While it’s possible to “hardwire” these systems together, it’s not an efficient, inexpensive or scalable approach. It requires specialized skill, a deep knowledge of enterprise architecture, and access to sensitive business systems.

This is one of the IT headaches we aimed to solve when we built Cortex. Cortex is a Business API that acts as a “unified service layer” that spans multiple back-end systems and services, simplifying the “web of chaos” that results from holding data and services in many different places.

Our ‘textbook of the future’ example uses Cortex to embed commerce functionality like discounts, promotions, bundles and personalization from the commerce system into the product, making transaction capability “native” to the experience.

Responsive or native?

It’s not an either-or situation. Responsive design allows content authors to view in real-time how content will be seen across web, mobile and social channels, and there’s a strong case for you to use it. Native monetization is about extending the user experience with embedded commerce, driven by the rapidly expanding technological innovations that are becoming more and more integral to modern life (and business). Are you ready for it?

Elastic Path is pleased to announce our partnership with OpenText, an Enterprise Information Management company to embrace the connection with Responsive Design and Native Monitization. OpenText Web Experience Management helps content authors to deliver compelling experiences across web, mobile and social channels using an adaptive design model.

It’s not completely about OS (device) share. You must also consider app share, time share and revenue share — and realize the landscape is shifting month to month.

Device share

Android’s currently owns device share thanks to the wide range of manufacturers that run the OS, though its share has shrunk from its 54% peak in October to 52% in April (whilst Apple increased from 34% to 39% in the same time span).

According to IDC, 70% of smartphone shipments were Android in Q4 2012.

It’s unlikely that Apple will close the gap on Android, especially with lower-priced devices in the Droid camp. Though iPad currently leads tablets, that position may also change.

App share

Android users download 2.5 billion apps per month from Google Play alone, 25% more than iOS’ 2 billion.

Canalys reports that Android bit 51% of the app download pie, Apple only 40% in Q1 2013.

Time share

Both Experian and Flurry report that users spend more time on Apple devices than Droid.

Experian reports iPhone users spend an average of 26 more minutes per day with their device than Android owners. Android users spend more time talking and Web surfing, and Apple users spend more time texting, emailing, taking photos and social networking.

The question is do Apple or Android users spend more time in commercial apps like retail or games vs. utility and social networking?

Revenue share

Apple’s App Store currently drives more revenue than Google Play. This may be due to its greater selection of apps, iOS user behavior (more time spent with monetized apps), or be skewed by heavier iPad use.

The iOS App Store’s top 200 grossing applications earned $5.1 million in revenue per day in April, 4.6 times higher than Google Play.

One example of the spread between platforms is Electronic Arts’ The Simpsons: Tapped Out, which earned a total of $4.8 million in April. 79% of that bounty came from iOS, the remaining 21% from Android.

Nevertheless, Google Play has made revenue share gains, rising from 19% to 27% in just 6 months. Android’s not out of the game.

Should you have an Apple or Android app?

In a perfect world, you serve all possible consumers (including Blackberry and Windows 8). You *should* develop for both Apple and Android. That is, if you believe you need an app at all (you could alternatively double down on HTML5).

If resources are constrained, developing for Apple first, or Apple only has a few benefits:

1. It’s simpler to develop for iOS because there’s less hardware models and OS versions to test for and maintain than Android’s fragmented ecosystem.

2. Apple owners appear to use apps more than Android owners (highly speculative).

3. Apple leads in revenue, suggesting Apple users are more spend-happy.

4. Customers expect an Apple app, Droid users are used to less app options for their devices.

However, this strategy is not future proof. Android’s continuing to blow up.

If resources are tight that you can’t develop for both, take a serious look at HTML5. Applying all your resources to a solution that can serve all mobile users is worth the sacrifice of a few features that native may offer that HTML5 doesn’t (yet).

Tweetables

• The estimated number of Internet users in the Middle East is 90 million Tweet this

• Only 15% of Middle Eastern businesses have an online presence Tweet this

• B2B ecommerce sales in MENA (Middle East/N Africa) to reach est. $15B in 2105 vs. $9B in 2012 Tweet this

• The value of mcommerce in Middle East/N Africa could reach $4.9B US by 2015 Tweet this

• 52% of shoppers over the age of 26 in Middle East/N Africa shop online Tweet this

• 31% of Middle East/N African shoppers under the age of 16 shop online Tweet this

• 68% of online shoppers in Middle East/N Africa are male Tweet this

• 70-80% of online purchases in the Middle East are paid by COD, 30% paid online Tweet this

• 47% of e-shoppers in the Middle East use prepaid cards vs 30% credit or bank transfer, 28% COD, 27% paypal Tweet this

• 33% of Internet users in the Middle East regularly use the Internet to purchase or research products Tweet this

• The 3 most popular online shopping categories in the Middle East: Online games (41%), computer software (31%), Electronics (28%) Tweet this

1. Turn off autocorrect and auto-capitalize on form fields

Autocorrect and auto-capitalize are very helpful on touch screen devices for texting and composing email, but can be very problematic when filling in forms. Email addresses and user names are rarely autocorrectible the first time you input them into your device, and names and addresses can be auto-incorrected without the user noticing. Auto-capitalize is also problematic for user names but the most problematic for password entry, which often is masked to the user, who can’t figure out why her input keeps failing with every try. Make sure to turn them off using autocapitalize=”off” and autocorrect=”off” for the appropriate fields.

2. Use native UI elements

Instead of trying to push a desktop element like a drop-down menu into a responsive design, use a simple media query to substitute native UI elements that are already optimized for mobile. Ideeli uses native selection menus with larger touch targets using this tactic.

3. Remove broken hovers

Hovers don’t always work on tablets, and can behave wonky even when they do — hello accidental activation! It’s recommended hovers be turned off, with the information contained behind them included somewhere on the page.

When viewing the lululemon site on a desktop, users see a quick view button hovering on a product. Clicking that quick view opens up the product in a modal. Since the hover paradigm does not work on touch devices, a tablet user bypasses the quick view and navigates to the product page instead. For example, Lululemon links directly to product pages from category pages, nixing the Quick View feature.

Lots more tips in the Tablet Web Design Best Practice Guide, check it out!

Shrunken email creative might survive users’ mobile habits if only they would view the same messages across devices. But research shows only 3% do (in retail, it’s 2%). Don’t bank on users forgiving your unoptimized content and marking it for later viewing. You get one shot. What’s worse, 1/3 of users will unsubscribe from your list if they can’t read your messages on their small screens.

What is responsive email design?

Responsive email identifies a device’s screen or display size using the @media query and serves the appropriate layout determined by the designer. The most common “breakpoint” is 480 pixels (iPhone specs), but any breakpoint can be set to target various screen sizes including tablets and phablets.

Unlike scalable design which scales 100% table widths down to any screen size, responsive allows room for a designer to modify, hide, stack, add or expand/collapse content to optimize usability for narrow screens. While scalable design is certainly easier to code and is likely to “work” on all devices, usability can suffer when layout and design elements are not designed from the smallest screen up. Scalable’s best for text-based emails without many graphics (i.e. not retail email!) Responsive doesn’t require desktop layout to conform to narrow-width best practices, offering the most flexibility and control over merchandising and content.

Unfortunately, responsive isn’t foolproof. Some email clients like Gmail and Outlook strip out CSS style sheets and don’t support @media queries. It’s reported that users prefer to sync these accounts through a phone’s native email application (which does support @media) which will render the responsive version properly, but Gmail’s native app, for example, does not.

Best practice is to plan for failure by using flexible grid and fixed-width layout in your HTML template, and to test known problematic clients.

Tips for responsive email design

Layout / template

1. Use a “mobile first” approach. Generally, beginning with the mobile experience and working up to desktop is much easier than trying to retrofit desktop content. That said, there are no rules that your desktop and mobile creative have to contain the same content or mirror design, so don’t feel you must constrain your desktop design to what is contained in your mobile version.

2. Simplify navigation. Be brave enough to let go of the idea that your email template needs a category menu. Users don’t treat emails like websites, they scan the content and decide if there’s anything worthy to click. Category menus, though ubiquitous, are often unnecessary. Go ahead and check your email analytics. What percentage clicks on your category menu vs. your merchandising zones? Exactly.

Crocs tested a responsive version which included a bold strip-down of its menu.

Responsive did beat both desktop and static versions in revenue and AOV, though clicks were consistent. Removing navigation links did not hurt metrics.

Also consider removing unnecessary links like social sharing buttons in headers and footers.

3. Get stack-happy Rather than scale down images, transform horizontal assortments into vertical at the 480px breakpoint. The Crocs example above illustrates this.

Two- and three-column layouts can also be stacked into one. Though RueLaLa is praised for its responsive website, its email is not.

Style

4. Use a readable font This doesn’t just mean sans-serif. Use a minimum of 13 pixels (iPhone’s minimum font size), as smaller fonts get scaled up by the device and can affect your layout.

Watch out for bold, capitalized words. They’re harder to read in smaller font on smaller screens, especially when they’re white-on-black, as in Sephora’s calls-to-action above.

The example below illustrates the challenge with script and fat fonts, and low contrast between images and text.

5. Use high contrast Always recommended for Web, but all the more important on mobile devices which are not only tiny, but often used in lower-light conditions. Don’t do this if you can help it!

Content

6. Lead with the important stuff. Ask yourself if the customer can digest your most important messaging without scrolling, and does it compel them to scroll or click through?

7. Hide unnecessary pre-header and footer content. Unless you’re obligated for legal or branding reasons, consider nixing extra text that push down your most important content. Hint: kill the “mobile friendly version” link, you’re responsive, baby!

8. Rethink your merchandising. If your emails are typically jam-packed full of products and offers, consider stripping them down for mobile users. Remember, your desktop assortment doesn’t have to match mobile. Think of user context and what’s optimal within that.

9. Use text messaging. Not that kind of text messaging! Use text-based messaging instead of images for your main “hook” content for clients that are images-off by default.

This email gets the point across. A strong hook will motivate the customer to turn images on, or just click right on through.

10. Design for images off Avoid the white screen of death.

The above is from an Internet Retailer top 5 company! This link points to information on designing for images off.

11. Modify images You’re not forced to scale down images with the responsive approach. In fact, many images lose their context as they shrink. Consider cropping or swapping images, or even removing them completely.

12. Optimize image size Page load speed is important for Web, even more important for mobile devices connecting to flaky Starbucks wi-fi.

13. Sharpen your image High density retina display requires higher resolution images to appear sharp.

14. Replace animated GIFs with static images That’s GIF (like the peanut butter). Won’t work on mobile, so pick the still shot you want!

Calls to action

15. Use large tap targets. School yourself on designing for touch screens. To start, links and buttons should be a minimum of 44 x 44 pixels, according to Apple guidelines.

16. Embrace white space. White space is your friend. The most common design mistake I see on mobile are link targets too.close.together.

17. Make the button bigger! Yup. Within reason.

18. Fold ‘em. Pay attention to placement of call to action, remembering the fold depends on whether the device is in portrait or landscape mode. This doesn’t mean you should have a call to action as high as possible to accommodate landscape users. But content that appears above both folds should be enticing enough to lead to a strong call to action with minimal thumb action.

19. Make them proximal to content. Every link is in essence a call-to-action. Product links should be close enough to their corresponding images for users to know what they’re clicking. Ditto for any type of link/button in your message.

20. Make links look like links. Sound like Web usability kindergarten? It’s still important, especially since modern designs style links as colored text without underlining (see Sephora example above).

21. Optimize CTAs for images off. Buttons are images, too.

22. Use click-to-call when appropriate. What’s narrower than 480 pixels is probably a mobile device. This is user context handed to you on a silver platter, so use it when it makes sense.

23. Link to mobile friendly landing pages. Don’t drop the ball on your website!

24. Copy promo codes. Auto-applying a discount code for email referrals is boss for mobile users who have a harder time toggling between open tabs and applications.

Better yet, inform the customer that it will be auto-applied.

Is it worth the effort?

Responsive does carry a higher cost in time, effort and resources than its alternatives, but as mobile opens top 50% (check your analytics to see where you stand), it’s too costly to disappoint your email subscribers with an unusable experience. It’s also much cheaper and quicker to apply responsive to and test a single email campaign than it is to undergo a responsive website overhaul. If you’re considering applying responsive to your website, starting with an email campaign can help build the case for the whole shebang. Finally, if you are responsive, don’t forget email (like RueLaLa), it’s just as important.

A friendly reminder I’ll be speaking on Mobile Commerce: Is Responsive Right for Retail? at the Shop.org Merchandising Workshop in Huntington Beach, July 16. If you’re headed that way, please say hello.

With only 25% of companies observed sending mobile-friendly email, and 73% of US mobile users checking email on their devices daily, sub-optimal email experience should keep many a marketer up at night.

Click to enlarge

Tweetables

• 43% of emails are read over mobile devices, expected to top 50% by end of 2013 Tweet this

• 73% of Americans check email on their smartphone daily, 62% in UK, 57% in Australia Tweet this

• 43% of mobile email users check email 4+ times/day vs. 29% that don’t use mobile email Tweet this

• iPhone leads all email clients for email opens (yes, even desktop) with 23% (Outlook 19%, Gmail 4%) Tweet this

• Only 3% of email users view a single email on both mobile and desktop. The other 97% are read only once. Optimize for mobile! Tweet this

• Mobile is the preferred device for checking email on the weekend Tweet this

• 38% of mobile users open emails based on interesting subject lines, 23% to pass time Tweet this

• Top 3 preferred email messages: special offers (27%), promo/voucher (21%), order tracking/delivery info (21%) Tweet this

• 75% of companies do not create mobile friendly email Tweet this

• If you can believe it, there are more iPhones sold per year than babies born. Luke W illustrates this crazy fact and hopes you’ve got your multi-device strategy in order.

• Baymard Institute has put out a pretty phenomenal guide to mobile commerce design, and shares a tip on their blog about the importance of very distinct hit areas for touch screens.

• Definitely one of the most interesting subject lines and a darn good article too, check out KISSmetrics’ 3 Reasons Batman is Better Than Superman & How it Can Improve Your Conversion Rates

• This month, Google unveiled a new way for brands to advertise using a “channel gadget” that supports in-video shopping, directing viewers where to buy through certain product videos like Unilever’s Tresemme shampoo, one of it’s pilot brands.

• Business Insider has an insightful look at 3 traits of Chinese online shoppers that differentiate them from Western consumers.

• Speaking of the Chinese market, MarketingExperiments ran an A/B test on imagery and clear calls to action. The test resulted in a 62% uplift across geographies in aggregate, but a staggering 433% improvement on the Chinese version of SAP.com.

• If you sell SaaS products, your conversion Nirvana is an upgrade. KISSmetrics discusses SaaS Pricing: Features that Make People Upgrade.

• Another entry from KISSmetrics (have you subscribed to this blog yet??): How to excel at the subscription economy.

• We interviewed conversion optimizer Chris Goward this month and he concurred that carousels generally suck on websites. Econsultancy has 3 ideas that convert better than standard carousels.

• And if this isn’t enough content for you, Conversion XL has rounded up 13 fascinating posts on pricing strategies. Enjoy!