Pixelfragment

Designing for Mobile Devices

This was by far the most informative and useful panel I have attended so far this year at SXSWi. There is no possible way for me to go through all of what was covered as I am not a mobile guru. The basics discussed are that if you design your site to be semantically correct, using W3 standards and proper CSS markup, then you are about 90% of the way to having a mobile device friendly site.

Here are my notes from the panel presented by Brian Fling:

do not design for smart phones or pda’s

• 50 web browsers
• 500 different devices

Directional orientation.
think in vertical terms.

mobile web standards

• xhtml-mp
• a subset of xhtml basic
• part of wap 2.0
• virtually indistinguishable between the two
• predominant language of mobile web
• dreamweaver have mobile web extension
• default industry supported format

Wireless CSS

• supports basic css attributes
• keep css simple
• use document styles versus stylesheets
• as long as code and styles are simple, then you will do fine on most browsers.

One Web

the idea that there should use the same information for delivering content to the web.

Getting Started

• correct encoding and doctype
• use well formed code
• avoid tables for layout
• place the navigation in the content area of the site
• use access key as part of the primary navigation of the site( no more than 10 links)
• Use ordered lists rather than unordered lists for nav layout(will magically show magic keys)
• link phone numbers <a href="tel:=+1223883">number</a>
• input mask for forms and keep forms to a minimum

Mobile publishing

• SSR
• reformatting
• stylesheets
• mobile specific site

Focus on Five

• Nokia
• razr
• trio
• lg

force the user to manually

• detect the mobile device and redirect
• a SMS query that returns

simple device detection
advanced device detection - deliver the best possible code to a specific device.
-costly
start simple with a simple mobile site
-mobile stylesheet

Desktop Testing

• Opera has some tools for testing
• Firefox has User agent switcher
• emulators
• device testing
• usability testing

Resources

http://dev.mobi
http://mr.dev.mobi
http://mobiledesign.org

View the original presentation