Responsive Web Design & WordPress

Hello Responsive Web Design

This is a presentation on Responsive
Web Design

@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in


I am Dan Gavin.
I like design, beer, food, bikes and WordPress.



“ 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



Be responsive.

Desktop Mobile

Twenty Eleven Theme
twentyelevendemo.wordpress.com



Be responsive.

Desktop Mobile

Jason Santa Maria
jasonsantamaria.com



Be responsive.

Desktop Mobile

Russ Maschmeyer / Strange Native
strangenative.com



What it takes to be responsive.



What it really takes to be responsive.
• Adaptive Grid System
• Scalable Images / Video
• Media Queries
• Organization
• Crying



Adaptive Grid Systems

960.gs 1140 CSS Grid

Golden Grid System 12 Column Grid



Flexible Grids

1140 CSS Grid Less Framework

Content

Fluid Grids - alistapart.com/articles/fluidgrids



%


940 px

700 px 220 px



940 px

100%

700 px 220 px



940 px

100%

74.46808511%

700 / 940

700 px 220 px



940 px

100%

74.46808511% 23.40425535%

700 / 940 220 / 940

700 px 220 px



• Adaptive Grid System - ✓
• Scalable Images / Video
• Media Queries
• Organization
• Crying



Flexible Images



“ 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


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


Flexible Media (Video)


Hello

/* Media / Videos */
object,
embed,
iframe{
max-width: 100%; /* Make sure embeds fit their containers */
}


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 vendors

Fitvid.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>



• Scalable Images / Video - ✓
• Media Queries
• Organization
• Crying



Media Queries
Think of it like conditional comments... But within CSS!


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{ }
}



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/



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/



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/



• Media Queries - ✓
• Organization
• Crying


Hello

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" />



• Organization - ✓
• Crying



Crying



• Organization - ✓
• Crying - ✓



Responsive WordPress Themes

Reveal Infinity

Suco



Thank you.
Goodbye


Responsive Web Design & WordPress

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Último

Último (20)

Responsive Web Design & WordPress

Notas del editor