Responsive Design with WordPress
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Design with WordPress

  • 1,885 views
Uploaded on

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

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,885
On Slideshare
1,870
From Embeds
15
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 15

https://twitter.com 15

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 $client>getDeviceCapability('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