Designing for the MOBILE WEB@michaeldickhttp://m1k3.net
RefreshBmoreDec. 2010
@michaeldick
ncluda creative web design agency
cssiphone.comweb inspiration for mobile
1) Design & UX
2) Viewports
3) Detection
4) Tips & Tricks
5) Questions & Discussion
MobileWeb
2.0
* Compare it to* the browser wars* from the 90’s
CSS = CSS
HTML = HTML
JS = JS
(Technical only, not applied to the user interaction)
Conte__t is
king
X
is the iPad “Mobile”
?
It’s so much more intimate than a laptop“
”— Steve Jobs
Jobs demonstrated the iPad while sitting on a couch.
Good.
Good.
Good.
:(
Good.
Design&
Experience
BAD EXPERIENCE
Graceful Degradation
Desktop
Mobile “2.0”
Mobile “WAP”
Opt-in / Opt-out
opt-in
opt to go back
opt-out
opt to go back
opt to go back
Viewportsand why fixed positioning doesn’t
work!
<metaname="viewport"content=""
/>(at its most basic state)
width = ;
initial-scale = ;
maximum-scale = ;
user-scalable = ;
content=”
”
VIE
WP
OR
T S
TAR
TS
VIE
WP
OR
T E
ND
S
VIE
WP
OR
T
NOT!
Device
Detection
Specificvs
Optimized (and responsive)
Optimized Specific
new markupsame markup
both use new CSS
<link rel="stylesheet" href=""
media="only screen and(max-device-width: 480px)"/>
Stylesheet (HTML)
@media only screen and (max-device-width: 480px){ /* iphone css goes here */}
@media (CSS)
@import url(‘mobile.css’) only screen and (max-device-width: 480px);
@import (CSS)
User Agent Sniffing
JS: navigator.userAgent
PHP: $_SERVER['HTTP_USER_AGENT']
require('detect.php');$mobile = detect();
Orientation
Detection
<body id=”portrait”>
body#portrait{ width:320px; color:green;}
body#landscape{ width:480px; color:red;}
Quick
Tips & Tricks
HTML 5 Inputs
type=”url” type=”email”
type=”tel”type=”number”
Disable..
autocorrect="off"
autocapitalize="off"
autocomplete="off"
uselarge hit areas
BAD HIT AREAS
body {
-webkit-text-size-adjust:none;
}
Keeps the text from adjusting on orientation change
window.scrollTo(0, 1);
<body onload=”
”>
Hide the Address Bar onload
Don’t use fixed widths/heights
Discussion&
Questions
✓ iphone detection✓ iphone orientation javascript✓ iphone psd✓ detect mobile browsers✓ android / iphone sdk✓ mobile safari dev center *
Google Keywords
