Design for mobile (that means everything!)

designingfor mobile˚ ˚AKA designing for everything! @GeorgeAdamson

• What is mobile?• Ooh that’s a bit tricky• Airy fairy solutions• Tech solutions• Touch interactions• Touch inputs• Performance• Strategy

what is mobile?

is that a mobile?

mobile.“it’s not the tech, it’s the context” at ! wh t? ntex co

“There isno mobile”

Now everything is “mobile”... what we callthe “mobile web” is a blip

That’s all veryutopian and fluffy but what does it mean?! http://www.elaineﬁtzgerald.com/utopia/MPj04009470000[1].jpg

You are here someone at PinchZoom drew this but I’ve no idea who!! 1 computer 1000s of computers1000s of users 1 user

“Mobile traffic has/might-jolly-soon˚overtake desktop traffic” - George Adamson, early 21st Century ˚ depending on where you read your stats!

http://pryncepality.com/2011/09/27/cell-phone-service-now-available-in-nyc-subway-stations/ http://gigaom.com/2011/09/26/couch-commerce-kicks-off-on-thanksgiving-night/http://ak7.picdn.net/shutterstock/videos/846284/preview/stock-footage-young-business-woman-in-office-texting-on-cell-phone.jpg

where do weuse our devices?

84% at home80% during misc downtime76% while queuing69% while shopping64% at work62% while watching TV (other studies claim higher)47% during commute in to work (oh, and students: 100% during lectures) http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

a study byReadItLaterAnd yes, thanks, I know w, noit’s now called Pocket k You li ke ap er st ap In h? y ea

http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

tablets phones on our on our on our computershttp://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

cross crossdevice channel http://findicons.com http://www.portboulogne.com

How hard could it be...? http://www.sichel-embroidery.com/images/boxingbee.jpg

big screen wired network cpu mousefor desktop keyboard we can power expect: desk chair 2 eyes 2 hands your attention

unknown screen (small?) lo-res / Hi-res dodgy network touch / pointerfor mobile one sausage finger we can hw/sw keyboard expect: batteries less cpu less memory poor typography (improving) sporadic attention

“mobile” looks diffy

solutions

“Let’s dumb down for mobile”

“No one would do that on a mobile”

“Provide a link to full desktop site”

“Let’s justtarget iPhone”

“It’s calculated that by2015, 40%˚ of our planet’s population will have access to the internet. tly 3 3 %- is h r ren ˚ CuOf those, a large number will be mobile first or mobile only users.” http://www.plexical.com/blog/2011/09/29/mobile-first-mobile-only/ http://www.internetworldstats.com/stats.htm

He also proposed command line first Hmm, I suggest API First is a better way to say it

What do all thesedevice experiences have in common? content content content content content conte conten content content content content content http://www.hubspot.com/Portals/53/images/content_highlighted.jpg

http://www.hubspot.com/Portals/53/images/content_highlighted.jpg

Content API Mobile

Content first first first API first first Mobile first

Content first first first API first first S imples t first Mobile device

BTW, notice that no one is shouting “Photoshop mockups first” :P AKA “Nav menus & pretty things first” Less reliance on onephotoshop’d full page mockup

tech solutions

Responsive Web Design RWD

128x160240x320 320x480 1024x768 1280x800 1440x900 640x960 1600x1200 2048x1536 http://www.metaltoad.com/blog/ simple-device-diagram-responsive-design-planning

More at http://mediaqueri.es

RWD is nothing new...Print designers have been doing it for years

Media Queries “only screen and (min-width: 768px) and (max-width: 979px)” http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone

