Mobile website : a guideline to mobile website

Shashi Arya — Sat, 19 Sep 2009 15:31:39 +0000

Few days back i came across to work on mobile website. As this was my first mobile website development i started searching on google and came across few site and blogs which gave some information. Here i am complying few tips.

Mobile Browsers and Screens

The biggest problem with mobile web design is the variation in browsers. If you think the differences between IE6, Firefox, and Safari are extreme you haven’t experienced anything. Mobile phones vary greatly in both size and ability.

Common screen sizes range from 128 x 160 to 320 x 480. Other common screen sizes are 176 x 220 and 240 x 320 but often the actual resolution will vary slightly. The browsers have greatly varying abilities. Modern smart phones like iPhone and phones running Google Android have fully functional browsers. (At the time of writing this Flash support is not included) Other models like the Nokia 1100 or the Nokia 1101 have very simple browsers.

Mobile Phone Mark-up Options
There are two main ways of writing mark-up for mobile browsers. The first is WML. WML is XML mark-up designed for mobile phones. It has been around for some time and is the best way to go if your audience is likely using older or less featured phones like the Noikia 1100 or Nokia 1101. The other, more common option is XHTML or XHTML-MP. XHTML is a mark-up language much more familiar to most web developers. Most modern phone browsers are capable of using XHTML or XHTML-MP and I have had great success using XHTML. When creating your XHTML it is important to make sure you create valid mark-up as mobile phones are not nearly as forgiving as traditional browsers.

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, 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.

www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd“>
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 Minimal use of images.

Minimal use of images makes the page loading faster.

#8 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.

#9 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.

#10 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

Mobile website Examples:

http://m.facebook.com/

http://m.orkut.com/

m.google.com

Shashi0303's Portfolio

Mobile website : a guideline to mobile website

T-shirts Shoe Cap Designs

Corporate Identity

Logos

Web Site Designs