terry’s Weblog

weblog for terry’s finding

February 29, 2008 • 8:36 am 0

Web to-go

Web to-go?

Mobile, many people also think it pay a important role in the Web3.0, always connected. Actually, it’s not only limited on your handset and also covered but not limited with those sub-notebook, OLPC, UMPC. So people get more easy to access the web on the road with WI-FI connection in Starbucks, 7-eleven and even Mcdonalds. GPRS flat plan get cheaper and cheaper… Your web get read for mobile wave?

There are some useful concepts or idea to help us thinking in mobile way.

http://www.passani.it/gap/

This article was created on January 2008, just a month ago and still fresh. Actually, it didn’t mention the exact date but the last update is January 2008. So, I guess it’s at least cover phones launch last year 2007.

XHTML MP 1.0

Is it come from Mars? Of course not, it’s defined by OMA, Open Mobile Alliance.. It’s built on top of XHTML-basic which is a subset of XHTML 1.0 (which we learned few weeks before). It adds extra usability and graphical features by WAP CSS (WCSS) and ‘style’ tag and attribute.

The evolution:

HTML 4.0 -> XHTML 1.0 -> XHTML Basic -> XHTML MP

Some others…

All mobile pages should coded with valid XHTML Mobile Profile 1.0 - otherwise how the browser read the page
Use the application/vnd.wap.xhtml+xml MIME Type
Use only simple in-line CSS or none – to save page render time
Only use image as what really need – to save the download time
Use the common encoding on the UTF-8
No <br />, please use <hr /> instead
Use the ‘accesskey’ attribute to user control by keypad

<?xml version=”1.0″ encoding=”UTF-8″?>

p>Pick contact:<ol>

<li><a href=”contact.jsp?id=32″ mce_href=”contact.jsp?id=32″ accesskey=”1″>Ramona</a></li>

<li><a href=”contact.jsp?id=45″ mce_href=”contact.jsp?id=45″ accesskey=”2″>Robert</a></li>

<li><a href=”contact.jsp?id=21″ mce_href=”contact.jsp?id=21″ accesskey=”3″>Romeo</a></li>

<li><a href=”contact.jsp?id=17″ mce_href=”contact.jsp?id=17″ accesskey=”4″>Ronan</a></li>

</ol>

Use short and meaningful <title> to describe the page - good for bookmark

Beware of HTML-style forms.

Age:<select>

<option value=”17″>Less than 18</option>

<option value=”25″>[19-25]</option>

<option value=”45″>[26-44]</option>

<option value=”100″>over 44…</option>

</select>

<a href=”next/form?age=17″ mce_href=”next/form?age=17″>Less than 18</a><br>

<a href=”next/form?age=25″ mce_href=”next/form?age=25″>[19-25]</a><br>

<a href=”next/form?age=44″ mce_href=”next/form?age=44″>[26-44]</a><br>

<a href=”next/form?age=100″ mce_href=”next/form?age=100″>Over 44</a><br>

Carefully evaluate how cookies are used in the application – cos it might not work for all devises and network
Page mark up tag and images keep under 10 Kilobyte totally, for high-end devices is recommended do not exceed 40 Kilobyte
Fill in the width=”" and height=”" in the <img> mark-up tag - to save CPU time for detect the image size and reserve space during the page render.

<img src=”images/logo.gif” mce_src=”images/logo.gif” alt=”ComPany” width=”100″ height=”20″ />

Enable one-click calls for phone numers

<a href=”wtai://wp/mc;+852 99912345″ mce_href=”wtai://wp/mc;+852 99912345″>+852 99912345</a> or

<a href=”tel:+852 99912345″ mce_href=”tel:+852 99912345″>+852 99912345</a>