RESPONSIVE WEB DESIGNsara cannon / sara-cannon.com / follow @saracannon                WORDCAMP SAN FRANCISCO 2011
ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com make.wordpress.org/ui           ...
IN THE BEGINNING...                  WORDCAMP SAN FRANCISCO
OVER TIME...               WORDCAMP SAN FRANCISCO
AWESOMER & AWESOMER...                  WORDCAMP SAN FRANCISCO
SO MANY DEVICES AHHHH!                  WORDCAMP SAN FRANCISCO
SO MANY DEVICES AHHHH!                  WORDCAMP SAN FRANCISCO
SO MANY DEVICES AHHHH!                  WORDCAMP SAN FRANCISCO
RESPONSIVE WEB DESIGNCONTENT.                  WORDCAMP SAN FRANCISCO
RESPONSIVE WEB DESIGN   WHAT DO WE DO?                  WORDCAMP SAN FRANCISCO
BE RESPONSIVE!    We can design for an optimal viewing“   experience, but embed standards-based    technologies into our d...
RESPONSIVE WEB DESIGN   come on. be a smart little website.
BE RESPONSIVE!    Responsive Design is the“   most exciting design idea    on the web since the    separation of presentat...
BE RESPONSIVE!twentyelevendemo.wordpress.com
BE RESPONSIVE!    Responsive Design has to do with“   being as canvas agnostic as possible,    while offering a consistent ...
BE RESPONSIVE!twentyelevendemo.wordpress.com
BE RESPONSIVE!hicksdesign.co.uk
BE RESPONSIVE!  foodsense.is
BE RESPONSIVE!morehazards.com
BE RESPONSIVE! HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images         2. media queries  3. lots of    nagli...
ADAPTIVE GRID SYSTEMS & IMAGES      responsive (responsible?) design
CSS GRIDS | BE RESPONSIVE!960.gs                        blueprintcss.org                              WORDCAMP SAN FRANCISCO
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!   exible gridsalistapart.com/articles/ uidgrids                          WORDCAMP SAN FRANCISCO
CSS GRIDS | BE RESPONSIVE!                             cssgrid.net
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!    lessframework.com
CSS GRIDS | BE RESPONSIVE!     %                     WORDCAMP SAN FRANCISCO
CSS GRIDS | BE RESPONSIVE!target ÷ context = result              940              100%        720               220   76.5...
CSS GRIDS | BE RESPONSIVE!  responsivetwentyten.com
CSS GRIDS | BE RESPONSIVE!
BE RESPONSIVE!twentyelevendemo.wordpress.com
BE RESPONSIVE!exible images                   WORDCAMP SAN FRANCISCO
BE RESPONSIVE!    e toughest challenge in“   implementing the responsive bits    was uid media. A lot of trial and    err...
BE RESPONSIVE!                 WORDCAMP SAN FRANCISCO
BE RESPONSIVE!          exible medianetmagazine.com/tutorials/create- uid-width-videos                 by Chris Coyier    ...
THEMING AND MOBILE                WORDCAMP SAN FRANCISCO
BE RESPONSIVE! HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images         2. media queries  3. lots of    nagli...
MEDIA QUERIES  whoa, this is css?
MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS...             ...BUT WITHIN CSS!                             WORDCAMP...
MEDIA QUERIES   @MEDIA                WORDCAMP SAN FRANCISCO
MEDIA QUERIES
MEDIA QUERIES                 CSS3-MEDIAQUERIES.JScode.google.com/p/css3-mediaqueries-jscss3-mediaqueries.js is a JavaScri...
MEDIA QUERIESRESOURCES ON MEDIA QUERIESw3.org/TR/css3-mediaqueriessmashingmagazine.com/2010/07/19/how-to-use-css3-media-qu...
BE RESPONSIVE!  RESPONSIVE WEB DESIGNmust see articles/resources                       WORDCAMP SAN FRANCISCO
BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
BE RESPONSIVE!alistapart.com/articles/responsive-web-design
BE RESPONSIVE!alistapart.com/articles/ uidgrids
BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for-            responsive-web-design
BE RESPONSIVE!unstoppablerobotninja.com/entry/ uid-images/
BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web-   design-techniques-tools-and-design-strategies
BE RESPONSIVE!                 mediaqueri.es
BE RESPONSIVE!BUT I WANT TO BE RESPONSIVE       right now!!!                       WORDCAMP SAN FRANCISCO
RESPONSIVE WORDPRESS THEMES       I CAN HAS RESPONSIVE SITE NOW?!!
RESPONSIVE WORDPRESS THEMEStwentyelevendemo.wordpress.com
RESPONSIVE WORDPRESS THEMES  chateaudemo.wordpress.com
RESPONSIVE WORDPRESS THEMES  quintusdemo.wordpress.com
RESPONSIVE WORDPRESS THEMES   reactdemo.wordpress.com
RESPONSIVE WORDPRESS THEMES basicmathsdemo.wordpress.com
RESPONSIVE WORDPRESS THEMES   shelfdemo.wordpress.com
TYPOGRAPHY ON THE WEBCheck All Browsers   Always.                    WORDCAMP SAN FRANCISCO
Check Your Devices
THEMING AND MOBILECONTENT.                WORDCAMP SAN FRANCISCO
RESPONSIVE WEB DESIGN                 ank You!          slideshare.net/saracannonsara cannon / sara-cannon.com / @saracan...
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Upcoming SlideShare
Loading in...5
×

