Click here to load reader

Responsive Web Design & WordPress

  • View
    3.323

  • Download
    1

Embed Size (px)

DESCRIPTION

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.

Text of Responsive Web Design & WordPress

2. Hello Responsive Web DesignI am Dan Gavin.I like design, beer, food, bikes and [email protected] | [email protected] | 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 [email protected] | [email protected] | www.iamdangav.in 4. HelloResponsive Web DesignBe responsive. DesktopMobileTwenty Eleven Themetwentyelevendemo[email protected] | [email protected] | www.iamdangav.in 5. HelloResponsive Web DesignBe responsive. DesktopMobileJason Santa [email protected] | [email protected] | www.iamdangav.in 6. HelloResponsive Web DesignBe responsive. DesktopMobileJason Santa [email protected] | [email protected] | www.iamdangav.in 7. HelloResponsive Web DesignBe responsive. DesktopMobileRuss Maschmeyer / Strange [email protected] | [email protected] | www.iamdangav.in 8. Hello Responsive Web DesignWhat it takes to be [email protected] | [email protected] | www.iamdangav.in 9. Hello Responsive Web DesignWhat it takes to be [email protected] | [email protected] | www.iamdangav.in 10. Hello Responsive Web DesignWhat it takes to be [email protected] | [email protected] | www.iamdangav.in 11. Hello Responsive Web DesignWhat it takes to be [email protected] | [email protected] | www.iamdangav.in 12. Hello Responsive Web DesignWhat it really takes to be responsive. Adaptive Grid System Scalable Images / Video Media Queries Organization [email protected] | [email protected] | www.iamdangav.in 13. HelloResponsive Web DesignAdaptive Grid Systems 960.gs 1140 CSS Grid Golden Grid System 12 Column [email protected] | [email protected] | www.iamdangav.in 14. HelloResponsive Web DesignFlexible Grids 1140 CSS GridLess Framework Content Fluid Grids - alistapart.com/articles/[email protected] | [email protected] | www.iamdangav.in 15. Hello Responsive Web Design %@iamdangavin | [email protected] | www.iamdangav.in 16. HelloResponsive Web Design 940 px700 px220 [email protected] | [email protected] | www.iamdangav.in 17. HelloResponsive Web Design 940 px 100%700 px220 [email protected] | [email protected] | www.iamdangav.in 18. HelloResponsive Web Design 940 px 100%74.46808511% 700 / 940700 px220 [email protected] | [email protected] | www.iamdangav.in 19. Hello Responsive Web Design 940 px 100%74.46808511%23.40425535% 700 / 940220 / 940700 px 220 [email protected] | [email protected] | www.iamdangav.in 20. Hello Responsive Web DesignWhat it really takes to be responsive. Adaptive Grid System - Scalable Images / Video Media Queries Organization [email protected] | [email protected] | www.iamdangav.in 21. Hello Responsive Web DesignFlexible [email protected] | [email protected] | www.iamdangav.in 22. Hello Responsive Web DesignFlexible [email protected] | [email protected] | 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 whats cool is weve been able to apply it to many more themes that we maintain on wordpress.com - Lance Willett simpledream.net/[email protected] | [email protected] | 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 | [email protected] 25. Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | [email protected] | www.iamdangav.in 26. Hello Responsive Web DesignFlexible Media (Video)@iamdangavin | [email protected] | www.iamdangav.in 27. Hello /* Media / Videos */ object, embed, iframe{ max-width: 100%; /* Make sure embeds fit their containers */ }@iamdangavin | [email protected] 28. HelloFitVid.jsA lightweight, easy-to-use jQuery plugin for fluid width video embeds.Supports: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter* Add your own video vendorsFitvid.js @iamdangavin | [email protected] 29. Hello Responsive Web DesignWhat it really takes to be responsive. Adaptive Grid System - Scalable Images / Video - Media Queries Organization [email protected] | [email protected] | www.iamdangav.in 30. HelloResponsive Web DesignMedia QueriesThink of it like conditional comments... But within [email protected] | [email protected] | www.iamdangav.in 31. [email protected] /* 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 | [email protected] 32. HelloResponsive 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 | [email protected] | www.iamdangav.in 33. HelloResponsive 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 | [email protected] | www.iamdangav.in 34. HelloResponsive 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 | [email protected] | www.iamdangav.in 35. Hello Responsive Web DesignWhat it really takes to be responsive. Adaptive Grid System - Scalable Images / Video - Media Queries - Organization [email protected] | [email protected] | www.iamdangav.in 36. HelloOrganization /* Media = iPhone*/ /* Media = iPad*/ /* Media = Core*/ @iamdangavin | [email protected] 37. Hello Responsive Web DesignWhat it really takes to be responsive. Adaptive Grid System - Scalable Images / Video - Media Queries - Organization - [email protected] | [email protected] | www.iamdangav.in 38. Hello Responsive Web [email protected] | [email protected] | www.iamdangav.in 39. Hello Responsive Web [email protected] | [email protected] | 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 | [email protected] | www.iamdangav.in 41. HelloResponsive Web DesignResponsive WordPress Themes Reveal Infinity [email protected] | [email protected] | www.iamdangav.in 42. Hello Responsive Web DesignThank [email protected] | [email protected] | www.iamdangav.in

Search related