Mobile Web Development<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
Native or Web???<br />2<br />Source: Jonathan Stark<br />
3<br />
With HTML5 & CSS3<br />4<br />
http://findmebyip.com/litmus/<br />
CSS2.1<br />
CSS3<br />Unfinished, but well supported<br />
iPhone/Android = Webkit<br />No Cross browser testing!!!<br />
CSS3<br />Mobile Webkit Supports  all of CSS3<br />Mobile Webkit Supports  HTML5<br />almost<br />^<br />much of<br />^<br />
CSS3 Properties<br />CSS3 Selectors<br />HSLA / RGBA<br />Multiple backgrounds<br />Background-size<br />Border-radius<br ...
Gradients
Transforms
Columns
Animations
Transitions
Border-image
Reflections
@font-face</li></li></ul><li>HTML5 APIs<br />Local Storage<br />Session Storage<br />WebSQL dB<br />Offline Applications<b...
Drag & Drop
<canvas>, <svg>, <audio>, <video>
Web Forms</li></li></ul><li>HTML5 <input> Types<br />date  /time / datetime  / datetime-local  / month / week<br />email <...
Number
Range
search</li></li></ul><li>Input Behavior<br />13<br />Keyboard support ≠ Input Type Support<br />
iPhone v. Android v. desktop<br />Input file type does Not work on iPhone. <br /><a href=“tel:14155551212>Call me</a><br /...
Mobile Simulators<br />15<br />
Debugging?<br />Switch user agent to iPhone / Other<br />Use Web Inspector to debug<br />16<br />
Firebug for Mobile?<br />Settings > Safari > Developer > Debug Console<br />17<br />Android Debug Bridge (ADB)<br />
Beautiful bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />(or apple-t...
Android bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />19<br />
Mobile web app settings<br /><link rel="apple-touch-startup-image" href="/startup.png"><br /><meta name="apple-mobile-web-...
Targeting Mobile<br />Viewport:<br /><meta name="viewport" content="width=980”/><br /><meta name="viewport" content="width...
@media queries<br /><ul><li> min-width
 max-width
 device-width
 min-device-width
 max-device-width
 orientation
 -webkit-min-device-pixel-ratio</li></ul>@media screen and (max-device-width: 480px){ <br />       /* small screen CSS her...
@media screen and (???){ …}<br />Portrait & Landscape    (min-width: 320px) and (max-width: 480px)<br />Portrait & Landsca...
iPad<br />Portrait & Landscape    (min-device-width: 768px) and (max-device-width: 1024px)<br />Landscape only<br />	(min-...
25<br />
Hide the Title bar<br /><script><br />addEventListener("load", function() { 		setTimeout(hideURLbar, 0); }, false);<br />	...
Don’t reinvent the wheel<br />27<br />
Sencha Touch<br />28<br />http://glyphish.com/<br />http://graffletopia.com/stencils<br />
29<br />http://10k.aneventapart.com<br />
30<br />
31<br />
32<br />Gradients<br />
Upcoming SlideShare
Loading in...5
×

Web Development for Mobile: GTUG Talk at Google

16,423

Published on

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.

Published in: Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,423
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
298
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide
  • standardista
  • standardista
  • standardista
  • 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
  • selecting the +, or &apos;add bookmark&apos; from the bottom nav, selecting &quot;Add to Home Screen&quot; from the bookmarks menuOptionally editing the title of the bookmark, andSelecting &quot;Add&quot;.
  • selecting the +, or &apos;add bookmark&apos; from the bottom nav, selecting &quot;Add to Home Screen&quot; from the bookmarks menuOptionally editing the title of the bookmark, andSelecting &quot;Add&quot;.
  • 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
  • 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
  • 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
  • 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
  • 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
  • Sorry, but no source was attributed
  • Javascript LibrariesEasiest to use is Joe Hewitt’s IUIMore full featured is JQTouchFor full fledged apps, Sencha Touch.
  • GRADIENTS
  • http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradients.html
  • .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:= [ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,2} | cover | contain }
  • Web Development for Mobile: GTUG Talk at Google

    1. 1. Mobile Web Development<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
    2. 2. Native or Web???<br />2<br />Source: Jonathan Stark<br />
    3. 3. 3<br />
    4. 4. With HTML5 & CSS3<br />4<br />
    5. 5. http://findmebyip.com/litmus/<br />
    6. 6. CSS2.1<br />
    7. 7. CSS3<br />Unfinished, but well supported<br />
    8. 8. iPhone/Android = Webkit<br />No Cross browser testing!!!<br />
    9. 9. CSS3<br />Mobile Webkit Supports all of CSS3<br />Mobile Webkit Supports HTML5<br />almost<br />^<br />much of<br />^<br />
    10. 10. CSS3 Properties<br />CSS3 Selectors<br />HSLA / RGBA<br />Multiple backgrounds<br />Background-size<br />Border-radius<br />Border-image<br />Text Shadow<br />Box Shadow <br />Opacity<br />10<br /><ul><li>Text-overflow
    11. 11. Gradients
    12. 12. Transforms
    13. 13. Columns
    14. 14. Animations
    15. 15. Transitions
    16. 16. Border-image
    17. 17. Reflections
    18. 18. @font-face</li></li></ul><li>HTML5 APIs<br />Local Storage<br />Session Storage<br />WebSQL dB<br />Offline Applications<br />GeoLocation<br />postMessage<br />11<br /><ul><li>Query selector ??
    19. 19. Drag & Drop
    20. 20. <canvas>, <svg>, <audio>, <video>
    21. 21. Web Forms</li></li></ul><li>HTML5 <input> Types<br />date /time / datetime / datetime-local / month / week<br />email <br />url<br />12<br /><ul><li>Tel
    22. 22. Number
    23. 23. Range
    24. 24. search</li></li></ul><li>Input Behavior<br />13<br />Keyboard support ≠ Input Type Support<br />
    25. 25. iPhone v. Android v. desktop<br />Input file type does Not work on iPhone. <br /><a href=“tel:14155551212>Call me</a><br />mailto: opens mail application<br />google maps, iTunes and Youtube links open widgets on iPhone<br />view source debugger<br />✔<br />14<br />
    26. 26. Mobile Simulators<br />15<br />
    27. 27. Debugging?<br />Switch user agent to iPhone / Other<br />Use Web Inspector to debug<br />16<br />
    28. 28. Firebug for Mobile?<br />Settings > Safari > Developer > Debug Console<br />17<br />Android Debug Bridge (ADB)<br />
    29. 29. Beautiful bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />(or apple-touch-icon-precomposed.png)<br />18<br />
    30. 30. Android bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />19<br />
    31. 31. Mobile web app settings<br /><link rel="apple-touch-startup-image" href="/startup.png"><br /><meta name="apple-mobile-web-app-capable" content="yes" /> <br /><meta name="apple-mobile-web-app-status-bar-style" content=“default || black || black-translucent" /> (iPhone only)<br />20<br />
    32. 32. Targeting Mobile<br />Viewport:<br /><meta name="viewport" content="width=980”/><br /><meta name="viewport" content="width=device-width”/><br /><meta name="viewport" <br /> content="user-scalable=no, width=device-width"/><br />Prohibit Zoom / Pinch:<br /><meta name="viewport" content="width=device-width, <br /> minimum-scale=1.0, maximum-scale=1.0" /> <br />21<br />
    33. 33. @media queries<br /><ul><li> min-width
    34. 34. max-width
    35. 35. device-width
    36. 36. min-device-width
    37. 37. max-device-width
    38. 38. orientation
    39. 39. -webkit-min-device-pixel-ratio</li></ul>@media screen and (max-device-width: 480px){ <br /> /* small screen CSS here */ <br />} <br />22<br />
    40. 40. @media screen and (???){ …}<br />Portrait & Landscape (min-width: 320px) and (max-width: 480px)<br />Portrait & Landscape<br /> (min-device-width: 320px) and (max-device-width: 480px)<br />Portrait & Landscape<br /> (max-device-width: 480px)<br />Landscape only<br /> (min-width: 321px) and (max-width: 480px)<br />Portrait only<br /> (max-width: 320px) <br />23<br />
    41. 41. iPad<br />Portrait & Landscape (min-device-width: 768px) and (max-device-width: 1024px)<br />Landscape only<br /> (min-device-width: 481px) and<br /> (max-device-width: 1024px) and <br /> (orientation: landscape)<br />Portrait only<br /> (min-device-width: 481px) and <br /> (max-device-width: 1024px) and <br /> (orientation: portrait)<br />24<br />
    42. 42. 25<br />
    43. 43. Hide the Title bar<br /><script><br />addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);<br /> function hideURLbar(){ window.scrollTo(0,1); }<br />} <br /></script><br />26<br />
    44. 44. Don’t reinvent the wheel<br />27<br />
    45. 45. Sencha Touch<br />28<br />http://glyphish.com/<br />http://graffletopia.com/stencils<br />
    46. 46. 29<br />http://10k.aneventapart.com<br />
    47. 47. 30<br />
    48. 48. 31<br />
    49. 49. 32<br />Gradients<br />
    50. 50. http://www.westciv.com/tools/gradients/<br />33<br />
    51. 51. 34<br />text-shadow: color leftoffsettopoffset blur;<br />
    52. 52. 35<br />
    53. 53. 36<br />
    54. 54. 37<br />
    55. 55. foo {<br /> background-image: url(foo.png); <br /> -moz-background-size: 100% 50%; //FF3.6 <br /> -o-background-size: 100% 50%; //O 9.5 <br /> -webkit-background-size: 100% 50%; //Saf 3.0             <br /> background-size: 100% 50%; <br /> } <br />38<br />
    56. 56. 39<br />
    57. 57. 40<br />
    58. 58. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />41<br />
    59. 59. 42<br />Transforms<br />translate() -webkit-transform: translate(15px, -15px); <br /> transform: translate(15px, -15px);<br />translateX() -webkit-transform: translatex(15px);<br /> transform: translatex(15px);<br /> <br />translateY() -webkit-transform: translatey(-15px); <br /> transform: translatey(-15px);<br /> <br />scale() -webkit-transform: scale(1.5, 2);<br /> transform: scale(1.5, 2);<br /> <br />scaleX() -webkit-transform: scalex(0.5); <br /> transform: scalex(0.5);<br /> <br />scaleY() -webkit-transform: scaley(2);<br /> transform: scaley(2);<br /> <br />
    60. 60. 43<br />rotate() -webkit-transform: rotate(15deg); <br /> transform: rotate(15deg)<br /> <br />skew() -webkit-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);<br /> <br />skewX() -webkit-transform: skewx(15deg);<br /> transform: skewx(15deg);<br /> <br />skewY() -webkit-transform: skewy(-3deg); <br /> transform: skewy(-3deg);<br />Multiple transforms<br />.enlargen:hover {<br /> -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); <br /> transform: translate(-50%, -50%) scale(2) rotate(0);<br />}<br /> <br />
    61. 61. 44<br />Transitions<br />transition-property<br />transition-duration<br />transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()<br />transition-delay<br />
    62. 62. 45<br />Multiple Transitions<br />or ‘all’<br />
    63. 63. 46<br />Animation<br />
    64. 64. 47<br />Animation<br /> animation-name, <br /> animation-duration, <br /> animation-timing-function<br /> ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier()<br /> animation-delay<br /> animation-iteration-count<br />n || infinite<br /> animation-direction<br /> alternate || normal<br />
    65. 65. Thanks.<br />Estelle Weyl<br />Twitter: @estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />48<br />
    66. 66. Credits<br />http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen<br />49<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×