developing for the iphone
DESCRIPTION
TRANSCRIPT
![Page 1: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/1.jpg)
IPHONEDEVELOPING FOR THE
TIM LUCASEDGE OF THE WEB, PERTH AUS
NOVEMBER 6, 2008
![Page 2: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/2.jpg)
Sorry, but I won’t be covering how to make $20,000/day selling lightsabers on the iTunes App Store
![Page 3: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/3.jpg)
I'm going to talk about developing _websites_ for the iphone
![Page 4: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/4.jpg)
I’m cofounder and senior-developer at Agency Rainford, where we build beautifully engineered web applications. By beautiful I mean designed from the interface first, and engineered to be well tested, solid and best-practice.
![Page 5: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/5.jpg)
I worked with Pete Ottery, the paper cutout Ben Buchanan is holding onto here. Pete’s one of the awesome designers at News Digital Media
![Page 6: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/6.jpg)
we built the iphone version of news.com.au
![Page 7: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/7.jpg)
and not long after that I launched the iphone version of webjam.com.au alongside Pete and I’s talk at Web Directions. It gave me more room to explore best practices and test some opinions I’d been forming about the best way to build iphone sites.
![Page 8: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/8.jpg)
the JOY of
mobile 1.0
I’ve never had the pleasure of developing for old-school mobile devices before. After my web directions presentation I guy told me he wanted to punch me in the face when I said that, so it’s nice I’ve managed to avoid this type of development which is obviously anger inducing.
![Page 9: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/9.jpg)
COMMONMISTAKES #1
DEVELOPING FOR ONLY THE IPHONE
![Page 10: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/10.jpg)
photo by Mark Cohenflickr.com/people/rageman
hype
http://www.flickr.com/photos/rageman/2677718167/Hype is reason #1 to get caught thinking that it’s all about the iphone
![Page 11: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/11.jpg)
opportunism
photo by hey mr glenflickr.com/people/glenscott
http://www.flickr.com/photos/glenscott/2040303671/the other, is opportunism. There’s a lot of marketing buzz around the iphone and people are keen to be shown as innovators and secure their place in the market.
![Page 12: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/12.jpg)
IGNORANCEignorance
http://www.flickr.com/photos/sebastianfritzon/2185196203/
photo by Sebastian Fritzonflickr.com/people/sebastianfritzon
and ignorance. This is the only phone on the consumer market with huge traction with these kind of capabilities, we’ve got nothing else yet in front of us to remind us.
![Page 13: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/13.jpg)
You should not make sites for the iPhone -and that includes the URL.
Lars Gunther rightly pulled us up on this shortly before Pete and I’s WSG presentation with this comment.
![Page 14: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/14.jpg)
we’ve all seen problems like this before
![Page 15: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/15.jpg)
widen our focus
http://www.flickr.com/photos/71428150@N00/2240097942/
photo by Hyagroundflickr.com/people/71428150@N00
so if we were to widen our focus, what are we developing for?
![Page 16: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/16.jpg)
mobile 2.0
http://www.flickr.com/photos/williamhook/2830319467/
photo by William Hookflickr.com/people/williamhook
It’s what many call Mobile 2.0. Ss cheesy as this term can sound I think it’s an important shift of focus to make if you’re thinking about iPhone website development.
![Page 17: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/17.jpg)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0: Design and Develop for the iPhone and Beyondby Brian FlingWeb 2.0 Expo, San Francisco, April 22, 2008
Brian Fling’s been travelling the world for the past year talking about Mobile 2.0. He’s got a great workshop on slideshare with 353 slides that go into much detail about the concept of Mobile 2.0 covering all the jargon and everything you need to know.
![Page 18: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/18.jpg)
ROSS HARMES - FLICKR
“Don’t Build for Just One Device”
from Lessons Learned while Building an iPhone Sitehttp://code.flickr.com/blog/2008/10/27/lessons-learned-while-building-an-iphone-site/
Ross from Flickr echoed this on a recent code.flickr blog post from his experience developing the new mobile version of flickr.
![Page 19: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/19.jpg)
COMMONMISTAKES #2
USING AN IPHONE FRAMEWORK
![Page 20: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/20.jpg)
http://www.flickr.com/photos/randomurl/2558566674/
photo by Scot Campbellflickr.com/people/randomurl
iUI
CiUIWebApp.Net
There’s a couple of these frameworks floating around. iUI is the primary one, created by Joe Hewitt who created the most awesome firebug; as well as CiUI, WebApp.Net and others.
![Page 21: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/21.jpg)
GOALS OF IUIgoals of iUI
Create Navigational Menus and iPhone interfaces
No knowledge of JS required
Provide a more“iPhone-like” expererience
the goals of iUI are 1) Create Navigational Menus and iPhone interfaces, 2) No knowledge of JS required, 3) Provide a more “iPhone-like” experience
![Page 22: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/22.jpg)
device-specific designlooks like ass.
Does anybody remember this? Who else thought it looked like complete ass? Guess how long ago this was? Only 12 months ago!
![Page 23: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/23.jpg)
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
![Page 24: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/24.jpg)
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
![Page 25: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/25.jpg)
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
![Page 26: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/26.jpg)
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
![Page 27: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/27.jpg)
GOALS OF IUIgoals of iUI
Create Navigational Menus and iPhone interfaces
No knowledge of JS required
Provide a more“iPhone-like” expererience
so removing the OS-specific goals we’re left with: no knowledge of JS required
![Page 28: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/28.jpg)
http://www.flickr.com/photos/cowboyneal/444393190/
no knowledge of JS?
photo by jaymceflickr.com/people/cowboyneal
who here is responsible for a large JS site but doesn’t know JS? Scary position to be in. The disadvantage of this goal is that because it’s noob-friendly it’s very intrusive, hijacking every link etc. Chances are its not how you’d do things.
![Page 29: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/29.jpg)
GOALS OF IUIgoals of iUI
Create Navigational Menus and iPhone interfaces
No knowledge of JS required
Provide a more“iPhone-like” expererience
so that’s every goal out the window... for website development. The only place I see it being really useful is prototyping native applications in the browser before building them.
![Page 30: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/30.jpg)
do-it-yaself!
http://www.flickr.com/photos/clintjcl/235522670/
photo by ClintJCLflickr.com/people/clintjcl
original, timeless design
jquery is ok (YUI, maybe not)
progressively enhance
go frameworkless!
![Page 31: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/31.jpg)
WHAT’S DIFFERENT?
so what’s similar and what’s different to developing for the desktop?
![Page 32: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/32.jpg)
same, but smaller
photo by backpackphotography flickr.com/people/backpackphotography
http://www.flickr.com/photos/backpackphotography/2317264717/
Everything is smaller. Smaller screen real estate, less memory and CPU, less precision when using your thumb, less bandwith.
![Page 33: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/33.jpg)
320
416
The first big difference is screen size. On an iphone you’re looking at 320x...
![Page 34: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/34.jpg)
320
416
Which looks more like this on the physical phone because of high density screen, 160DPI vs 72DPI on a normal desktop screen.
![Page 35: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/35.jpg)
JOHN MARKOFF - NYTIMES
Visiting Web sites that have been redesigned for the
iPhone is often a quicker and more pleasing experience
than it is on those increasingly cinema-style desktop
displays...”
from On a Small Screen, Just the Salient Stuffhttp://www.nytimes.com/2008/07/13/technology/13stream.html
“
Ross from Flickr echo’d this on a recent code.flickr blog post from his experience developing the new mobile version of flickr.
![Page 36: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/36.jpg)
the current news.com.au homepage, which is pretty clean and attractive.
![Page 37: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/37.jpg)
and the iphone version, which I admit looks a little clunky at full desktop width
![Page 38: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/38.jpg)
but at a smaller width, much nicer!
![Page 39: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/39.jpg)
and here’s the webjam site. I helped with the design and build of this puppy, so it’s hard to criticise.
![Page 40: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/40.jpg)
but the iphone site IMO is definitely much simpler and clearer, albeit lacking functionality the main site has.
![Page 41: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/41.jpg)
JOHN MARKOFF - NYTIMES
By stripping down the Web site interface to the most
basic functions, site designers can focus the user’s
attention and offer relevant information without
distractions.”
from On a Small Screen, Just the Salient Stuffhttp://www.nytimes.com/2008/07/13/technology/13stream.html
“
![Page 42: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/42.jpg)
photo by Jeff Kubina flickr.com/people/kubina
strip it down to the core
http://www.flickr.com/photos/kubina/2091368266/
![Page 43: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/43.jpg)
and not only is it smaller, but the user can rotate it at anytime they want. Not many desktop users do this. Need to design for two screen modes.
![Page 44: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/44.jpg)
liquid layouts
photo by Vilhelm Sjostrom flickr.com/people/mureena
http://www.flickr.com/photos/mureena/1532325221/Take the opportunity to use liquid layouts. Don’t fix the width at 320px. Everyone used to doing liquid layouts can rejoyce!
![Page 45: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/45.jpg)
thumbs
photo by horizontal.integration flickr.com/people/ebolasmallpox
http://www.flickr.com/photos/ebolasmallpox/240477265/the next biggest difference that affects how you design is the thumb.
![Page 46: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/46.jpg)
We take this for granted. 1px cursor.
![Page 47: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/47.jpg)
on a touchscreen we’re talking about a 50px thumb cursor
![Page 48: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/48.jpg)
with some padding for error
![Page 49: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/49.jpg)
Read more
Read more
and this is what a 12px link looks like under your thumb. Luckily Mobile Safari tries to help to pick which link you want, but you’d have to click above or below these links to really differentiate between them.
![Page 50: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/50.jpg)
this example is thanks to Pete Ottery from our Web Directions 08 presentation. Case in point is the iPhone keyboard. Easy to start to use, hard to truely master and become efficient. The keys not fitting into the 50px grid really makes it difficult.
![Page 51: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/51.jpg)
GET FATget fat
photo by *phototristanflickr.com/people/mediahound
so the trick with anything requiring user interaction is to get fat.
![Page 52: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/52.jpg)
big clickable areas
make sure all the clickable areas are nice and big
![Page 53: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/53.jpg)
buttons, not links
![Page 54: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/54.jpg)
large hit zones
the photo browsing on the webjam event page show’s how you might use hit zones.
![Page 55: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/55.jpg)
large hit zones
we have small UI elements, smaller than 50px, which afford clicking.
![Page 56: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/56.jpg)
large hit zones
though if you click anywhere on the left of the photo you’ll activate the button. We’re keeping things simple and clean but as forgiving as we can.
![Page 57: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/57.jpg)
less power
So another big difference is less power. Try browsing the main news site on mobile safari... it might crash, or just goes as slow as a dog... yet it’s completely fine on a normal desktop browser.
![Page 58: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/58.jpg)
photo by stevegarfield flickr.com/people/stevegarfield
slower pipeshigh bandwith
but high latency
http://www.flickr.com/photos/stevegarfield/493037500/another major difference, slower pipes. From my completely unscientific analysis most of the time we’re dealing with high bandwith high latency. It takes a while to connect to a server but once the connection is made the transfer speed is quite good.
![Page 59: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/59.jpg)
SERVER
How does this affect website design for these devices? Everytime the browser needs to fetch something from the server there will be some lag (latency), the red arrow above. Once the connection is made the transfer back of information is fast.
![Page 60: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/60.jpg)
SERVER
so the more things the browser needs to fetch the more delay. 3 things = 3 times as long (well, the browser can grab multiple things at once, but only up to 3 at a time... 6 images, 9 images etc)
![Page 61: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/61.jpg)
SERVER
the goal is to have a smaller number of connections, but larger transfers
![Page 62: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/62.jpg)
http://www.flickr.com/photos/hockadilly/2910737768/
lots of small pipes
bad.
photo by hockadilly flickr.com/people/hockadilly
in summary
![Page 63: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/63.jpg)
fewer but bigger pipes
good.
photo by stevegarfield flickr.com/people/stevegarfield
http://www.flickr.com/photos/stevegarfield/493037102/in summary
![Page 64: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/64.jpg)
css sprites
use techniques like CSS sprites to combine images so it’s one larger file rather than many small files
![Page 65: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/65.jpg)
mobile-photo-navigator.js mobile-photos.js
all-mobile.js
bundling
same as your CSS and JS files. Combine them together (as well as minifying/packing them to make them as small as possible). Most platforms have some automated way of doing this for you before you send your files to the server.
![Page 66: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/66.jpg)
Use yslow
![Page 67: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/67.jpg)
and webkit inspector (above is from the webkit nightly)
![Page 68: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/68.jpg)
page fragments
and onto page fragments. Page Fragments is a technique used to load fractions of pages rather than a whole page at a time. The news iphone app uses this technique.
![Page 69: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/69.jpg)
ROSS HARMES - FLICKR
“Load Page Fragments Instead of Full Pages”
from Lessons Learned while Building an iPhone Sitehttp://code.flickr.com/blog/2008/10/27/lessons-learned-while-building-an-iphone-site/
Ross from Flickr, in that same blog post, recommends this technique.
![Page 70: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/70.jpg)
the way browsers work
link gets a click event
give feedback
gracefully handle network errors
caching and memory management
history management
show the page
photo by andrei.vassiliev flickr.com/people/andreivassiliev
Normally when you click a link the browser gives the user feedback, handles network errors, handles caching and memory managment, changes the URL in the location bar and adds the new URL to the history allowing back button etc.
![Page 71: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/71.jpg)
make your own browser
link gets a click event
give feedback
gracefully handle network errors
caching and memory management
history management
show the page
photo by andrei.vassiliev flickr.com/people/andreivassiliev
but when you use page fragments you’ve gotta DIY. All you get is the click event.
![Page 72: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/72.jpg)
reinventing urls,
the core of the web
and one of the biggest probs... reinventing URLs. This can screw with bookmarking, emailing, and all the other millions of things URLs are used for.
![Page 73: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/73.jpg)
real performance gains?
3.5KBFULL STORY PAGE
STORY PAGE FRAGMENT
VS
2.7KB
gzipped
Ross mentioned some numbers in the flickr blog post, but he ignored gzip compression. In reality, you’re looking at this sort of gain (from the news iphone site)
![Page 74: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/74.jpg)
photo by fenlandsnapperflickr.com/people/32834218@N00
to save 0.8KB ?
is it reasonble to be sacrificing all these standards-based kittens to save 0.8KB?
![Page 75: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/75.jpg)
smarter interactions
No blanket solutions are going to help you improve the performance of your app. What you need is good hard thinking and good interaction design. For example I spent a lot of time making the photo browsing experience on the webjam iphone site as snappy as possible.
![Page 76: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/76.jpg)
photo by Here's Kate flickr.com/people/thedepartment
use what you know
http://www.flickr.com/photos/thedepartment/137413905/rather than use a “framework”, use what you know.
![Page 77: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/77.jpg)
“The first design rule is to use web standards.”
from Safari Web Content Guide for iPhone OShttps://developer.apple.com/webapps/docs/
Interestingly the very first paragraph of Apple’s guides for creating content of the iphone says to use standards. Apple gets it, we’ve gone off on our own little tangent of recreating the native experience.
![Page 78: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/78.jpg)
WHERE DOES IT
LIVE?
so having now built a site, how does it live with the existing site?
![Page 79: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/79.jpg)
<link href="/stylesheets/backjam_mobile.css?1225831134" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
iphone stylesheet
one way is to just use an iphone stylesheet. This only gets you so far, because you’re still dependent on the markup, and any large images, flash etc is going to get in the way. It also assumes you have control of the main site.
![Page 80: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/80.jpg)
on the news site (pre the new design) the page looked like this: 1.109MB. An iphone stylesheet wouldn’t help an iphone user on a 3G connection.
![Page 81: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/81.jpg)
sub-domain
so we created a completely separate site.
![Page 82: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/82.jpg)
.mobile pages
on webjam it’s integrated into the site with “.mobile” pages (note: this isn’t any sort of standard, it’s just a convention I adopted to different the mobile 2.0 optimised pages, just like .rss or .xml signals a different version of the same page.
![Page 83: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/83.jpg)
HOW DO THEY FIND IT?
build it and they will come?
![Page 84: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/84.jpg)
photo by kinetic flickr.com/people/kinetic
http://www.flickr.com/photos/kinetic/185409979/
redirect from /
On the home page of the main site detect the user agent and redirect to mobile 2.0 site. There’s various ways to do the detection.
![Page 85: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/85.jpg)
on a page that isn’t the homepage, *don’t* redirect them. The link may have been emailed to them, synced from a bookmark etc... show them the original page they were expecting... but provide a fat link make to the mobile site, or even better, the mobile equivalent of the page they’re looking at.
![Page 86: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/86.jpg)
![Page 87: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/87.jpg)
/webjam8
-> /webjam8.mobile
the webjam site simply links to the URL of the mobile version of the page, or if failing that the mobile version of the homepage.
![Page 88: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/88.jpg)
and you also have to link from the iphone site back to the old site.
![Page 89: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/89.jpg)
![Page 90: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/90.jpg)
-> /?no-mobile-redirect=true
![Page 91: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/91.jpg)
if you’ve seen the twitter mobile site, they have a similar thing in the footer.
![Page 92: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/92.jpg)
photo by Esti Alvarezflickr.com/people/esti
modes via cookies
the biggest problem is that it uses cookies. When you you hit the button labelled standard it sets a cookie, and if you hit back and refresh, or back and click on a link, you get the regular big site. The only way to turn off the mode is to pinch, scroll and zoom your way down to the mobile button on the footer of the standard page. The user is not really in control. The solution is to simply use URLs, just like the webjam site’s .mobile pages.
![Page 93: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/93.jpg)
IPHONE AND WEBKIT
GOODIES
![Page 94: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/94.jpg)
Huzzah!
![Page 95: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/95.jpg)
Helvetica
and it comes with this baby... it’s even the preferred font for mobile safari optimised sites.
![Page 96: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/96.jpg)
CSS 2.1
.multiple.classes
:first-child
:first-of-type
input[type=submit]
h1 + h2
Huzzah!
![Page 97: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/97.jpg)
ul.group li:first-of-type a.item { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;}ul.group li:last-of-type a.item { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;}
.content h2 + ul.group { margin-top: -0.8em;}
this group of buttons on the webjam site uses the following markup for its rounded corners. Adjacency selectors come in handy with h2’s against h3’s, or headings against this group of buttons (which you can faintly see above)
![Page 98: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/98.jpg)
a.button { border: 1px solid; border-color: #fB3E30 #6B0E00 #6B0E00 #fB3E30; background-color: #BB0E00; color: #fdd; padding: 0.5em 0.6em; text-shadow: #3B0E00 1px 1px 2px; -webkit-border-radius: 5px; text-decoration: none;}
here we have some text-shadow and border-radius to get an image-less but thumbable button
![Page 99: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/99.jpg)
and lots more...
multiple backgrounds
<canvas>
multi-touch events
http://www.westciv.com/iphonetests/
![Page 100: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/100.jpg)
http://au.youtube.com/watch?v=-XKb8We_uzg
here’s an example of using the multi-touch events with CSS transforms... all done in the browser. No plugins required. This is mobile-safari stuff.
![Page 101: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/101.jpg)
Apple docs are a great place to start: web app development center (unfortunately Apple are a PITA and everything is behind user registration)
![Page 102: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/102.jpg)
a demo of the iPhone Emulator, which ships with Apple’s free iPhone SDK (available again, from the apple web dev center). You’ll need a Mac.
![Page 103: Developing for the iPhone](https://reader038.vdocuments.net/reader038/viewer/2022102823/53f168d78d7f72e94b8b4803/html5/thumbnails/103.jpg)
./emulator
and finally, a demo of the android emulator. This app is for windows, mac and linux which is great, but isn’t very user-friendly. There’s no application icon, I boot it up from a terminal window. Hopefully this will change.