Cm i padwebdev_lunch_learn


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cm i padwebdev_lunch_learn

  1. 1. iPad Web DevelopmentA magical and revolutionary presentationDecember 13, 2010By Abraham Velazquez &Alex Zelenskiy© 2010 Critical Mass, Inc. All Rights Reserved
  2. 2. Native App vs. Web AppObjective C + APIs/Backend HTML5/CSS3/JS + BackendHigher Cost ≈ 3-5x Considerably lower cost because they are more commonNative does more, its faster/smoother languagesApp Store Promotion Instant updatesUpdate require apple approval Native does more, is faster/smootherNative sits on the device Deployed online and viewed via safari or pulled into application wrapperNative is best when you need tocache/store a lot of content that does No internet, no app. There are somenot change. caching options, but limited.Access to all iOS APIs Access to Limited APIs
  3. 3. Web Apps on iPad vs. iPhone vs. AndroidAll 3 use webkit... but!iPad iPhone Android 320x480 240x6401024x768 640x960 360x640APIs: Location, 320x480Orientation, 480x800Accelerometer, Tap APIs: Location, 600x1024 (Tab)Targets and swipes Orientation, Accelerometer, Tap APIs: Location,Video, Local Storage Targets and swipes Orientation, Accelerometer,CSS3 Fonts Video, Local Storage Camera CSS3 Fonts Video, Local Storage Flash! (Kinda) Poor Font Support
  4. 4. iDevices: stop worrying about this stuff! Reliable Layouts (IE6 is dead) Great CSS3 Support because its the almighty WebKit Flash mobile is dead (Kinda) Mobile Video is standard and reliable Hover events, there is no hover for touch.
  5. 5. Start worrying about this, though. 1. Animation/transition performance Transitions are possible, but use wisely. To many will cause poor performance 2. Slow Internet speed Dont overload with high-res images or non-optimized video. Use progressive downloading 3. No fixed positioning No toolbars at top of pages, unless you use a library 4. Need to pay attention how content is being served Web view and mobile safari do not fire the same events, for example. 6. Two screen orientations Design for landscape and portrait How will content re-flow based on position. Headers shrink down, Sidebars become footers
  6. 6. Best Practices: Design Your finger is 30 pixels wide! (60pixels on iPhone 4) Give tappable elements in your app a target area of at least 44 x 44 pixels. Keep 12ish pixels between navigation elements (double on iPhone 4). Stick to native styles where ever possible Keep it simple! What are the bare essentials? Test both, in Simulator and load JPG on Device
  7. 7. Best Practices 3: UIKeep in mind where users hands are going to be:iPhone uses a bottom naviPad uses split view
  8. 8. Examples
  9. 9. Side Navigation
  10. 10. Best Practices: Development Keep requests down (5-10 per page) No Faux CSS Elements :before or :after Anything that causes dom redraws is bad Use classes for everything (Turn then on/off when you need them) CSS3 is good, but go easy on it Optimize all your images Use CSS/Image sprites, wisely Canvas and SVG elements are pretty good
  11. 11. HTML 5Video tags are good.Some of the new HTML form attributes will trigger the alternate screenkeyboards on mobile devices. This is really handy.
  12. 12. CSS3background-color: rgba(180, 180, 144, 0.6);opacity: .5;text-shadow: 1px 1px 3px #888;background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0, #444444),color-stop(1, #999999));-webkit-border-radius: 12px;-webkit-box-shadow: 0px 0px 4px #ffffff;-webkit-transition: all 1s ease-in-out;-webkit-transition-property: opacity, left;-webkit-transition-duration: 2s, 4s;transform:skew(35deg);transform:scale(1,0.5);transform:rotate(45deg);transform:translate(10px, 20px);
  13. 13. CSS3 You can do this... but don!
  14. 14. Font Support - Use it! list of native fonts on iPad and iPhoneTypekit works on everythingGoogle font directory now works on everything.Use something like to generate fonts in thecorrect formats.Check font licenses before including them.Older iOS versions are at a (50%) risk of crashing when youbind different @font-face weights to the same typeface.
  15. 15. Mobile Webkit vs. WebkitMobile webkit is a lot like desktop webkit, except it runs on slowerhardware, tries to scale everything to a tiny screen*, and does notremember what position:fixed is.*unless you tell it not to through the use of meta tags:<meta name="viewport" content="width=device-width, initial-scale=1.0;maximum-scale=1.0;">
  16. 16. TricksThere are some undocumented features of webkit that producedesired effects.For example, translate3d can be exploited for smoother rendering:-webkit-transform: translate3d(0,0,0)Unfortunately, stuff like this is not a feature and could be "fixed" byapple at any time.
  17. 17. CSS Media Queries<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">@media only screen and (max-device-width: 1024px) and(orientation:portrait) {}@media only screen and (max-device-width: 1024px) and(orientation:landscape) {}
  18. 18. Meta Viewport Tag
  19. 19. JavascriptMobile browsers have device-specific javascript events that you areable to hook into: device rotation touch (different from click)Caveat: these are not consistent between mobile safari and webviewin iOS apps.window.addEventListener(orientationchange in window ?orientationchange : resize, foo, false);document.body.className = orientation % 180 == 0 ? vertical : horizontal;
  20. 20. JavascriptDont use JS libraries, unless you really need to.Standard JS is reliable.iScroll JS if you have to to use custom scrollingRapahelJS for SVG and graphicsMobile browsers have device-specific JavaScript events that you areable to hook into: device rotation touch (different from click)
  21. 21. Backend / AJAXThe back end is going to be pretty much identical.All of the dynamic data, whether you have a web or nativeapp, is likely going to be piped over http.
  22. 22. DEPLOY!
  23. 23. Questions?