Responsive Design

639 views

Published on

in which I describe the secret advantage to using responsive design techniques.

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

  • Be the first to like this

No Downloads
Views
Total views
639
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • Introduction to moi\n\n
  • Introduction to moi\n\n
  • Responsive design usually refers to the ability of a flexible theme to adjust to the screen viewing it\n\nBut it’s so much more.\n
  • Responsive design usually refers to the ability of a flexible theme to adjust to the screen viewing it\n\nBut it’s so much more.\n
  • Responsive design usually refers to the ability of a flexible theme to adjust to the screen viewing it\n\nBut it’s so much more.\n
  • \n
  • not the real advantage…\n\nso lets talk about something I really care about.\n
  • I don’t need to explain how important storytelling is to this company.\n\nBut are we using the full advantages of our medium to tell these stories?\n\nMention summer camp\n
  • The best story tellers pay attention to their audiences, and adjust their presentation accordingly.\n\nSo if we want to be the best, we have to learn new ways of listening, and of adjusting.\n
  • \n
  • \n
  • \n
  • \n
  • don’t worry, we are not going to talk about plugins and libraries and APIs…\n\nwe are going to talk about boxes.\n
  • don’t worry, we are not going to talk about plugins and libraries and APIs…\n\nwe are going to talk about boxes.\n
  • life was good. we used tables. we didn’t answer the phone during an email send.\n
  • \n
  • it’s the future! we can make designs as wide as we want!\n
  • In 2007, everything changed.\n\nIn five short years, what was a minor consideration for a very small portion of the internet-using world (remember .mobi sites in java?) became a major business, with startups rising and falling on apps, mobile sites, and usability.\n
  • it’s the future! we can make designs as wide as we want!\n
  • \n
  • \n
  • use the box model outliner to demonstrate how content moves around a page.\n\ncontent strategy adjusting constantly.\n
  • \n
  • \n
  • \n
  • desktop site is around the shop experience, and gift cards\n
  • through responsive design, we can better serve users by catering to their needs on each device\n\nwithout compromising the rest of the story\n
  • \n
  • Part of the exciting bit of responsive design is its a new space in which to innovate and distinguish ourselves.\n
  • Part of the exciting bit of responsive design is its a new space in which to innovate and distinguish ourselves.\n
  • \n
  • \n
  • \n
  • Responsive Design

    1. 1. responsive designand why you should give a flying snotbucket.
    2. 2. responsive design
    3. 3. responsive design
    4. 4. responsive design
    5. 5. responsive design
    6. 6. responsive design • mobile users • future proofing • the “ooh” factor • cost effective
    7. 7. but that’s not the real advantage ofresponsive design
    8. 8. storytelling
    9. 9. storytelling is about listening.
    10. 10. responsive design is all about listening to your usersand adjusting your story accordingly.
    11. 11. content is king.
    12. 12. content is king.
    13. 13. content is your story.
    14. 14. and content isstructured with <code>.
    15. 15. don’t worry…
    16. 16. in ye olde days600px 800px
    17. 17. in ye olde days768px 1024px
    18. 18. in ye olde days900px 1440px
    19. 19. but what about…320px 240px
    20. 20. in ye olde days900px 1440px
    21. 21. box model
    22. 22. box model
    23. 23. http://designintellection.com/
    24. 24. content = story
    25. 25. content = story but we can’t change our story…so how do we cater to our audience?
    26. 26. don’t change your story, change your presentation.
    27. 27. strategy
    28. 28. strategywhat do yourusers need on the go?one their TVs, in theback seat of their cars,on devices that don’texist yet?
    29. 29. strategywhat do yourusers need on the go?one their TVs, in theback seat of their cars,on devices that don’texist yet?
    30. 30. not just responsivedesign, but responsive thinking.
    31. 31. all the problems haven’t been solved yet.
    32. 32. all the problems haven’t been solved yet.• menus• images/media scaling• high pixel density (retina) screens
    33. 33. sources:• http://www.alistapart.com/articles/ responsive-web-design/• http://www.starbucks.com/static/reference/ styleguide/• http://informationarchitects.net/blog/ responsive-typography-the-basics/• http://mediaqueri.es/
    34. 34. thanks!
    35. 35. © 2012 Evan Travers

    ×