Your SlideShare is downloading. ×
0
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
Theming & Mobile - Optimizing your Site for Various Devices
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

Theming & Mobile - Optimizing your Site for Various Devices

6,049

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 …

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,049
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
101
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

×