Responsive Web Design With WordPress

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.

Transcript

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? 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
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 <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" />
12. 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:
13. Flexible Grids 3: Now we have a flexible main blog column that can expand and contract CSS: .main .blog { float: left; width: 58.9583333% }
14. 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%; } }
15. 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 screen 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? <?php the_post_thumbnail(); ?> Use 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