0
THEMING & MOBILE      optimizing your site for various devices                WORDCAMP BOSTON 2011sara cannon / sara-canno...
ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com                   WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
SO MANY DEVICES AHHHH!                         WORDCAMP BOSTON
SO MANY DEVICES AHHHH!                         WORDCAMP BOSTON
SO MANY DEVICES AHHHH!                         WORDCAMP BOSTON
THEMING AND MOBILECONTENT.                     WORDCAMP BOSTON
THEMING AND MOBILE    WHAT DO WE DO?DO WE EVEN DO ANYTHING?                          WORDCAMP BOSTON
THEMING AND MOBILE1. Separate Mobile Site2. Use a Plugin / eme3. Responsive Web Design4. Do Nothing (dont-cha even worry ...
THEMING AND MOBILEMobile WordPressPlugins & emes                      WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
THEMING AND MOBILE                     WORDCAMP BOSTON
RESPONSIVE WEB DESIGN come on. be a smart little website.
BE RESPONSIVE!     hicksdesign.co.uk
BE RESPONSIVE!
BE RESPONSIVE!twentyelevendemo.wordpress.com
CSS GRIDS | BE RESPONSIVE!    twentyelevendemo.wordpress.com
BE RESPONSIVE!twentyelevendemo.wordpress.com
CSS GRIDS | BE RESPONSIVE!              8faces.com
CSS GRIDS | BE RESPONSIVE!               colly.com
BE RESPONSIVE!HOW DO WE BECOME RESPONSIVE?  1. adaptive grid systems       2. media queries3. lots of    nagling and cryin...
ADAPTIVE GRID SYSTEMS  responsive (responsible?) design                                     WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!960.gs                        blueprintcss.org                                      WORDCAMP BOS...
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!
THEMING AND MOBILE   exible gridsalistapart.com/articles/ uidgrids                                    WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!                             cssgrid.net
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!                     lessframework.com
CSS GRIDS | BE RESPONSIVE!     %                             WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!target ÷ context = result              940              100%        720               220   76.5...
CSS GRIDS | BE RESPONSIVE!                 responsivetwentyten.com
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!                             WORDCAMP BOSTON
BE RESPONSIVE!twentyelevendemo.wordpress.com
MEDIA QUERIES  whoa, this is css?                       WORDCAMP BOSTON
MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS...             ...BUT WITHIN CSS!                                 WORD...
MEDIA QUERIES   @MEDIA                WORDCAMP BOSTON
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...
CSS GRIDS | BE RESPONSIVE!  RESPONSIVE WEB DESIGNmust see articles/resources                              WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
CSS GRIDS | BE RESPONSIVE!alistapart.com/articles/responsive-web-design
CSS GRIDS | BE RESPONSIVE!     alistapart.com/articles/ uidgrids
CSS GRIDS | BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for-            responsive-web-design
CSS GRIDS | BE RESPONSIVE! unstoppablerobotninja.com/entry/ uid-images/
CSS GRIDS | BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web-   design-techniques-tools-and-design-strategies
CSS GRIDS | BE RESPONSIVE!                             mediaqueri.es
TYPOGRAPHY ON THE WEBCheck All Browsers   Always.                          WORDCAMP BOSTON
TYPOGRAPHY ON THE WEBCheck Your Devices                          WORDCAMP BOSTON
THEMING AND MOBILECONTENT.                     WORDCAMP BOSTON
THEMING & MOBILE                   ank You!sara cannon / sara-cannon.com / follow @saracannon
Upcoming SlideShare
Loading in...5
×

Theming & Mobile - Optimizing your Site for Various Devices

6,065

Published on

Your site is about your content. How do we optimize for all the different devices out there but still keep our brand? Do we even optimize at all? What are different ways we can look at how our content is handled? We are going to take a look at different techniques out there including: responsive web design, media queries, dealing with video, touch, and other various plugins & CSS tricks to truly display your site and your content in the best possible manner in any given scenario.

Published in: Technology, Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,065
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
101
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Theming & Mobile - Optimizing your Site for Various Devices"

  1. 1. THEMING & MOBILE optimizing your site for various devices WORDCAMP BOSTON 2011sara cannon / sara-cannon.com / follow @saracannon
  2. 2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com WORDCAMP BOSTON
  3. 3. THEMING AND MOBILE WORDCAMP BOSTON
  4. 4. THEMING AND MOBILE WORDCAMP BOSTON
  5. 5. THEMING AND MOBILE WORDCAMP BOSTON
  6. 6. SO MANY DEVICES AHHHH! WORDCAMP BOSTON
  7. 7. SO MANY DEVICES AHHHH! WORDCAMP BOSTON
  8. 8. SO MANY DEVICES AHHHH! WORDCAMP BOSTON
  9. 9. THEMING AND MOBILECONTENT. WORDCAMP BOSTON
  10. 10. THEMING AND MOBILE WHAT DO WE DO?DO WE EVEN DO ANYTHING? WORDCAMP BOSTON
  11. 11. THEMING AND MOBILE1. Separate Mobile Site2. Use a Plugin / eme3. Responsive Web Design4. Do Nothing (dont-cha even worry about it!) WORDCAMP BOSTON
  12. 12. THEMING AND MOBILEMobile WordPressPlugins & emes WORDCAMP BOSTON
  13. 13. THEMING AND MOBILE WORDCAMP BOSTON
  14. 14. THEMING AND MOBILE WORDCAMP BOSTON
  15. 15. THEMING AND MOBILE WORDCAMP BOSTON
  16. 16. THEMING AND MOBILE WORDCAMP BOSTON
  17. 17. THEMING AND MOBILE WORDCAMP BOSTON
  18. 18. THEMING AND MOBILE WORDCAMP BOSTON
  19. 19. THEMING AND MOBILE WORDCAMP BOSTON
  20. 20. THEMING AND MOBILE WORDCAMP BOSTON
  21. 21. RESPONSIVE WEB DESIGN come on. be a smart little website.
  22. 22. BE RESPONSIVE! hicksdesign.co.uk
  23. 23. BE RESPONSIVE!
  24. 24. BE RESPONSIVE!twentyelevendemo.wordpress.com
  25. 25. CSS GRIDS | BE RESPONSIVE! twentyelevendemo.wordpress.com
  26. 26. BE RESPONSIVE!twentyelevendemo.wordpress.com
  27. 27. CSS GRIDS | BE RESPONSIVE! 8faces.com
  28. 28. CSS GRIDS | BE RESPONSIVE! colly.com
  29. 29. BE RESPONSIVE!HOW DO WE BECOME RESPONSIVE? 1. adaptive grid systems 2. media queries3. lots of nagling and crying 4. ??????? 5. pro t WORDCAMP BOSTON
  30. 30. ADAPTIVE GRID SYSTEMS responsive (responsible?) design WORDCAMP BOSTON
  31. 31. CSS GRIDS | BE RESPONSIVE!960.gs blueprintcss.org WORDCAMP BOSTON
  32. 32. CSS GRIDS | BE RESPONSIVE!
  33. 33. CSS GRIDS | BE RESPONSIVE!
  34. 34. THEMING AND MOBILE exible gridsalistapart.com/articles/ uidgrids WORDCAMP BOSTON
  35. 35. CSS GRIDS | BE RESPONSIVE! cssgrid.net
  36. 36. CSS GRIDS | BE RESPONSIVE!
  37. 37. CSS GRIDS | BE RESPONSIVE! lessframework.com
  38. 38. CSS GRIDS | BE RESPONSIVE! % WORDCAMP BOSTON
  39. 39. CSS GRIDS | BE RESPONSIVE!target ÷ context = result 940 100% 720 220 76.5957447% 23.40425535%
  40. 40. CSS GRIDS | BE RESPONSIVE! responsivetwentyten.com
  41. 41. CSS GRIDS | BE RESPONSIVE!
  42. 42. CSS GRIDS | BE RESPONSIVE! WORDCAMP BOSTON
  43. 43. BE RESPONSIVE!twentyelevendemo.wordpress.com
  44. 44. MEDIA QUERIES whoa, this is css? WORDCAMP BOSTON
  45. 45. MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS... ...BUT WITHIN CSS! WORDCAMP BOSTON
  46. 46. MEDIA QUERIES @MEDIA WORDCAMP BOSTON
  47. 47. MEDIA QUERIES
  48. 48. 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 BOSTON
  49. 49. 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 BOSTON
  50. 50. CSS GRIDS | BE RESPONSIVE! RESPONSIVE WEB DESIGNmust see articles/resources WORDCAMP BOSTON
  51. 51. CSS GRIDS | BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
  52. 52. CSS GRIDS | BE RESPONSIVE!alistapart.com/articles/responsive-web-design
  53. 53. CSS GRIDS | BE RESPONSIVE! alistapart.com/articles/ uidgrids
  54. 54. CSS GRIDS | BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design
  55. 55. CSS GRIDS | BE RESPONSIVE! unstoppablerobotninja.com/entry/ uid-images/
  56. 56. CSS GRIDS | BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web- design-techniques-tools-and-design-strategies
  57. 57. CSS GRIDS | BE RESPONSIVE! mediaqueri.es
  58. 58. TYPOGRAPHY ON THE WEBCheck All Browsers Always. WORDCAMP BOSTON
  59. 59. TYPOGRAPHY ON THE WEBCheck Your Devices WORDCAMP BOSTON
  60. 60. THEMING AND MOBILECONTENT. WORDCAMP BOSTON
  61. 61. THEMING & MOBILE ank You!sara cannon / sara-cannon.com / follow @saracannon
  1. A particular slide catching your eye?

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

×