"Designing for the Mobile Web" by Michael Dick (December 2010)
3 likes1,096 views
The document discusses key principles for designing mobile web experiences, covering aspects like design, user experience, viewports, and device detection. It emphasizes the importance of adapting content for mobile devices while avoiding fixed positions and provides various technical tips for enhancing mobile usability. Additionally, it raises questions about the nature of mobile designs and includes references to tools and best practices for developers.
![User Agent Sniffing
JS: navigator.userAgent
PHP: $_SERVER['HTTP_USER_AGENT']](https://image.slidesharecdn.com/designingforthemobileweb-101210150326-phpapp02/85/Designing-for-the-Mobile-Web-by-Michael-Dick-December-2010-52-320.jpg)
"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
- 24. BAD EXPERIENCE
- 27. Desktop
- 28. Mobile “2.0”
- 29. Mobile “WAP”
- 30. Opt-in / Opt-out
- 31. opt-in
- 32. opt to go back
- 33. opt-out
- 34. opt to go back
- 35. opt to go back
- 36. Viewports and why fixed positioning doesn’t work!
- 40. <meta name="viewport" content="" /> (at its most basic state)
- 41. content=” width = ; initial-scale = ; maximum-scale = ; user-scalable = ; ”
- 43. VIEWPORT STARTS
- 44. VIEWPORT ENDS
- 45. VIEWPORT NOT!
- 46. Device Detection
- 47. Specific vs Optimized (and responsive)
- 48. Optimized Specific same markup new markup both use new CSS
- 49. Stylesheet (HTML) <link rel="stylesheet" href="" media="only screen and (max-device-width: 480px)" />
- 50. @media (CSS) @media only screen and (max-device- width: 480px) { /* iphone css goes here */ }
- 51. @import (CSS) @import url(‘mobile.css’) only screen and (max-device-width: 480px);
- 52. User Agent Sniffing JS: navigator.userAgent PHP: $_SERVER['HTTP_USER_AGENT']
- 59. body#portrait { width:320px; color:green; }
- 60. body#landscape { width:480px; color:red; }
- 62. HTML 5 Inputs type=”url” type=”email” type=”number” type=”tel”
- 66. BAD HIT AREAS
- 67. Keeps the text from adjusting on orientation change body { -webkit-text- size-adjust:none; }
- 68. Hide the Address Bar onload <body onload=” window.scrollTo(0, 1); ”>
- 69. Don’t use fixed widths/heights
- 72. Discussion & Questions
- 73. Google Keywords ✓ iphone detection ✓ iphone orientation javascript ✓ iphone psd ✓ detect mobile browsers ✓ android / iphone sdk ✓ mobile safari dev center *