WCCHS: Responsive Design with WordPress

2,310 views

Published on

Here's an updated version of my Responsive Design talk!

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

No Downloads
Views
Total views
2,310
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WCCHS: Responsive Design with WordPress

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

×