Upload
joe-casabona
View
1.788
Download
6
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
Who Am I?*
���2
Who Am I?*
���2
*Besides a handsome devil
���3
���3
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
���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