Responsive Web Design & WordPress
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Web Design & WordPress

  • 3,777 views
Uploaded 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.

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.

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
3,777
On Slideshare
2,408
From Embeds
1,369
Number of Embeds
7

Actions

Shares
Downloads
24
Comments
0
Likes
1

Embeds 1,369

http://birminghamblogging.com 1,230
http://www.ostraining.com 121
http://www.designlab.nl 12
https://twitter.com 3
http://a0.twimg.com 1
http://translate.googleusercontent.com 1
http://www.slashdocs.com 1

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
  • \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

Transcript

  • 1. Hello Responsive Web DesignThis is a presentation on ResponsiveWeb Design@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 2. Hello Responsive Web DesignI am Dan Gavin.I like design, beer, food, bikes and WordPress.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 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. Hello Responsive Web DesignBe responsive. Desktop MobileTwenty Eleven Themetwentyelevendemo.wordpress.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 5. Hello Responsive Web DesignBe responsive. Desktop MobileJason Santa Mariajasonsantamaria.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 6. Hello Responsive Web DesignBe responsive. Desktop MobileJason Santa Mariajasonsantamaria.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 7. Hello Responsive Web DesignBe responsive. Desktop MobileRuss Maschmeyer / Strange Nativestrangenative.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 8. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 9. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 10. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 11. Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 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. 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. 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. Hello Responsive Web Design %@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 16. Hello Responsive Web Design 940 px 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 17. Hello Responsive Web Design 940 px 100% 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 18. Hello Responsive Web Design 940 px 100% 74.46808511% 700 / 940 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 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. 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. Hello Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 22. Hello Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 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. 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. Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 26. Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 27. Hello /* Media / Videos */ object, embed, iframe{ max-width: 100%; /* Make sure embeds fit their containers */ }@iamdangavin | iamdangavin@gmail.com
  • 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. 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. Hello Responsive Web DesignMedia QueriesThink of it like conditional comments... But within CSS!@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 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. 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. 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. 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. 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. 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. 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. Hello Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 39. Hello Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 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. Hello Responsive Web DesignResponsive WordPress Themes Reveal Infinity Suco@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 42. Hello Responsive Web DesignThank you.Goodbye@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in