Responsive Web Design - WordCamp San Francisco

12,716

Published on

Your site is about your content. With mobile devices, iPads, phones, gaming consols, etc: people can access your content many different ways and formats. How can we maintain some control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform?

Enter Responsive Web Design. A term coined by Ethan Marcotte. Many experts aren’t leaning on one static design anymore, but on structured content that adapts to its given environment.
We are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods that you can implement to make your WordPress theme “Responsive”

Published in: Technology, Business

Responsive Web Design - WordCamp San Francisco

  1. 1. RESPONSIVE WEB DESIGNsara cannon / sara-cannon.com / follow @saracannon WORDCAMP SAN FRANCISCO 2011
  2. 2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com make.wordpress.org/ui WORDCAMP SAN FRANCISCO
  3. 3. IN THE BEGINNING... WORDCAMP SAN FRANCISCO
  4. 4. OVER TIME... WORDCAMP SAN FRANCISCO
  5. 5. AWESOMER & AWESOMER... WORDCAMP SAN FRANCISCO
  6. 6. SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  7. 7. SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  8. 8. SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  9. 9. RESPONSIVE WEB DESIGNCONTENT. WORDCAMP SAN FRANCISCO
  10. 10. RESPONSIVE WEB DESIGN WHAT DO WE DO? WORDCAMP SAN FRANCISCO
  11. 11. BE RESPONSIVE! We can design for an optimal viewing“ experience, but embed standards-based technologies into our designs to make them not only more exible, but more adaptive to the media that renders them. - Ethan Marcotte alistapart.com/articles/responsive-web-design
  12. 12. RESPONSIVE WEB DESIGN come on. be a smart little website.
  13. 13. BE RESPONSIVE! Responsive Design is the“ most exciting design idea on the web since the separation of presentation and content. - Ian Stewart
  14. 14. BE RESPONSIVE!twentyelevendemo.wordpress.com
  15. 15. BE RESPONSIVE! Responsive Design has to do with“ being as canvas agnostic as possible, while offering a consistent and attractive experience on different devices and screen sizes. e web- canvas conforms the design, and, since the proportions and visual balances you set are only going to change, it makes sense to help them change with grace. - Matías Ventura
  16. 16. BE RESPONSIVE!twentyelevendemo.wordpress.com
  17. 17. BE RESPONSIVE!hicksdesign.co.uk
  18. 18. BE RESPONSIVE! foodsense.is
  19. 19. BE RESPONSIVE!morehazards.com
  20. 20. BE RESPONSIVE! HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images 2. media queries 3. lots of nagling and crying 4. ??????? 5. pro t WORDCAMP SAN FRANCISCO
  21. 21. ADAPTIVE GRID SYSTEMS & IMAGES responsive (responsible?) design
  22. 22. CSS GRIDS | BE RESPONSIVE!960.gs blueprintcss.org WORDCAMP SAN FRANCISCO
  23. 23. CSS GRIDS | BE RESPONSIVE!
  24. 24. CSS GRIDS | BE RESPONSIVE!
  25. 25. CSS GRIDS | BE RESPONSIVE! exible gridsalistapart.com/articles/ uidgrids WORDCAMP SAN FRANCISCO
  26. 26. CSS GRIDS | BE RESPONSIVE! cssgrid.net
  27. 27. CSS GRIDS | BE RESPONSIVE!
  28. 28. CSS GRIDS | BE RESPONSIVE! lessframework.com
  29. 29. CSS GRIDS | BE RESPONSIVE! % WORDCAMP SAN FRANCISCO
  30. 30. CSS GRIDS | BE RESPONSIVE!target ÷ context = result 940 100% 720 220 76.5957447% 23.40425535%
  31. 31. CSS GRIDS | BE RESPONSIVE! responsivetwentyten.com
  32. 32. CSS GRIDS | BE RESPONSIVE!
  33. 33. BE RESPONSIVE!twentyelevendemo.wordpress.com
  34. 34. BE RESPONSIVE!exible images WORDCAMP SAN FRANCISCO
  35. 35. BE RESPONSIVE! e toughest challenge in“ implementing the responsive bits was uid media. A lot of trial and error went into nding the right CSS solution, but whats cool is weve been able to apply it to many more themes that we maintain on wordpress.com. - Lance Willett
  36. 36. BE RESPONSIVE! WORDCAMP SAN FRANCISCO
  37. 37. BE RESPONSIVE! exible medianetmagazine.com/tutorials/create- uid-width-videos by Chris Coyier WORDCAMP SAN FRANCISCO
  38. 38. THEMING AND MOBILE WORDCAMP SAN FRANCISCO
  39. 39. BE RESPONSIVE! HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images 2. media queries 3. lots of nagling and crying 4. ??????? 5. pro t WORDCAMP SAN FRANCISCO
  40. 40. MEDIA QUERIES whoa, this is css?
  41. 41. MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS... ...BUT WITHIN CSS! WORDCAMP SAN FRANCISCO
  42. 42. MEDIA QUERIES @MEDIA WORDCAMP SAN FRANCISCO
  43. 43. MEDIA QUERIES
  44. 44. MEDIA QUERIES CSS3-MEDIAQUERIES.JScode.google.com/p/css3-mediaqueries-jscss3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ andSafari 2 transparently parse, test and apply CSS3 Media Queries WORDCAMP SAN FRANCISCO
  45. 45. MEDIA QUERIESRESOURCES ON MEDIA QUERIESw3.org/TR/css3-mediaqueriessmashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-websitecss-tricks.com/css-media-queries WORDCAMP SAN FRANCISCO
  46. 46. BE RESPONSIVE! RESPONSIVE WEB DESIGNmust see articles/resources WORDCAMP SAN FRANCISCO
  47. 47. BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
  48. 48. BE RESPONSIVE!alistapart.com/articles/responsive-web-design
  49. 49. BE RESPONSIVE!alistapart.com/articles/ uidgrids
  50. 50. BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design
  51. 51. BE RESPONSIVE!unstoppablerobotninja.com/entry/ uid-images/
  52. 52. BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web- design-techniques-tools-and-design-strategies
  53. 53. BE RESPONSIVE! mediaqueri.es
  54. 54. BE RESPONSIVE!BUT I WANT TO BE RESPONSIVE right now!!! WORDCAMP SAN FRANCISCO
  55. 55. RESPONSIVE WORDPRESS THEMES I CAN HAS RESPONSIVE SITE NOW?!!
  56. 56. RESPONSIVE WORDPRESS THEMEStwentyelevendemo.wordpress.com
  57. 57. RESPONSIVE WORDPRESS THEMES chateaudemo.wordpress.com
  58. 58. RESPONSIVE WORDPRESS THEMES quintusdemo.wordpress.com
  59. 59. RESPONSIVE WORDPRESS THEMES reactdemo.wordpress.com
  60. 60. RESPONSIVE WORDPRESS THEMES basicmathsdemo.wordpress.com
  61. 61. RESPONSIVE WORDPRESS THEMES shelfdemo.wordpress.com
  62. 62. TYPOGRAPHY ON THE WEBCheck All Browsers Always. WORDCAMP SAN FRANCISCO
  63. 63. Check Your Devices
  64. 64. THEMING AND MOBILECONTENT. WORDCAMP SAN FRANCISCO
  65. 65. RESPONSIVE WEB DESIGN ank You! slideshare.net/saracannonsara cannon / sara-cannon.com / @saracannon
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×