DEVELOPING FOR THE
          IPHONE

TIM LUCAS
EDGE OF THE WEB, PERTH AUS
NOVEMBER 6, 2008
Sorry, but I won’t be covering how to make $20,000/day selling lightsabers on the iTunes
App Store
I'm going to talk about developing _websites_ for the iphone
I’m cofounder and senior-developer at Agency Rainford, where we build beautifully
engineered web applications. By beautifu...
I worked with Pete Ottery, the paper cutout Ben Buchanan is holding onto here. Pete’s one of
the awesome designers at News...
we built the iphone version of news.com.au
and not long after that I launched the iphone version of webjam.com.au alongside Pete and
I’s talk at Web Directions. It g...
the JOY of
                                   mobile 1.0



I’ve never had the pleasure of developing for old-school mobil...
COMMON
     MISTAKES   #1
DEVELOPING FOR ONLY THE IPHONE
hype



                                                                          photo by Mark Cohen
                    ...
opportunism



                                                                        photo by hey mr glen
              ...
ignorance
                    IGNORANCE




                                                                  photo by Seb...
You should not make sites for the iPhone -
            and that includes the URL.




Lars Gunther rightly pulled us up on...
we’ve all seen problems like this before
widen our focus




                                                                         photo by Hyaground
          ...
mobile 2.0




                                                                          photo by William Hook
           ...
Mobile 2.0:
      Design and
      Develop for the
      iPhone and Beyond
      by Brian Fling
      Web 2.0 Expo, San Fr...
“Don’t Build for Just One Device”
                                                           ROSS HARMES - FLICKR


      ...
COMMON
   MISTAKES   #2
USING AN IPHONE FRAMEWORK
iUI
                  CiUI
                                         WebApp.Net



 photo by Scot Campbell
 flickr.com/peopl...
goals of iUI
                                   GOALS OF IUI

                                  Create Navigational Menus
...
device-specific design
              looks like ass.


Does anybody remember this? Who else thought it looked like complet...
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first
Android phone comes out in Aust...
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first
Android phone comes out in Aust...
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first
Android phone comes out in Aust...
so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first
Android phone comes out in Aust...
goals of iUI
                                   GOALS OF IUI

                                  Create Navigational Menus
...
no knowledge of JS?




                                                                                  photo by jaymce
...
goals of iUI
                                    GOALS OF IUI

                                   Create Navigational Menu...
do-it-yaself!

          original, timeless design
          jquery is ok (YUI, maybe not)
          progressively enhance...
WHAT’S            DIFFERENT?


so what’s similar and what’s different to developing for the desktop?
same, but smaller




                                                              photo by backpackphotography
         ...
320
                                  416




The first big difference is screen size. On an iphone you’re looking at 320x....
320

                                      416




Which looks more like this on the physical phone because of high densit...
“ Visiting Web sites that have been redesigned for the
         iPhone is often a quicker and more pleasing experience
   ...
the current news.com.au homepage, which is pretty clean and attractive.
and the iphone version, which I admit looks a little clunky at full desktop width
but at a smaller width, much nicer!
and here’s the webjam site. I helped with the design and build of this puppy, so it’s hard to
criticise.
but the iphone site IMO is definitely much simpler and clearer, albeit lacking functionality the
main site has.
“ By stripping down the Web site interface to the most
  basic functions, site designers can focus the user’s
  attention ...
strip it down to the core




photo by Jeff Kubina
flickr.com/people/kubina



       http://www.flickr.com/photos/kubina/20...
and not only is it smaller, but the user can rotate it at anytime they want. Not many desktop
users do this. Need to desig...
liquid layouts




                                                                     photo by Vilhelm Sjostrom
        ...
thumbs

                                                                  photo by horizontal.integration
                ...
We take this for granted. 1px cursor.
on a touchscreen we’re talking about a 50px thumb cursor
with some padding for error
Read more
                                            Read more




and this is what a 12px link looks like under your thu...
this example is thanks to Pete Ottery from our Web Directions 08 presentation. Case in point
is the iPhone keyboard. Easy ...
get fat
                                          GET FAT




                                                            ...
big clickable areas




make sure all the clickable areas are nice and big
buttons, not links
large hit zones




the photo browsing on the webjam event page show’s how you might use hit zones.
large hit zones




we have small UI elements, smaller than 50px, which afford clicking.
large hit zones




though if you click anywhere on the left of the photo you’ll activate the button. We’re keeping
things...
less power

