Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design

on

  • 471 views

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

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

Statistics

Views

Total Views
471
Views on SlideShare
470
Embed Views
1

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

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