designing for the mobile web
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
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
