Responsive	
  Design	
  and	
  You	
  
Michelle	
  Dash,	
  Joe	
  Hass,	
  Bill	
  Welense	
  
Tonight’s	
  Agenda	
  
How	
  We	
  Got	
  Here	
  
Is	
  Responsive	
  Design	
  A	
  Fad?	
  
DeconstrucCng	
  Responsi...
1996:	
  The	
  Desktop	
  

hRp://www2.warnerbros.com/spacejam/movie/jam.htm	
  
1999/2002:	
  WAP	
  Mobile	
  
2007:	
  The	
  iPhone	
  
“This	
  is	
  the	
  real	
  
Web!”	
  
“Mobile	
  Web”	
  
Is	
  Responsive	
  Design	
  a	
  Fad?	
  
How	
  Responsive	
  Do	
  You	
  Want	
  To	
  Get?	
  
Fluid	
  Design	
  
Images	
  adjust	
  their	
  size	
  based	
  on	
  the	
  viewport	
  
size.	
  
In	
  an	
  600-­‐pi...
Contextual	
  Design	
  
Design	
  the	
  experience	
  based	
  on	
  how	
  people	
  
generally	
  use	
  the	
  device...
 Contextual	
  Design	
  Display	
  
Common	
  elements	
  inherit	
  look	
  and	
  feel	
  of	
  the	
  
device	
  they	...
Responsive	
  Design	
  With	
  
Server	
  Side	
  Components	
  
The	
  page	
  redesigns	
  itself	
  based	
  on	
  the...
Jakob	
  Nielsen	
  &	
  Responsive	
  Design	
  

www.useit.com/alertbox/mobile-­‐vs-­‐full-­‐sites.html	
  
www.useit.co...
Jakob	
  Nielsen	
  &	
  Responsive	
  Design	
  
“I	
  was	
  wriCng	
  about	
  user	
  experience,	
  not	
  
implement...
Approaching	
  The	
  Design	
  Process:	
  
Mobile	
  vs	
  Tablet	
  vs	
  Desktop	
  

•  Content-­‐Driven	
  Design	
 ...
Content-­‐Driven	
  Design	
  
Instead	
  of	
  looking	
  at	
  pieces	
  of	
  funcConality	
  
individually,	
  a	
  si...
Approximate	
  Designs	
  
As	
  you	
  design	
  a	
  page,	
  define	
  a	
  small,	
  medium	
  
and	
  large	
  point	
...
Mobile	
  First	
  
A	
  designer	
  should	
  focus	
  on	
  the	
  core	
  set	
  of	
  tasks	
  
for	
  a	
  mobile	
  ...
Benefits	
  
• 
• 
• 
• 

Creates	
  a	
  cohesive	
  experience	
  for	
  users	
  
Content	
  and	
  funcConality	
  is	
...
PiFalls	
  
• 
• 
• 
• 
• 

Longer	
  to	
  design	
  
Longer	
  to	
  develop	
  (and	
  harder	
  to	
  do	
  right)	
  ...
Should	
  We	
  Use	
  
Responsive	
  Design?	
  
It	
  Depends.	
  
• 
• 
• 
• 
• 
• 

Site	
  needs	
  
Site	
  architecture	
  
User	
  needs	
  
User	
  environment	
  ...
Examples	
  
• 
• 
• 
• 
• 
• 
• 
• 
• 

roundarchisobar.com	
  
goang.com	
  
sCtch.hermones.com	
  
thereturn.adidas.com...
Looking	
  Into	
  The	
  Future	
  
ReconstrucCng	
  Responsive	
  Design	
  
•  It’s	
  a	
  method.	
  It	
  can	
  be	
  the	
  right	
  method,	
  
but	
 ...
Websites	
  To	
  Help	
  You	
  
•  www.netmagazine.com/features/50-­‐fantasCc-­‐
tools-­‐responsive-­‐web-­‐design	
  
•...
Every	
  Single	
  Link	
  From	
  Tonight	
  
On	
  One	
  Page	
  

goo.gl/2Hiu	
  
Responsive	
  Design	
  and	
  You	
  
Michelle	
  Dash,	
  Joe	
  Hass,	
  Bill	
  Welense	
  
Upcoming SlideShare
Loading in …5
×

Responsive Design And You

371
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
371
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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://www2.warnerbros.com/spacejam/movie/jam.htm  
  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://whitneyhess.com/blog/2012/02/07/locaCon-­‐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://www.lukew.com/ff/entry.asp?1000  
  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://www.lukew.com/ff/entry.asp?1509  
  14. 14. Jakob  Nielsen  &  Responsive  Design   www.useit.com/alertbox/mobile-­‐vs-­‐full-­‐sites.html   www.useit.com/alertbox/repurposing  
  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://www.netmagazine.com/interviews/nielsen-­‐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   •  •  •  •  •  •  •  •  •  roundarchisobar.com   goang.com   sCtch.hermones.com   thereturn.adidas.com   bostonglobe.com   barackobama.com   sony.com   starbucks.com   londonandpartners.com  
  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   •  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. 28. Every  Single  Link  From  Tonight   On  One  Page   goo.gl/2Hiu  
  29. 29. Responsive  Design  and  You   Michelle  Dash,  Joe  Hass,  Bill  Welense  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×