Google Checkout is now available on mobile devices, which is great
news for those of you who'd like to run a mobile version of your e-
commerce site!
Because designing a website for the mobile platform presents unique
challenges, we'd like to share some mobile website development
practices you can use to give your buyers quality shopping experiences
on their mobile phones.
#1 Route mobile users to a dedicated "mobile" version of your
website.
Using simple PHP commands like those found here: http://dev.mobi/node/472
you can automatically redirect mobile users that arrive at your
desktop site to the mobile-friendly version of your website you are
designing.
#2 Use valid mobile markup.
XHTML Basic and XHTML Mobile Profile are two commonly-used mobile-
specific markup languages for mobile web sites. These are good choices
by default. Like any markup standard, they require particular syntax
and allow a certain vocabulary of tags which is different from what
HTML allows. For example, markup tags must be closed, <font> tags are
not allowed unlike in HTML, and frames can't be used. Following these
standards will ensure that a wide array of mobile devices can parse
and render your page as you intended.
#3 Use an XML header and DOCTYPE, and specify character encoding.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://
www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
These items make it clear that the page is a mobile page (here, XHTML
Basic 1.0),and also indicate which character encoding it uses (UTF-8).
Without these, your page may not get recognized as a mobile page at
all, or may get decoded incorrectly.
#4 Validate your markup.
Validate that your page conforms to the markup standard you have
chosen using an XML validator, or online tools like http://validator.w3.org.
Further, try using mobile-specific validators like http://ready.mobi/,
which goes beyond simple validation identifies areas where your page
design departs from generally accepted practices, estimates download
times and cost, and more.
#5 Use a linear layout.
Minimize left/right navigation, which is difficult on a phone, and
instead arrange your content in a single column layout.
#6 Minimize use of tables.
If you do need to incorporate them, use no more than 2 columns, and
avoid row and column merging.
#7 Keep page sizes small; less than 10KB if possible.
Mobile pages typically take longer to load due to slower network
speeds, and mobile devices typically do not have much memory. Minimize
use of images where possible.
#8 Make sure that all pages are linked to other pages.
It's difficult to get around on a mobile phone, try not to make it
harder by forcing users to hit the back button to escape dead ends.
#9 Use Google Sitemaps to post information about the structure of your
website.
It is harder for search engines to discover sites on the mobile web.
You can speed up the process by proactively informing Google of the
pages on your site that need to be indexed. Learn more here:
http://www.google.com/support/webmasters/bin/topic.py?topic=9346.
These are just a few initial recommendations. For further reading we
refer you to more comprehensive sources: The W3C's "Mobile Web
Initiative" has published a list of sixty best practices in their
"Mobile Web Best Practices" recommendation at http://www.w3.org/TR/mobile-bp/.
Also, dotMobi, which operates the .mobi top-level domain, has
published useful "Switch On" guides for mobile here: http://dev.mobi/node/423
|