So another big difference is less power. Try browsing the main news site on mobile safari... it
might crash, o...
slower pipes
                                                            high bandwith
                                   ...
SERVER




How does this affect website design for these devices? Everytime the browser needs to fetch
something from the ...
SERVER




so the more things the browser needs to fetch the more delay. 3 things = 3 times as long
(well, the browser can...
SERVER




the goal is to have a smaller number of connections, but larger transfers
lots of small pipes
                                    bad.


                                              photo by hock...
fewer but bigger pipes
                  good.


photo by stevegarfield
flickr.com/people/stevegarfield

in summary
  http://...
css sprites


use techniques like CSS sprites to combine images so it’s one larger file rather than many
small files
mobile-photo-navigator.js            mobile-photos.js




                                          all-mobile.js




    ...
Use yslow
and webkit inspector (above is from the webkit nightly)
page
                                          fragments




and onto page fragments. Page Fragments is a technique used t...
“Load Page Fragments Instead of Full Pages”
                                                           ROSS HARMES - FLICK...
the way browsers work
                                                 link gets a click event
                           ...
make your own browser
                                                 link gets a click event
                           ...
reinventing urls,
               the core of the web

and one of the biggest probs... reinventing URLs. This can screw wit...
real performance gains?

                     FULL STORY PAGE                              3.5KB
                         ...
to save 0.8KB ?




                                                                       photo by fenlandsnapper
       ...
smarter interactions

No blanket solutions are going to help you improve the performance of your app. What you
need is goo...
use what you know




 photo by Here's Kate
 flickr.com/people/thedepartment

rather than use a “framework”, use what you k...
“The first design rule is to use web standards.”




                                            from Safari Web Content G...
WHERE DOES IT
                           LIVE?

so having now built a site, how does it live with the existing site?
<link href=quot;/stylesheets/backjam_mobile.css?1225831134quot;
               media=quot;only screen and (max-device-widt...
on the news site (pre the new design) the page looked like this: 1.109MB. An iphone
stylesheet wouldn’t help an iphone use...
sub-domain




so we created a completely separate site.
.mobile pages




on webjam it’s integrated into the site with “.mobile” pages (note: this isn’t any sort of
standard, it’...
HOW DO THEY         FIND IT?


build it and they will come?
redirect from /




                                                                              photo by kinetic
       ...
on a page that isn’t the homepage, *don’t* redirect them. The link may have been emailed to
them, synced from a bookmark e...
/webjam8




                                                           -> /webjam8.mobile




the webjam site simply link...
and you also have to link from the iphone site back to the old site.
-> /?no-mobile-redirect=true
if you’ve seen the twitter mobile site, they have a similar thing in the footer.
modes via cookies




   photo by Esti Alvarez
   flickr.com/people/esti

the biggest problem is that it uses cookies. When...
IPHONE AND WEBKIT

GOODIES
Huzzah!
Helvetica



and it comes with this baby... it’s even the preferred font for mobile safari optimised sites.
CSS 2.1

          .multiple.classes

             :first-child

            :first-of-type

          input[type=submit]
...
ul.group li:first-of-type a.item {
                                          -webkit-border-top-left-radius: 5px;
        ...
a.button {
                                       border: 1px solid;
                                       border-color: ...
and lots more...
              multiple backgrounds
                          <canvas>
                multi-touch events
...
http://au.youtube.com/watch?v=-XKb8We_uzg




here’s an example of using the multi-touch events with CSS transforms... all...
Apple docs are a great place to start: web app development center (unfortunately Apple are a
PITA and everything is behind...
a demo of the iPhone Emulator, which ships with Apple’s free iPhone SDK (available again,
from the apple web dev center). ...
./emulator




and finally, a demo of the android emulator. This app is for windows, mac and linux which is
great, but isn’...
Developing for the iPhone
Developing for the iPhone
Upcoming SlideShare
Loading in...5
×

Developing for the iPhone

12,279

Published on

3 Comments
53 Likes
Statistics
Notes
  • Development for iPhone, iPad, iPod is going for new heights with launch of iOS6. Let us review some of great features of iOS6
    http://www.slideshare.net/SojoSolutions/features-ofios6
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • = ENTREPRENEURS WANTED =

    We Are an International Community of Entrepreneurs Looking for New Leaders to Increase the Synergy of our Qualified Team. Come Join Us, Let’s Do this Together!!

    www.MyEntrepreneurCommunity.com

    <br /><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/zabgFl4ta5Y?fs=1&amp;hl=en_US&amp;rel=0" width="350" height="288"><param name="movie" value="http://www.youtube.com/v/zabgFl4ta5Y?fs=1&amp;hl=en_US&amp;rel=0"></param><embed src="http://www.youtube.com/v/zabgFl4ta5Y?fs=1&amp;hl=en_US&amp;rel=0" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation... !!! Lots of information in one place... Thanks again !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
12,279
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1,159
Comments
3
Likes
53
Embeds 0
No embeds

No notes for slide

Transcript of "Developing for the iPhone"

  1. 1. DEVELOPING FOR THE IPHONE TIM LUCAS EDGE OF THE WEB, PERTH AUS NOVEMBER 6, 2008
  2. 2. Sorry, but I won’t be covering how to make $20,000/day selling lightsabers on the iTunes App Store
  3. 3. I'm going to talk about developing _websites_ for the iphone
  4. 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 first, and engineered to be well tested, solid and best-practice.
  5. 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
  6. 6. we built the iphone version of news.com.au
  7. 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. 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. 9. COMMON MISTAKES #1 DEVELOPING FOR ONLY THE IPHONE
  10. 10. hype photo by Mark Cohen flickr.com/people/rageman http://www.flickr.com/photos/rageman/2677718167/ Hype is reason #1 to get caught thinking that it’s all about the iphone
  11. 11. opportunism photo by hey mr glen flickr.com/people/glenscott the other, is opportunism. There’s a lot of marketing buzz around the iphone and people are http://www.flickr.com/photos/glenscott/2040303671/ keen to be shown as innovators and secure their place in the market.
  12. 12. ignorance IGNORANCE photo by Sebastian Fritzon flickr.com/people/sebastianfritzon and ignorance. This is the only phone on the consumer market with huge traction with these http://www.flickr.com/photos/sebastianfritzon/2185196203/ kind of capabilities, we’ve got nothing else yet in front of us to remind us.
  13. 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.
  14. 14. we’ve all seen problems like this before
  15. 15. widen our focus photo by Hyaground flickr.com/people/71428150@N00 so if we were to widen our focus, what are we developing for? http://www.flickr.com/photos/ 71428150@N00/2240097942/
  16. 16. mobile 2.0 photo by William Hook flickr.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.flickr.com/photos/williamhook/2830319467/ of focus to make if you’re thinking about iPhone website development.
  17. 17. Mobile 2.0: Design and Develop for the iPhone and Beyond by Brian Fling Web 2.0 Expo, San Francisco, April 22, 2008 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. 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.
  18. 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.flickr blog post from his experience developing the new mobile version of flickr.
  19. 19. COMMON MISTAKES #2 USING AN IPHONE FRAMEWORK
  20. 20. iUI CiUI WebApp.Net photo by Scot Campbell flickr.com/people/randomurl There’s a couple of these frameworks floating around. iUI is the primary one, created by Joe http://www.flickr.com/photos/randomurl/2558566674/ Hewitt who created the most awesome firebug; as well as CiUI, WebApp.Net and others.
  21. 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. 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. 23. so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
  24. 24. so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
  25. 25. so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
  26. 26. so let’s take your iphone looking site and fast-forward 1 month, December 15 when the first Android phone comes out in Australia
  27. 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-specific goals we’re left with: no knowledge of JS required
  28. 28. no knowledge of JS? photo by jaymce flickr.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.flickr.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. 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. 30. do-it-yaself! original, timeless design jquery is ok (YUI, maybe not) progressively enhance photo by ClintJCL flickr.com/people/clintjcl go frameworkless! http://www.flickr.com/photos/clintjcl/235522670/
  31. 31. WHAT’S DIFFERENT? so what’s similar and what’s different to developing for the desktop?
  32. 32. same, but smaller photo by backpackphotography flickr.com/people/backpackphotography Everything is smaller. Smaller screen real estate, less memory and CPU, less precision when http://www.flickr.com/photos/backpackphotography/ using your thumb, less bandwith. 2317264717/
  33. 33. 320 416 The first big difference is screen size. On an iphone you’re looking at 320x...
  34. 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. 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.flickr blog post from his experience developing the new mobile version of flickr.
  36. 36. the current news.com.au homepage, which is pretty clean and attractive.
  37. 37. and the iphone version, which I admit looks a little clunky at full desktop width
  38. 38. but at a smaller width, much nicer!
  39. 39. and here’s the webjam site. I helped with the design and build of this puppy, so it’s hard to criticise.
  40. 40. but the iphone site IMO is definitely much simpler and clearer, albeit lacking functionality the main site has.
  41. 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. 42. strip it down to the core photo by Jeff Kubina flickr.com/people/kubina http://www.flickr.com/photos/kubina/2091368266/
  43. 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. 44. liquid layouts photo by Vilhelm Sjostrom flickr.com/people/mureena Take the opportunity to use liquid layouts. Don’t fix the width at 320px. Everyone used to http://www.flickr.com/photos/mureena/1532325221/ doing liquid layouts can rejoyce!
  45. 45. thumbs photo by horizontal.integration flickr.com/people/ebolasmallpox the next biggest difference that affects how you design is the thumb. http://www.flickr.com/photos/ebolasmallpox/240477265/
  46. 46. We take this for granted. 1px cursor.
  47. 47. on a touchscreen we’re talking about a 50px thumb cursor
  48. 48. with some padding for error
  49. 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. 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 fitting into the 50px grid really makes it difficult.
  51. 51. get fat GET FAT photo by *phototristan flickr.com/people/mediahound so the trick with anything requiring user interaction is to get fat.
  52. 52. big clickable areas make sure all the clickable areas are nice and big
  53. 53. buttons, not links
  54. 54. large hit zones the photo browsing on the webjam event page show’s how you might use hit zones.
  55. 55. large hit zones we have small UI elements, smaller than 50px, which afford clicking.
  56. 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. 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 fine on a normal desktop browser.
  58. 58. slower pipes high bandwith but high latency photo by stevegarfield flickr.com/people/stevegarfield another major difference, slower pipes. From my completely unscientific analysis most of the http://www.flickr.com/photos/stevegarfield/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. 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. 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. 61. SERVER the goal is to have a smaller number of connections, but larger transfers
  62. 62. lots of small pipes bad. photo by hockadilly flickr.com/people/hockadilly in summary http://www.flickr.com/photos/hockadilly/2910737768/
  63. 63. fewer but bigger pipes good. photo by stevegarfield flickr.com/people/stevegarfield in summary http://www.flickr.com/photos/stevegarfield/493037102/
  64. 64. css sprites use techniques like CSS sprites to combine images so it’s one larger file rather than many small files
  65. 65. 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.
  66. 66. Use yslow
  67. 67. and webkit inspector (above is from the webkit nightly)
  68. 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. 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. 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 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.
  71. 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 flickr.com/people/andreivassiliev but when you use page fragments you’ve gotta DIY. All you get is the click event.
  72. 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. 73. real performance gains? FULL STORY PAGE 3.5KB VS STORY PAGE FRAGMENT 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)
  74. 74. to save 0.8KB ? photo by fenlandsnapper flickr.com/people/32834218@N00 is it reasonble to be sacrificing all these standards-based kittens to save 0.8KB?
  75. 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. 76. use what you know photo by Here's Kate flickr.com/people/thedepartment rather than use a “framework”, use what you know. http://www.flickr.com/photos/thedepartment/137413905/
  77. 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 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.
  78. 78. WHERE DOES IT LIVE? so having now built a site, how does it live with the existing site?
  79. 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, flash etc is going to get in the way. It also assumes you have control of the main site.
  80. 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.
  81. 81. sub-domain so we created a completely separate site.
  82. 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. 83. HOW DO THEY FIND IT? build it and they will come?
  84. 84. redirect from / photo by kinetic flickr.com/people/kinetic On the home page of the main site detect the user agent and redirect to mobile 2.0 site. http://www.flickr.com/photos/kinetic/185409979/ There’s various ways to do the detection.
  85. 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. 86. /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.
  87. 87. and you also have to link from the iphone site back to the old site.
  88. 88. -> /?no-mobile-redirect=true
  89. 89. if you’ve seen the twitter mobile site, they have a similar thing in the footer.
  90. 90. modes via cookies photo by Esti Alvarez flickr.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.
  91. 91. IPHONE AND WEBKIT GOODIES
  92. 92. Huzzah!
  93. 93. Helvetica and it comes with this baby... it’s even the preferred font for mobile safari optimised sites.
  94. 94. CSS 2.1 .multiple.classes :first-child :first-of-type input[type=submit] h1 + h2 Huzzah!
  95. 95. 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)
  96. 96. 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
  97. 97. and lots more... multiple backgrounds <canvas> multi-touch events http://www.westciv.com/iphonetests/
  98. 98. 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.
  99. 99. Apple docs are a great place to start: web app development center (unfortunately Apple are a PITA and everything is behind user registration)
  100. 100. 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.
  101. 101. ./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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×