Mobile commerce has arrived in a big way, and many online merchants are already mobile-ready for the next shopping season. Suffice it to say, the numbers are staggering. Meanwhile, here you sit on the sidelines with a site that can't keep up with the race. What can you do to make your site mobile-ready?
How about this for a place to start?
- Make sure your site uses compliant standards-based code.
- Optimize your site for mobile browsers.
- Develop (or acquire) device-specific wireless applications.
If you're wondering,"Why can't a smartphone just shrink down my site and use it 'as is'?," go read this and come back when you're done.
Optimizing Your Site for Mobile Browsers
Most cross-browser compatibility issues can be avoided by writing compliant, standards-based code. This is the first step to ensure that your site will, at the very least, come up on a smartphone. You can validate your site for free using the World Wide Web Consortium (W3C) Markup Validation Service.
According to the W3C guidelines for Mobile Web Best Practices, developers should "keep it small" and "use the network sparingly," because bandwidth costs money. They should think of users "on the go" by limiting content to what the user requests, and dividing pages into usable, but limited portions. They should stay away from "known hazards" such as pop-ups, nested tables, tables used for layout, graphics used for spacing, frames, and image maps. Developers are further advised to not use pixel measures or absolute units in markup language attribute values and style sheet properties.
What About Adobe Flash?
In the beginning there was little support for Flash, which left YouTube and other Flash-intensive sites out of the picture. Now all major vendors (with the exception of Apple) have added support for Flash 10.1.
What About Screen Resolution?
Many sites have a CSS layout that is 980px wide, although some smartphones expect the layout to be 800px wide, or 960px wide, or even 854px wide. (Take a look at the table below, and you will see the problem.)
To complicate matters, not all pixels are created equal. Some smartphones equate 1.5 hardware pixels to each CSS pixel, which is why you should use a liquid—rather than fixed—layout.
The difference in dimension and proportion can cause unexpected results when zooming around with a mobile browser. The ability to go in for a product close-up and come back out again is especially important for e-commerce sites. It's no wonder that Apple doubled the pixel density of its display with the release of the iPhone 4.
Matt Brubeck of the Firefox Mobile development team, advises developers to "remember that not all mobile devices are the same width," and that "you should also make sure that your pages work well in landscape mode, and on larger devices such as the iPad and Android tablets."
Testing Your Site
You should use device emulators to test your site on as many different devices as possible. Fortunately, most manufacturers provide emulation software so you can test your code without buying the device. Ideally, you should test on actual devices, as well as on emulators.
Changing Device Defaults
After you determine the best settings, use the viewport Meta tag to override the default height, width, and initial scale parameters. It goes in the Header section along with the other Meta tags, and kicks in whenever a mobile device is present.
Now, if all this sounds a little too technical, you might prefer an "off the shelf" solution.
Mobile-Optimized Browsers (WAPs)
Mobile-optimized browsers are called WAPs (Wireless Application Protocol) and are written in WML (Wireless Markup Language). Just as a site can "sniff out" a browser, it can also detect the presence of a mobile device and redirect a visitor to the appropriate WAP.
- 3dCart offers its customers a mobile-optimized template which supports the iPhone and Android at no additional charge. For an additional $399, they will create a customized skin that is branded for your store.
- Magento introduced one of the first WAPs for the iPhone in 2008. Their iPhone Optimized Theme is offered free of charge under an open-source license, and can be added to any store running version 1.3 or higher on the Magento platform.
Tim Schulz, Senior Project Manager at Magento, recommends that for a comprehensive mobile strategy, merchants should invest in both mobile-optimized browsers and native applications.
Native Applications
A native application is written for a specific device and can take advantage of special features, such as GPS for a store locator. Unlike WAPs which operate at the browser level, native apps can be downloaded directly to the device from the app store of your choice. Wouldn't it be cool to have a link on your site that says, "Click here to download our
Magento Mobile is "the world's first mobile commerce platform," with native apps for the iPhone, Android, and iPad. Of two pricing models offered, the first is by subscription for $699 per year, plus an initial $799 setup fee (per native app, per store). The second scenario allows you to purchase the source code license for $6999 per native app.
If you were to hire a developer to create the equivalent custom app for each mobile device, the cost would be prohibitive for any, but the larger online merchants.
In a Forbes interview with Brandon Gutman of Brand Approved, Andrew Kovin, president of e-commerce and customer experience at Steve Madden, offered this advice:
"… my peers should expect to spend at least $100,000 on the development of a scalable mobile presence. Don't underestimate your organization's need to make an ongoing commitment to mobile. It's a game changer, not a passing phase."
He went on to recommend that online merchants:
- Optimize their sites for mobile browsers
- Determine which devices their customers use
- Invest in the development of device-specific applications
If you combine Andrew Kovin's list with the one at the beginning of this article, you have the beginning of a mobile strategy:
- Make sure your site uses compliant standards-based code
- Optimize your site for mobile browsers
- Determine the devices your customers use
- Develop (or acquire) the native apps your customers will use
If, according to the PCI Compliance tables, you're a Level 2 or Level 1 merchant with 1 to 6 million transactions (or more) annually, you can consider this to be a shrewd investment. But if you're a Level 3 merchant with 20,000 – 1 million transactions annually, or even a Level 4 with less than 20,000, there's still a mobile solution to fit your budget.
So there's no reason to stand on the sidelines. You can jump in and win this game! If you act now, you might even make the shopping season.Related Topic: MCommerce Figures "Out of This World"
Photo of Guy with Smartphone, © Shutterstock
Smartphone Screen Resolution
| Device | Operating System | Browser | Resolution |
| Apple iPhone 4 | OS X | Mobile Safari | 960 x 640 |
| HTC HD2 (T-Mobile) | Windows Mobile 6.5 | Opera Mobile | 800 x 480 |
| HTC EVO 4G (Sprint) | Android 2.1 | (WebKit based) | 800 x 480 |
| HTC Droid X (Verizon) | Android 2.1 | (WebKit based) | 854 x 480 |
| Nokia N900 | Maemo | MicroB (Mozilla based) | 800 x 480 |