Hello                                                     Responsive Web DesignThis is a presentation on ResponsiveWeb Des...
Hello                                                     Responsive Web DesignI am Dan Gavin.I like design, beer, food, b...
Hello                                                     Responsive Web Design“ We can design for an optimal viewing     ...
Hello                                                              Responsive Web DesignBe responsive.         Desktop    ...
Hello                                                              Responsive Web DesignBe responsive.         Desktop    ...
Hello                                                              Responsive Web DesignBe responsive.         Desktop    ...
Hello                                                              Responsive Web DesignBe responsive.         Desktop    ...
Hello                                                     Responsive Web DesignWhat it takes to be responsive.@iamdangavin...
Hello                                                     Responsive Web DesignWhat it takes to be responsive.@iamdangavin...
Hello                                                     Responsive Web DesignWhat it takes to be responsive.@iamdangavin...
Hello                                                     Responsive Web DesignWhat it takes to be responsive.@iamdangavin...
Hello                                                     Responsive Web DesignWhat it really takes to be responsive.•   A...
Hello                                                                      Responsive Web DesignAdaptive Grid Systems     ...
Hello                                                                                      Responsive Web DesignFlexible G...
Hello                                                     Responsive Web Design                                           ...
Hello                                                                        Responsive Web Design                        ...
Hello                                                                        Responsive Web Design                        ...
Hello                                                                        Responsive Web Design                        ...
Hello                                                                             Responsive Web Design                   ...
Hello                                                     Responsive Web DesignWhat it really takes to be responsive.•   A...
Hello                                                     Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@g...
Hello                                                     Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@g...
Hello                                                     Responsive Web Design“ The toughest challenge in implementing   ...
Hello     /* Images */     .entry-content img,     .comment-content img,     .widget img{            max-width: 97.5%; /* ...
Hello                                                     Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdan...
Hello                                                     Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdan...
Hello     /* Media / Videos */     object,     embed,     iframe{           max-width: 100%; /* Make sure embeds fit their...
Hello                                                  FitVid.js                                                  A lightw...
Hello                                                     Responsive Web DesignWhat it really takes to be responsive.•   A...
Hello                                                      Responsive Web DesignMedia QueriesThink of it like conditional ...
Hello@media     /* Media = Smallerscreens */     @media only screen and (max-width: 1023px){         .your-style-here{ }  ...
Hello                                                                          Responsive Web DesignCSS3 Media Queriescss3...
Hello                                                                                      Responsive Web DesignResources ...
Hello                                                                              Responsive Web DesignResources on Media...
Hello                                                     Responsive Web DesignWhat it really takes to be responsive.•   A...
HelloOrganization     /* Media = iPhone*/     <link rel="stylesheet" type="text/css" media="screen and (max-device-width: ...
Hello                                                     Responsive Web DesignWhat it really takes to be responsive.•   A...
Hello                                                     Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com ...
Hello                                                     Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com ...
Hello                                                     Responsive Web DesignWhat it really takes to be responsive.•   A...
Hello                                                                Responsive Web DesignResponsive WordPress Themes     ...
Hello                                                     Responsive Web DesignThank you.Goodbye@iamdangavin | iamdangavin...
Upcoming SlideShare
Loading in...5
×

Responsive Web Design & WordPress

3,398

Published on

How to become responsive. We will go over the various methods & styles used to make your site responsive. We will discuss CSS media queries, FitText.js, FitVid.js and responsive slideshows.

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

No Downloads
Views
Total Views
3,398
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive Web Design & WordPress

    1. 1. Hello Responsive Web DesignThis is a presentation on ResponsiveWeb Design@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    2. 2. Hello Responsive Web DesignI am Dan Gavin.I like design, beer, food, bikes and WordPress.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    3. 3. Hello Responsive Web Design“ We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. - Ethan Marcotte alistapart.com/articles/responsive-web-design Buy@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    4. 4. Hello Responsive Web DesignBe responsive. Desktop MobileTwenty Eleven Themetwentyelevendemo.wordpress.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    5. 5. Hello Responsive Web DesignBe responsive. Desktop MobileJason Santa Mariajasonsantamaria.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    6. 6. Hello Responsive Web DesignBe responsive. Desktop MobileJason Santa Mariajasonsantamaria.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    7. 7. Hello Responsive Web DesignBe responsive. Desktop MobileRuss Maschmeyer / Strange Nativestrangenative.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    8. 8. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    9. 9. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    10. 10. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    11. 11. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    12. 12. Hello Responsive Web DesignWhat it really takes to be responsive.• Adaptive Grid System• Scalable Images / Video• Media Queries• Organization• Crying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    13. 13. Hello Responsive Web DesignAdaptive Grid Systems 960.gs 1140 CSS Grid Golden Grid System 12 Column Grid@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    14. 14. Hello Responsive Web DesignFlexible Grids 1140 CSS Grid Less Framework Content Fluid Grids - alistapart.com/articles/fluidgrids@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    15. 15. Hello Responsive Web Design %@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    16. 16. Hello Responsive Web Design 940 px 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    17. 17. Hello Responsive Web Design 940 px 100% 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    18. 18. Hello Responsive Web Design 940 px 100% 74.46808511% 700 / 940 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    19. 19. Hello Responsive Web Design 940 px 100% 74.46808511% 23.40425535% 700 / 940 220 / 940 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    20. 20. Hello Responsive Web DesignWhat it really takes to be responsive.• Adaptive Grid System - ✓• Scalable Images / Video• Media Queries• Organization• Crying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    21. 21. Hello Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    22. 22. Hello Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    23. 23. Hello Responsive Web Design“ The toughest challenge in implementing the responsive bits was fluid media. A lot of trial and error went into finding the right CSS solution, but what’s cool is we’ve been able to apply it to many more themes that we maintain on wordpress.com - Lance Willett simpledream.net/about@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    24. 24. Hello /* Images */ .entry-content img, .comment-content img, .widget img{ max-width: 97.5%; /* Fluid images for posts, comments, and widgets */ } img[class*=”align”], img[class*=”wp-image-”]{ height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } img.size-full{ max-width: 97.5%; width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */ }@iamdangavin | iamdangavin@gmail.com
    25. 25. Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    26. 26. Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    27. 27. Hello /* Media / Videos */ object, embed, iframe{ max-width: 100%; /* Make sure embeds fit their containers */ }@iamdangavin | iamdangavin@gmail.com
    28. 28. Hello FitVid.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. Supports: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter * Add your own video vendorsFitvid.js <script src=”path/to/jquery.min.js”></script> <script src=”path/to/jquery.fitvids.js”></script> <script> jQuery(document).ready(function(){ // Target your .container, .wrapper, .post, etc. jQuery(“#thing-with-videos”).fitVids(); }); </script>@iamdangavin | iamdangavin@gmail.com
    29. 29. Hello Responsive Web DesignWhat it really takes to be responsive.• Adaptive Grid System - ✓• Scalable Images / Video - ✓• Media Queries• Organization• Crying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    30. 30. Hello Responsive Web DesignMedia QueriesThink of it like conditional comments... But within CSS!@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    31. 31. Hello@media /* Media = Smallerscreens */ @media only screen and (max-width: 1023px){ .your-style-here{ } } /* Media = iPad / Orientation: Landscape */ @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape){ .your-style-here{ } } /* Media = iPad / Orientation: Portrait */ @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait){ .your-style-here{ } } /* Media = Mobile / iPhone Orientation: Landscape */ @media handheld, only screen and (max-width: 480px) and (orientation: landscape){ .your-style-here{ } } /* Media = Mobile / Orientation: Portrait */ @media handheld, only screen and (max-width: 480px) and (orientation: portrait){ .your-style-here{ } } /* Media = Mobile / All others */ @media handheld, only screen and (max-width: 767px){ .your-style-here{ } }@iamdangavin | iamdangavin@gmail.com
    32. 32. Hello Responsive Web DesignCSS3 Media Queriescss3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+,Safari 3+ and Chrome already offer native support.code.google.com/p/css3-mediaqueries-js/@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    33. 33. Hello Responsive Web DesignResources on Media Queries• w3.org/TR/css3-mediaqueries• coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile- version-of-your-website/• css-tricks.com/css-media-queries/@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    34. 34. Hello Responsive Web DesignResources on Media Queries• abookapart.com/products/responsive-web-design• alistapart.com/articles/responsive-web-design/• alistapart.com/articles/fluidgrids/• coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    35. 35. Hello Responsive Web DesignWhat it really takes to be responsive.• Adaptive Grid System - ✓• Scalable Images / Video - ✓• Media Queries - ✓• Organization• Crying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    36. 36. HelloOrganization /* Media = iPhone*/ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> /* Media = iPad*/ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" href="tablet.css" /> /* Media = Core*/ <link rel="stylesheet" type="text/css" media="screen" href="style.css" />@iamdangavin | iamdangavin@gmail.com
    37. 37. Hello Responsive Web DesignWhat it really takes to be responsive.• Adaptive Grid System - ✓• Scalable Images / Video - ✓• Media Queries - ✓• Organization - ✓• Crying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    38. 38. Hello Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    39. 39. Hello Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    40. 40. Hello Responsive Web DesignWhat it really takes to be responsive.• Adaptive Grid System - ✓• Scalable Images / Video - ✓• Media Queries - ✓• Organization - ✓• Crying - ✓@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    41. 41. Hello Responsive Web DesignResponsive WordPress Themes Reveal Infinity Suco@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    42. 42. Hello Responsive Web DesignThank you.Goodbye@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×