"designing for the mobile web" by michael dick (december 2010)
DESCRIPTION
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.orgTRANSCRIPT
![Page 1: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/1.jpg)
Designing for the MOBILE WEB@michaeldickhttp://m1k3.net
RefreshBmoreDec. 2010
![Page 2: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/2.jpg)
@michaeldick
ncluda creative web design agency
cssiphone.comweb inspiration for mobile
![Page 3: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/3.jpg)
1) Design & UX
2) Viewports
3) Detection
4) Tips & Tricks
5) Questions & Discussion
![Page 4: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/4.jpg)
MobileWeb
2.0
* Compare it to* the browser wars* from the 90’s
![Page 5: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/5.jpg)
CSS = CSS
HTML = HTML
JS = JS
![Page 6: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/6.jpg)
(Technical only, not applied to the user interaction)
![Page 7: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/7.jpg)
Conte__t is
king
X
![Page 8: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/8.jpg)
is the iPad “Mobile”
?
![Page 9: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/9.jpg)
It’s so much more intimate than a laptop“
”— Steve Jobs
![Page 10: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/10.jpg)
Jobs demonstrated the iPad while sitting on a couch.
![Page 11: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/11.jpg)
Good.
![Page 12: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/12.jpg)
Good.
![Page 13: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/13.jpg)
Good.
![Page 14: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/14.jpg)
:(
![Page 15: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/15.jpg)
Good.
![Page 16: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/16.jpg)
Design&
Experience
![Page 17: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/17.jpg)
![Page 18: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/18.jpg)
![Page 19: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/19.jpg)
![Page 20: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/20.jpg)
![Page 21: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/21.jpg)
![Page 22: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/22.jpg)
![Page 23: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/23.jpg)
![Page 24: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/24.jpg)
BAD EXPERIENCE
![Page 25: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/25.jpg)
Graceful Degradation
![Page 26: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/26.jpg)
![Page 27: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/27.jpg)
Desktop
![Page 28: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/28.jpg)
Mobile “2.0”
![Page 29: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/29.jpg)
Mobile “WAP”
![Page 30: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/30.jpg)
Opt-in / Opt-out
![Page 31: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/31.jpg)
opt-in
![Page 32: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/32.jpg)
opt to go back
![Page 33: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/33.jpg)
opt-out
![Page 34: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/34.jpg)
opt to go back
![Page 35: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/35.jpg)
opt to go back
![Page 36: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/36.jpg)
Viewportsand why fixed positioning doesn’t
work!
![Page 37: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/37.jpg)
![Page 38: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/38.jpg)
![Page 39: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/39.jpg)
![Page 40: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/40.jpg)
<metaname="viewport"content=""
/>(at its most basic state)
![Page 41: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/41.jpg)
width = ;
initial-scale = ;
maximum-scale = ;
user-scalable = ;
content=”
”
![Page 42: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/42.jpg)
![Page 43: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/43.jpg)
VIE
WP
OR
T S
TAR
TS
![Page 44: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/44.jpg)
VIE
WP
OR
T E
ND
S
![Page 45: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/45.jpg)
VIE
WP
OR
T
NOT!
![Page 46: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/46.jpg)
Device
Detection
![Page 47: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/47.jpg)
Specificvs
Optimized (and responsive)
![Page 48: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/48.jpg)
Optimized Specific
new markupsame markup
both use new CSS
![Page 49: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/49.jpg)
<link rel="stylesheet" href=""
media="only screen and(max-device-width: 480px)"/>
Stylesheet (HTML)
![Page 50: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/50.jpg)
@media only screen and (max-device-width: 480px){ /* iphone css goes here */}
@media (CSS)
![Page 51: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/51.jpg)
@import url(‘mobile.css’) only screen and (max-device-width: 480px);
@import (CSS)
![Page 52: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/52.jpg)
User Agent Sniffing
JS: navigator.userAgent
PHP: $_SERVER['HTTP_USER_AGENT']
![Page 54: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/54.jpg)
require('detect.php');$mobile = detect();
![Page 55: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/55.jpg)
Orientation
Detection
![Page 56: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/56.jpg)
![Page 57: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/57.jpg)
![Page 58: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/58.jpg)
<body id=”portrait”>
![Page 59: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/59.jpg)
body#portrait{ width:320px; color:green;}
![Page 60: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/60.jpg)
body#landscape{ width:480px; color:red;}
![Page 61: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/61.jpg)
Quick
Tips & Tricks
![Page 62: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/62.jpg)
HTML 5 Inputs
type=”url” type=”email”
type=”tel”type=”number”
![Page 63: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/63.jpg)
Disable..
autocorrect="off"
autocapitalize="off"
autocomplete="off"
![Page 64: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/64.jpg)
uselarge hit areas
![Page 65: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/65.jpg)
![Page 66: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/66.jpg)
BAD HIT AREAS
![Page 67: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/67.jpg)
body {
-webkit-text-size-adjust:none;
}
Keeps the text from adjusting on orientation change
![Page 68: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/68.jpg)
window.scrollTo(0, 1);
<body onload=”
”>
Hide the Address Bar onload
![Page 69: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/69.jpg)
Don’t use fixed widths/heights
![Page 70: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/70.jpg)
![Page 71: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/71.jpg)
![Page 72: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/72.jpg)
Discussion&
Questions
![Page 73: "Designing for the Mobile Web" by Michael Dick (December 2010)](https://reader033.vdocument.in/reader033/viewer/2022060109/5555c7f3d8b42aaf158b48e0/html5/thumbnails/73.jpg)
✓ iphone detection✓ iphone orientation javascript✓ iphone psd✓ detect mobile browsers✓ android / iphone sdk✓ mobile safari dev center *
Google Keywords