Responsive Design with WordPress

Joe Casabona

casabona.org @jcasabona

Who Am I?*

���2

Who Am I?*

���2

*Besides a handsome devil

���3

���3

���3

❖ Out December 16th

❖ Pre-Order at www.rwdwp.com

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

���4

Why?

���5

How?

���6

How?

���6

How?

���6

❖ EM-Based Breakpoints

❖ Breakpoints based on Content

❖ Consider Connection Speeds

Make it Work with WordPress

���7

RESS

���8

RESS

���8

RESS

���8

❖ My Plugin: rwdwp.com/22

❖ Jesse's: rwdwp.com/35

���9

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());

���10

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

Navigation

���11

Navigation

���11

Navigation

���11

❖ Do Nothing

❖ Hide n' Cry

❖ Jump to

Navigation

���11

❖ Do Nothing

❖ Hide n' Cry

❖ Jump to

❖ Select Box

❖ Responsive Nav

❖ Off-Canvas

���12

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

Responsive Images

���13

���14

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

���15

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

Testing

���16

Questions?

���17

Discount Code: RWDWP with you pre-order from peachpit.com