WCCHS: Responsive Design with WordPress

  • View
    1.035

  • Download
    6

Embed Size (px)

DESCRIPTION

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

Text of WCCHS: Responsive Design with WordPress

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 whats best for the users! 14 24. Responsive Workow 15 25. Responsive Workow 15 26. Responsive Workow 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

Search related