Theming & Mobile - Optimizing your Site for Various Devices

  • 5,831 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,831
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
99
Comments
0
Likes
10

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