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.
Citation preview
@iamdangavin | [email protected] | www.iamdangav.in
Responsive Web DesignHello
This is a presentation on Responsive Web Design
@iamdangavin | [email protected] | www.iamdangav.in
Responsive Web DesignHello
I am Dan Gavin.
I like design, beer, food, bikes and WordPress.
@iamdangavin | [email protected] | www.iamdangav.in
Responsive Web DesignHello
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 | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Desktop Mobile
Be responsive.
Twenty Eleven Theme twentyelevendemo.wordpress.com
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Desktop Mobile
Be responsive.
Jason Santa Maria jasonsantamaria.com
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Desktop Mobile
Be responsive.
Jason Santa Maria jasonsantamaria.com
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Desktop Mobile
Be responsive.
Russ Maschmeyer / Strange Native strangenative.com
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System
• Scalable Images / Video
• Media Queries
• Organization
• Crying
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Adaptive Grid Systems
960.gs 1140 CSS Grid
Golden Grid System 12 Column Grid
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Flexible Grids
Less Framework
Fluid Grids - alistapart.com/articles/fluidgrids
1140 CSS Grid
Content
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
940 px
700 px 220 px
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
940 px
700 px 220 px
100%
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
940 px
700 px 220 px
100%
74.46808511%
700 / 940
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
940 px
700 px 220 px
100%
23.40425535%
220 / 940
74.46808511%
700 / 940
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video
• Media Queries
• Organization
• Crying
@iamdangavin | [email protected] | www.iamdangav.in
Responsive Web DesignHello
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 | [email protected]
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] | www.iamdangav.in
Hello Responsive Web Design
Flexible Media (Video)
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Flexible Media (Video)
Hello
@iamdangavin | [email protected]
/* Media / Videos */object,embed,iframe{ max-width: 100%; /* Make sure embeds fit their containers */}
Hello
@iamdangavin | [email protected]
<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>
FitVid.jsA lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Supports: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter* Add your own video vendors
Fitvid.js
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries
• Organization
• Crying
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Media Queries
Think of it like conditional comments... But within CSS!
Hello
@iamdangavin | [email protected]
@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 | [email protected] | www.iamdangav.in
Hello Responsive Web Design
CSS3 Media Queries
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently 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
Hello Responsive Web Design
Resources 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
Hello Responsive Web Design
Resources 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
Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries - ✓
• Organization
• Crying
Hello
@iamdangavin | [email protected]
Organization
/* 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 | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries - ✓
• Organization - ✓
• Crying
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries - ✓
• Organization - ✓
• Crying - ✓
@iamdangavin | [email protected] | www.iamdangav.in
Hello Responsive Web Design
Responsive WordPress Themes
Reveal Infinity
Suco
![[Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://img.pdfslide.us/doc/110x75/58f9b376760da3da068bd65f/austin-wordpress-meetup-adaptive-images-in-responsive-web-design-58f9b338a6685.jpg)
