Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design And You


Published on

While Responsive Design is the buzzword amongst companies trying to move to a mobile world, it's not quite as easy to actually implement. In a presentation I did with Michelle Dash and Bill Welense, we talk about the steps that got us to responsive design, deconstructing it, approaching it from a design perspective, the benefits and pitfalls, and looking into the future.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Design And You

  1. 1. Responsive  Design  and  You   Michelle  Dash,  Joe  Hass,  Bill  Welense  
  2. 2. Tonight’s  Agenda   How  We  Got  Here   Is  Responsive  Design  A  Fad?   DeconstrucCng  Responsive  Design   Approaching  The  Design  Process   Benefits  and  PiFalls   The  One  Slide  Answer  To  “Should  You  Use   Responsive  Design?”   •  Looking  Into  The  Future   •  ReconstrucCng  Responsive  Design   •  •  •  •  •  • 
  3. 3. 1996:  The  Desktop   hRp://  
  4. 4. 1999/2002:  WAP  Mobile  
  5. 5. 2007:  The  iPhone  
  6. 6. “This  is  the  real   Web!”  
  7. 7. “Mobile  Web”  
  8. 8. Is  Responsive  Design  a  Fad?  
  9. 9. How  Responsive  Do  You  Want  To  Get?  
  10. 10. Fluid  Design   Images  adjust  their  size  based  on  the  viewport   size.   In  an  600-­‐pixel  view,  you  see  this.   In  a  768-­‐pixel  view,  you  see  this.  
  11. 11. Contextual  Design   Design  the  experience  based  on  how  people   generally  use  the  device.   I  want  to  check   I  want  to  immerse   I  want  to  manage   hRp://­‐agnosCc-­‐context-­‐specific/  
  12. 12.  Contextual  Design  Display   Common  elements  inherit  look  and  feel  of  the   device  they  are  used  on.   Example:  Drop  downs  take  on  interface  of   different  device  types   hRp://  
  13. 13. Responsive  Design  With   Server  Side  Components   The  page  redesigns  itself  based  on  the  viewable   width  of  the  browser.  It  only  sends  the   appropriate  pieces  needed.   hRp://  
  14. 14. Jakob  Nielsen  &  Responsive  Design­‐vs-­‐full-­‐sites.html  
  15. 15. Jakob  Nielsen  &  Responsive  Design   “I  was  wriCng  about  user  experience,  not   implementaCon.  ...  Responsive  design  is  one  of  the   ways  to  achieve  different  user  interfaces  for   different  devices.  It  should  be  up  to  the  engineers   to  determine  the  most  efficient  way  of  achieving   the  user  experience  goals.  All  we  usability  people   should  decide  is  how  the  site  should  work  for  users,   not  how  this  is  implemented.”   hRp://­‐responds-­‐mobile-­‐criCcism  
  16. 16. Approaching  The  Design  Process:   Mobile  vs  Tablet  vs  Desktop   •  Content-­‐Driven  Design   •  Approximate  Designs   •  Mobile  First  
  17. 17. Content-­‐Driven  Design   Instead  of  looking  at  pieces  of  funcConality   individually,  a  site  becomes  a  series  of   components  that  shii  as  needed  depending  on   the  content  on  the  site.  
  18. 18. Approximate  Designs   As  you  design  a  page,  define  a  small,  medium   and  large  point  of  view.  
  19. 19. Mobile  First   A  designer  should  focus  on  the  core  set  of  tasks   for  a  mobile  device,  then  add  addiConal   funcConality  when  using  tablets  and  desktop.  
  20. 20. Benefits   •  •  •  •  Creates  a  cohesive  experience  for  users   Content  and  funcConality  is  targeted   PotenCal  management  efficiencies   Longer  shelf  life  
  21. 21. PiFalls   •  •  •  •  •  Longer  to  design   Longer  to  develop  (and  harder  to  do  right)   Costs  more   Paradigm  shii  for  clients,  especially  in  the   approval  process   Faith  in  the  device-­‐sensing  capabiliCes  on  the   server  
  22. 22. Should  We  Use   Responsive  Design?  
  23. 23. It  Depends.   •  •  •  •  •  •  Site  needs   Site  architecture   User  needs   User  environment   User  flows   Time  available  
  24. 24. Examples   •  •  •  •  •  •  •  •  •  
  25. 25. Looking  Into  The  Future  
  26. 26. ReconstrucCng  Responsive  Design   •  It’s  a  method.  It  can  be  the  right  method,   but  not  always.   •  Bring  and  keep  the  key  factors  top  of  mind   when  determining  how  to  go  about  this.   •  Whether  to  go  with  responsive  design  is  an   everyone  decision  (client,  user  experience,   creaCve,  producCon).  
  27. 27. Websites  To  Help  You   •­‐fantasCc-­‐ tools-­‐responsive-­‐web-­‐design   •­‐is-­‐responsive/   •­‐essenCal-­‐books-­‐on-­‐ responsive-­‐web-­‐design-­‐you-­‐do-­‐not-­‐want-­‐to-­‐ miss.html  
  28. 28. Every  Single  Link  From  Tonight   On  One  Page  
  29. 29. Responsive  Design  and  You   Michelle  Dash,  Joe  Hass,  Bill  Welense