Mobile Safari: Bring your machete

Dave DeSandro

• Web developer at nclud
• Tweet @desandro
• Day job is basically creating experimental HTML5 content for iOS

First thing first

• Mobile Safari is not all of mobile
• Nor is WebKit all of mobile
• Unfortunately for you, I have little-to-no expertise with other platforms
• For an awesome overview of all mobile development platforms: Brian Leroux’s Mobile web programming is a bloody mess
• Add Opera Mobile Emulator to your development workflow

Back in 2007

• January: iPhone announced in January
• June at WWDC: iPhone to Support Third-Party Web 2.0 Applications
• October: native iPhone SDK announced

PastryKit

• Mystery framework by Apple behind iPhone Manual web app (See Daring Fireball )
• Discovered in December 2009
• Look at that scrollin’!
• Heavy use of translate3d() to trigger hardware acceleration
• Hacks are okay?

Back in 2007

• Mobile Safari was designed around 2007’s web
• Assumes sites are designed for desktop
• window width: 980px
• Zooming is an essential feature of the browsing experience

Native app experience

• Content sized for small screens
• No zooming necessary

Handling zoom

H5BP recommends:

<meta name="viewport" content="width=device-width">

• Works!
• Enables zoom
• Landscape orientation?

Disabling zoom:

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

Uh oh.

Our dilemma

Overwriting practical defaults set in place for a web environment from 5 years ago

In-element scrolling

See toolbars.html

Lame:

 #content {
   overflow-y: scroll;
 }

• Inertial scrolling in iOS 5, finally
• position: fixed in iOS 5, finally

But wait…

Better solution, using padding, no overflow-scrolling.

No clever scrolling

• Avoid fixed toolbars
• Avoid in-element scrolling

Multi-touch events

• Mind-bending
• More than one “cursor”
• touch events not like mouse events

event looks like

event: {
  touches: [],
  changedTouches: [],
  targetTouches: []
}

Each touches array has touches, each of which have:

• target
• identifier
• pageX, pageY
• screenX, screenY
• clientX, clientY

Let’s make a button

See trendy-button.html

• Take a look at iOS first
• Start with mouse events
• Add some touch events
• How hard could it be?
• Consider: more than one “cursors”
• Assign one touch as the touch
• Keep track of this touch

Take-aways

• No substitute for testing on device
• Don’t be clever

We need champions

Find a niche. Own it.

• Multi-touch
• touch events
• Scrolling
• Retina imagery

Beercamp Tonight

nclud welcomes you!

Extra time

• Awesome photo opportunity

Code saves lives!