Your SlideShare is downloading. ×
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,393

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

No Downloads
Views
Total Views
12,393
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
256
Comments
0
Likes
37
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

×