Exploring the Future Potential of AI-Enabled Smartphone Processors
Ā
Developing for the iPhone
1. DEVELOPING FOR THE
IPHONE
TIM LUCAS
EDGE OF THE WEB, PERTH AUS
NOVEMBER 6, 2008
2. Sorry, but I wonāt be covering how to make $20,000/day selling lightsabers on the iTunes
App Store
3. I'm going to talk about developing _websites_ for the iphone
4. Iām cofounder and senior-developer at Agency Rainford, where we build beautifully
engineered web applications. By beautiful I mean designed from the interface ļ¬rst, and
engineered to be well tested, solid and best-practice.
5. 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
7. 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.
8. 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.
9. COMMON
MISTAKES #1
DEVELOPING FOR ONLY THE IPHONE
10. hype
photo by Mark Cohen
ļ¬ickr.com/people/rageman
http://www.ļ¬ickr.com/photos/rageman/2677718167/
Hype is reason #1 to get caught thinking that itās all about the iphone
11. opportunism
photo by hey mr glen
ļ¬ickr.com/people/glenscott
the other, is opportunism. Thereās a lot of marketing buzz around the iphone and people are
http://www.ļ¬ickr.com/photos/glenscott/2040303671/
keen to be shown as innovators and secure their place in the market.
12. ignorance
IGNORANCE
photo by Sebastian Fritzon
ļ¬ickr.com/people/sebastianfritzon
and ignorance. This is the only phone on the consumer market with huge traction with these
http://www.ļ¬ickr.com/photos/sebastianfritzon/2185196203/
kind of capabilities, weāve got nothing else yet in front of us to remind us.
13. 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.
15. widen our focus
photo by Hyaground
ļ¬ickr.com/people/71428150@N00
so if we were to widen our focus, what are we developing for?
http://www.ļ¬ickr.com/photos/
71428150@N00/2240097942/
16. mobile 2.0
photo by William Hook
ļ¬ickr.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
http://www.ļ¬ickr.com/photos/williamhook/2830319467/
of focus to make if youāre thinking about iPhone website development.
18. āDonāt Build for Just One Deviceā
ROSS HARMES - FLICKR
from Lessons Learned while Building an iPhone Site
http://code.flickr.com/blog/2008/10/27/lessons-learned-while-building-an-iphone-site/
Ross from Flickr echoed this on a recent code.ļ¬ickr blog post from his experience developing
the new mobile version of ļ¬ickr.
20. iUI
CiUI
WebApp.Net
photo by Scot Campbell
ļ¬ickr.com/people/randomurl
Thereās a couple of these frameworks ļ¬oating around. iUI is the primary one, created by Joe
http://www.ļ¬ickr.com/photos/randomurl/2558566674/
Hewitt who created the most awesome ļ¬rebug; as well as CiUI, WebApp.Net and others.
21. goals of iUI
GOALS 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
22. device-specific design
looks like ass.
Does anybody remember this? Who else thought it looked like complete ass? Guess how long
ago this was? Only 12 months ago!
23. so letās take your iphone looking site and fast-forward 1 month, December 15 when the ļ¬rst
Android phone comes out in Australia
24. so letās take your iphone looking site and fast-forward 1 month, December 15 when the ļ¬rst
Android phone comes out in Australia
25. so letās take your iphone looking site and fast-forward 1 month, December 15 when the ļ¬rst
Android phone comes out in Australia
26. so letās take your iphone looking site and fast-forward 1 month, December 15 when the ļ¬rst
Android phone comes out in Australia
27. goals of iUI
GOALS OF IUI
Create Navigational Menus
and iPhone interfaces
No knowledge of JS required
Provide a more
āiPhone-likeā expererience
so removing the OS-speciļ¬c goals weāre left with: no knowledge of JS required
28. no knowledge of JS?
photo by jaymce
ļ¬ickr.com/people/cowboyneal
who here is responsible for a large JS site but doesnāt know JS? Scary position to be in. The
http://www.ļ¬ickr.com/photos/cowboyneal/444393190/
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.
29. goals of iUI
GOALS 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.
30. do-it-yaself!
original, timeless design
jquery is ok (YUI, maybe not)
progressively enhance
photo by ClintJCL
ļ¬ickr.com/people/clintjcl
go frameworkless!
http://www.ļ¬ickr.com/photos/clintjcl/235522670/
31. WHATāS DIFFERENT?
so whatās similar and whatās different to developing for the desktop?
32. same, but smaller
photo by backpackphotography
ļ¬ickr.com/people/backpackphotography
Everything is smaller. Smaller screen real estate, less memory and CPU, less precision when
http://www.ļ¬ickr.com/photos/backpackphotography/
using your thumb, less bandwith.
2317264717/
33. 320
416
The ļ¬rst big difference is screen size. On an iphone youāre looking at 320x...
34. 320
416
Which looks more like this on the physical phone because of high density screen, 160DPI vs
72DPI on a normal desktop screen.
35. ā 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...ā
JOHN MARKOFF - NYTIMES
from On a Small Screen, Just the Salient Stuff
http://www.nytimes.com/2008/07/13/technology/13stream.html
Ross from Flickr echoād this on a recent code.ļ¬ickr blog post from his experience developing
the new mobile version of ļ¬ickr.
39. and hereās the webjam site. I helped with the design and build of this puppy, so itās hard to
criticise.
40. but the iphone site IMO is deļ¬nitely much simpler and clearer, albeit lacking functionality the
main site has.
41. ā 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.ā
JOHN MARKOFF - NYTIMES
from On a Small Screen, Just the Salient Stuff
http://www.nytimes.com/2008/07/13/technology/13stream.html
42. strip it down to the core
photo by Jeff Kubina
ļ¬ickr.com/people/kubina
http://www.ļ¬ickr.com/photos/kubina/2091368266/
43. 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.
44. liquid layouts
photo by Vilhelm Sjostrom
ļ¬ickr.com/people/mureena
Take the opportunity to use liquid layouts. Donāt ļ¬x the width at 320px. Everyone used to
http://www.ļ¬ickr.com/photos/mureena/1532325221/
doing liquid layouts can rejoyce!
45. thumbs
photo by horizontal.integration
ļ¬ickr.com/people/ebolasmallpox
the next biggest difference that affects how you design is the thumb.
http://www.ļ¬ickr.com/photos/ebolasmallpox/240477265/
49. 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.
50. 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 ļ¬tting into the 50px grid really makes it difficult.
51. get fat
GET FAT
photo by *phototristan
ļ¬ickr.com/people/mediahound
so the trick with anything requiring user interaction is to get fat.
54. large hit zones
the photo browsing on the webjam event page showās how you might use hit zones.
55. large hit zones
we have small UI elements, smaller than 50px, which afford clicking.
56. 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.
57. 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 ļ¬ne on a normal desktop
browser.
58. slower pipes
high bandwith
but high latency
photo by stevegarļ¬eld
ļ¬ickr.com/people/stevegarļ¬eld
another major difference, slower pipes. From my completely unscientiļ¬c analysis most of the
http://www.ļ¬ickr.com/photos/stevegarļ¬eld/493037500/
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.
59. 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.
60. 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)
61. SERVER
the goal is to have a smaller number of connections, but larger transfers
62. lots of small pipes
bad.
photo by hockadilly
ļ¬ickr.com/people/hockadilly
in summary
http://www.ļ¬ickr.com/photos/hockadilly/2910737768/
63. fewer but bigger pipes
good.
photo by stevegarļ¬eld
ļ¬ickr.com/people/stevegarļ¬eld
in summary
http://www.ļ¬ickr.com/photos/stevegarļ¬eld/493037102/
64. css sprites
use techniques like CSS sprites to combine images so itās one larger ļ¬le rather than many
small ļ¬les
65. mobile-photo-navigator.js mobile-photos.js
all-mobile.js
bundling
same as your CSS and JS ļ¬les. 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 ļ¬les to the server.
68. 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.
69. āLoad Page Fragments Instead of Full Pagesā
ROSS HARMES - FLICKR
from Lessons Learned while Building an iPhone Site
http://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.
70. 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
ļ¬ickr.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.
71. 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
ļ¬ickr.com/people/andreivassiliev
but when you use page fragments youāve gotta DIY. All you get is the click event.
72. 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.
73. real performance gains?
FULL STORY PAGE 3.5KB
VS
STORY PAGE FRAGMENT 2.7KB
gzipped
Ross mentioned some numbers in the ļ¬ickr blog post, but he ignored gzip compression. In
reality, youāre looking at this sort of gain (from the news iphone site)
74. to save 0.8KB ?
photo by fenlandsnapper
ļ¬ickr.com/people/32834218@N00
is it reasonble to be sacriļ¬cing all these standards-based kittens to save 0.8KB?
75. 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.
76. use what you know
photo by Here's Kate
ļ¬ickr.com/people/thedepartment
rather than use a āframeworkā, use what you know.
http://www.ļ¬ickr.com/photos/thedepartment/137413905/
77. āThe first design rule is to use web standards.ā
from Safari Web Content Guide for iPhone OS
https://developer.apple.com/webapps/docs/
Interestingly the very ļ¬rst 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.
78. WHERE DOES IT
LIVE?
so having now built a site, how does it live with the existing site?
79. <link href=quot;/stylesheets/backjam_mobile.css?1225831134quot;
media=quot;only screen and (max-device-width: 480px)quot;
rel=quot;stylesheetquot;
type=quot;text/cssquot; />
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, ļ¬ash etc is going to get in the way. It also
assumes you have control of the main site.
80. 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.
82. .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.
83. HOW DO THEY FIND IT?
build it and they will come?
84. redirect from /
photo by kinetic
ļ¬ickr.com/people/kinetic
On the home page of the main site detect the user agent and redirect to mobile 2.0 site.
http://www.ļ¬ickr.com/photos/kinetic/185409979/
Thereās various ways to do the detection.
85. 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.
86.
87. /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.
88. and you also have to link from the iphone site back to the old site.
91. if youāve seen the twitter mobile site, they have a similar thing in the footer.
92. modes via cookies
photo by Esti Alvarez
ļ¬ickr.com/people/esti
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.
97. 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)
98. 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
99. and lots more...
multiple backgrounds
<canvas>
multi-touch events
http://www.westciv.com/iphonetests/
101. Apple docs are a great place to start: web app development center (unfortunately Apple are a
PITA and everything is behind user registration)
102. 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.
103. ./emulator
and ļ¬nally, 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.