Major and Minor Breakpoints<link rel="stylesheet" href="768.css" media="only screen and (min-width: 768px) ses and (max-width: 979px)" but cau/> Wo rks nlo ad s dow extra@media (max-width: 960px) { Fas ter ile) nav { width: 80px } e f on} all in en (wh

favour design breakpoints over device breakpoints

and don’t forget there’s...and (min-device-pixel-ratio: 2) and (orientation: portrait) and (monochrome) etc.

1 “virtual” CSS px = 2x2 pixels = 4 x bigger images! tip: Pro Tim e to emb race CSS3 ures feat inst ead! http://zagg-blog.s3.amazonaws.com/community/blog/wp-content/uploads/2012/03/iphone-4-retina-display_22CAP_25552.png

Responsive Media max-width: 100%; use IE r o ld 00%; Fo 1 th: * wid http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ http://src.sencha.io

Flex/Flow/Fluid Layout (Grids) http://960.gs http://foundation.zurb.com http://twitter.github.com/bootstraphttp://stuffandnonsense.co.uk/projects/320andup

Touch interaction

Tap PhoneTablet

SwipeTablet Phone

touch input

All credit to LukeW. This slide like totally stolen from his presentation

Reduce input wherever possibleExploit tap or touch instead of typing

What is our obsession over****ing passwords?

Rethink buttons...Interact directly with content instead? “Buttons are a hack” - Josh Clark

BTW forget hoveron touch devicesBesides, it’s not that great anyway... “Hover confuses proximity with intent” - Luke W.

“mobile” has opened our eyes to so many other inputs...camera NFC(front & back) audio bluetooth infrared video location/GPS accelerometer multitouch ambient light gyroscope compass and more...

performance

Expectations and perceived performance Quick< 100ms In control˚ ˚ Bew “to are of o fas t ” Losing attention > 1s Show spinner etc Need more than a >10s spinner to keep attention! http://www.useit.com/alertbox/response-times.html

concatenate minify (uglify) gzip YSlow

sprite your iconsconsider font-glyphs http://css-tricks.com/examples/IconFont/ Semantic glyphs - http://www.codestyle.org/css/at-font-face/ StandardUnicodeIconsWebFonts.shtml

data-uriyour small images

Use those CSS3 features!text + css + icon + grad + shadow

Use your HTML skillsWrite great markup for your content

Late render Late loadhttp://filamentgroup.com/lab/ajax_includes_modular_content/Avoid full page loads https://github.com/defunkt/jquery-PJAX

Don’t fight it polyfill it. modernizr js (+yepnope) respond js etc... http://caniuse.com http://html5please.com https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-Browser-Polyfills

“Progressive Enhancement” Workflow https://github.com/filamentgroup/ SouthstreetEnhanceJS - eCSSential - QuickConcat - AjaxInclude - AppendAround etc

far-future expiry cache-manifesthttp://www.alistapart.com/articles/application-cache-is-a-douchebag

strategy

Mobile app or mobile web?http://www.cxpartners.co.uk/cxblog/ mobile-app-or-mobile-web/

Mobile App: Native or Hybrid? PhoneGap - AppMobi - Mobify -SenchaTouch - jQueryMobile - Zepto - etc etc

Mobile Web: m. or RWD? Beware - “Appy” web design createsunachievable expectations of app-experience

Beware of metaphor eye candy

“Big Dog” http://www.youtube.com/watch?v=W1czBcnX1Ww http://spectrum.ieee.org/automaton/robotics/humanoids/ 040210-who-is-afraid-of-the-uncanny-valley

Check outUX guidelines for iOS AndroidWindows Mobile

Get real content into early designs Lor ips em um

Invite feedback early

Our mental models ofdevelopment are wrong We assume we can control too much

Unlearn:- Pixel perfect- Device-specific data- Elaborate workarounds

CMS collateral damage- “Template first” design- Ads & Nav before content- No thought for context

Still think a CMS cannot do content first?

“Often a smaller budget will result in a better solution” - James Robertson

Future Friendlyhttp://futurefriend.ly/thinking.html

I’ll leave you withsomething to ponder...

“Our rapid adoption of technology is creating ‘generation gaps’ at an accelerating rate...”

“...People 2, 3 or 4years apart are having completely different experiences with technology” - Lee Rainie - Pew Research Center

and we’re just getting started... @GeorgeAdamson www.slideshare.net/george.adamson

https://twitter.com	38
http://test1.peoplebrowsr.com	9
https://si0.twimg.com	5
http://kred.com	3
http://lanyrd.com	2
http://192.168.0.108	1
http://localhost	1
http://anilarvindam.wordpress.com	1
https://twimg0-a.akamaihd.net	1
http://pinterest.com	1

Design for mobile (that means everything!)

by George Adamson

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 62

Statistics

Design for mobile (that means everything!) Presentation Transcript