Going Mobile

1
Going Mobile
The third night of CA273 Advanced Web Design
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
What?! More languages? Not really

• WML
• XHTML-MP
• (Mobile) CSS

10
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
11
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
12
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

13
Testing Mobile Pages
Adobe Device Central
14
The Opera Mini Mobile Web Browser
15
Mobify.me
Let them go mobile for you

• Mobilizes your site
• Intuitive Interface
• iPhone compatible

Mobify Mobilizing Service
16
Mobify.me
Let them go mobile for you

• Mobilizes your site
• Intuitive Interface
• iPhone compatible

JQTouch jQuery plugin for iPhone Development
17
Going Mobile
Exercise Create a mobile version of the menu

• Open up the mobile-menu.html and menu.html files
• Create an mobile version of the menu.
• Experiment with some simple mobile.css
• Try mobify.com (if we can upload)

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

• Two options all or none
• Mobilize, dont miniaturize
• Confront limitations, exploit opportunities
• Taking advantage of external services