Not long ago, online marketers wondered whether mobile phones might someday become the preferred platform for eCommerce. Today the question isn't if but when, and the answer is coming sooner than you think.
According to Gartner Research, mobile phones will overtake PCs as the most common Web access device worldwide by 2013. According to Forrester Research, 40% of the interactive marketing professions they surveyed are using some form of mobile marketing with an additional 35% planning to target mobile users within the next year.
All this urgency begs a question in most e-marketers: how can I be ready when the transition takes place in earnest? I believe that the best way is to seek revolution rather than transition. The new world of mobile eCommerce demands a clean slate. The parameters of a mobile eCommerce (mCommerce) site are different enough that it's best to start fresh with a new user interface designed specifically for mobile visitors. It's good to use your regular eCommerce site as a source of inspiration and continuity in visual style, but if you want to succeed it's best to start fresh.
After you've accomplished the first step and established a clean slate, the next order of business is adding the attributes that make the most of mobile marketing's strengths. Here are a few guidelines to get you started:
- Plan a Simple Design.
In my experience, the best way to achieve design simplicity is to start with a wireframe. It is the first step of every web design our firm undertakes, and it's even more important when the screen size is limited. It is crucial to have the information customers want most in the position they can find it most easily. I recommend using wireframe software tools like MockFlow or Balsamiq, though it is also possible to sketch your wireframes by hand. - Design to the Correct Resolution.
There is nothing more frustrating to a mobile user than endlessly scrolling, or missing critical information because the screen was too busy or small to locate it. Eliminate surprises by creating your wireframe using the screen resolution of your targeted mobile devices. The most common screen resolution for new mobile devices is 320x480. You can see a list of different screen resolutions in this UXBooth article. - Let Users Choose Your Standard Site.
Visitors with a high resolution, a large-screened device may prefer to access your standard website rather than the mobile version. Make sure they have a clickable pathway to the standard site that's easy to find. - Use Mobile Commerce Plug-ins for your Shopping Cart
Many of the top eCommerce software platforms offer add-on products to make the creation of a mobile store much simpler. Some mobile add-ons include AspDotNetStorefront Mobile Commerce and Magento Mobile Commerce. These tools draw on the same content and store you now use to serve desktop customers, repurposing and reformatting it to suit mobile devices. - Develop Using XHTML MP, and Validate Your Markup.
Past mobile development was performed with Wireless Markup Language (WML). WML had a range of "issues," requiring different development tools than those used for standard sites. XHTML MP allows you to use the same development tools for desktop and mobile applications. As a bonus, your mobile site will be visible to ordinary internet browsers throughout the development process. XHTML MP is a subset of XHTML. Learn more information about the advantages of XHTML MP and test your XHTML MP skills. - Test Your Design
Testing a mobile site is critical, especially with so many devices using such a wide variety of software. Luckily there are several online tools available to make the testing process easier for you. Try DeviceAnywhere, PerfectoMobile, and device emulators.
Check out these related articles that include examples of good mobile design:
