Cm i padwebdev_lunch_learn
1 like1,826 views
This document provides an overview of developing apps for the iPad using web technologies like HTML5, CSS3, and JavaScript compared to developing native apps. It discusses key differences like the APIs available, performance, costs, updating processes, and more. It then provides best practices for web design on iPads, including considerations for touch targets, orientations, animations, images, and more. It also covers specific technologies like HTML5, CSS3, JavaScript, and backend development approaches. The overall message is that web development for iPads is very capable with modern techniques.
Cm i padwebdev_lunch_learn
- 1. iPad Web Development A magical and revolutionary presentation December 13, 2010 By Abraham Velazquez & Alex Zelenskiy © 2010 Critical Mass, Inc. All Rights Reserved
- 2. Native App vs. Web App Objective C + APIs/Backend HTML5/CSS3/JS + Backend Higher Cost ≈ 3-5x Considerably lower cost because they are more common Native does more, it's faster/smoother languages App Store Promotion Instant updates Update require apple approval Native does more, is faster/smoother Native sits on the device Deployed online and viewed via safari or pulled into application wrapper Native is best when you need to cache/store a lot of content that does No internet, no app. There are some not change. caching options, but limited. Access to all iOS APIs Access to Limited APIs
- 3. Web Apps on iPad vs. iPhone vs. Android All 3 use webkit... but! iPad iPhone Android 320x480 240x640 1024x768 640x960 360x640 APIs: Location, 320x480 Orientation, 480x800 Accelerometer, 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. iDevices: stop worrying about this stuff! Reliable Layouts (IE6 is dead) Great CSS3 Support because it's the almighty WebKit Flash mobile is dead (Kinda) Mobile Video is standard and reliable Hover events, there is no hover for touch.
- 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 Don't 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. 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. Best Practices 3: UI Keep in mind where users hands are going to be: iPhone uses a bottom nav iPad uses split view
- 8. Examples
- 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. HTML 5 Video tags are good. Some of the new HTML form attributes will trigger the alternate screen keyboards on mobile devices. This is really handy.
- 12. CSS3 background-color: rgba(180, 180, 144, 0.6); opacity: .5; text-shadow: 1px 1px 3px #888; background-image: -webkit-gradient(linear,left top,left bottom,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. CSS3 You can do this... but don'!
- 14. Font Support - Use it! iosfonts.com list of native fonts on iPad and iPhone Typekit works on everything Google font directory now works on everything. Use something like fontsquirrel.com to generate fonts in the correct formats. Check font licenses before including them. Older iOS versions are at a (50%) risk of crashing when you bind different @font-face weights to the same typeface.
- 15. Mobile Webkit vs. Webkit Mobile webkit is a lot like desktop webkit, except it runs on slower hardware, tries to scale everything to a tiny screen*, and does not remember 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. Tricks There are some undocumented features of webkit that produce desired 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" by apple at any time.
- 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) { }
- 19. Javascript Mobile browsers have device-specific javascript events that you are able to hook into: device rotation touch (different from click) Caveat: these are not consistent between mobile safari and webview in iOS apps. window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', foo, false); document.body.className = orientation % 180 == 0 ? 'vertical' : 'horizontal';
- 20. Javascript Don't use JS libraries, unless you really need to. Standard JS is reliable. iScroll JS if you have to to use custom scrolling RapahelJS for SVG and graphics Mobile browsers have device-specific JavaScript events that you are able to hook into: device rotation touch (different from click)
- 21. Backend / AJAX The back end is going to be pretty much identical. All of the dynamic data, whether you have a web or native app, is likely going to be piped over http.
- 22. DEPLOY!
- 23. Questions?