Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web Design Code

10a4285792e47c507ab4782b6716c0d1?s=47 Marko Dugonjić
October 10, 2011

Mobile Web Design Code

Pragmatic front-end development for mobile web. Instant and easy to understand examples which should enhance user experience on any mobile web site.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

October 10, 2011
Tweet

Transcript

  1. Mobile Web Design CODE @markodugonjic

  2. HTML5 CSS3 JavaScript

  3. HTML5

  4. basic structure differences

  5. <!DOCTYPE html> <meta name="viewport" /> <link rel="stylesheet" media="..." />

  6. video for mobile

  7. <video src="video.m4v" preload controls poster="image.jpg"></video>

  8. <video src="video.m4v"></video>

  9. clever input fields

  10. <input type="email" />

  11. <input type="tel" />

  12. <input type="url" />

  13. <input type="number" />

  14. <input type="email" placeholder="Enter your e-mail" />

  15. <input type="email" required />

  16. http://wufoo.com/html5/ http://caniuse.com http://www.quirksmode.org/html5/ inputs_mobile.html http://mobilehtml5.org

  17. CSS3

  18. media queries

  19. <link rel="stylesheet" href="style.css" media="only screen and (min-width: 768px)" />

  20. @media only screen and (min-width: 768px) { /* desktop styles

    */ }
  21. (min-width: 321px) (max-width: 320px) (min-device-width: 320px) (max-device-width: 480px) (orientation: landscape)

    (orientation: portrait)
  22. (-webkit-min-device-pixel-ratio: 2) (min-device-pixel-ratio: 2)

  23. a couple of useful CSS properties

  24. a couple of useful CSS properties useful

  25. box-shadow: 0 2px 2px 0 rgba(0,0,0,.5), inset 0 -2px 2px

    0 rgba(255,255,255,.5) linear-gradient(#fff, #000) border-radius: 10px/50px (+ height: 20px; width: 100px) text-shadow: 0 1px 0 rgba(0,0,0,.5)
  26. -webkit-gradient( linear, 0% 0%, 0% 100%, from(#fff), to(#000) )

  27. button { -webkit-appearance: none; }

  28. @media screen and (-webkit-min-device-pixel-ratio: 2) { background: url(image@2x.png); background-size: 10px

    10px; }
  29. keep an eye on UI performance

  30. The responsive workflow #1 general typography #2 vertical rhythm #3

    layout and proportions
  31. JavaScript

  32. keep it simple

  33. confirm( 'This service will be charged XY.\ Do you accept?'

    ) alert( 'Your transaction was successful.' )
  34. window.onload = function() { setTimeout(function(){ window.scrollTo(0, 1); }, 100); }

  35. document.getElementById('nav').innerHTML = '<select \ onchange="document.location=this.value;"\ <option value="#">Home</option>\ <option value="#">Work</option>\ <option

    value="#">Clients</option>\ <option value="#">Contact</option>\ </select>';
  36. Handy tools

  37. http://www.zambetti.com/projects/liveview/

  38. http://www.mozilla.org/en-US/mobile/ http://www.opera.com/developer/tools/mobile/

  39. Back to Work! @markodugonjic