Responsive Design with WordPress

I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall. I’ve updated the talk to include stuff for WordPress 4.0!

See the talk here: http://wordpress.tv/2014/11/22/joe-casabona-responsive-design-with-wordpress-2/

Transcript

1. Responsive Design with WordPress Joe Casabona casabona.org @jcasabona
2. Who Am I?* 2 *Besides a handsome devil
4. Responsive Web Design: The idea that your website will automatically adapt to the device it's being viewed on. 4
5. Why? 5
6. How? 6 ❖ EM-Based Breakpoints ❖ Breakpoints based 
 on Content ❖ Consider 
 Connection Speeds
7. RESS 7 ❖ My Plugin: rwdwp.com/22 ❖ Jesse's: rwdwp.com/35
8. WURFL Database 8 ❖ Device Detection ❖ Feature Detection ❖ Open Source ❖ Scientia Mobile
9. wp_is_mobile() 9
10. 10 if(ISMOBILE){ //display one way }else{ //not mobile device //display different way }
11. Responsive Workflow 11 ❖ Sketch ❖ Code ❖ Test ❖ Repeat
12. Mobile First! 12
13. I use the web completely differently on mobile devices. - No One 13
14. Design in the Browser 14
15. Expand Out! 15 bradfrostweb.com
16. Make it Work with WordPress 16
17. Navigation 17 ❖ Do Nothing ❖ Hide n' Cry ❖ Jump to ❖ Select Box ❖ Responsive Nav ❖ Off-Canvas
18. 18 <nav id=”main”> <?php if(!ISMOBILE){
 wp_nav_menu( array('menu' => ‘Main', 'container_id' => 'top-menu')); }else{ echo '<a href=”#footernav”>Jump to Nav</ a>'; } ?> </nav>
19. 19 <?php if(ISMOBILE){ ?> <nav id=“footer-nav”> <?php wp_nav_menu( array('menu' => ‘Main’)); ?> </nav> <?php } ?>
20. Responsive Images 20
21. picturefill.js 21
22. 22 <picture> <!--[if IE 9]><video style="display: none;"><! [endif]--> <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/large.jpg" media="(min-width: 800px)"> <!--[if IE 9]></video><![endif]--> <img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </picture>
23. Updating Plugin 23 ❖ Replace Featured Images ❖ Check for <picture> element first, fallback to picturefill.js
24. 24 $(function(){ $(".post img").removeAttr("width").removeAttr("height"); });
25. Helpful Updates to Core 25 ❖ HTML 5 Elements (figure, figcaption) ❖ add_theme_support( 'html5', array( 'gallery', 'caption' ) ); ❖ Better Media Embeds (consider for themes)
26. Images Are Hard! 26
27. Questions? 27 Discount Code: RWDWP with you order from peachpit.com Slides will be at casabona.org/events