Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Mobile Web Design Code
Similaire à Mobile Web Design Code (20)
Dernier
Dernier (20)
Mobile Web Design Code
- 1. Mobile Web Design CODE @markodugonjic
- 2. HTML5 CSS3 JavaScript
- 3. HTML5
- 5. <!DOCTYPE html> <meta name="viewport" /> <link rel="stylesheet" media="..." />
- 7. <video src="video.m4v" preload controls poster="image.jpg"></video>
- 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
- 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
- 39. Back to Work! @markodugonjic