A short presentation given at the November Melbourne WordPress developer group meetup. The presentation covered how I approach responsive projects, included some of the tools that I utilise and some tips and techniques on how to avoid some common mistakes.

1. Responsive WordPress
Workflow
James Bundey

2. What is responsive?

3. 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.

4. 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”>
……

5. 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 (mindevice-width : 320px) and (maxdevice-width : 480px) {
}

6. 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");
});
});

7. Images & retina ready
•
Images
•
@2x retina fix
•
•
http://retinize.it/ - photoshop
action
•
img {width: 100%}
•
http://retinajs.com
•
•
Logo in svg format - control with
background-size{}
img.responsive-fix {width: auto;}
•
WP Retina 2x - plugin
Icons
•
•
Font awesome - fontawesome.io
•
retro fit with Regenerate
Thumbnails
Fitvids - http://fitvidsjs.com/

8. Testing, fixing & performance
•
Testing
•
•
The Responsinator - http://
www.responsinator.com/
•
•
Xcode / iOS simulator
Responsive Site View - chrome plugin
Fixing
•
Checking scripts
•
$(window).load(function() {
if ($(window) .width() > 674) {
responsive script…..
} else {
desktop script….
}
});
Performance tweaking
•
IE & media queries
•
Use CDN
•
Removing transitions with device specific
media queries
•
Adaptive images - http://adaptiveimages.com/

9. Thank You
!
@jamesbundey
http://www.linkedin.com/in/jamesbundey
www.creativeapproach.com.au