Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

http://bootstrapwp.rachelbaker.me

Slide 4

Slide 4 text

http://bakedWP.com

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

“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/

Slide 8

Slide 8 text

Text Everything is Relative.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

@media only screen and (max-width : 320px) and (orientation : portrait) { .box { background:red; } } Get Specific if Needed

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

“The most popular size is every size” -- Jeffery Zeldman The “Mobile First” philosophy.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Forces same text size when orientation changes from landscape to portrait Getting Along with Older Browsers.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Use a Preproccesor

Slide 23

Slide 23 text

Adjust Navigation.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Scale Images and Videos.

Slide 28

Slide 28 text

Scale Videos http://fitvidsjs.com/

Slide 29

Slide 29 text

Scale Images https://github.com/stowball/jQuery-rwdImages For a more robust solution check out the PHP solution: Adaptive Images (http:// adaptive-images.com/)

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Use Browser Tools

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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();

Slide 36

Slide 36 text

Thank you. Questions?