SlideShare ist ein Scribd-Unternehmen logo
1 von 94
designing
for 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 is
no mobile”
Now everything
 is “mobile”...

  what we call
the “mobile web”
    is a blip
That’s all very
utopian and fluffy



 but what does it
      mean?!
      http://www.elainefitzgerald.com/utopia/MPj04009470000[1].jpg
You are
                    here




                             someone at PinchZoom drew this but I’ve no idea who!!




  1 computer     1000s of computers
1000s 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 we
use our devices?
84% at home
80% during misc downtime
76% while queuing
69% while shopping
64% at work
62% 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 by
ReadItLater

And yes, thanks, I know
                                     w,
                                  no
it’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/
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
                                                                             on our
                                                                            computers




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




            http://findicons.com
         http://www.portboulogne.com
Design for mobile (that means everything!)
How hard could it be...?




         http://www.sichel-embroidery.com/images/boxingbee.jpg
big screen
              wired network
                    cpu
                   mouse
for desktop      keyboard
  we can           power
  expect:           desk
                   chair
                   2 eyes
                  2 hands
              your attention
unknown screen (small?)
                     lo-res / Hi-res
                    dodgy network
                    touch / pointer
for 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 just
target iPhone”
“It’s calculated that by
2015, 40%˚ of our planet’s
   population will have
  access to the internet.                                                            tly 3
                                                                                           3 %-
                                                                                                  is h
                                                                                r ren
                                                                           ˚ Cu




Of 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
Design for mobile (that means everything!)
He also proposed command line first




   Hmm, I suggest API First is a
       better way to say it
What do all these
device 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
Design for mobile (that means everything!)
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 one
photoshop’d full page mockup
tech solutions
Responsive Web
 Design RWD
128x160




240x320

    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/bootstrap
http://stuffandnonsense.co.uk/projects/320andup
Touch interaction
Tap


               Phone
Tablet
Swipe


Tablet           Phone
touch input
All credit to LukeW. This slide like totally stolen from his presentation
Reduce input
 wherever possible

Exploit 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 hover
on touch devices


Besides, 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 icons

consider font-glyphs

   http://css-tricks.com/examples/IconFont/




          Semantic glyphs -
   http://www.codestyle.org/css/at-font-face/
     StandardUnicodeIconsWebFonts.shtml
data-uri
your small images
Use those CSS3 features!

text + css + icon + grad + shadow
Use your HTML skills

Write great markup
 for your content
Late render

                Late load
http://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/
                   Southstreet

EnhanceJS - eCSSential - QuickConcat - AjaxInclude - AppendAround
                               etc
far-future expiry

  cache-manifest
http://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 creates
unachievable 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
Design for mobile (that means everything!)
Check out
UX guidelines for

       iOS

    Android

Windows Mobile
Get real content into
   early designs

                   Lor
                  ips em
                     um
Invite feedback early
Our mental models of
development 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 Friendly

http://futurefriend.ly/thinking.html
I’ll leave you with
something to ponder...
“Our rapid adoption
    of technology
      is creating
  ‘generation gaps’
 at an accelerating
         rate...”
“...People 2, 3 or 4
years 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
Design for mobile (that means everything!)

Weitere ähnliche Inhalte

