Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design With WordPress

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.

Wes Chyrchel

May 20, 2011
Tweet

More Decks by Wes Chyrchel

Other Decks in Design

Transcript

  1. 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
  2. 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"
  3. 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
  4. 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
  5. Need for Responsive Design More continuity in user experience Build

    once and works on multiple devices Brings forth a "content first" approach
  6. Responsive Web Design With WordPress Buy the book: Responsive Web

    Design Ethan Marcotte - A Book Apart - ebook: $9.00
  7. Design Approach: Challenge yourself to imagine fluid layouts Think modularly

    Choose images carefully knowing that they will need to expand and be cropped
  8. 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
  9. 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" />
  10. 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:
  11. Flexible Grids 3: Now we have a flexible main blog

    column that can expand and contract CSS: .main .blog { float: left; width: 58.9583333% }
  12. 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%; } }
  13. 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%; } }
  14. 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%; }
  15. 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:
  16. 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 );
  17. 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 );
  18. 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 ); }
  19. Fluid Images 6: The final code in the template <div

    class="featured-banner"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'home-banner' ); } ?> </div>
  20. Navigation 1: To be responsive we have to rethink site

    structure and navigation. Dropdown menus aren't efficient on the small screen.
  21. 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' ) ); ?>
  22. 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() ) ); ?>
  23. Navigation 4: Now we can easily modify the nav with

    the new menu system in WordPress and it displays nicely on a small screen
  24. 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
  25. Thank you! I will have links to this slideshow and

    more on www.crowdedsites.com next week