Download - Responsive Web Design With WordPress
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