designingfor mobile˚              ˚AKA designing              for everything! @GeorgeAdamson
•   What is mobile?•   Ooh that’s a bit tricky•   Airy fairy solutions•   Tech solutions•   Touch interactions•   Touch in...
what is mobile?
is that a mobile?
mobile.“it’s not the tech, it’s      the context”                        at !                     wh     t?               ...
“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.elainefitzgerald.com/utopia/MPj04009470000[1...
You are                    here                             someone at PinchZoom drew this but I’ve no idea who!!  1 compu...
“Mobile traffic has/might-jolly-soon˚overtake desktop traffic”          - George Adamson, early 21st Century              ...
http://pryncepality.com/2011/09/27/cell-phone-service-now-available-in-nyc-subway-stations/                       http://g...
where do weuse our devices?
84% at home80% during misc downtime76% while queuing69% while shopping64% at work62% while watching TV (other studies clai...
a study byReadItLaterAnd yes, thanks, I know                                     w,                                  noit’...
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
tablets                 phones                 on our                                                      on our         ...
cross                                  crossdevice                                 channel            http://findicons.com...
How hard could it be...?         http://www.sichel-embroidery.com/images/boxingbee.jpg
big screen              wired network                    cpu                   mousefor desktop      keyboard  we can     ...
unknown screen (small?)                     lo-res / Hi-res                    dodgy network                    touch / po...
“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.                        ...
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                ...
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”     Les...
tech solutions
Responsive Web Design RWD
128x160240x320    320x480                           1024x768                                      1280x800                ...
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/h...
Major and Minor Breakpoints<link rel="stylesheet" href="768.css"   media="only screen     and (min-width: 768px)          ...
favour design breakpoints over device breakpoints
and don’t forget there’s...and (min-device-pixel-ratio: 2)  and (orientation: portrait)       and (monochrome)            ...
1 “virtual” CSS px = 2x2 pixels     = 4 x bigger images!                                                                  ...
Responsive Media                 max-width: 100%;                                                                   use   ...
Flex/Flow/Fluid       Layout (Grids)                 http://960.gs          http://foundation.zurb.com      http://twitter...
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
44px
BTW forget hoveron touch devicesBesides, it’s not that great anyway...      “Hover confuses   proximity with intent”      ...
“mobile” has opened     our eyes to so many        other inputs...camera                                   NFC(front & bac...
performance
Expectations and  perceived performance                           Quick< 100ms                    In control˚             ...
concatenate  minify   (uglify)   gzip  YSlow
sprite your iconsconsider font-glyphs   http://css-tricks.com/examples/IconFont/          Semantic glyphs -   http://www.c...
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      ...
Don’t fight it polyfill it.  modernizr js (+yepnope)     respond js        etc...                http://caniuse.com       ...
“Progressive Enhancement”        Workflow https://github.com/filamentgroup/                   SouthstreetEnhanceJS - eCSSe...
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...
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 Raini...
and we’re just getting started...    @GeorgeAdamson  www.slideshare.net/george.adamson
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
×

Design for mobile (that means everything!)

3,216

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.

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

No notes for slide
  • Mobile UX, IxD &amp; 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&amp;#x2019;t one\nAnd a hidden agenda...\n
  • \n
  • Show me your phone: Android, Blackberry, iPhone, Win Phone\nShow me your tablet... (&amp;HP?)\nShow me your laptops...\nShow me your desktops...\n
  • \n
  • What&amp;#x2019;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&amp;#x2019;re obsessed with them!\nHead down - Walking around like zombies.\nNeed a camera in top just to see where we&amp;#x2019;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. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &amp;#x201C;Cross-device&amp;#x201D; (AKA cross-channel) - It does not matter which device we use\n
  • &amp;#x201C;Review your slides to make every one count!&amp;#x201D;\n
  • \n
  • A &amp;#x201C;hard bee&amp;#x201D; :P\n
  • Well, not always 2 hands...\n
  • Not engaged - poor attention\n
  • perhaps because we&amp;#x2019;re still approaching it the same old way\n
  • My favourite suggestions from clients...\n
  • \n
  • Perhaps what you mean is\n&amp;#x201C;No one would do that in a desktop way on a mobile&amp;#x201D;\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&amp;#x2019;ve got\n
  • We&amp;#x2019;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 &amp; augment itself.\nNow more fashionable to merge into one CSS file\n
  • Important!\nPixels becoming irrelevant. Consider EMs\n
  • \n
  • &amp;#x201C;Retina Display&amp;#x201D;\n
  • Use width:100%; zoom:1;\nDefaults for little device + little bandwidth = Avoid large images.\nFilament Group made lovely solution but it&amp;#x2019;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&amp;#x2019;s attention.\nCan reach tablet buttons top left &amp; right. (Beware of top middle)\nPhones tend to be one hand. Often just thumb near bottom.\nBeware oversized phones: (4-5&quot;) You cannot swipe entire screen with one thumb.\n
  • Swipe to scroll.\nWithout visual cues we assume default direction without a thought.\nEmerging &amp;#x201C;standards&amp;#x201D;: 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. &amp;#x201C;x&amp;#x201D; 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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;s no shadow in IE6?!\n
  • \n
  • Make use of &amp;#x201C;perceived&amp;#x201D; load speed.\nBeware of 3rd party JS such as Facebook-like blocking page render.\nConsider &amp;#x201C;Infinite Scroll&amp;#x201D; instead of paging where practical.\nUse yepnope etc if you must load multiple scripts. (asynchronous)\nAJAX Include.\nPushState &amp; PJAX.\n
  • AKA shim\n
  • AKA shim\n
  • App-cache if you&amp;#x2019;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&amp;#x2019;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 &amp;#x201C;physics&amp;#x201D; 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&amp;#x2019;re just getting started...\n
  • \n
  • \n
  • Design for mobile (that means everything!)

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

    ×