Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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.

Responsive Web Design With WordPress

  1. 1. responsive web design with WordPress
  2. 2. Quotes"it may be an even bigger idea than weinitially realized" - Jeffrey Zeldman"Responsive Web Design is web design,done right." - Andy Clarke"We!re excited about this approach to webdesign. It feels …right." - Jeremy Keith
  3. 3. What is it?On May 25, 2010, Ethan Marcotte wrote anarticle introducing Responsive Web Design"Responsive Web Design uses fluidgrids, flexible images and media queriesto deliver elegant visual experiences"
  4. 4. Okay, what does that mean?Fluid grids expand andcontract the design to fitthe browser windowFlexible images can beresized and cropped asthe window gets smalleror largerMedia queries detectscreen size at certainpoints and restructurescontent to fit
  5. 5. Why build responsive? 10076.8 mil in U.S.own smartphones 75Up 11% in May 11 50from Feb 11 2539.8% use their 0browser -25 Google Apple Rim Microsoft Palm*source comScore Reports May 2011
  6. 6. More reasons to build responsive *source bradfrostweb.com
  7. 7. Need for Responsive DesignMore continuity inuser experienceBuild once andworks on multipledevicesBrings forth a"content first"approach
  8. 8. Responsive Web DesignWith WordPressBuy the book: Responsive Web DesignEthan Marcotte - A Book Apart - ebook: $9.00
  9. 9. Design Approach:Challenge yourself toimagine fluid layoutsThink modularlyChoose images carefullyknowing that they will needto expand and be cropped
  10. 10. The Grid:Most popular is the960 Grid System byNathan SmithGreat tool for designersas a guide and fordevelopers with pre-defined widths
  11. 11. Flexible Grids 1:Using the Viewport tag enables controlling thesize 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. 12. Flexible Grids 2:Pixels are changed to percentages to expandand contract with the viewportUse the formula: Result:Target / Context = Result 566px / 960px = .589583333Example: Percentage:Design Width: 960px 58.9583333%Blog Column: 566px
  13. 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. 14. Media Queries 1:The media query is like @media screen anda 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 CSSbelow it
  15. 15. Media Queries 2:Now using the media /* Smartphones (portraitquery you can create and landscape) */screen width specificstyles for smartphones, @media only screentablets, desktops, etc. and (min-device-width : 320px) and (max-device- width : 480px) { body { font-size: 50%; } }
  16. 16. Fluid Images 1:To create fluid images and force fixed widthelements to resize proportionately, we canapply a nice little style img, embed, object, video { max-width: 100%; }
  17. 17. Fluid Images 2:WordPress automatically adds dimensions toimages when you add them to a post, so howdo we make them fluid?Use post_thumbnail:<?php the_post_thumbnail(); ?>
  18. 18. Fluid Images 3:But wait, post thumbnails DO havedimensions 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. 19. Fluid Images 4: Yes, when you upload an image WordPress has default sizes for, thumbnail, medium and large, but you can customize themadd_theme_support( post-thumbnails );set_post_thumbnail_size( 200, 200, true );add_image_size( single-post-thumbnail, 681, 225, true );
  20. 20. Fluid Images 5:Adding the code below will automaticallycreate 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. 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. 22. Navigation 1:To be responsive we haveto rethink site structureand navigation. Dropdownmenus arent efficient onthe small screen.
  23. 23. Navigation 2:In WordPress the new menu system is great,but how do we turn off dropdowns? Usedepth=>1<?php wp_nav_menu( array( theme_location =>primary-menu, container => false, menu_id =>main-nav, depth => 1 ) ); ?>
  24. 24. Navigation 3:Okay, so now how do I display my sub-pages,wp_nav doesnt 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. 25. Navigation 4:Now we can easilymodify the nav withthe new menu systemin WordPress and itdisplays nicely on asmall screen
  26. 26. Future Of ResponsiveWeb Design:Mobile first, adaptive layouts, progressiveenhancement are all part of thisWe will be building with the content in thecenter and everything else will be peripheralTeams will have to restructure, content writerswill come in earlier and content from the clientwill be required up front
  27. 27. Thank you!I will have links to this slideshow and more onwww.crowdedsites.com next week

    Be the first to comment

    Login to see the comments

  • CharJTF

    Jul. 22, 2011
  • gitong

    Aug. 25, 2011
  • sprungmarker

    Aug. 27, 2011
  • rsiacobelli

    Sep. 29, 2011
  • brunobarros2

    Oct. 2, 2011
  • BKlawonn

    Oct. 18, 2011
  • Jere-Moller

    Nov. 7, 2011
  • iblackcz

    Mar. 22, 2012
  • Giltvedt

    Apr. 27, 2012
  • kitseeborg

    May. 8, 2012
  • aXL23

    Nov. 19, 2012
  • wellsbr01

    Feb. 21, 2013
  • kimwanjik

    Apr. 15, 2013
  • OMlifestyles

    May. 29, 2014
  • seventhsoul

    Jun. 13, 2014

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.

Views

Total views

15,341

On Slideshare

0

From embeds

0

Number of embeds

4,793

Actions

Downloads

139

Shares

0

Comments

0

Likes

15

×