Your SlideShare is downloading. ×
0
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Design for mobile (that means everything!)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design for mobile (that means everything!)

3,161

Published on

Never mind the "mobile web", we're designing for all-sorts. It's all just a blur of devices and screen sizes. This session explores the issues & solutions of attempting to design for everything.

Never mind the "mobile web", we're designing for all-sorts. It's all just a blur of devices and screen sizes. This session explores the issues & solutions of attempting to design for everything.

Published in: Technology, Business
2 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,161
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Mobile UX, IxD & Front End Dev.\nBBC/Doctor Who, Intrinsic, AXA, Dyson (HMV, Waterstones, Comet)\n- Beware: Not much code. Loads of good tips though!\n
  • An agenda, for those that get upset when there isn’t one\nAnd a hidden agenda...\n
  • \n
  • Show me your phone: Android, Blackberry, iPhone, Win Phone\nShow me your tablet... (&HP?)\nShow me your laptops...\nShow me your desktops...\n
  • \n
  • What’s really gonna bake your noodle\nIf you like spoons and freaky children...\n
  • \n
  • \n
  • Back in 1960s when x was leaving University...\nPeople were standing around an air-con unit...\nThe concept of a desktop has stuck around too long\n
  • So why do we design for desktop?\n
  • We’re obsessed with them!\nHead down - Walking around like zombies.\nNeed a camera in top just to see where we’re going...\n
  • \n
  • ... 1/2 of us while driving to work :P\n
  • \n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. “Cross-device” (AKA cross-channel) - It does not matter which device we use\n
  • “Review your slides to make every one count!”\n
  • \n
  • A “hard bee” :P\n
  • Well, not always 2 hands...\n
  • Not engaged - poor attention\n
  • perhaps because we’re still approaching it the same old way\n
  • My favourite suggestions from clients...\n
  • \n
  • Perhaps what you mean is\n“No one would do that in a desktop way on a mobile”\n
  • \n
  • The CEO has a desktop Mac too, did you just target that?\n
  • By the way, The largest chunk of them are in Asia\n
  • Luke Wroblewski. Instead of desktop-first\nGreat for honing in on most important features\nBenefits the design on larger devices too\n
  • Get the underlying functionality working\nPlug anything into it\n
  • Another approach\n
  • \n
  • Content first is your new guiding strategy!\n
  • Content first is your new guiding strategy!\n
  • Content first is your new guiding strategy!\n
  • Content first is your new guiding strategy!\n
  • Content first is your new guiding strategy!\n
  • Another shock for the system\n
  • \n
  • Rearrange the content for the device\n
  • Phones, Tablets, Desktops and everything in between\nRearrange the content for the device\nPixels becoming irrelevant\n
  • http://bostonglobe.com\nNot dumbing down, just using what you’ve got\n
  • We’re just such drama queens we like to think this problem only affects us!\n
  • Pixels becoming irrelevant\n
  • Default is query-less mediaquery!\nUse the Cascade: Let your CSS built & augment itself.\nNow more fashionable to merge into one CSS file\n
  • Important!\nPixels becoming irrelevant. Consider EMs\n
  • \n
  • “Retina Display”\n
  • Use width:100%; zoom:1;\nDefaults for little device + little bandwidth = Avoid large images.\nFilament Group made lovely solution but it’s undermined by image pre-loading.\nSencha provide free api to resize on the fly after UserAgent sniffing.\n
  • \n
  • Not going to come near you\n
  • Tablets most often used in landscape, phones in portrait.\nWhere to put primary controls.\nTend to hold tablets with 2 hands. More of user’s attention.\nCan reach tablet buttons top left & right. (Beware of top middle)\nPhones tend to be one hand. Often just thumb near bottom.\nBeware oversized phones: (4-5") You cannot swipe entire screen with one thumb.\n
  • Swipe to scroll.\nWithout visual cues we assume default direction without a thought.\nEmerging “standards”: Pull to refresh, More fingers for OS actions.\n
  • \n
  • Text edit box - beware of placeholder (can look like a default).\nMultiline placeholder has inconsistent support.\nLabels on top - Easier to scan but uses more vertical real estate.\nSearch - huge variations across devices. “x” to clear - also in textboxes?\nButton bar - to set scope or filter. Can act like radios or checkboxes.\nSelect/picker - Not easy on some devices. May truncate text.\nRange slider - Bad for detailed range but good for vague selection.\nStepper +/- Better when buttons further apart, either side of box.\nOn/off toggle - Equivalent of checkbox. Beware of toggles with unclear state.\nTel Number pad - Aside: Odd that no one notices calc numpad is other way up!\nButtons - Bigger on mobile!\nBeware buttons near hardware buttons.\nTablet buttons - Top left and right.\nPhone buttons - Bottom but beware of stacking!\nDon’t assume users know difference between buttons and links. Why differentiate?\n
  • Sensible defaults.\nUse location to make assumptions and reduce input.\nEg: Instead of typing, tap stepper or slider or content etc.\n
  • Star-ing passwords!\nRevealing one character at a time is fashionable \nbut are you looking at the field or the keyboard?\nWhy not make it visible by default?.\nThen you can even do away with password confirmation.\n(As for email confirmation, don’t get me started!)\n
  • \n
  • Buttons need to me bigger on touch devices!\nMinimum target size. Magic number according to Apple.\nThe smaller the target the greater the frequency of errors.\n
  • \n
  • Eg: Apps: Bump, Word Lens\n
  • \n
  • Even the style and speed of the spinner can affect expectations\n
  • Standard stuff. Easy win. Every server round trip is expensive!\nGoogle for more info, such as far-future expiry.\nFYI: Very large scripts can take longer to parse.\n
  • One file for multiple icons.\nFont icons scale and allow irregular shaped shadow etc (not just rectangle)\n
  • \n
  • Use css to produce composite instead of using image.\nWho cares if there’s no shadow in IE6?!\n
  • \n
  • Make use of “perceived” load speed.\nBeware of 3rd party JS such as Facebook-like blocking page render.\nConsider “Infinite Scroll” instead of paging where practical.\nUse yepnope etc if you must load multiple scripts. (asynchronous)\nAJAX Include.\nPushState & PJAX.\n
  • AKA shim\n
  • AKA shim\n
  • App-cache if you’re feeling brave!\n
  • \n
  • The excellent Giles Colborne has a good chat about this.\nInstagram - app only\n
  • What it hybrid? Eg: Phonegap\nTypically easier to build hybrid for all apps.\nPerhaps a good way to prove app concept.\nHybrid apps cannot be as whizzy as native apps,\nThen spend money on teams of native devs.\nBeware of Android app that looks like iPhone and vice versa\n\n
  • m-dot helps you target mobile but not very forward thinking!\nLikely to break link-sharing. RWD encourages same content on all devices.\nBeware of making web apps look too native appy.\n\n
  • Skeuomorph\niPad Contacts - It’s a book but swipe page causes delete!\n
  • Very human - Far right.\nCute - In the middle.\nPolar Express, Michael Jackson, Dancing baby\n
  • Windows Mobile avoids uncanny valley\nand still employs “physics” for the interactions (momentum, acceleration etc)\n
  • Yes, even for Android!\n
  • Lorem ipsum is cack.\nDesign for real copy.\n
  • Let real users get their hands on it\n
  • Stop trying to control everything.\n
  • We talked about CSS3 shadows etc. \nUse them, along with CSS Transforms. They degrade well.\n
  • For those of us trapped in a CMS\n
  • \n
  • Constraints breed innovation.\nSuccessful projects will go beyond their original constraints\n
  • For more insites into this thinking...\n
  • a little something to bake your noodle...\n
  • \n
  • The generation gap!\nEg: School leavers having diff experience from school juniors.\nAnd we’re just getting started...\n
  • \n
  • \n
  • Transcript

    • 1. designingfor mobile˚ ˚AKA designing for everything! @GeorgeAdamson
    • 2. • What is mobile?• Ooh that’s a bit tricky• Airy fairy solutions• Tech solutions• Touch interactions• Touch inputs• Performance• Strategy
    • 3. what is mobile?
    • 4. is that a mobile?
    • 5. mobile.“it’s not the tech, it’s the context” at ! wh t? ntex co
    • 6. “There isno mobile”
    • 7. Now everything is “mobile”... what we callthe “mobile web” is a blip
    • 8. That’s all veryutopian and fluffy but what does it mean?! http://www.elainefitzgerald.com/utopia/MPj04009470000[1].jpg
    • 9. You are here someone at PinchZoom drew this but I’ve no idea who!! 1 computer 1000s of computers1000s of users 1 user
    • 10. “Mobile traffic has/might-jolly-soon˚overtake desktop traffic” - George Adamson, early 21st Century ˚ depending on where you read your stats!
    • 11. 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
    • 12. where do weuse our devices?
    • 13. 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/
    • 14. 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
    • 15. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
    • 16. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
    • 17. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
    • 18. tablets phones on our on our on our computershttp://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
    • 19. cross crossdevice channel http://findicons.com http://www.portboulogne.com
    • 20. How hard could it be...? http://www.sichel-embroidery.com/images/boxingbee.jpg
    • 21. big screen wired network cpu mousefor desktop keyboard we can power expect: desk chair 2 eyes 2 hands your attention
    • 22. 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
    • 23. “mobile” looks diffy
    • 24. solutions
    • 25. “Let’s dumb down for mobile”
    • 26. “No one would do that on a mobile”
    • 27. “Provide a link to full desktop site”
    • 28. “Let’s justtarget iPhone”
    • 29. “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
    • 30. He also proposed command line first Hmm, I suggest API First is a better way to say it
    • 31. 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
    • 32. http://www.hubspot.com/Portals/53/images/content_highlighted.jpg
    • 33. Content API Mobile
    • 34. Content first first first API first first Mobile first
    • 35. Content first first first API first first S imples t first Mobile device
    • 36. 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
    • 37. tech solutions
    • 38. Responsive Web Design RWD
    • 39. 128x160240x320 320x480 1024x768 1280x800 1440x900 640x960 1600x1200 2048x1536 http://www.metaltoad.com/blog/ simple-device-diagram-responsive-design-planning
    • 40. More at http://mediaqueri.es
    • 41. RWD is nothing new...Print designers have been doing it for years
    • 42. 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
    • 43. 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
    • 44. favour design breakpoints over device breakpoints
    • 45. and don’t forget there’s...and (min-device-pixel-ratio: 2) and (orientation: portrait) and (monochrome) etc.
    • 46. 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
    • 47. 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
    • 48. Flex/Flow/Fluid Layout (Grids) http://960.gs http://foundation.zurb.com http://twitter.github.com/bootstraphttp://stuffandnonsense.co.uk/projects/320andup
    • 49. Touch interaction
    • 50. Tap PhoneTablet
    • 51. SwipeTablet Phone
    • 52. touch input
    • 53. All credit to LukeW. This slide like totally stolen from his presentation
    • 54. Reduce input wherever possibleExploit tap or touch instead of typing
    • 55. What is our obsession over****ing passwords?
    • 56. Rethink buttons...Interact directly with content instead? “Buttons are a hack” - Josh Clark
    • 57. 44px
    • 58. BTW forget hoveron touch devicesBesides, it’s not that great anyway... “Hover confuses proximity with intent” - Luke W.
    • 59. “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...
    • 60. performance
    • 61. 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
    • 62. concatenate minify (uglify) gzip YSlow
    • 63. sprite your iconsconsider font-glyphs http://css-tricks.com/examples/IconFont/ Semantic glyphs - http://www.codestyle.org/css/at-font-face/ StandardUnicodeIconsWebFonts.shtml
    • 64. data-uriyour small images
    • 65. Use those CSS3 features!text + css + icon + grad + shadow
    • 66. Use your HTML skillsWrite great markup for your content
    • 67. Late render Late loadhttp://filamentgroup.com/lab/ajax_includes_modular_content/Avoid full page loads https://github.com/defunkt/jquery-PJAX
    • 68. 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
    • 69. “Progressive Enhancement” Workflow https://github.com/filamentgroup/ SouthstreetEnhanceJS - eCSSential - QuickConcat - AjaxInclude - AppendAround etc
    • 70. far-future expiry cache-manifesthttp://www.alistapart.com/articles/application-cache-is-a-douchebag
    • 71. strategy
    • 72. Mobile app or mobile web?http://www.cxpartners.co.uk/cxblog/ mobile-app-or-mobile-web/
    • 73. Mobile App: Native or Hybrid? PhoneGap - AppMobi - Mobify -SenchaTouch - jQueryMobile - Zepto - etc etc
    • 74. Mobile Web: m. or RWD? Beware - “Appy” web design createsunachievable expectations of app-experience
    • 75. Beware of metaphor eye candy
    • 76. “Big Dog” http://www.youtube.com/watch?v=W1czBcnX1Ww http://spectrum.ieee.org/automaton/robotics/humanoids/ 040210-who-is-afraid-of-the-uncanny-valley
    • 77. Check outUX guidelines for iOS AndroidWindows Mobile
    • 78. Get real content into early designs Lor ips em um
    • 79. Invite feedback early
    • 80. Our mental models ofdevelopment are wrong We assume we can control too much
    • 81. Unlearn:- Pixel perfect- Device-specific data- Elaborate workarounds
    • 82. CMS collateral damage- “Template first” design- Ads & Nav before content- No thought for context
    • 83. Still think a CMS cannot do content first?
    • 84. “Often a smaller budget will result in a better solution” - James Robertson
    • 85. Future Friendlyhttp://futurefriend.ly/thinking.html
    • 86. I’ll leave you withsomething to ponder...
    • 87. “Our rapid adoption of technology is creating ‘generation gaps’ at an accelerating rate...”
    • 88. “...People 2, 3 or 4years apart are having completely different experiences with technology” - Lee Rainie - Pew Research Center
    • 89. and we’re just getting started... @GeorgeAdamson www.slideshare.net/george.adamson

    ×