Kürzlich hochgeladen

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Kürzlich hochgeladen (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

Design for mobile (that means everything!)

Hinweis der Redaktion

  1. 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
  2. An agenda, for those that get upset when there isn&amp;#x2019;t one\nAnd a hidden agenda...\n
  3. \n
  4. Show me your phone: Android, Blackberry, iPhone, Win Phone\nShow me your tablet... (&amp;HP?)\nShow me your laptops...\nShow me your desktops...\n
  5. \n
  6. What&amp;#x2019;s really gonna bake your noodle\nIf you like spoons and freaky children...\n
  7. \n
  8. \n
  9. 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
  10. So why do we design for desktop?\n
  11. 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
  12. \n
  13. ... 1/2 of us while driving to work :P\n
  14. \n
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. &amp;#x201C;Review your slides to make every one count!&amp;#x201D;\n
  27. \n
  28. A &amp;#x201C;hard bee&amp;#x201D; :P\n
  29. Well, not always 2 hands...\n
  30. Not engaged - poor attention\n
  31. perhaps because we&amp;#x2019;re still approaching it the same old way\n
  32. My favourite suggestions from clients...\n
  33. \n
  34. Perhaps what you mean is\n&amp;#x201C;No one would do that in a desktop way on a mobile&amp;#x201D;\n
  35. \n
  36. The CEO has a desktop Mac too, did you just target that?\n
  37. By the way, The largest chunk of them are in Asia\n
  38. Luke Wroblewski. Instead of desktop-first\nGreat for honing in on most important features\nBenefits the design on larger devices too\n
  39. Get the underlying functionality working\nPlug anything into it\n
  40. Another approach\n
  41. \n
  42. Content first is your new guiding strategy!\n
  43. Content first is your new guiding strategy!\n
  44. Content first is your new guiding strategy!\n
  45. Content first is your new guiding strategy!\n
  46. Content first is your new guiding strategy!\n
  47. Another shock for the system\n
  48. \n
  49. Rearrange the content for the device\n
  50. Phones, Tablets, Desktops and everything in between\nRearrange the content for the device\nPixels becoming irrelevant\n
  51. http://bostonglobe.com\nNot dumbing down, just using what you&amp;#x2019;ve got\n
  52. We&amp;#x2019;re just such drama queens we like to think this problem only affects us!\n
  53. Pixels becoming irrelevant\n
  54. 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
  55. Important!\nPixels becoming irrelevant. Consider EMs\n
  56. \n
  57. &amp;#x201C;Retina Display&amp;#x201D;\n
  58. 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
  59. \n
  60. Not going to come near you\n
  61. 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
  62. 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
  63. \n
  64. 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
  65. Sensible defaults.\nUse location to make assumptions and reduce input.\nEg: Instead of typing, tap stepper or slider or content etc.\n
  66. 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
  67. \n
  68. 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
  69. \n
  70. Eg: Apps: Bump, Word Lens\n
  71. \n
  72. Even the style and speed of the spinner can affect expectations\n
  73. 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
  74. One file for multiple icons.\nFont icons scale and allow irregular shaped shadow etc (not just rectangle)\n
  75. \n
  76. Use css to produce composite instead of using image.\nWho cares if there&amp;#x2019;s no shadow in IE6?!\n
  77. \n
  78. 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
  79. AKA shim\n
  80. AKA shim\n
  81. App-cache if you&amp;#x2019;re feeling brave!\n
  82. \n
  83. The excellent Giles Colborne has a good chat about this.\nInstagram - app only\n
  84. 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
  85. 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
  86. Skeuomorph\niPad Contacts - It&amp;#x2019;s a book but swipe page causes delete!\n
  87. Very human - Far right.\nCute - In the middle.\nPolar Express, Michael Jackson, Dancing baby\n
  88. Windows Mobile avoids uncanny valley\nand still employs &amp;#x201C;physics&amp;#x201D; for the interactions (momentum, acceleration etc)\n
  89. Yes, even for Android!\n
  90. Lorem ipsum is cack.\nDesign for real copy.\n
  91. Let real users get their hands on it\n
  92. Stop trying to control everything.\n
  93. We talked about CSS3 shadows etc. \nUse them, along with CSS Transforms. They degrade well.\n
  94. For those of us trapped in a CMS\n
  95. \n
  96. Constraints breed innovation.\nSuccessful projects will go beyond their original constraints\n
  97. For more insites into this thinking...\n
  98. a little something to bake your noodle...\n
  99. \n
  100. The generation gap!\nEg: School leavers having diff experience from school juniors.\nAnd we&amp;#x2019;re just getting started...\n
  101. \n
  102. \n