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 medi...
Getting my framework
GridPak - http://gridpak.com/

•

•

Great for creating a simple grid

•

Set your break points & dow...
Managing stylesheets
•

Keep the grid separate
•

style.css
•

•

managing the site design

grid.css
•

contains the base ...
Managing navigation
Standard WordPress Menu

•

<nav id="navigation">

	 	 <?php wp_nav_menu( array ( 

	 	 	 'container' ...
Images & retina ready
•

Images

•

@2x retina fix

•

•

http://retinize.it/ - photoshop
action

•

img {width: 100%}

•

...
Testing, fixing & performance
•

Testing
•
•

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

•
•

Xcode / iOS simulato...
Thank You
!

@jamesbundey
http://www.linkedin.com/in/jamesbundey
www.creativeapproach.com.au
Upcoming SlideShare
Loading in...5
×

Responsive WordPress workflow

573

Published on

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.

Published in: Education, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
573
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive WordPress workflow

  1. 1. Responsive WordPress Workflow James Bundey
  2. 2. What is responsive?
  3. 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. 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. 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. 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. 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. 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. 9. Thank You ! @jamesbundey http://www.linkedin.com/in/jamesbundey www.creativeapproach.com.au
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×