Responsive Design

1,328 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,328
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/

×