Going Mobile or not

1
Going Mobile (or not)
2
Mobile Background
Some facts and terms

• The term is mobile
• Number worldwide 3.3 billion
• 1/5 the market of the PC Internet

Photograph from media wiki for mobile phone
3
Mobile Background
Some more facts and terms
Gap Minder data mining application
4
Mobile Mindset
A framework for mobile web development

• Users are on the go
• Charged per KB
• Visit same sites more regularly
• May want specific content

5
Mobile Mindset
A framework for mobile web development
If content is king then context is the kingdom
6
Mobilizing
The four approaches to going mobile

• Do nothing
• Reduce image and styling
• Handheld CSS
• Mobile-optimized content

The Mobile Web Design Book by Cameron Moll
7
Mobilizing
The four two approaches to going mobile

• Do nothing
• Reduce image and styling
• Handheld CSS
• Mobile-optimized content

The Mobile Web Design Book by Cameron Moll
8
Mobile Mindset
The mobile developer mantra
Mobilize, dont miniaturize.
Mobilize, Dont Miniaturize - Barbara Ballard
9
Mobile Optimization
Big props to Opera
The Opera Mini Mobile Web Browser
10
Mobile Optimization
What?! More languages? Not really

• WML
• WAP
• XHTML-MP
• (Mobile) CSS

11
XHTML-MP
Global template
lt?xml version1.0 ?gt lt!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN
"http//www.wapforum.org/DTD/xhtml-mobile10.dtdgt
lthtml xmlnshttp//www.w3.org/1999/xhtml
gt ltheadgt lttitlegtXHTML-MP Template
Pagelt/titlegt ltheadgt ltbodygt ltpgtHello mobile
device! Lookrsquos like I know
XHTML-MPlt/pgt lt/bodygt
XHTML MP Document Structure
12
XHTML-MP
Confront limitations. Exploit opportunities.

• Cache control
• Phone number links
• Location based features

ltmeta http-equivCache-Control
contentmax-age600 /gt
lta hrefteltel12405675000 gtCall (240)
567-5000lt/agt
13
Mobile CSS
Confront limitations. Exploit opportunities.

• font-size will be ignored by most browsers
• font-family will also be ignored by most
  browsers
• background-image support is marginal
• border-style support overall is sketchy
• margin and padding support is decent, though
  very poor on some devices use cautiously with
  small screen real estate

14
Testing Mobile Pages
Adobe Device Central
15
Going Mobile
Exercise Create a mobile version of your site

• Open up your index files
• Create an mobile version of page.
• Experiment with some simple mobile.css

16
Wrap Up
We could go mobile, if we wanted to

• Two options all or none
• Mobilize, dont miniaturize
• Confront limitations, exploit opportunities