Web Development for Mobile: GTUG Talk at Google
Download as PPTX, PDF24 likes4,699 views
The document discusses mobile web development, focusing on the use of HTML5 and CSS3, including their compatibility on iPhone and Android devices. It covers various topics such as debugging, mobile applications settings, and media queries for responsive design. Additionally, the document highlights relevant resources and tools for improving mobile web applications.
Web Development for Mobile: GTUG Talk at Google
- 1. Mobile Web DevelopmentEstelle Weylhttp://standardista.comhttp://evotech.net/blog@estellevw
- 2. Native or Web???2Source: Jonathan Stark
- 3. 3
- 4. With HTML5 & CSS34
- 6. CSS2.1
- 7. CSS3Unfinished, but well supported
- 8. iPhone/Android = WebkitNo Cross browser testing!!!
- 9. CSS3Mobile Webkit Supports all of CSS3Mobile Webkit Supports HTML5almost^much of^
- 10. CSS3 PropertiesCSS3 SelectorsHSLA / RGBAMultiple backgroundsBackground-sizeBorder-radiusBorder-imageText ShadowBox Shadow Opacity10Text-overflow
- 11. Gradients
- 12. Transforms
- 13. Columns
- 14. Animations
- 15. Transitions
- 16. Border-image
- 17. Reflections
- 18. @font-faceHTML5 APIsLocal StorageSession StorageWebSQL dBOffline ApplicationsGeoLocationpostMessage11Query selector ??
- 19. Drag & Drop
- 20. <canvas>, <svg>, <audio>, <video>
- 21. Web FormsHTML5 <input> Typesdate /time / datetime / datetime-local / month / weekemail url12Tel
- 22. Number
- 23. Range
- 24. searchInput Behavior13Keyboard support ≠ Input Type Support
- 25. iPhone v. Android v. desktopInput file type does Not work on iPhone. <a href=“tel:14155551212>Call me</a>mailto: opens mail applicationgoogle maps, iTunes and Youtube links open widgets on iPhoneview source debugger✔14
- 27. Debugging?Switch user agent to iPhone / OtherUse Web Inspector to debug16
- 28. Firebug for Mobile?Settings > Safari > Developer > Debug Console17Android 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.png19
- 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 MobileViewport:<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. iPadPortrait & 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 wheel27
- 47. 30
- 48. 31
- 49. 32Gradients
- 51. 34text-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. 42Transformstranslate() -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. 43rotate() -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. 44Transitionstransition-propertytransition-durationtransition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()transition-delay
- 63. 46Animation
- 64. 47Animation animation-name, animation-duration, animation-timing-function ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier() animation-delay animation-iteration-countn || infinite animation-direction alternate || normal
- 65. Thanks.Estelle WeylTwitter: @estellevwBlog: http://www.standardista.comhttp://evotech.net/blog48
Editor's Notes
- #11: standardista
- #12: standardista
- #13: standardista
- #17: Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 Switching user agent only matters if browser sniffingMozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
- #19: selecting the +, or 'add bookmark' from the bottom nav, selecting "Add to Home Screen" from the bookmarks menuOptionally editing the title of the bookmark, andSelecting "Add".
- #20: selecting the +, or 'add bookmark' from the bottom nav, selecting "Add to Home Screen" from the bookmarks menuOptionally editing the title of the bookmark, andSelecting "Add".
- #22: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
- #23: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
- #24: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
- #25: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
- #26: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
- #28: Sorry, but no source was attributed
- #29: Javascript LibrariesEasiest to use is Joe Hewitt’s IUIMore full featured is JQTouchFor full fledged apps, Sencha Touch.
- #33: GRADIENTS
- #34: http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradients.html
- #39: .foo { background-image: url(bg-image.png); -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ -o-background-size: 100% 100%; /* Opera 9.5 */ -webkit-background-size: 100% 100%; /* Safari 3.0 */ background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */Background-size:= [ <length> | <percentage> | auto ]{1,2} | cover | contain }