responsive web design

with WordPress

Quotes

"it may be an even bigger idea than we initially realized" - Jeffrey Zeldman

"Responsive Web Design is web design, done right." - Andy Clarke

"We!re excited about this approach to web design. It feels …right." - Jeremy Keith

What is it?

On May 25, 2010, Ethan Marcotte wrote an article introducing Responsive Web Design

"Responsive Web Design uses fluid grids, flexible images and media queries to deliver elegant visual experiences"

Okay, what does that mean?

Fluid grids expand and contract the design to fit the browser window

Flexible images can be resized and cropped as the window gets smaller or larger

Media queries detect screen size at certain points and restructures content to fit

Why build responsive?

76.8 mil in U.S. own smartphones

Up 11% in May '11 from Feb '11

39.8% use their browser

-25

0

25

50

75

100

Google Apple Rim Microsoft Palm*source comScore Reports May 2011

More reasons to build responsive

*source bradfrostweb.com

Need for Responsive Design

More continuity in user experience

Build once and works on multiple devices

Brings forth a "content first" approach

Responsive Web Design With WordPress

Buy the book: Responsive Web DesignEthan Marcotte - A Book Apart - ebook: $9.00

Design Approach:

Challenge yourself to imagine fluid layouts

Think modularly

Choose images carefully knowing that they will need to expand and be cropped

The Grid:

Most popular is the 960 Grid System by Nathan Smith

Great tool for designers as a guide and for developers with pre-defined widths

Flexible Grids 1:

Using the Viewport tag enables controlling the size of the canvas and enables / disables zooming

<meta name="viewport" content="width=device-width; initial-scale=1" />

Zooming On:

Zooming Off:

<meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1" />

Flexible Grids 2:

Pixels are changed to percentages to expand and contract with the viewport

Use the formula:

Target / Context = Result

Example:

Design Width: 960px

Blog Column: 566px

Result:

566px / 960px = .589583333

58.9583333%

Percentage:

Flexible Grids 3:

Now we have a flexible main blog column that can expand and contract

CSS:

.main .blog {float: left;width: 58.9583333%}

Media Queries 1:

The media query is like a test for your browser, first, looking for the media type, screen and second, looking at the minimum width. If all is true, execute the CSS below it

@media screen and (min-width: 1024px) { body { font-size: 100%; }}

Media Queries 2:

Now using the media query you can create screen width specific styles for smartphones, tablets, desktops, etc.

/* Smartphones (portrait and landscape) */

@media only screenand (min-device-width : 320px) and (max-device-width : 480px) { body { font-size: 50%; }}

Fluid Images 1:

To create fluid images and force fixed width elements to resize proportionately, we can apply a nice little style

img, embed, object, video { max-width: 100%;}

Fluid Images 2:

WordPress automatically adds dimensions to images when you add them to a post, so how do we make them fluid?

<?php the_post_thumbnail(); ?>

Use post_thumbnail:

Fluid Images 3:

But wait, post thumbnails DO have dimensions setup in the functions file

/* Add theme support for post thumbnails (featured images). */

" add_theme_support( 'post-thumbnails' );" set_post_thumbnail_size( 200, 200, true );

Fluid Images 4:Yes, when you upload an image WordPress has default sizes for, thumbnail, medium and large, but you can customize them

" add_theme_support( 'post-thumbnails' );" set_post_thumbnail_size( 200, 200, true );" add_image_size( 'single-post-thumbnail', 681, 225, true );

Fluid Images 5:Adding the code below will automatically create the new size for you on upload

/* Adding new media image size option */" if ( function_exists( 'add_image_size' ) ) { " add_image_size( 'home-banner', 681, 225, true ); }

Fluid Images 6:

The final code in the template

<div class="featured-banner">

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'home-banner' ); } ?>

</div>

Navigation 1:

To be responsive we have to rethink site structure and navigation. Dropdown menus aren't efficient on the small screen.

Navigation 2:

In WordPress the new menu system is great, but how do we turn off dropdowns? Use depth=>'1'

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => 'false', 'menu_id' => 'main-nav', 'depth' => '1' ) ); ?>

Navigation 3:Okay, so now how do I display my sub-pages, wp_nav doesn't have a child_of parameter? Add a Walker Class to your functions file.

<?php wp_nav_menu( array( 'walker' => new Custom_Walker_Nav_Sub_Menu() ) ); ?>

Navigation 4:

Now we can easily modify the nav with the new menu system in WordPress and it displays nicely on a small screen

Future Of Responsive Web Design:

Mobile first, adaptive layouts, progressive enhancement are all part of this

We will be building with the content in the center and everything else will be peripheral

Teams will have to restructure, content writers will come in earlier and content from the client will be required up front

Thank you!

I will have links to this slideshow and more on www.crowdedsites.com next week