7. (Repurposing •
Platform optimization •
UI

8. “It's cheap but degrading to reuse content and design
across diverging media forms like print vs. online or
desktop vs. mobile. Superior UX requires tight platform
integration.”

9. •
Native
•
•
•
IPhone •
•
•

13. – •
- - •
•
•
HTML5 •

14. •
ROI
•
•

15. •
•
•
•
Look and feel
•

17. 1024px (Desktop)
768px (iPad portrait)
320px (iPhone portrait)
home page
all the booking process pages
the hotel pages
offer pages
some generic layouts.

23. Look and feel •
•
– •

25. Luke Wroblewski
Mostly Fluid

26. Column Drop

27. Layout Shifter

28. Tiny Tweaks
Off Canvas

30. http://www.bostonglobe.com/
http://thinkvitamin.com/

31. http://stephencaver.com/
http://foodsense.is/

32. http://sasquatchfestival.com/
http://staffanstorp.se/

33. http://forefathersgroup.com/

34. http://clearairchallenge.com/

36. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
http://foodsense.is/

37. http://colly.com/

38. http://foodsense.is/
http://boagworld.com/
http://www.anderssonwise.com/

39. • http://seesparkbox.com
• http://stephencaver.com/

40. • http://www.revsystems.com/
• http://forefathersgroup.com/

41. • http://interim.it/

42. http://spigotdesign.com/

43. Mobile First •
– Media queries •
– •
iPhone •
– Content Prototype •

44. •
•
•
•
•

45. •
• 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/

46. • 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/