(Repurposing   •Platform optimization              •                   UI
“Its cheap but degrading to reuse content and designacross diverging media forms like print vs. online ordesktop vs. mobil...
•    Native             •             •             •IPhone       •             •             •
–           •-       -       •                •                •        HTML5   •
•ROI      •      •
•                •                •                •Look and feel                •
1024px (Desktop)    768px (iPad portrait)   320px (iPhone portrait)          home pageall the booking process pages       ...
Look and feel       •                    •                –   •
Luke Wroblewski        Mostly Fluid
Column Drop
Layout Shifter
Tiny TweaksOff Canvas
http://www.bostonglobe.com/http://thinkvitamin.com/
http://stephencaver.com/http://foodsense.is/
http://sasquatchfestival.com/ http://staffanstorp.se/
http://forefathersgroup.com/
http://clearairchallenge.com/
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html http://foodsense.is/
http://colly.com/
http://foodsense.is/http://boagworld.com/http://www.anderssonwise.com/
• http://seesparkbox.com• http://stephencaver.com/
• http://www.revsystems.com/• http://forefathersgroup.com/
• http://interim.it/
http://spigotdesign.com/
Mobile First •       – Media queries •–                      •       iPhone           •    – Content Prototype •
•••••
••   http://www.youtube.com/watch?v=xQDemi6xT9Q•   http://www.youtube.com/watch?v=1gw3MSwm6so&feature=related•   http://ww...
•   http://www.webdesignshock.com/responsive-design-problems/•   http://sender11.typepad.com/sender11/2008/04/mobile-scree...
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in …5
×

Responsive Design

1,332 views

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,332
On SlideShare
0
From Embeds
0
Number of Embeds
390
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. (Repurposing •Platform optimization • UI
  2. 2. “Its cheap but degrading to reuse content and designacross diverging media forms like print vs. online ordesktop vs. mobile. Superior UX requires tight platformintegration.”
  3. 3. • Native • • •IPhone • • •
  4. 4. – •- - • • • HTML5 •
  5. 5. •ROI • •
  6. 6. • • • •Look and feel •
  7. 7. 1024px (Desktop) 768px (iPad portrait) 320px (iPhone portrait) home pageall the booking process pages the hotel pages offer pages some generic layouts.
  8. 8. Look and feel • • – •
  9. 9. Luke Wroblewski Mostly Fluid
  10. 10. Column Drop
  11. 11. Layout Shifter
  12. 12. Tiny TweaksOff Canvas
  13. 13. http://www.bostonglobe.com/http://thinkvitamin.com/
  14. 14. http://stephencaver.com/http://foodsense.is/
  15. 15. http://sasquatchfestival.com/ http://staffanstorp.se/
  16. 16. http://forefathersgroup.com/
  17. 17. http://clearairchallenge.com/
  18. 18. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html http://foodsense.is/
  19. 19. http://colly.com/
  20. 20. http://foodsense.is/http://boagworld.com/http://www.anderssonwise.com/
  21. 21. • http://seesparkbox.com• http://stephencaver.com/
  22. 22. • http://www.revsystems.com/• http://forefathersgroup.com/
  23. 23. • http://interim.it/
  24. 24. http://spigotdesign.com/
  25. 25. Mobile First • – Media queries •– • iPhone • – Content Prototype •
  26. 26. •••••
  27. 27. •• http://www.youtube.com/watch?v=xQDemi6xT9Q• http://www.youtube.com/watch?v=1gw3MSwm6so&feature=related• http://www.youtube.com/watch?v=uNMw34Z63Ck&feature=related• http://www.youtube.com/watch?v=wZ8BosE0Jmk •• http://www.idomain.co.il/2011/responsive-web-design-examples/• http://designmodo.com/responsive-design-examples/
  28. 28. • http://www.webdesignshock.com/responsive-design-problems/• http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html• http://www.lukew.com/ff/entry.asp?1514• http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/• http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/• http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/• http://www.useit.com/alertbox/repurposing.html• http://boagworld.com/mobile-web/separate-mobile-site-vs-responsive-design/• http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/• http://blog.echoenduring.com/2011/08/06/i-love-responsive-design-but/• http://www.useit.com/alertbox/mobile-vs-full-sites.html• http://www.thismanslife.co.uk/projects/lab/responsiveillustration• http://www.egstudio.biz/responsive-design-vs-mobile- application/?utm_source=oktopost&utm_medium=LinkedIn- Group&utm_campaign=Responsive%20Design%20Vs.%20Mobile%20Application• http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/• http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design- strategies/

×