Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Mobile Web Design Code
Ähnlich wie Mobile Web Design Code (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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