Developing For All Screen Sizes

Transcript

1. Developing for all screen sizes http://www.flickr.com/photos/kalexanderson/7698971490/

2. Hi. My name is Rachel Baker. http://www.flickr.com/photos/isherwoodchris/7389146556/ @rachelbaker

3. http://bootstrapwp.rachelbaker.me

4. http://bakedWP.com

5. Relax. http://www.flickr.com/photos/kalexanderson/7741607008/

6. What screen size can you target? http://www.flickr.com/photos/brad_frost/7387823392/

7. “Good on-screen design targeting this caliber of display cannot embrace

   the pixel...” - John Gruber http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

8. Text Everything is Relative.

9. Mastering Media Queries http://www.flickr.com/photos/simononly/4926314162/

10. Know Device Sizes http://nmsdvid.com/snippets/#

11. <meta name="viewport" content="width=device- width"> <meta name="viewport" content="width=device- width, initial- scale=1.0">

    Forces same text size when orientation changes from landscape to portrait, BUT it leads to another bug. Mobile Friendly Meta

12. @media (min-width : 480px) { .box { background:yellow; } }

    @media (max-width : 320px) { .box { background:red; } } Understand Min & Max Widths Maximum width must be LESS THAN or equal to 320px Minimum width must be GREATER THAN or equal to 480px
13. None

14. @media only screen and (max-width : 320px) and (orientation :

    portrait) { .box { background:red; } } Get Specific if Needed

15. @media (max-width: 640px) { } @media (max-width: 1024px) { }

    @media (min-width: 1400px) { } Otherwise, Keep it Simple

16. @media only screen and (- webkit-min-device-pixel-ratio: 1.5), only screen and

    (min--moz- device-pixel-ratio: 1.5), only screen and (min-device- pixel-ratio: 1.5) { /* Image Styles */ } But Don’t Forget About Retina Graphics

17. “The most popular size is every size” -- Jeffery Zeldman

    The “Mobile First” philosophy.

18. Take Command with jQuery http://www.flickr.com/photos/bobsfever/6741716051/

19. Fix Mobile Safari Zoom Bug See Demo: http://scottjehl.github.com/iOS- Orientationchange-Fix/

20. Forces same text size when orientation changes from landscape to

    portrait Getting Along with Older Browsers.

21. Forces same text size when orientation changes from landscape to

    portrait Respond.js Does not work with CSS imports Will have to SPLIT UP YOUR CSS Only detects min & max width rules Must be loaded from current domain

22. Use a Preproccesor

23. Adjust Navigation.

24. Forces same text size when orientation changes from landscape to

    portrait TinyNav.js Does not work with CSS imports Only detects min & max width rules Must be loaded from current domain

25. Forces same text size when orientation changes from landscape to

    portrait HorizontalNav.js Does not work with CSS imports Only detects min & max width rules Must be loaded from current domain

26. 18 19 20 21 22 23 24 jQuery(document).ready(function($) { //

    loading responsive nav $('#access .menu').Touchdown(); // media query event handler if (matchMedia) { var responsiveViewport = window.matchMedia("(min-width: 769px)"); responsiveViewport.addListener(WidthChange); WidthChange(responsiveViewport); } // media query change function WidthChange(responsiveViewport) { if (responsiveViewport.matches) { // window width is at least 769px $('#access .menu').horizontalNav({}); /* load anything else you like */ } else { // window width is less than 769px } } })(window.jQuery); Conditionally Use Scripts https://gist.github.com/3453300

27. Scale Images and Videos.

28. Scale Videos http://fitvidsjs.com/

29. Scale Images https://github.com/stowball/jQuery-rwdImages For a more robust solution check out

    the PHP solution: Adaptive Images (http:// adaptive-images.com/)

30. Serve High Resolution Images to Retina Displays http://retinajs.com/

31. Testing. http://www.flickr.com/photos/activars/5251722610/

32. Use Browser Tools

33. Matt Kersley’s Testing Tool Also check out Responsinator http://www.responsinator.com/ http://mattkersley.com/responsive/

34. http://www.flickr.com/photos/activars/5251722610/ When All Else Fails. http://www.flickr.com/photos/fhke/3342905901/

35. Load a Completely Different Theme! https://gist.github.com/3454745 class UnpluggedMobile{ var $unplugged;

    function UnpluggedMobile(){ $this->unplugged = false; add_action('plugins_loaded',array(&$this,'detectunplugged')); add_filter('stylesheet',array(&$this,'get_stylesheet')); add_filter('template',array(&$this,'get_template')); } function detectunplugged($query){ if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me| java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|sagem|sharp|sie-|smartphone|sony|symbian|t-mobile|telus|up \.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT'])) { $this->unplugged = true; } } function get_stylesheet($stylesheet) { if($this->unplugged){ return 'unplugged-mobile-theme'; }else{ return $stylesheet; } } function get_template($template) { if($this->unplugged){ return 'unplugged-mobile-theme'; }else{ return $template; } } } $wp_unplugged = new UnpluggedMobile();

36. Thank you. Questions?