You no longer have to wait to use HTML5 and CSS3: in developing for mobile, you don't have to worry about archaic browser. Webkit, the browser engine found on Android and iPhone provide excellent support for CSS3 and HTML5. In this session we learn how we can use these new technologies to create mobile web applications.

1. Mobile Web Development Estelle Weyl http://standardista.com http://evotech.net/blog @estellevw

2. Native or Web??? 2 Source: Jonathan Stark

3. 3

4. With HTML5 & CSS3 4

5. http://findmebyip.com/litmus/

6. CSS2.1

7. CSS3 Unfinished, but well supported

8. iPhone/Android = Webkit No Cross browser testing!!!

9. CSS3 Mobile Webkit Supports all of CSS3 Mobile Webkit Supports HTML5 almost ^ much of ^

11. Gradients

12. Transforms

13. Columns

14. Animations

15. Transitions

16. Border-image

17. Reflections

19. Drag & Drop

20. <canvas>, <svg>, <audio>, <video>

22. Number

23. Range

25. iPhone v. Android v. desktop Input file type does Not work on iPhone. <a href=“tel:14155551212>Call me</a> mailto: opens mail application google maps, iTunes and Youtube links open widgets on iPhone view source debugger ✔ 14

26. Mobile Simulators 15

27. Debugging? Switch user agent to iPhone / Other Use Web Inspector to debug 16

28. Firebug for Mobile? Settings > Safari > Developer > Debug Console 17 Android Debug Bridge (ADB)

29. Beautiful bookmarks <link rel="apple-touch-icon" href="/iphoneicon.png" /> apple-touch-icon.png (or apple-touch-icon-precomposed.png) 18

30. Android bookmarks <link rel="apple-touch-icon" href="/iphoneicon.png" /> apple-touch-icon.png 19

31. Mobile web app settings <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content=“default || black || black-translucent" /> (iPhone only) 20

32. Targeting Mobile Viewport: <meta name="viewport" content="width=980”/> <meta name="viewport" content="width=device-width”/> <meta name="viewport" content="user-scalable=no, width=device-width"/> Prohibit Zoom / Pinch: <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> 21

34. max-width

35. device-width

36. min-device-width

37. max-device-width

38. orientation

39. -webkit-min-device-pixel-ratio@media screen and (max-device-width: 480px){ /* small screen CSS here */ } 22

40. @media screen and (???){ …} Portrait & Landscape (min-width: 320px) and (max-width: 480px) Portrait & Landscape (min-device-width: 320px) and (max-device-width: 480px) Portrait & Landscape (max-device-width: 480px) Landscape only (min-width: 321px) and (max-width: 480px) Portrait only (max-width: 320px) 23

41. iPad Portrait & Landscape (min-device-width: 768px) and (max-device-width: 1024px) Landscape only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) Portrait only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) 24

42. 25

43. Hide the Title bar <script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } } </script> 26

44. Don’t reinvent the wheel 27

45. Sencha Touch 28 http://glyphish.com/ http://graffletopia.com/stencils

46. 29 http://10k.aneventapart.com

47. 30

48. 31

49. 32 Gradients

50. http://www.westciv.com/tools/gradients/ 33

51. 34 text-shadow: color leftoffsettopoffset blur;

52. 35

53. 36

54. 37

55. foo { background-image: url(foo.png); -moz-background-size: 100% 50%; //FF3.6 -o-background-size: 100% 50%; //O 9.5 -webkit-background-size: 100% 50%; //Saf 3.0 background-size: 100% 50%; } 38

56. 39

57. 40

58. CSS3 Selectors :nth-of-type() tr:nth-of-type(even) td{ background-color: #dedede; } 41

59. 42 Transforms translate() -webkit-transform: translate(15px, -15px); transform: translate(15px, -15px); translateX() -webkit-transform: translatex(15px); transform: translatex(15px); translateY() -webkit-transform: translatey(-15px); transform: translatey(-15px); scale() -webkit-transform: scale(1.5, 2); transform: scale(1.5, 2); scaleX() -webkit-transform: scalex(0.5); transform: scalex(0.5); scaleY() -webkit-transform: scaley(2); transform: scaley(2);

60. 43 rotate() -webkit-transform: rotate(15deg); transform: rotate(15deg) skew() -webkit-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg); skewX() -webkit-transform: skewx(15deg); transform: skewx(15deg); skewY() -webkit-transform: skewy(-3deg); transform: skewy(-3deg); Multiple transforms .enlargen:hover { -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0); }

61. 44 Transitions transition-property transition-duration transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier() transition-delay

62. 45 Multiple Transitions or ‘all’

63. 46 Animation

64. 47 Animation animation-name, animation-duration, animation-timing-function ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier() animation-delay animation-iteration-count n || infinite animation-direction alternate || normal

65. Thanks. Estelle Weyl Twitter: @estellevw Blog: http://www.standardista.com http://evotech.net/blog 48

66. Credits http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen 49