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


Published on

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.

Published in: Design, Technology, Art & Photos
  • Hi,

    Hope you are doing well!

    I am Sneha, Team Leader with a reputed IT company based in India.

    We are an Indian Web Design, Development and SEO firm with over 4 years of experience. In these tough times, where it is hard to maintain the top line, we can help share the bottom-line for you.

    Our main focus is to provide complete IT support to your business domain. Would you be interested in a Website Design, Website Maintenance, Web Promotion, Software Development etc… that might benefit the overall usability and user experience which usually leads to better sales? We will be happy to help execute SEO & Web Design and Development projects at a much lower cost than what you have in house.

    No compromise on quality!

    1. PSD To HTML
    2. Responsive Website
    3. CMS Website
    4. Ecommerce Website
    5. Website Edit / Maintenance
    6. Email Template
    7. Content Writing

    Do let me know if you are interested and I would be happy to share our Methodologies, past work details and client testimonials.

    Waiting to have a positive response

    Have a great day ahead.

    Thanks and Regards,
    Business Development Manager
    Are you sure you want to  Yes  No
    Your message goes here

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
  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 next week