Mobile Web Design Code
•
0 likes•1,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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Mobile Web Design Code
Similar to Mobile Web Design Code (20)
Recently uploaded
Recently uploaded (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