Open source javascript libraries for mobile web applications in 2012
Your SlideShare is downloading.
×
![User Agent Sniffing
JS: navigator.userAgent
PHP: $_SERVER['HTTP_USER_AGENT']](https://image.slidesharecdn.com/designingforthemobileweb-101210150326-phpapp02/75/designing-for-the-mobile-web-by-michael-dick-december-2010-40-2048.jpg?cb=1668228906)
Check these out next
Recommended
More Related Content
Slideshows for you (20)
Viewers also liked (20)
Similar to "Designing for the Mobile Web" by Michael Dick (December 2010) (20)
Recently uploaded (20)
"Designing for the Mobile Web" by Michael Dick (December 2010)
- 1. Designing for the MOBILE WEB @michaeldick http://m1k3.net RefreshBmore Dec. 2010
- 2. @michaeldick cssiphone.com nclud web inspiration for mobile a creative web design agency
- 3. 1) Design & UX 2) Viewports 3) Detection 4) Tips & Tricks 5) Questions & Discussion
- 4. Mobile Web 2.0 * Compare it to * the browser wars * from the 90’s
- 5. CSS = CSS HTML = HTML JS = JS
- 6. (Technical only, not applied to the user interaction)
- 7. X Conte__t is king
- 8. is the iPad “Mobile” ?
- 9. “ It’s so much more intimate than a laptop ” — Steve Jobs
- 10. Jobs demonstrated the iPad while sitting on a couch.
- 11. Good.
- 12. Good.
- 13. Good.
- 14. :(
- 15. Good.
- 16. Design & Experience
- 17. BAD EXPERIENCE
- 18. Graceful Degradation
- 19. Desktop
- 20. Mobile “2.0”
- 21. Mobile “WAP”
- 22. Opt-in / Opt-out
- 23. opt-in
- 24. opt to go back
- 25. opt-out
- 26. opt to go back
- 27. opt to go back
- 28. Viewports and why fixed positioning doesn’t work!
- 29. <meta name="viewport" content="" /> (at its most basic state)
- 30. content=” width = ; initial-scale = ; maximum-scale = ; user-scalable = ; ”
- 31. VIEWPORT STARTS
- 32. VIEWPORT ENDS
- 33. VIEWPORT NOT!
- 34. Device Detection
- 35. Specific vs Optimized (and responsive)
- 36. Optimized Specific same markup new markup both use new CSS
- 37. Stylesheet (HTML) <link rel="stylesheet" href="" media="only screen and (max-device-width: 480px)" />
- 38. @media (CSS) @media only screen and (max-device- width: 480px) { /* iphone css goes here */ }
- 39. @import (CSS) @import url(‘mobile.css’) only screen and (max-device-width: 480px);
- 40. User Agent Sniffing JS: navigator.userAgent PHP: $_SERVER['HTTP_USER_AGENT']
- 41. detectMobileBrowsers.mobi
- 42. require('detect.php'); $mobile = detect();
- 43. Orientation Detection
- 44. <body id=”portrait”>
- 45. body#portrait { width:320px; color:green; }
- 46. body#landscape { width:480px; color:red; }
- 47. Quick Tips & Tricks
- 48. HTML 5 Inputs type=”url” type=”email” type=”number” type=”tel”
- 49. Disable.. autocorrect="off" autocapitalize="off" autocomplete="off"
- 50. use large hit areas
- 51. BAD HIT AREAS
- 52. Keeps the text from adjusting on orientation change body { -webkit-text- size-adjust:none; }
- 53. Hide the Address Bar onload <body onload=” window.scrollTo(0, 1); ”>
- 54. Don’t use fixed widths/heights
- 55. Discussion & Questions
- 56. Google Keywords ✓ iphone detection ✓ iphone orientation javascript ✓ iphone psd ✓ detect mobile browsers ✓ android / iphone sdk ✓ mobile safari dev center *
- 57. Thank You. @michaeldick http://m1k3.net
