the dean wants to make this wordpress site responsive
DESCRIPTION
Suppose the dean comes to you and says I need this website to look good on tablets and phones. What do you do? I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall.TRANSCRIPT
![Page 1: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/1.jpg)
The Dean wants to Make this WordPress Site
ResponsiveJoe Casabona
casabona.org @jcasabona
![Page 2: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/2.jpg)
Who Am I?*
2
*Besides a handsome devil
![Page 3: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/3.jpg)
3
![Page 4: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/4.jpg)
Responsive Web Design: The idea that your website will automatically adapt to the device it's being viewed on.
4
![Page 5: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/5.jpg)
Why?
5
![Page 6: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/6.jpg)
6
![Page 7: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/7.jpg)
How?
7
❖ EM-Based Breakpoints
❖ Breakpoints based on Content
❖ Consider Connection Speeds
![Page 9: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/9.jpg)
WURFL Database
9
❖ Device Detection
❖ Feature Detection
❖ Open Source
❖ Scientia Mobile
![Page 11: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/11.jpg)
wp_is_mobile()
11
![Page 12: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/12.jpg)
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());
![Page 13: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/13.jpg)
13
if(ISMOBILE){ //display one way }else{ //not mobile device //display different way }
![Page 14: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/14.jpg)
Always ask what’s best for the users!
14
![Page 15: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/15.jpg)
Responsive Workflow
15
❖ Sketch
❖ Code
❖ Test
❖ Repeat
![Page 16: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/16.jpg)
16
![Page 17: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/17.jpg)
Mobile First!
17
![Page 18: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/18.jpg)
I use the web completely differently on mobile devices.
!
- No One
18
![Page 19: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/19.jpg)
Design in the Browser
19
![Page 22: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/22.jpg)
General Notes for Page Weight
22
![Page 23: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/23.jpg)
Propose a New Design First!
23
![Page 24: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/24.jpg)
When You Can't Use a new Design
❖ Do a Content Audit
❖ Ask What’s the most important
❖ (to your users)
❖ Start Shrinking
❖ Test…a lot.
24
![Page 25: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/25.jpg)
Make it Work with WordPress
25
![Page 26: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/26.jpg)
Navigation
26
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to
❖ Select Box
❖ Responsive Nav
❖ Off-Canvas
![Page 27: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/27.jpg)
27
<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>
![Page 28: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/28.jpg)
28
<?php if(ISMOBILE){ ?> <nav id=“footer-nav”> <?php wp_nav_menu( array('menu' => ‘Main’)); ?> </nav> <?php } ?> !
![Page 29: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/29.jpg)
Responsive Images
29
![Page 31: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/31.jpg)
31
<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>
![Page 32: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/32.jpg)
32
$(function(){ $(".post img").removeAttr("width").removeAttr("height"); });
![Page 33: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/33.jpg)
Images Are Hard!
33
![Page 34: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/34.jpg)
34
@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
![Page 35: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/35.jpg)
HTML5 Galleries!
35
add_theme_support( 'html5', array('gallery', 'caption' ) );
http://rwdwp.com/97
![Page 36: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/36.jpg)
Testing
36
![Page 37: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/37.jpg)
❖ 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
37
![Page 38: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/38.jpg)
❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
Connectivity
38
![Page 39: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/39.jpg)
❖ The device’s native browser (Safari, Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
Browsers!
39
![Page 40: The Dean wants to Make this WordPress Site Responsive](https://reader035.vdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/40.jpg)
Questions?
40
Discount Code: RWDWP with you order from peachpit.com
Slides will be at casabona.org/events