"Designing for the Mobile Web" by Michael Dick (December 2010)

2,759 views

Published on

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

Published in: Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,759
On SlideShare
0
From Embeds
0
Number of Embeds
170
Actions
Shares
0
Downloads
56
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

"Designing for the Mobile Web" by Michael Dick (December 2010)

  1. 1. Designing for theMOBILEWEB@michaeldickhttp://m1k3.net RefreshBmore Dec. 2010
  2. 2. @michaeldickcssiphone.com ncludweb inspiration for mobile a creative web design agency
  3. 3. 1) Design & UX2) Viewports3) Detection4) Tips & Tricks5) Questions & Discussion
  4. 4. Mobile Web 2.0* Compare it to* the browser wars* from the 90’s
  5. 5. CSS = CSSHTML = HTML JS = JS
  6. 6. (Technical only, not applied to the user interaction)
  7. 7. XConte__t is king
  8. 8. is the iPad “Mobile” ?
  9. 9. “ It’s so much more intimate than a laptop ” — Steve Jobs
  10. 10. Jobs demonstrated the iPadwhile sitting on a couch.
  11. 11. Good.
  12. 12. Good.
  13. 13. Good.
  14. 14. :(
  15. 15. Good.
  16. 16. Design &Experience
  17. 17. BAD EXPERIENCE
  18. 18. GracefulDegradation
  19. 19. Desktop
  20. 20. Mobile “2.0”
  21. 21. Mobile “WAP”
  22. 22. Opt-in / Opt-out
  23. 23. opt-in
  24. 24. opt to go back
  25. 25. opt-out
  26. 26. opt to go back
  27. 27. opt to go back
  28. 28. Viewportsand why fixed positioning doesn’t work!
  29. 29. <meta name="viewport" content=""/> (at its most basic state)
  30. 30. content=” width = ; initial-scale = ; maximum-scale = ; user-scalable = ;”
  31. 31. VIEWPORT STARTS
  32. 32. VIEWPORT ENDS
  33. 33. VIEWPORTNOT!
  34. 34. DeviceDetection
  35. 35. Specific vsOptimized(and responsive)
  36. 36. Optimized Specificsame markup new markup both use new CSS
  37. 37. Stylesheet (HTML)<link rel="stylesheet" href=""media="only screen and(max-device-width: 480px)"/>
  38. 38. @media (CSS)@media only screen and (max-device-width: 480px){ /* iphone css goes here */}
  39. 39. @import (CSS)@import url(‘mobile.css’) only screenand (max-device-width: 480px);
  40. 40. User Agent Sniffing JS: navigator.userAgentPHP: $_SERVER[HTTP_USER_AGENT]
  41. 41. detectMobileBrowsers.mobi
  42. 42. require(detect.php);$mobile = detect();
  43. 43. OrientationDetection
  44. 44. <body id=”portrait”>
  45. 45. body#portrait{ width:320px; color:green;}
  46. 46. body#landscape{ width:480px; color:red;}
  47. 47. QuickTips & Tricks
  48. 48. HTML 5 Inputs type=”url” type=”email”type=”number” type=”tel”
  49. 49. Disable..autocorrect="off"autocapitalize="off"autocomplete="off"
  50. 50. uselarge hit areas
  51. 51. BAD HIT AREAS
  52. 52. Keeps the text from adjusting on orientation changebody { -webkit-text- size-adjust:none;}
  53. 53. Hide the Address Bar onload<body onload=” window.scrollTo(0, 1);”>
  54. 54. Don’t use fixed widths/heights
  55. 55. Discussion &Questions
  56. 56. Google Keywords✓ iphone detection✓ iphone orientation javascript✓ iphone psd✓ detect mobile browsers✓ android / iphone sdk✓ mobile safari dev center *
  57. 57. Thank You.@michaeldickhttp://m1k3.net

×