mobile design: plain and (not so) simple
DESCRIPTION
TRANSCRIPT
Mobile Design .Plain and (not-so) Simple
ANDREW MAIER
Wednesday, April 24, 13
Hi, I’m Andrew.
http://uxbooth.com
Andrew
Wednesday, April 24, 13
2007
Wednesday, April 24, 13
2009 – 2010
Wednesday, April 24, 13
Our muse
Wednesday, April 24, 13
“[We've had] a total of 880 million Android & iOS devices entering the market in just over five years. Consider the shift that occurs when iOS & Android put a combined billion [mobile] devices in people’s hands. That’s almost half the Internet population of the world and equivalent to the total number of (Windows) PCs in use around the world.”
–LUKE WROBLEWSKI
Wednesday, April 24, 13
§ Luke Wroblewski, Author of Mobile First
§ Brad Frost, Mobile evangelist
§ Rachel Hinman, Author of The Mobile Frontier
§ Josh Clark, Author of Tapworthy
§ Bryan and Stephanie Rieger, Nokia
§ Scott Jehl, Author of Designing with Progressive Enhancement
Luminaries
Wednesday, April 24, 13
CONTEXT
APPROACH
DESIGN
CODEWednesday, April 24, 13
I CONTEXTWednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
2 How, whereand when
How we behave and feel
1 Physicality andspecifications
3
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
What’s different?
Wednesday, April 24, 13
DEVICESLOCATIONS BEHAVIORS
Wednesday, April 24, 13
http://www.flickr.com/photos/lukew/7382570546/in/photostream
Wednesday, April 24, 13
In bed On the couchWatching TV
In the bathroomWaiting rooms
In linesRetail stores
At workLibrariesChurches
TrainsIn the car
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/Wednesday, April 24, 13
Lookup
Check-in
Game
EditWednesday, April 24, 13
DEVICESLOCATIONS BEHAVIORS
Wednesday, April 24, 13
II APPROACHWednesday, April 24, 13
Contextually appropriate
CONTENTAND
FUNCTIONALITY
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
CONTENT = 15%
Wednesday, April 24, 13
Wednesday, April 24, 13
CONTENT = 70%
Wednesday, April 24, 13
Mobile FirstLUKE WROBLEWSKI
Wednesday, April 24, 13
STORYTELLINGNATURAL UIPROGRESSIVE ENHANCEMENT
Wednesday, April 24, 13
STORYTELLINGNATURAL UIPROGRESSIVE ENHANCEMENT
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Mental ModelsINDI YOUNG
Wednesday, April 24, 13
Wednesday, April 24, 13
UnderstandingComicsSCOTT McCLOUD
Wednesday, April 24, 13
Wednesday, April 24, 13
http://proto.io
Wednesday, April 24, 13
STORYTELLINGNATURAL UIPROGRESSIVE ENHANCEMENT
Wednesday, April 24, 13
NEXT-GEN
GUIWednesday, April 24, 13
I’m a Button, believe you me
Wednesday, April 24, 13
I’m a Button, believe you me
Wednesday, April 24, 13
I’m a Button, believe you me
Wednesday, April 24, 13
I’m a Button, believe you me
Wednesday, April 24, 13
I’m a Button, believe you me
Wednesday, April 24, 13
Zoom
Wednesday, April 24, 13
Zoom
Wednesday, April 24, 13
Wednesday, April 24, 13
TheFOLLOWING EXAMPLE
is used with permission from
ANDY FITZGERALD
(Because he’s an awesome, generous fellow)
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
50%
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Brave NUIWorldDANIEL WIGDOR &DENNIS WIXON
Wednesday, April 24, 13
STORYTELLINGNATURAL UIPROGRESSIVE ENHANCEMENT
Wednesday, April 24, 13
MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)
MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/Wednesday, April 24, 13
Users have javascript enabled, right?
It’s 2013.
Wednesday, April 24, 13
Wednesday, April 24, 13
–STEPHANIE RIEGER
“And the menu failed. Never even opened. Suddenly, the site was without navigation...at all.”
http://stephanierieger.com/a-plea-for-progressive-enhancement/
Wednesday, April 24, 13
WORKED
http://stephanierieger.com/a-plea-for-progressive-enhancement/
DIDN’T■ Galaxy Nexus ■ iPhone 4 (iOS 5)
■ iPhone 4 (iOS 4.3.5)■ iPod Touch■ Nexus One■ Nokia Lumia 800■ HTC ChaCha■ HTC Wildfire■ Huawei Blaze■ Galaxy SII■ Galaxy Mini■ Blackberry 9810 Torch■ Blackberry 9300
■ Galaxy Tab 7″■ Galaxy Tab 10″■ Amazon Kindle Fire
Wednesday, April 24, 13
Wednesday, April 24, 13
Designing withProgressiveEnhacementTODD PARKERPATTY TOLANDSCOTT JEHLMAGGIE COSTELLO WACHS
Wednesday, April 24, 13
Wednesday, April 24, 13
http://modernizr.com
Wednesday, April 24, 13
ULTIMATELYWednesday, April 24, 13
Wednesday, April 24, 13
WEB
WEB
Wednesday, April 24, 13
THERE’S NO SUCH THINGAS FUTURE-PROOF
Wednesday, April 24, 13
BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/Wednesday, April 24, 13
BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/
http://futurefriend.ly
Wednesday, April 24, 13
STORYTELLINGNATURAL UIPROGRESSIVE ENHANCEMENT
Wednesday, April 24, 13
III DESIGNWednesday, April 24, 13
FINGER
tipsWednesday, April 24, 13
RESPONSIVE DESIGNSCREEN-WIDE SPACING
Wednesday, April 24, 13
RESPONSIVE DESIGNSCREEN-WIDE SPACING
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
?
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
ResponsiveWeb DesignETHAN MARCOTTE
Wednesday, April 24, 13
Column dropOff canvas Mostly fluid
Layout shifterTiny tweaks
http://www.lukew.com/ff/entry.asp?1514
Responsive patterns
Wednesday, April 24, 13
Column drop
Wednesday, April 24, 13
Off canvas
Wednesday, April 24, 13
Off canvas
Wednesday, April 24, 13
Mostly fluid
Wednesday, April 24, 13
Layout shifter
Wednesday, April 24, 13
Tiny tweaks
Wednesday, April 24, 13
Tiny tweaks
(lucky people)
Wednesday, April 24, 13
RESPONSIVE DESIGNSCREEN-WIDE SPACING
Wednesday, April 24, 13
Thumb zone
Ideal forprimary navigation
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
Wednesday, April 24, 13
THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT
Wednesday, April 24, 13
Wednesday, April 24, 13
RESPONSIVE DESIGNSCREEN-WIDE SPACING
Wednesday, April 24, 13
1-2 cm wide
Wednesday, April 24, 13
1-2 cm wide
Wednesday, April 24, 13
1-2 cm wide
Wednesday, April 24, 13
7mm minimum
Wednesday, April 24, 13
5mm
Wednesday, April 24, 13
5mm
Wednesday, April 24, 13
2
1
Wednesday, April 24, 13
Wednesday, April 24, 13
Mobile DesignPattern GalleryTHERESA NEIL
Free chapter available: http://www.uxbooth.com/articles/mobile-design-patters/
Wednesday, April 24, 13
RESPONSIVE DESIGNSCREEN-WIDE SPACING
Wednesday, April 24, 13
IV CODEWednesday, April 24, 13
Use the cascade, Luke!
Wednesday, April 24, 13
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
Wednesday, April 24, 13
ANTI-PATTERN ALERT
Wednesday, April 24, 13
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />1
Wednesday, April 24, 13
44px
44px
1em
1em
Regular vs. Retina
Wednesday, April 24, 13
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />2
1
Wednesday, April 24, 13
<link rel="stylesheet" type="text/css" media="screen" href="small.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 48em)" href="medium.css" />
Wednesday, April 24, 13
<meta name="viewport" content="width=device-width">
Wednesday, April 24, 13
Wednesday, April 24, 13
<input type=“email” placeholder=”Apple ID" autocapitalize=“off” autocomplete=“off” />
Wednesday, April 24, 13
TheFOLLOWING EXAMPLE
is used with permission from
BRAD FROST(Because he’s an awesome, generous fellow)
Wednesday, April 24, 13
DEMO
TUTORIAL
WALKTHROUGH
http://bit.ly/mobilefirstrwd
http://bit.ly/rwdanatomy
http://bit.ly/rwdtutorial
Wednesday, April 24, 13
1 2 3 4 5 6
Wednesday, April 24, 13
Wednesday, April 24, 13
EXHIBIT A: MASTHEAD
Wednesday, April 24, 13
EXHIBIT B: LOGO
Wednesday, April 24, 13
Wednesday, April 24, 13
44px
44px
1em
1em
Regular vs. Retina
Wednesday, April 24, 13
http://blog.netvlies.nl/design-interactie/retina-revolution/
RETINA COMPRESSION
Wednesday, April 24, 13
EXHIBIT C: NAVIGATION
Wednesday, April 24, 13
Wednesday, April 24, 13
EXHIBIT D: SEARCH FORM
Wednesday, April 24, 13
Wednesday, April 24, 13
EXHIBIT F: PRODUCT IMAGESWednesday, April 24, 13
EXHIBIT F: PRODUCT IMAGESWednesday, April 24, 13
Wednesday, April 24, 13
EXHIBIT G: PRODUCT FORM
Wednesday, April 24, 13
Wednesday, April 24, 13
EXHIBIT I: FIND NEARBYEXHIBIT I: FIND NEARBY
Wednesday, April 24, 13
COMFORTABLE
STATIONARY
FOCUSEDCAPABLE BROWSER
EFFICIENT INPUT
LARGE SCREEN
FAST CONNECTION
POWERFUL CPU
OLD CONTEXT
Wednesday, April 24, 13
NEW CONTEXT
Wednesday, April 24, 13
EXHIBIT J: AUXILIARY CONTENT
1 2 3 4 5 6
Wednesday, April 24, 13
RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW
http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
86%
Wednesday, April 24, 13
THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
Wednesday, April 24, 13
THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT
Wednesday, April 24, 13
1 2 3
4 5 6
Wednesday, April 24, 13
EXHIBIT J: FOOTER NAV
Wednesday, April 24, 13
EXHIBIT K: CALL NUMBER
Wednesday, April 24, 13
<a href="tel:+18005550199">1-800-555-0199</a>
Wednesday, April 24, 13
1 2 3 4 5 6
Wednesday, April 24, 13
Wednesday, April 24, 13
IN SUMWednesday, April 24, 13
Mobile is different.
It requires a new approach.
Designers have some stuff figured out...
Wednesday, April 24, 13
BUTWednesday, April 24, 13
THIS IS JUST THE
BEGINNINGWednesday, April 24, 13
2015?
Wednesday, April 24, 13
Wednesday, April 24, 13
Smartphones are less than a decade old.
Wednesday, April 24, 13
Smartphones are less than a decade old.
Even the luminaries are learning as they’re going.
Wednesday, April 24, 13
HAVE
FUN!Wednesday, April 24, 13
Wednesday, April 24, 13
http://bradfrost.github.com/this-is-responsive/resources.html
Wednesday, April 24, 13
Wednesday, April 24, 13
http://bradfrost.github.com/this-is-responsive/patterns.html
Wednesday, April 24, 13
fin@andrewmaier
Wednesday, April 24, 13