Mobile Web Design    CODE   @markodugonjic
HTML5   CSS3JavaScript
HTML5
basic structure differences
<!DOCTYPE html><meta name="viewport" /><link rel="stylesheet" media="..." />
videofor mobile
<video src="video.m4v"    preload    controls    poster="image.jpg"></video>
<video src="video.m4v"></video>
clever input fields
<input type="email" />
<input type="phone" />
<input type="url" />
<input type="number" />
<input type="email"    placeholder="Enter your e-mail" />
<input type="email" required />
http://wufoo.com/html5/          http://caniuse.comhttp://www.quirksmode.org/html5/         inputs_mobile.html       http:...
CSS3
media queries
<link    rel="stylesheet"    href="style.css"    media="only screen and (min-width: 768px)"/>
@media only screen and (min-width: 768px){   /* desktop styles */}
(min-width: 321px)   (max-width: 320px)(min-device-width: 320px)(max-device-width: 480px)(orientation: landscape)(orientat...
(-webkit-min-device-pixel-ratio: 2)   (min-device-pixel-ratio: 2)
a couple of useful CSS properties
a couple of useful CSS properties
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-rad...
-webkit-gradient(    linear,    0% 0%,    0% 100%,    from(#fff),    to(#000))
button { -webkit-appearance: none; }
@media screen and(-webkit-min-device-pixel-ratio: 2) {    background: url(image@2x.png);    background-size: 10px 10px;}
keep an eye onUI performance
The responsive workflow#1 general typography#2 vertical rhythm#3 layout and proportions
JavaScript
keep it simple
confirm(    This service will be charged XY.    Do you accept?)alert(    Your transaction was successful.)
window.onload = function() {    setTimeout(function(){        window.scrollTo(0, 1);    }, 100);}
document.getElementById(nav).innerHTML= <select onchange="document.location=this.value;"    <option value="#">Home</option...
Handy tools
http://www.zambetti.com/projects/liveview/
http://www.mozilla.org/en-US/mobile/http://www.opera.com/developer/tools/mobile/
Back to Work!   @markodugonjic
Upcoming SlideShare
Loading in...5
×

Mobile Web Design Code

1,345

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,345
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web Design Code

  1. 1. Mobile Web Design CODE @markodugonjic
  2. 2. HTML5 CSS3JavaScript
  3. 3. HTML5
  4. 4. basic structure differences
  5. 5. <!DOCTYPE html><meta name="viewport" /><link rel="stylesheet" media="..." />
  6. 6. videofor mobile
  7. 7. <video src="video.m4v" preload controls poster="image.jpg"></video>
  8. 8. <video src="video.m4v"></video>
  9. 9. clever input fields
  10. 10. <input type="email" />
  11. 11. <input type="phone" />
  12. 12. <input type="url" />
  13. 13. <input type="number" />
  14. 14. <input type="email" placeholder="Enter your e-mail" />
  15. 15. <input type="email" required />
  16. 16. http://wufoo.com/html5/ http://caniuse.comhttp://www.quirksmode.org/html5/ inputs_mobile.html http://mobilehtml5.org
  17. 17. CSS3
  18. 18. media queries
  19. 19. <link rel="stylesheet" href="style.css" media="only screen and (min-width: 768px)"/>
  20. 20. @media only screen and (min-width: 768px){ /* desktop styles */}
  21. 21. (min-width: 321px) (max-width: 320px)(min-device-width: 320px)(max-device-width: 480px)(orientation: landscape)(orientation: portrait)
  22. 22. (-webkit-min-device-pixel-ratio: 2) (min-device-pixel-ratio: 2)
  23. 23. a couple of useful CSS properties
  24. 24. a couple of useful CSS properties
  25. 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. 26. -webkit-gradient( linear, 0% 0%, 0% 100%, from(#fff), to(#000))
  27. 27. button { -webkit-appearance: none; }
  28. 28. @media screen and(-webkit-min-device-pixel-ratio: 2) { background: url(image@2x.png); background-size: 10px 10px;}
  29. 29. keep an eye onUI performance
  30. 30. The responsive workflow#1 general typography#2 vertical rhythm#3 layout and proportions
  31. 31. JavaScript
  32. 32. keep it simple
  33. 33. confirm( This service will be charged XY. Do you accept?)alert( Your transaction was successful.)
  34. 34. window.onload = function() { setTimeout(function(){ window.scrollTo(0, 1); }, 100);}
  35. 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. 36. Handy tools
  37. 37. http://www.zambetti.com/projects/liveview/
  38. 38. http://www.mozilla.org/en-US/mobile/http://www.opera.com/developer/tools/mobile/
  39. 39. Back to Work! @markodugonjic
  1. A particular slide catching your eye?

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

×