Responsive Web Design will not only change how we build and view websites on all the new devices out there, this fundamentally changes how we approach web development. With WordPress being the most popular Content Management System on the web, its important for us to have this discussion now and figure out best practices to building great responsive websites. It won’t be whether “if” you decide to build a responsive website, it will be “when.” Get ready, this changes everything.

1. responsive web design
with WordPress

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

3. 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"

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

5. Why build responsive?
100
76.8 mil in U.S.
own smartphones 75
Up 11% in May '11 50
from Feb '11 25
39.8% use their 0
browser -25
Google Apple Rim Microsoft Palm
*source comScore Reports May 2011

6. More reasons to build responsive
*source bradfrostweb.com

7. Need for Responsive Design
More continuity in
user experience
Build once and
works on multiple
devices
Brings forth a
"content first"
approach

8. Responsive Web Design
With WordPress
Buy the book: Responsive Web Design
Ethan Marcotte - A Book Apart - ebook: $9.00

9. Design Approach:
Challenge yourself to
imagine fluid layouts
Think modularly
Choose images carefully
knowing that they will need
to expand and be cropped

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

11. Flexible Grids 1:
Using the Viewport tag enables controlling the
size of the canvas and enables / disables zooming
Zooming On:
<meta name="viewport" content="width=device-width;
initial-scale=1" />
Zooming Off:
<meta name="viewport" content="width=device-width;
initial-scale=1; minimum-scale=1; maximum-scale=1" />

12. Flexible Grids 2:
Pixels are changed to percentages to expand
and contract with the viewport
Use the formula: Result:
Target / Context = Result 566px / 960px = .589583333
Example: Percentage:
Design Width: 960px 58.9583333%
Blog Column: 566px

13. Flexible Grids 3:
Now we have a flexible CSS:
main blog column that .main .blog {
can expand and float: left;
contract width: 58.9583333%
}

14. Media Queries 1:
The media query is like
@media screen and
a test for your browser,
(min-width: 1024px) {
first, looking for the body {
media type, screen and font-size: 100%;
second, looking at the }
minimum width. If all is }
true, execute the CSS
below it

15. Media Queries 2:
Now using the media /* Smartphones (portrait
query you can create and landscape) */
screen width specific
styles for smartphones, @media only screen
tablets, desktops, etc. and (min-device-width :
320px) and (max-device-
width : 480px) {
body {
font-size: 50%;
}
}

16. 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%;
}

17. Fluid Images 2:
WordPress automatically adds dimensions to
images when you add them to a post, so how
do we make them fluid?
Use post_thumbnail:
<?php the_post_thumbnail(); ?>

18. 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 );

19. 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 );

20. 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 );
}

21. Fluid Images 6:
The final code in the template
<div class="featured-banner">
<?php if ( has_post_thumbnail() )
{ the_post_thumbnail( 'home-banner' ); } ?>
</div>

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

23. 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' ) ); ?>

24. 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() ) ); ?>

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

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

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