Mobile design: Plain and (not so) Simple

Mobile Design
.Plainand(not-so)Simple
ANDREW MAIER
Wednesday, April 24, 13

Hi, I’m Andrew.
http://uxbooth.com
Andrew

2009 – 2010

Our muse

“[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

§ 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

CONTEXT
APPROACH
DESIGN
CODE

I CONTEXT

2 How, where
and when
How we behave and feel
1 Physicality and
specifications
3
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
What’s different?

DEVICES
LOCATIONS
BEHAVIORS

http://www.flickr.com/photos/lukew/7382570546/in/photostream

In bed
On the couch
Watching TV
In the bathroom
Waiting rooms
In lines
Retail stores
At work
Libraries
Churches
Trains
In the car
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Lookup
Check-in
Game
Edit

II APPROACH

Contextuallyappropriate
CONTENT
AND
FUNCTIONALITY

CONTENT = 15%

CONTENT = 70%

Mobile First
LUKE WROBLEWSKI

STORYTELLING
NATURAL UI
PROGRESSIVE
ENHANCEMENT

Mental Models
INDI YOUNG

http://www.balsamiq.com/

Understanding
Comics
SCOTT McCLOUD

http://proto.io

NEXT-GEN
GUI

I’m a Button, believe you me

http://lukew.com/touch

The
FOLLOWING EXAMPLE
is used with permission from
ANDY
FITZGERALD
(Because he’s an awesome, generous fellow)

Brave NUI
World
DANIEL WIGDOR &
DENNIS WIXON

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/

Users have javascript
enabled, right?
It’s2013.

–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/

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

Designing with
Progressive
Enhacement
TODD PARKER
PATTY TOLAND
SCOTT JEHL
MAGGIE COSTELLO WACHS

http://modernizr.com

ULTIMATELY

WEB
WEB

THERE’S NO SUCH THING
AS FUTURE-PROOF

BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/

BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/
http://futurefriend.ly

III DESIGN

FINGER
tips

RESPONSIVE DESIGN
SCREEN-WIDE
SPACING

Responsive
Web Design
ETHAN MARCOTTE

Column drop
Off canvas
Mostly fluid
Layout shifter
Tiny tweaks
http://www.lukew.com/ff/entry.asp?1514
Responsive patterns

Column drop

Off canvas

Mostly fluid

Layout shifter

Tiny tweaks

Tiny tweaks
(lucky people)

Thumb zone
Ideal for
primary
navigation

THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
LINK TO FRAGMENT
LINK TO FRAGMENT
LINK TO FRAGMENT
LINK TO FRAGMENT
LINK TO FRAGMENT

1-2 cm wide

7mm minimum

Mobile Design
Pattern Gallery
THERESA NEIL
Free chapter available: http://www.uxbooth.com/articles/mobile-design-patters/

IV CODE

Use the
cascade, Luke!

ANTI-PATTERN
ALERT

type="text/css"
href="core.css"
media="screen" />
type="text/css"
media="screen and
href="mobile.css" />
1

44px
44px
1em
1em
Regular vs. Retina

type="text/css"
href="core.css"
media="screen" />
type="text/css"
media="screen and
href="mobile.css" />2
1

type="text/css"
media="screen"
href="small.css" />
type="text/css"
media="screen and
(min-device-width: 48em)"
href="medium.css" />

The
FOLLOWING EXAMPLE
is used with permission from
BRAD FROST
(Because he’s an awesome, generous fellow)

DEMO
TUTORIAL
WALKTHROUGH
http://bit.ly/mobilefirstrwd
http://bit.ly/rwdanatomy
http://bit.ly/rwdtutorial

1 2 3 4 5 6

EXHIBIT A: MASTHEAD

EXHIBIT B: LOGO

http://blog.netvlies.nl/design-interactie/retina-revolution/
RETINA COMPRESSION

EXHIBIT C: NAVIGATION

EXHIBIT D: SEARCH FORM

EXHIBIT F: PRODUCT IMAGES

EXHIBIT G: PRODUCT FORM

EXHIBIT I: FIND NEARBYEXHIBIT I: FIND NEARBY

COMFORTABLE
STATIONARY
FOCUSEDCAPABLE BROWSER
EFFICIENT INPUT
LARGE SCREEN
FAST CONNECTION
POWERFUL CPU
OLD CONTEXT

NEW CONTEXT

EXHIBIT J: AUXILIARY CONTENT
1 2 3 4 5 6

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%

THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING

1 2 3
4 5 6

EXHIBIT J: FOOTER NAV

EXHIBIT K: CALL NUMBER

Mobile is different.
It requires a new
approach.
Designers have
some stuff figured out...

THISISJUSTTHE
BEGINNING

Smartphones are less
than a decade old.

Smartphones are less
than a decade old.
Even the luminaries are
learning as they’re going.

HAVE
FUN!

http://bradfrost.github.com/this-is-responsive/resources.html

http://bradfrost.github.com/this-is-responsive/patterns.html

ﬁn
@andrewmaier
andrew@uxbooth.com

Mobile design: Plain and (not so) Simple

More Related Content

What's hot (6)

Viewers also liked (6)

Similar to Mobile design: Plain and (not so) Simple (20)

Recently uploaded (20)

Mobile design: Plain and (not so) Simple