Mobile design: Plain and (not so) Simple
Upcoming SlideShare
Loading in...5
×
 

Mobile design: Plain and (not so) Simple

on

  • 1,097 views

 

Statistics

Views

Total Views
1,097
Views on SlideShare
1,097
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile design: Plain and (not so) Simple Mobile design: Plain and (not so) Simple Presentation Transcript

  • Mobile Design .Plainand(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 CODE Wednesday, April 24, 13
  • I CONTEXT Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • 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? Wednesday, April 24, 13
  • DEVICES LOCATIONS BEHAVIORS Wednesday, April 24, 13
  • http://www.flickr.com/photos/lukew/7382570546/in/photostream Wednesday, April 24, 13
  • 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/ Wednesday, April 24, 13
  • Lookup Check-in Game Edit Wednesday, April 24, 13
  • DEVICES LOCATIONS BEHAVIORS Wednesday, April 24, 13
  • II APPROACH Wednesday, April 24, 13
  • Contextuallyappropriate CONTENT AND 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 First LUKE WROBLEWSKI Wednesday, April 24, 13
  • STORYTELLING NATURAL UI PROGRESSIVE ENHANCEMENT Wednesday, April 24, 13
  • STORYTELLING NATURAL UI PROGRESSIVE ENHANCEMENT Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • Mental Models INDI YOUNG Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • http://www.balsamiq.com/ Wednesday, April 24, 13
  • Understanding Comics SCOTT McCLOUD Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • http://proto.io Wednesday, April 24, 13
  • STORYTELLING NATURAL UI PROGRESSIVE ENHANCEMENT Wednesday, April 24, 13
  • NEXT-GEN GUI 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
  • 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
  • http://lukew.com/touch Wednesday, April 24, 13
  • The FOLLOWING 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 NUI World DANIEL WIGDOR & DENNIS WIXON Wednesday, April 24, 13
  • STORYTELLING NATURAL UI PROGRESSIVE 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’s2013. 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 with Progressive Enhacement TODD PARKER PATTY TOLAND SCOTT JEHL MAGGIE COSTELLO WACHS Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • http://modernizr.com Wednesday, April 24, 13
  • ULTIMATELY Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • WEB WEB Wednesday, April 24, 13
  • THERE’S NO SUCH THING AS 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
  • STORYTELLING NATURAL UI PROGRESSIVE ENHANCEMENT Wednesday, April 24, 13
  • III DESIGN Wednesday, April 24, 13
  • FINGER tips Wednesday, April 24, 13
  • RESPONSIVE DESIGN SCREEN-WIDE SPACING Wednesday, April 24, 13
  • RESPONSIVE DESIGN SCREEN-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
  • Responsive Web Design ETHAN MARCOTTE Wednesday, April 24, 13
  • Column drop Off canvas Mostly fluid Layout shifter Tiny 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 DESIGN SCREEN-WIDE SPACING Wednesday, April 24, 13
  • Thumb zone Ideal for primary 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 FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT Wednesday, April 24, 13
  • Wednesday, April 24, 13
  • RESPONSIVE DESIGN SCREEN-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 Design Pattern Gallery THERESA NEIL Free chapter available: http://www.uxbooth.com/articles/mobile-design-patters/ Wednesday, April 24, 13
  • RESPONSIVE DESIGN SCREEN-WIDE SPACING Wednesday, April 24, 13
  • IV CODE Wednesday, 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
  • The FOLLOWING 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 IMAGES Wednesday, April 24, 13
  • EXHIBIT F: PRODUCT IMAGES Wednesday, 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 FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT LINK 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
  • INSUM Wednesday, April 24, 13
  • Mobile is different. It requires a new approach. Designers have some stuff figured out... Wednesday, April 24, 13
  • BUT Wednesday, April 24, 13
  • THISISJUSTTHE BEGINNING Wednesday, 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 andrew@uxbooth.com Wednesday, April 24, 13