Your SlideShare is downloading. ×
0
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
Responsive Web Design - WordCamp San Francisco
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design - WordCamp San Francisco

12,478

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 …

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
0 Comments
38 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,478
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
259
Comments
0
Likes
38
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. RESPONSIVE WEB DESIGNsara cannon / sara-cannon.com / follow @saracannon WORDCAMP SAN FRANCISCO 2011
  2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com make.wordpress.org/ui WORDCAMP SAN FRANCISCO
  3. IN THE BEGINNING... WORDCAMP SAN FRANCISCO
  4. OVER TIME... WORDCAMP SAN FRANCISCO
  5. AWESOMER & AWESOMER... WORDCAMP SAN FRANCISCO
  6. SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  7. SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  8. SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  9. RESPONSIVE WEB DESIGNCONTENT. WORDCAMP SAN FRANCISCO
  10. RESPONSIVE WEB DESIGN WHAT DO WE DO? WORDCAMP SAN FRANCISCO
  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. RESPONSIVE WEB DESIGN come on. be a smart little website.
  13. BE RESPONSIVE! Responsive Design is the“ most exciting design idea on the web since the separation of presentation and content. - Ian Stewart
  14. BE RESPONSIVE!twentyelevendemo.wordpress.com
  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. BE RESPONSIVE!twentyelevendemo.wordpress.com
  17. BE RESPONSIVE!hicksdesign.co.uk
  18. BE RESPONSIVE! foodsense.is
  19. BE RESPONSIVE!morehazards.com
  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. ADAPTIVE GRID SYSTEMS & IMAGES responsive (responsible?) design
  22. CSS GRIDS | BE RESPONSIVE!960.gs blueprintcss.org WORDCAMP SAN FRANCISCO
  23. CSS GRIDS | BE RESPONSIVE!
  24. CSS GRIDS | BE RESPONSIVE!
  25. CSS GRIDS | BE RESPONSIVE! exible gridsalistapart.com/articles/ uidgrids WORDCAMP SAN FRANCISCO
  26. CSS GRIDS | BE RESPONSIVE! cssgrid.net
  27. CSS GRIDS | BE RESPONSIVE!
  28. CSS GRIDS | BE RESPONSIVE! lessframework.com
  29. CSS GRIDS | BE RESPONSIVE! % WORDCAMP SAN FRANCISCO
  30. CSS GRIDS | BE RESPONSIVE!target ÷ context = result 940 100% 720 220 76.5957447% 23.40425535%
  31. CSS GRIDS | BE RESPONSIVE! responsivetwentyten.com
  32. CSS GRIDS | BE RESPONSIVE!
  33. BE RESPONSIVE!twentyelevendemo.wordpress.com
  34. BE RESPONSIVE!exible images WORDCAMP SAN FRANCISCO
  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. BE RESPONSIVE! WORDCAMP SAN FRANCISCO
  37. BE RESPONSIVE! exible medianetmagazine.com/tutorials/create- uid-width-videos by Chris Coyier WORDCAMP SAN FRANCISCO
  38. THEMING AND MOBILE WORDCAMP SAN FRANCISCO
  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. MEDIA QUERIES whoa, this is css?
  41. MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS... ...BUT WITHIN CSS! WORDCAMP SAN FRANCISCO
  42. MEDIA QUERIES @MEDIA WORDCAMP SAN FRANCISCO
  43. MEDIA QUERIES
  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. 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. BE RESPONSIVE! RESPONSIVE WEB DESIGNmust see articles/resources WORDCAMP SAN FRANCISCO
  47. BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
  48. BE RESPONSIVE!alistapart.com/articles/responsive-web-design
  49. BE RESPONSIVE!alistapart.com/articles/ uidgrids
  50. BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design
  51. BE RESPONSIVE!unstoppablerobotninja.com/entry/ uid-images/
  52. BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web- design-techniques-tools-and-design-strategies
  53. BE RESPONSIVE! mediaqueri.es
  54. BE RESPONSIVE!BUT I WANT TO BE RESPONSIVE right now!!! WORDCAMP SAN FRANCISCO
  55. RESPONSIVE WORDPRESS THEMES I CAN HAS RESPONSIVE SITE NOW?!!
  56. RESPONSIVE WORDPRESS THEMEStwentyelevendemo.wordpress.com
  57. RESPONSIVE WORDPRESS THEMES chateaudemo.wordpress.com
  58. RESPONSIVE WORDPRESS THEMES quintusdemo.wordpress.com
  59. RESPONSIVE WORDPRESS THEMES reactdemo.wordpress.com
  60. RESPONSIVE WORDPRESS THEMES basicmathsdemo.wordpress.com
  61. RESPONSIVE WORDPRESS THEMES shelfdemo.wordpress.com
  62. TYPOGRAPHY ON THE WEBCheck All Browsers Always. WORDCAMP SAN FRANCISCO
  63. Check Your Devices
  64. THEMING AND MOBILECONTENT. WORDCAMP SAN FRANCISCO
  65. RESPONSIVE WEB DESIGN ank You! slideshare.net/saracannonsara cannon / sara-cannon.com / @saracannon

×