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

Responsive Design with WordPress

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Responsive Design with WordPress

Responsive Design with WordPress

Joe Casabona

casabona.org @jcasabona

Page 2: Responsive Design with WordPress

Who Am I?*

���2

Page 3: Responsive Design with WordPress

Who Am I?*

���2

*Besides a handsome devil

Page 4: Responsive Design with WordPress

���3

Page 5: Responsive Design with WordPress

���3

Page 6: Responsive Design with WordPress

���3

❖ Out December 16th

❖ Pre-Order at www.rwdwp.com

Page 7: Responsive Design with WordPress

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

���4

Page 8: Responsive Design with WordPress

Why?

���5

Page 9: Responsive Design with WordPress

How?

���6

Page 10: Responsive Design with WordPress

How?

���6

Page 11: Responsive Design with WordPress

How?

���6

❖ EM-Based Breakpoints

❖ Breakpoints based on Content

❖ Consider Connection Speeds

Page 12: Responsive Design with WordPress

Make it Work with WordPress

���7

Page 13: Responsive Design with WordPress

RESS

���8

Page 14: Responsive Design with WordPress

RESS

���8

Page 15: Responsive Design with WordPress

RESS

���8

❖ My Plugin: rwdwp.com/22

❖ Jesse's: rwdwp.com/35

Page 16: Responsive Design with WordPress

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

Page 17: Responsive Design with WordPress

���10

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

Page 18: Responsive Design with WordPress

Navigation

���11

Page 19: Responsive Design with WordPress

Navigation

���11

Page 20: Responsive Design with WordPress

Navigation

���11

❖ Do Nothing

❖ Hide n' Cry

❖ Jump to

Page 21: Responsive Design with WordPress

Navigation

���11

❖ Do Nothing

❖ Hide n' Cry

❖ Jump to

❖ Select Box

❖ Responsive Nav

❖ Off-Canvas

Page 22: Responsive Design with WordPress

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

Page 23: Responsive Design with WordPress

Responsive Images

���13

Page 24: Responsive Design with WordPress

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

Page 25: Responsive Design with WordPress

���15

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

Page 26: Responsive Design with WordPress

Testing

���16

Page 27: Responsive Design with WordPress

Questions?

���17

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