Responsive Web Design & WordPress

Hello Responsive Web DesignThis is a presentation on ResponsiveWeb Design@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web DesignI am Dan Gavin.I like design, beer, food, bikes and WordPress.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

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

Hello Responsive Web DesignBe responsive. Desktop MobileTwenty Eleven Themetwentyelevendemo.wordpress.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web DesignBe responsive. Desktop MobileJason Santa Mariajasonsantamaria.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web DesignBe responsive. Desktop MobileRuss Maschmeyer / Strange Nativestrangenative.com@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web DesignWhat it takes to be responsive.@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

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

Hello Responsive Web DesignAdaptive Grid Systems 960.gs 1140 CSS Grid Golden Grid System 12 Column Grid@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web DesignFlexible Grids 1140 CSS Grid Less Framework Content Fluid Grids - alistapart.com/articles/fluidgrids@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web Design %@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web Design 940 px 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web Design 940 px 100% 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web Design 940 px 100% 74.46808511% 700 / 940 700 px 220 px@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

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

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

Hello Responsive Web DesignFlexible Images@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

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

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

Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello /* Media / Videos */ object, embed, iframe{ max-width: 100%; /* Make sure embeds fit their containers */ }@iamdangavin | iamdangavin@gmail.com

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

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

Hello Responsive Web DesignMedia QueriesThink of it like conditional comments... But within CSS!@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

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

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

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

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

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

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

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

Hello Responsive Web DesignCrying@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

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

Hello Responsive Web DesignResponsive WordPress Themes Reveal Infinity Suco@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Hello Responsive Web DesignThank you.Goodbye@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

http://birminghamblogging.com	1223
http://www.ostraining.com	121
http://www.designlab.nl	11
http://a0.twimg.com	1
http://translate.googleusercontent.com	1

Responsive Web Design & WordPress

by iamdangavin

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 1,357

Statistics

Responsive Web Design & WordPress Presentation Transcript