The Dean wants to Make this WordPress Site Responsive
-
Upload
joe-casabona -
Category
Technology
-
view
113 -
download
0
description
Transcript of The Dean wants to Make this WordPress Site Responsive
![Page 1: The Dean wants to Make this WordPress Site Responsive](https://reader035.fdocuments.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.fdocuments.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.fdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/3.jpg)
3
![Page 4: The Dean wants to Make this WordPress Site Responsive](https://reader035.fdocuments.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.fdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/5.jpg)
Why?
5
![Page 6: The Dean wants to Make this WordPress Site Responsive](https://reader035.fdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/6.jpg)
6
![Page 7: The Dean wants to Make this WordPress Site Responsive](https://reader035.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/16.jpg)
16
![Page 17: The Dean wants to Make this WordPress Site Responsive](https://reader035.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.net/reader035/viewer/2022062703/5551b667b4c905bb708b4eb7/html5/thumbnails/36.jpg)
Testing
36
![Page 37: The Dean wants to Make this WordPress Site Responsive](https://reader035.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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