Today I’m at the iPhone Tech Talk in San Francisco, CA today. The goal of the iPhone Tech Talk is to teach developers the differences and quirks of developing web applications for the iPhone version of Safari.

• iPhone ignores all CSS screen types besides @media (e.g. @media { p.foo { text-weight: bold; } }). Sorry, that’s referred to as a “media query”, which appears to be CSS namespaces.
• 10MB limit for text (HTML, JavaScript and CSS). 8MB for TIFF, PNG and GIF, 32MB for JPEG and 2MB for animated GIF’s.
• 5 second limit on JavaScript execution.
• window.open() and target="_new" open new windows with an 8 window max. Interestingly, you can open 8 windows, but they might get paged out of memory, which means that when the user switches back Safari will need to refresh this screen.
• alert(), confirm() and prompt() all work fine (and look quite nice)
• iPhone doesn’t support showModalDialog() or print()
• Natively supports Excel spreadsheets, PDF’s, Word documens (YMMV), TXT and QuickTime audio and video. Does not support Java, SVG or Flash. Interestingly enough, it does support the <canvas> element.
• Obviously, it doesn’t support a file system so people can’t download files to the phone.
• Window sized to 980 x 1091 and then scaled to fit 320 (I assume 480 if in landscape). They treat .mobi domains differently; they’re not scaled. They scale it down immediately to fit 320/480.
• Use <meta name="viewport" content="width=320" /> if you want fine grained control. Other options include initial-scale (1 is the default), minimum-scale, maximum-scale (which limits zooming in and out) and user-scalable (yes/no allows/prevents zooming).
• Override text scaling with -webkit-text-size-adjust:none (other values include auto, which is the default and percentages).
• You don’t get hover styles, but do get mouse events (click, etc.). Remember to leave room for a finger (Daniel Burka mentioned this in his notes about designing the Digg iPhone application).
• Remember to box content for fingers. They look at the box text is in when doing intelligent zooming. For instance do <div><p>some text</p><p>some more text</p></div> will double tap nicely.
• They send click, mousedown, mouseup, mousewheel (and one I just missed). Also, blur, focus, load, unload, reset, submit, change, and abor. You can’t call blur or focus, but they are called when it happens. You just can’t explicitly blur or focus because they don’t want a lot of jumping around going on when you’re working on a small device.
• EDGE 70-135 Kbit/sec and bursts up to 200Kbit/sec, while WiFi is 802.11b/g and goes up to 54 Mbit/sec. YMMV will vary of course.
  • Send compressed content as the iPhone supports it.
  • Match image size to <img> height and width and minimize image use altogether if possible (e.g. use CSS and <canvas> if possible). Use CSS border, border-radius or Cavnas.
  • Use QuickTime reference movies (e.g. pull one move for WiFi and another movie for EDGE).
• Do not redirect automatically to an iPhone specific site.
• When creating applications use familiar layouts. They have familiar patterns on the developer website.
• Use familiar animations.
• Leverage existing libraries; iUi (by Joe Hewitt, which we used the prototype of for the Digg iPhone application), YUI, dojo and prototype.
• Integrate with the built-in apps when possible.
  • Any maps.google.com URL loads the built-in Maps application.
  • You can explicitly use href="tel:+1 (800) 555-1212" to launch the telephone application.
  • Of course the mailto:foo@example.com?subject=subject+here&body=my+message. Also supports “cc”.
• Use -webkit-border-radius: 8px to get the native rounded record border listings you see elsewhere.
• Interesting that they use onclick events on the li‘s (which have that -webkit-border-radius on them) instead of an anchor tag.
• Hide the address bar with window.scrollTo(0,1).
• Go to bugreporter.apple.com to report iPhone bugs. Do you guys provide any information on when you’ll fix a bug or add a feature? “Um, no.” (Duh)
• Interaction design tips
  • The mouse does not equal the finger. You don’t have multiple buttons, scroll wheels, etc. There’s no hover, rollover, scroll bars, etc.
  • Avoid an entirely interactive website; minimize animation, avoid distracting the user from the primary task, avoid hiding functionality behind rollovers.
  • Don’t require users to enter information; before something useful happens or something valuable happens.
  • Prevent zooming and constrain to vertical scrolling only.
  • Minimize text entry; use lists, pickers and use cookies for user information and where users where the last time they used the application.
• Optimize for bandwidth; design light-weight pages, minimize the use of large graphics.
• Optimize for user’s time; keep things clean, use standard iPhone paradigms, get users to primary content as quickly as possible.
• Oohhhh “Managing Content and Synced Data for iPhone”. My interest? It be piqued. Leveraging current content on iPhone, producing iPhone friendly video and managing portable user data.
  • *sigh* This hs pretty much nothing to do with managing any kind of data as one might expect. I was hoping for something about Google Gears maybe or accesing content on the phone? No idea, but something more interesting than this. Instead I’ve been reading about a guy who got 10 years for selling grow lamps.