Your SlideShare is downloading. ×
Responsive Design And You
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

Responsive Design And You

282
views

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, …

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
282
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
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

Transcript

  • 1. Responsive  Design  and  You   Michelle  Dash,  Joe  Hass,  Bill  Welense  
  • 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. 1996:  The  Desktop   hRp://www2.warnerbros.com/spacejam/movie/jam.htm  
  • 4. 1999/2002:  WAP  Mobile  
  • 5. 2007:  The  iPhone  
  • 6. “This  is  the  real   Web!”  
  • 7. “Mobile  Web”  
  • 8. Is  Responsive  Design  a  Fad?  
  • 9. How  Responsive  Do  You  Want  To  Get?  
  • 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. 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://whitneyhess.com/blog/2012/02/07/locaCon-­‐agnosCc-­‐context-­‐specific/  
  • 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://www.lukew.com/ff/entry.asp?1000  
  • 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://www.lukew.com/ff/entry.asp?1509  
  • 14. Jakob  Nielsen  &  Responsive  Design   www.useit.com/alertbox/mobile-­‐vs-­‐full-­‐sites.html   www.useit.com/alertbox/repurposing  
  • 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://www.netmagazine.com/interviews/nielsen-­‐responds-­‐mobile-­‐criCcism  
  • 16. Approaching  The  Design  Process:   Mobile  vs  Tablet  vs  Desktop   •  Content-­‐Driven  Design   •  Approximate  Designs   •  Mobile  First  
  • 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. Approximate  Designs   As  you  design  a  page,  define  a  small,  medium   and  large  point  of  view.  
  • 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. Benefits   •  •  •  •  Creates  a  cohesive  experience  for  users   Content  and  funcConality  is  targeted   PotenCal  management  efficiencies   Longer  shelf  life  
  • 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. Should  We  Use   Responsive  Design?  
  • 23. It  Depends.   •  •  •  •  •  •  Site  needs   Site  architecture   User  needs   User  environment   User  flows   Time  available  
  • 24. Examples   •  •  •  •  •  •  •  •  •  roundarchisobar.com   goang.com   sCtch.hermones.com   thereturn.adidas.com   bostonglobe.com   barackobama.com   sony.com   starbucks.com   londonandpartners.com  
  • 25. Looking  Into  The  Future  
  • 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. Websites  To  Help  You   •  www.netmagazine.com/features/50-­‐fantasCc-­‐ tools-­‐responsive-­‐web-­‐design   •  bradfrost.github.com/this-­‐is-­‐responsive/   •  www.awwwards.com/7-­‐essenCal-­‐books-­‐on-­‐ responsive-­‐web-­‐design-­‐you-­‐do-­‐not-­‐want-­‐to-­‐ miss.html  
  • 28. Every  Single  Link  From  Tonight   On  One  Page   goo.gl/2Hiu  
  • 29. Responsive  Design  and  You   Michelle  Dash,  Joe  Hass,  Bill  Welense