Your SlideShare is downloading. ×
WCCHS: Responsive Design with WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WCCHS: Responsive Design with WordPress

997

Published on

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

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
997
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

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

×