Join me as I hit some of the major topics of my book, including a primer on Responsive Design, how WordPress handles images and how to integrate picturefill, navigation and menu techniques, and a small bit about using WordPress frameworks.

1. Responsive Design
with WordPress
Joe Casabona
casabona.org
@jcasabona

2. Who Am I?*
2

3. Who Am I?*
*Besides a handsome devil
2

4. 3

5. 3

6. ❖ Out December 16th
❖ Pre-Order at
www.rwdwp.com
3

7. Responsive Web Design: The idea that
your website will automatically adapt to
the device it's being viewed on.
4

8. Why?
5

9. How?
6

10. How?
6

11. ❖ EM-Based Breakpoints
❖ Breakpoints based
How?
on Content
❖ Consider
Connection Speeds
6

12. Make it Work
with WordPress
7

13. RESS
8

14. RESS
8

15. RESS
❖ My Plugin: rwdwp.com/22
❖ Jesse's: rwdwp.com/35
8

16. function jlc_is_mobile_device($apikey){
try{
$config = new WurflCloud_Client_Config();
$config-api_key = $apikey;
$client = new
WurflCloud_Client_Client($config);
$client-detectDevice();
return $clientgetDeviceCapability('is_wireless_device');
}catch (Exception $e){
return wp_is_mobile();
}
}
!
define( 'ISMOBILE', jlc_is_mobile_device());
9

17. if(ISMOBILE){
//display one thing
}else{ //not mobile device
//display different thing
}
10

18. Navigation
11

19. Navigation
11

20. Navigation
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to
11

21. Navigation
❖ Do Nothing
❖ Select Box
❖ Hide n' Cry
❖ Responsive Nav
❖ Jump to
❖ Off-Canvas
11

22. nav id=”main”
?php
if(!ISMOBILE){
wp_nav_menu( array('menu' = ‘Main',
p'container_id' = 'top-menu'));
}else{
echo 'a href=”#footernav”Jump to Nav/
a';
}
?
/nav
12

23. Responsive
Images
13

24. span data-picture data-alt=A photo of a
thing
span data-src=small.jpg/span
span data-src=medium.jpg
datamedia=(min-width: 400px)/span
span data-src=large.jpg
datamedia=(min-width: 800px)/span
span data-src=extralarge.jpg datamedia=(min-width: 1000px)/span
!
noscript
img src=small.jpg alt=A giant
stone face at The Bayon temple in Angkor Thom,
Cambodia
/noscript
/span
14

25. $(function(){
$(“.post
img).removeAttr(“width”).removeAttribute(“height”);
}
15

26. Testing
16

27. Questions?
Discount Code: RWDWP with you pre-order from
peachpit.com
17