Post on 28-Jan-2015
description
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