"Designing for the Mobile Web" by Michael Dick (December 2010)
•
3 gefällt mir•1,089 views
Our December Refresh event was led by web and mobile designer Michael Dick who discussed how to extend the experience from the desktop to the mobile web, as well as tips & tricks you may utilize during the design & development of your mobile site. More info at http://RefreshBmore.org
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie "Designing for the Mobile Web" by Michael Dick (December 2010)
Ähnlich wie "Designing for the Mobile Web" by Michael Dick (December 2010) (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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
- 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 *