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

Designing for theMOBILEWEB@michaeldickhttp://m1k3.net RefreshBmore Dec. 2010

@michaeldickcssiphone.com ncludweb inspiration for mobile a creative web design agency

1) Design & UX2) Viewports3) Detection4) Tips & Tricks5) Questions & Discussion

Mobile Web 2.0* Compare it to* the browser wars* from the 90’s

CSS = CSSHTML = HTML JS = JS

(Technical only, not applied to the user interaction)

XConte__t is king

is the iPad “Mobile” ?

“ It’s so much more intimate than a laptop ” — Steve Jobs

Jobs demonstrated the iPadwhile sitting on a couch.

Design &Experience

BAD EXPERIENCE

GracefulDegradation

Desktop

Mobile “2.0”

Mobile “WAP”

Opt-in / Opt-out

opt-in

opt to go back

opt-out

opt to go back

Viewportsand why ﬁxed positioning doesn’t work!

content=” width = ; initial-scale = ; maximum-scale = ; user-scalable = ;”

VIEWPORT STARTS

VIEWPORT ENDS

VIEWPORTNOT!

DeviceDetection

Speciﬁc vsOptimized(and responsive)

Optimized Speciﬁcsame markup new markup both use new CSS

Stylesheet (HTML)<link rel="stylesheet" href=""media="only screen and(max-device-width: 480px)"/>

@media (CSS)@media only screen and (max-device-width: 480px){ /* iphone css goes here */}

@import (CSS)@import url(‘mobile.css’) only screenand (max-device-width: 480px);

User Agent Snifﬁng JS: navigator.userAgentPHP: $_SERVER[HTTP_USER_AGENT]

detectMobileBrowsers.mobi

require(detect.php);$mobile = detect();

OrientationDetection

body#portrait{ width:320px; color:green;}

body#landscape{ width:480px; color:red;}

QuickTips & Tricks

HTML 5 Inputs type=”url” type=”email”type=”number” type=”tel”

Disable..autocorrect="off"autocapitalize="off"autocomplete="off"

uselarge hit areas

BAD HIT AREAS

Keeps the text from adjusting on orientation changebody { -webkit-text- size-adjust:none;}

Hide the Address Bar onload<body onload=” window.scrollTo(0, 1);”>

Don’t use ﬁxed widths/heights

Discussion &Questions

Google Keywords✓ iphone detection✓ iphone orientation javascript✓ iphone psd✓ detect mobile browsers✓ android / iphone sdk✓ mobile safari dev center *

Thank You.@michaeldickhttp://m1k3.net

http://ontwik.com	129
http://paper.li	28
https://si0.twimg.com	3
https://refresh.theflowr.com	1
https://twimg0-a.akamaihd.net	1

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

by Mike Brenner on Dec 10, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 162

Statistics

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