This document discusses responsive design for WordPress sites. It covers topics like responsive images, navigation patterns for mobile, testing on different devices and browsers, and using breakpoints and media queries. The overall message is that websites need to automatically adapt to different screens through responsive design principles in order to provide the best experience for users on any device.

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

2. Who Am I?*
2

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

4. 3

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

6. Why?
5

7. 6

8. How?
7

9. How?
7

10. How?
7
❖ EM-Based Breakpoints
❖ Breakpoints based
on Content
❖ Consider
Connection Speeds

11. RESS
8

12. RESS
8

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

14. WURFL
Database
9

15. WURFL
Database
9
❖ Device Detection
❖ Feature Detection
❖ Open Source
❖ Scientia Mobile

16. Scientia
Mobile
10
rwdwp.com/20

17. 10
rwdwp.com/20

18. 10
rwdwp.com/20

19. 10
rwdwp.com/20

20. wp_is_mobile()
11

21. 12
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 $client-
>getDeviceCapability('is_wireless_device');
}catch (Exception $e){
return wp_is_mobile();
}
}
!
define( 'ISMOBILE', jlc_is_mobile_device());

22. 13
if(ISMOBILE){
//display one way
}else{ //not mobile device
//display different way
}

23. Always ask what’s
best for the users!
14

24. Responsive
Workflow
15

25. Responsive
Workflow
15

26. Responsive
Workflow
15
❖ Sketch
❖ Code
❖ Test
❖ Repeat

27. 16

28. Mobile First!
17

29. I use the web completely differently on
mobile devices.
!
- No One
18

30. Design in the
Browser
19

31. Expand Out!
20
bradfrostweb.com

32. 20
bradfrostweb.com

33. 20
bradfrostweb.com

34. Style Tiles
21 styletil.es

35. 21 styletil.es

36. 21 styletil.es

37. General Notes for
Page Weight
22

38. Make it Work
with WordPress
23

39. Navigation
24

40. Navigation
24

41. Navigation
24
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to

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

43. 25
<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>

44. 26
<?php if(ISMOBILE){ ?>
<nav id=“footer-nav”>
<?php wp_nav_menu( array('menu' =>
‘Main’)); ?>
</nav>
<?php } ?>
!

45. Comments!
27

46. Comments!
27

47. Comments!
27
❖ Incremental Loading
❖ Pagination
❖ Separate Page

48. Responsive
Images
28

49. picturefill.js
29
2.0 Just Released: http://rwdwp.com/96

50. 30
<picture>
<!--[if IE 9]><video style="display:
none;"><![endif]-->
<source srcset="extralarge.jpg" media="(min-
width: 1000px)">
<source srcset="large.jpg" media="(min-width:
800px)">
<source srcset="medium.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="medium.jpg" alt="A giant stone
face at The Bayon temple in Angkor Thom,
Cambodia">
</picture>

51. 31
$(function(){
$(".post
img").removeAttr("width").removeAttr("height");
});

52. Images Are Hard!
32

53. 33
@media(-webkit-min-device-pixel-ratio: 2),(min-
resolution: 192dpi) {
/* Retina-specific stuff here */
}
<span data-src="retina.jpg" data-media="(-webkit-
min-device-pixel-ratio: 2) and (min-resolution:
192dpi)"></span>
rwdwp.com/95

54. HTML5 Galleries!
34
add_theme_support( 'html5',
array('gallery', 'caption' ) );
http://rwdwp.com/97

55. Testing
35

56. ❖ iPhone 4, 5
❖ iPad 2 or new iPad
❖ Android 4.0+ Phones: Galaxy Nexus, Galaxy Note
II, S3 or S4, Droid Incredible (one of them), Droid
DNA or Razor Maxx
❖ Android pre-4.0 Phones: Moto DroidX, Evo4G
❖ Android Tablets: Nexus 7, 10, Samsung Galaxy
Note 10, Galaxy Tab 8.9, Kindle Fire, Moto
XOOM
❖ At least one Blackberry (Q10, Z10)
❖ At least one Windows Phone (Lumia or HTC 8x)
Devices
36

57. ❖ iPhone 4, 5
❖ iPad 2 or new iPad
❖ Android 4.0+ Phones: Galaxy Nexus, Galaxy Note
II, S3 or S4, Droid Incredible (one of them), Droid
DNA or Razor Maxx
❖ Android pre-4.0 Phones: Moto DroidX, Evo4G
❖ Android Tablets: Nexus 7, 10, Samsung Galaxy
Note 10, Galaxy Tab 8.9, Kindle Fire, Moto
XOOM
❖ At least one Blackberry (Q10, Z10)
❖ At least one Windows Phone (Lumia or HTC 8x)36

58. ❖ iPhone 4, 5
❖ iPad 2 or new iPad
❖ Android 4.0+ Phones: Galaxy Nexus, Galaxy Note
II, S3 or S4, Droid Incredible (one of them), Droid
DNA or Razor Maxx
❖ Android pre-4.0 Phones: Moto DroidX, Evo4G
❖ Android Tablets: Nexus 7, 10, Samsung Galaxy
Note 10, Galaxy Tab 8.9, Kindle Fire, Moto
XOOM
❖ At least one Blackberry (Q10, Z10)
❖ At least one Windows Phone (Lumia or HTC 8x)36

59. ❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
Connectivity
37

60. ❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
37

61. ❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
37

62. ❖ The device’s native browser (Safari,
Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
Browsers!
38

63. ❖ The device’s native browser (Safari,
Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
38

64. ❖ The device’s native browser (Safari,
Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
38

65. Questions?
39
Discount Code: RWDWP with you order from
peachpit.com
Slides will be at casabona.org/events