ucantblamem

This past Wednesday I finished reading the “dotMobi Mobile Web Developers Guide�, authored by Ronan Cremin, Jo Rabin, Brian Fling and D. Keith Robinson. This is a resource that has certainly helped this web-developer to better understand the Mobile space and how to tackle a Mobile-based project on a technical level.

I am still patiently awaiting Cameron Moll’s “Mobile Web Bookâ€?, but having now read a (clearly un-edited, yet) highly-informative PDF-book on the subject, I feel that I’m off to a good start. With what I know now, it certainly does make my attempts to “mobiliseâ€? this blog look pretty futile, none-the-less it was a fun experiment.

While I highly recommend that you read the full PDF to (start to) learn about Mobile Web Development, I did compile a short list of notes that I thought were technically important and relevant to a Desktop Web Developer such as myself.

1. Use XHTML Basic 1.1 / XHTML-MP and CSS-MP (MP stands for Mobile Profile)
2. Not all standard CSS properties are supported.
3. Be sure to include the XML declaration and the standard DOCTYPE
4. Serve pages as XML+XHMTL – As apposed to standard HTML, which most web-servers do. (This will break the page if they’re not perfectly valid – validity is important in a Mobile environment!)
5. Use best-practices (i.e. Seperation of content and style)
6. Don’t use Scripts or embedded elements - big lack of support.
7. Use <ol> for main navigation
   1. Try to keep main menu under 10 items
   2. Generally you don’t have a main-menu on every page as you would in a standard website. Current best-practice is to have a main (table of contents style page) that lists the menu-items with minimal navigation on internal pages. Usually including a “back to homeâ€? link at the top (and / or bottom) of each page.
8. Wherever possible use accesskey’s:
   1. Apply accesskey “0� to your “home� and keep that consistent on all pages.
   2. Apply accesskey’s “1-9â€? to remaining main menu items. So it makes sense, these accesskey values should correspond with the Ordered-lists’ number.
9. Apply dimensions to images - Stylesheets and images are loaded AFTER the page, this will prevent the page from “jumping around” as it loads.
10. Avoid using tables AT ALL. Try using <dl>’s and if absolutely necessary only use 1-3 columns.
11. Avoid frames – both from a support perspective and a usability perspective (duh???)
12. Link phone numbers: <a href=�tel:0404555555�>0404555555</a>. The “tel:� (protocol?) will allow the phone to make a call to this number when it is selected (clicked).
13. Use forms sparingly and make them as short as possible. Try not to require information and apply accesskeys.
14. Include the MIME type as a meta tag in the page (e.g. <meta http-equiv=”content-type” content=”application/xhtml+xml” />).
15. Include the caching times as a meta tag in the page (e.g. <meta http-equiv=”Cache-Control” content=”max-age=300″/>).
16. Page titles (i.e. <title> tag) should be SUPER short with the page title, followed by the site title. (e.g. <title>My page | Site title</title>)
17. Avoid popups completely – lack of support and bad user-experience.
18. Limit the number of external resources accessed in a page (i.e. Images etc).
19. Good rule of thumb is that pages should be 10 – 25kb’s generally.
20. A good (starter) testing environment while developing is Opera’s “Small screenâ€? view.
21. Offer a “Rich versionâ€? link (possibly at the bottom of the page) for advanced mobile devices like PDA’s etc… If you want to.

I must stress that if you use this as a check-list, your unlikely to produce a truly “Mobile� page and for that reason I recommend actually reading the PDF-book along with the many other good resources out there, but these were definitely the major technical points that will get you (and I) off to a good start.

This entry was posted on Thursday, March 22nd, 2007 at 3:18 am and is filed under Design, General, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.