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