Responsive WordPress Workflow

James Bundey

What is responsive?

Approaching a project • Design, site structure & basic site html/php code

• CSS & how it’s going to respond within media queries

• My WP code as it relates to how the content is displayed on each screen size

• Fixing things & spending too much time cursing the turd that is IE

• Testing, testing & more testing.

• Performance tweaking.

Getting my framework• GridPak - http://gridpak.com/

• Great for creating a simple grid

• Set your break points & download

• Very easy to retrofit

!

<div class=“row”> <div class=“col span_4”> …code </div> <aside class=“col span_2”> ……

Managing stylesheets• Keep the grid separate

• style.css

• managing the site design

• grid.css

• contains the base framework

• contains my screen & device specific css based on media queries.

@media screen and (min-width: 480px) and (max-width: 749px) {

grid… specific css…

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

Managing navigation• Standard WordPress Menu <nav id="navigation"> <?php wp_nav_menu( array ( 'container' => 'false', 'menu' => 'Primary Menu', 'menu_class' => 'menu', 'menu_id' => 'mainNav') ); ?> </nav>

!

!

!

• Simple script to create custom navigation for small screen sizes

$(function(){

/* prepend menu icon */ $('#navigation').prepend('<div id="menu-icon"><i class="icon-align-justify"></i></div>');

/* toggle nav */ $("#menu-icon").on("click", function(){

$("#mainNav").slideToggle(); $(this).toggleClass("active"); }); });

Images & retina ready• Images

• Logo in svg format - control with background-size{}

• img {width: 100%}

• img.responsive-fix {width: auto;}

• Icons

• Font awesome - fontawesome.io

• @2x retina fix

• http://retinize.it/ - photoshop action

• http://retinajs.com

• WP Retina 2x - plugin

• retro fit with Regenerate Thumbnails

• Fitvids - http://fitvidsjs.com/

Testing, fixing & performance• Testing

• Xcode / iOS simulator

• The Responsinator - http://www.responsinator.com/

• Responsive Site View - chrome plugin

• Fixing

• IE & media queries

• Removing transitions with device specific media queries

• Checking scripts

$(window).load(function() { if ($(window) .width() > 674) { responsive script….. } else { desktop script…. } });

• Performance tweaking

• Use CDN

• Adaptive images - http://adaptive-images.com/

Thank You!

@jamesbundey

http://www.linkedin.com/in/jamesbundey

www.creativeapproach.com.au