Your SlideShare is downloading. ×
0
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
Responsive Web Design & WordPress
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

Responsive Web Design & WordPress

3,374

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.

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,374
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
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
  • \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

    ×