Your SlideShare is downloading. ×
"Designing for the Mobile Web" by Michael Dick (December 2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

2,346
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 …

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,346
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Designing for theMOBILEWEB@michaeldickhttp://m1k3.net RefreshBmore Dec. 2010
  • 2. @michaeldickcssiphone.com ncludweb inspiration for mobile a creative web design agency
  • 3. 1) Design & UX2) Viewports3) Detection4) Tips & Tricks5) Questions & Discussion
  • 4. Mobile Web 2.0* Compare it to* the browser wars* from the 90’s
  • 5. CSS = CSSHTML = HTML JS = JS
  • 6. (Technical only, not applied to the user interaction)
  • 7. XConte__t is king
  • 8. is the iPad “Mobile” ?
  • 9. “ It’s so much more intimate than a laptop ” — Steve Jobs
  • 10. Jobs demonstrated the iPadwhile sitting on a couch.
  • 11. Good.
  • 12. Good.
  • 13. Good.
  • 14. :(
  • 15. Good.
  • 16. Design &Experience
  • 17. BAD EXPERIENCE
  • 18. GracefulDegradation
  • 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. Viewportsand 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. VIEWPORTNOT!
  • 34. DeviceDetection
  • 35. Specific vsOptimized(and responsive)
  • 36. Optimized Specificsame 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 screenand (max-device-width: 480px);
  • 40. User Agent Sniffing JS: navigator.userAgentPHP: $_SERVER[HTTP_USER_AGENT]
  • 41. detectMobileBrowsers.mobi
  • 42. require(detect.php);$mobile = detect();
  • 43. OrientationDetection
  • 44. <body id=”portrait”>
  • 45. body#portrait{ width:320px; color:green;}
  • 46. body#landscape{ width:480px; color:red;}
  • 47. QuickTips & Tricks
  • 48. HTML 5 Inputs type=”url” type=”email”type=”number” type=”tel”
  • 49. Disable..autocorrect="off"autocapitalize="off"autocomplete="off"
  • 50. uselarge hit areas
  • 51. BAD HIT AREAS
  • 52. Keeps the text from adjusting on orientation changebody { -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.@michaeldickhttp://m1k3.net