iOS Web Apps: The Journey

These are some of the steps we took to create a native looking iOS web app.

Transcript

1. Easy iOS The Pain Free Way Less Painful
2. GoalsObj-C is not a friendly language
3. Development Speed Speed Deployment
4. Native Look And Feel
5. Bonus!
6. HTML & CSS3 iOS 5 Safari Supports This Message
7. background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color- stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
8. background-image: -webkit-gradient(linear, left top, left bottom, from(#576959), to(#223524));
9. Retina Graphics at a fraction of the size
10. The Journey
11. Website with webkit only CSS
12. Pin It! to the home screen...
13. Getting <meta> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no">
14. Getting <meta> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no">
15. Apple Fans Love Icons <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon- iphone4.png" /> So Give that Fan an Icon!
16. Milestone
17. Don’t Slide document.ontouchmove = function(e){ e.preventDefault(); }
18. Don’t Select * { -webkit-user-select: none; -webkit-touch-callout: none; }
19. Danger ! SINGLE PAGE APP
20. Danger ! SINGLE PAGE APP Also: Caching
21. Fewer Requests Faster Page Load = <Inline Resources /> ∴
22. The Last Mile
23. The Result
24. Questions? @robertfall @CapeTowniOS