Developing For All Screen Sizes

WordCamp Chicago 2012

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
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?