The Dean wants to Make this WordPress Site Responsive

561 views

Published on

Suppose the dean comes to you and says I need this website to look good on tablets and phones. What do you do? I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
561
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Dean wants to Make this WordPress Site Responsive

  1. 1. The Dean wants to Make this WordPress Site Responsive Joe Casabona casabona.org @jcasabona
  2. 2. Who Am I?* 2 *Besides a handsome devil
  3. 3. 3
  4. 4. Responsive Web Design: The idea that your website will automatically adapt to the device it's being viewed on. 4
  5. 5. Why? 5
  6. 6. 6
  7. 7. How? 7 ❖ EM-Based Breakpoints ❖ Breakpoints based 
 on Content ❖ Consider 
 Connection Speeds
  8. 8. RESS 8 ❖ My Plugin: rwdwp.com/22 ❖ Jesse's: rwdwp.com/35
  9. 9. WURFL Database 9 ❖ Device Detection ❖ Feature Detection ❖ Open Source ❖ Scientia Mobile
  10. 10. 10 rwdwp.com/20
  11. 11. wp_is_mobile() 11
  12. 12. 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());
  13. 13. 13 if(ISMOBILE){ //display one way }else{ //not mobile device //display different way }
  14. 14. Always ask what’s best for the users! 14
  15. 15. Responsive Workflow 15 ❖ Sketch ❖ Code ❖ Test ❖ Repeat
  16. 16. 16
  17. 17. Mobile First! 17
  18. 18. I use the web completely differently on mobile devices. ! - No One 18
  19. 19. Design in the Browser 19
  20. 20. 20 bradfrostweb.com
  21. 21. 21 styletil.es
  22. 22. General Notes for Page Weight 22
  23. 23. Propose a New Design First! 23
  24. 24. When You Can't Use a new Design ❖ Do a Content Audit ❖ Ask What’s the most important ❖ (to your users) ❖ Start Shrinking ❖ Test…a lot. 24
  25. 25. Make it Work with WordPress 25
  26. 26. Navigation 26 ❖ Do Nothing ❖ Hide n' Cry ❖ Jump to ❖ Select Box ❖ Responsive Nav ❖ Off-Canvas
  27. 27. 27 <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>
  28. 28. 28 <?php if(ISMOBILE){ ?> <nav id=“footer-nav”> <?php wp_nav_menu( array('menu' => ‘Main’)); ?> </nav> <?php } ?> !
  29. 29. Responsive Images 29
  30. 30. picturefill.js 30 2.0 Just Released: http://rwdwp.com/96
  31. 31. 31 <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>
  32. 32. 32 $(function(){ $(".post img").removeAttr("width").removeAttr("height"); });
  33. 33. Images Are Hard! 33
  34. 34. 34 @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
  35. 35. HTML5 Galleries! 35 add_theme_support( 'html5', array('gallery', 'caption' ) ); http://rwdwp.com/97
  36. 36. Testing 36
  37. 37. ❖ 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 37
  38. 38. ❖ Broadband (wired or wifi connection) ❖ 4G (on multiple carriers if possible) ❖ 3G (on multiple carriers if possible) ❖ 4G and 3G while traveling Connectivity 38
  39. 39. ❖ The device’s native browser (Safari, Browser, etc) ❖ Chrome on Android and iOS ❖ Mobile Opera ❖ Dolphin ❖ Mobile Firefox Browsers! 39
  40. 40. Questions? 40 Discount Code: RWDWP with you order from peachpit.com Slides will be at casabona.org/events

×