Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Breakingoi    t
Breaking                          oi            tBob Hotard                                            Adam ThielmanSports...
Responsive Web Design •Introduction Bob and Adam •Outline of Presentation •What is Responsive Web Design •Content Concepts...
• Should I have an app for my business?• Who does apps?• Do I need to design just for an iPad?• What about mobile devices?...
Defining Responsive
Vitamin T Infographic: A brief history of Web standardsVitaminT: http://www.vitamintalent.com/extra/infographics-viewer/we...
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
ContentFirst
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
Jason Santa Maria: On Web Typography, AnEvenApart 2012-Austin
Kristina Halvorson: Brain Traffic, AnEvenApart 2012-Austin
MobileFirst
PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in2002 / 2005 respectively;25 Source: ITU, ...
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Breakpoints
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Real World Examples ofResponsive Content   http://bradfrostweb.com/blog/web/responsive-nav-patterns/   http://aarronwalter...
Techy Term of the Day“Media Queries”
“Media Queries”/* MINOR ADJUSTMENTS FOR SMALLER SCREENS */@media screen and (min-width: 1024px)and (max-width: 1140px) { …...
“Media Queries”            Search A List Apart (www.alistapart.com)            for an article by Ethan Marcotte posted May...
“Media Queries”“A media query allows us to target not only certain device classes, but to actually inspect the physical ch...
“Media Queries” How to incorporate a query into a linked style sheet’s   media attribute: <link rel="stylesheet" type="tex...
“Media Queries”“In plain English, we’re asking the device if its horizontal  resolution (max-device-width) is equal to or ...
“Media Queries”“But a responsive design isn’t limited to layout changes. Media queries  allow us to practice some incredib...
Usability Interface Engineering
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Case StudiesProfessional Coach    Life Coach
Case Studies    Professional Coach         Life Coach      Firecat Studios?
Greene & Associates
Soul Nourishing
Thank You
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Responsive Web Design - Breaking Points
Upcoming SlideShare
Loading in …5
×

Responsive Web Design - Breaking Points

3,922 views

Published on

Bob Hotard and Adam Thielman present information on Responsive Web Design at Firecat Studio's Firecat First Friday coworking and brownbag, after they were inspired at An Event Apart.

  • Be the first to comment

Responsive Web Design - Breaking Points

  1. 1. Breakingoi t
  2. 2. Breaking oi tBob Hotard Adam ThielmanSports – Music – Corporate Web Design User Experience Strategist@BobHWebDesign @adamthielman
  3. 3. Responsive Web Design •Introduction Bob and Adam •Outline of Presentation •What is Responsive Web Design •Content Concepts that Stick •Breakpoints •Examples •Rolling Up Our Responsive Sleeves just like Ethan •Techy Term of the Day •Usability •Case Studies
  4. 4. • Should I have an app for my business?• Who does apps?• Do I need to design just for an iPad?• What about mobile devices?• Android and iPhone?• Windows phone?• Blackberry?
  5. 5. Defining Responsive
  6. 6. Vitamin T Infographic: A brief history of Web standardsVitaminT: http://www.vitamintalent.com/extra/infographics-viewer/web-standards.htm
  7. 7. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  8. 8. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  9. 9. Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
  10. 10. Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
  11. 11. ContentFirst
  12. 12. Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
  13. 13. Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
  14. 14. Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
  15. 15. Jason Santa Maria: On Web Typography, AnEvenApart 2012-Austin
  16. 16. Kristina Halvorson: Brain Traffic, AnEvenApart 2012-Austin
  17. 17. MobileFirst
  18. 18. PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in2002 / 2005 respectively;25 Source: ITU, Mark Lipacis, Morgan Stanley Research. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  19. 19. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  20. 20. Breakpoints
  21. 21. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  22. 22. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  23. 23. Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
  24. 24. Real World Examples ofResponsive Content http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://aarronwalter.com/speaker/realme/ http://www.lukew.com/ff/entry.asp?1585 http://bostonglobe.com/
  25. 25. Techy Term of the Day“Media Queries”
  26. 26. “Media Queries”/* MINOR ADJUSTMENTS FOR SMALLER SCREENS */@media screen and (min-width: 1024px)and (max-width: 1140px) { … }@media screen and (max-width: 1023px) { … }@media screen and (min-width: 768px)and (max-width: 1024px) { … }@media screen and (max-width: 767px) { … }
  27. 27. “Media Queries” Search A List Apart (www.alistapart.com) for an article by Ethan Marcotte posted May 10, 2010!Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
  28. 28. “Media Queries”“A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.” -- Ethan Marcotte
  29. 29. “Media Queries” How to incorporate a query into a linked style sheet’s media attribute: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> The query contains two components: 1. a media type (screen), and 2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).Ethan Marcotte: Responsive Web Design, May 25, 2010 A List Apart
  30. 30. “Media Queries”“In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.” -- Ethan Marcotte
  31. 31. “Media Queries”“But a responsive design isn’t limited to layout changes. Media queries allow us to practice some incredibly precise fine-tuning as our pages reshape themselves: we can increase the target area on links for smaller screens, better complying with Fitts’ Law on touch devices; selectively show or hide elements that might enhance a page’s navigation; we can even practice responsive typesetting to gradually alter the size and leading of our text, optimizing the reading experience for the display providing it.” -- Ethan Marcotte
  32. 32. Usability Interface Engineering
  33. 33. Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
  34. 34. Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
  35. 35. Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
  36. 36. Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
  37. 37. Case StudiesProfessional Coach Life Coach
  38. 38. Case Studies Professional Coach Life Coach Firecat Studios?
  39. 39. Greene & Associates
  40. 40. Soul Nourishing
  41. 41. Thank You

×