Responsive Web Design & WordPress

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

Responsive Web DesignHello

This is a presentation on Responsive Web Design

mailto:iamdangavin@gmail.com?subject=Message%20from%20Slideshare%20Presentation%20on%20Responsive%20Web%20Design

http://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

http://www.alistapart.com/articles/responsive-web-design

http://www.abookapart.com/products/responsive-web-design

Hello Responsive Web Design

Desktop Mobile

Be responsive.

Twenty Eleven Theme twentyelevendemo.wordpress.com

http://www.twentyelevendemo.wordpress.com

http://livepage.apple.com/

Desktop Mobile

Be responsive.

Jason Santa Maria jasonsantamaria.com

http://www.jasonsantamaria.com

Desktop Mobile

Be responsive.

Jason Santa Maria jasonsantamaria.com

http://www.jasonsantamaria.com

Desktop Mobile

Be responsive.

Russ Maschmeyer / Strange Native strangenative.com

http://www.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

http://960.gs/

http://cssgrid.net/

http://goldengridsystem.com/

http://cssgrid.net/

http://goldengridsystem.com/

Flexible Grids

Less Framework

Fluid Grids - alistapart.com/articles/fluidgrids

1140 CSS Grid

Content

http://lessframework.com/

http://alistapart.com/articles/fluidgrids

http://cssgrid.net/

%

940 px

700 px 220 px

940 px

700 px 220 px

100%

940 px

700 px 220 px

100%

74.46808511%

700 / 940

940 px

700 px 220 px

100%

23.40425535%

220 / 940

74.46808511%

700 / 940

• 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

“

http://www.simpledream.net/about

@iamdangavin | iamdangavin@gmail.com

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 */}

mailto:iamdangavin@gmail.com

Flexible Media (Video)

Hello

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

Hello

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

http://fitvidjs.com/

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

http://www.w3.org/TR/css3-mediaqueries/

http://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/

http://w3.org/TR/css3-mediaqueries

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://css-tricks.com/css-media-queries//