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

Responsive Web Design & WordPress

on

  • 3,719 views

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.

Statistics

Views

Total Views
3,719
Views on SlideShare
2,351
Embed Views
1,368

Actions

Likes
1
Downloads
24
Comments
0

7 Embeds 1,368

http://birminghamblogging.com 1230
http://www.ostraining.com 121
http://www.designlab.nl 11
https://twitter.com 3
http://a0.twimg.com 1
http://translate.googleusercontent.com 1
http://www.slashdocs.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Responsive Web Design & WordPress Presentation Transcript

  • 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 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 takes to be responsive.@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 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 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 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 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