Mobile Web Design Code
0 likes1,480 views
This document discusses mobile web design and provides recommendations for HTML5, CSS3, and JavaScript for mobile. It recommends using viewport meta tags, media queries for responsive designs, and touch-friendly input fields in HTML5. For CSS3, it suggests using media queries for responsive layouts, gradient effects, and high resolution media queries. For JavaScript, it advises keeping code simple with prompts, alerts, and touch optimizations.
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([email protected]); 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