wcchs: responsive design with wordpress
DESCRIPTION
Here's an updated version of my Responsive Design talk!TRANSCRIPT
![Page 2: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/2.jpg)
Who Am I?*
2
![Page 3: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/3.jpg)
Who Am I?*
2
*Besides a handsome devil
![Page 4: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/4.jpg)
3
![Page 5: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/5.jpg)
Responsive Web Design: The idea that your website will automatically adapt to the device it's being viewed on.
4
![Page 6: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/6.jpg)
Why?
5
![Page 7: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/7.jpg)
6
![Page 8: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/8.jpg)
How?
7
![Page 9: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/9.jpg)
How?
7
![Page 10: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/10.jpg)
How?
7
❖ EM-Based Breakpoints
❖ Breakpoints based on Content
❖ Consider Connection Speeds
![Page 11: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/11.jpg)
RESS
8
![Page 12: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/12.jpg)
RESS
8
![Page 14: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/14.jpg)
WURFL Database
9
![Page 15: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/15.jpg)
WURFL Database
9
❖ Device Detection
❖ Feature Detection
❖ Open Source
❖ Scientia Mobile
![Page 20: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/20.jpg)
wp_is_mobile()
11
![Page 21: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/21.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 22: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/22.jpg)
13
if(ISMOBILE){ //display one way }else{ //not mobile device //display different way }
![Page 23: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/23.jpg)
Always ask what’s best for the users!
14
![Page 24: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/24.jpg)
Responsive Workflow
15
![Page 25: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/25.jpg)
Responsive Workflow
15
![Page 26: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/26.jpg)
Responsive Workflow
15
❖ Sketch
❖ Code
❖ Test
❖ Repeat
![Page 27: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/27.jpg)
16
![Page 28: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/28.jpg)
Mobile First!
17
![Page 29: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/29.jpg)
I use the web completely differently on mobile devices.
!
- No One
18
![Page 30: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/30.jpg)
Design in the Browser
19
![Page 37: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/37.jpg)
General Notes for Page Weight
22
![Page 38: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/38.jpg)
Make it Work with WordPress
23
![Page 39: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/39.jpg)
Navigation
24
![Page 40: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/40.jpg)
Navigation
24
![Page 41: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/41.jpg)
Navigation
24
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to
![Page 42: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/42.jpg)
Navigation
24
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to
❖ Select Box
❖ Responsive Nav
❖ Off-Canvas
![Page 43: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/43.jpg)
25
<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 44: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/44.jpg)
26
<?php if(ISMOBILE){ ?> <nav id=“footer-nav”> <?php wp_nav_menu( array('menu' => ‘Main’)); ?> </nav> <?php } ?> !
![Page 45: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/45.jpg)
Comments!
27
![Page 46: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/46.jpg)
Comments!
27
![Page 47: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/47.jpg)
Comments!
27
❖ Incremental Loading
❖ Pagination
❖ Separate Page
![Page 48: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/48.jpg)
Responsive Images
28
![Page 50: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/50.jpg)
30
<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 51: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/51.jpg)
31
$(function(){ $(".post img").removeAttr("width").removeAttr("height"); });
![Page 52: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/52.jpg)
Images Are Hard!
32
![Page 53: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/53.jpg)
33
@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 54: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/54.jpg)
HTML5 Galleries!
34
add_theme_support( 'html5', array('gallery', 'caption' ) );
http://rwdwp.com/97
![Page 55: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/55.jpg)
Testing
35
![Page 56: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/56.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
36
![Page 57: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/57.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) 36
![Page 58: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/58.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) 36
![Page 59: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/59.jpg)
❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
Connectivity
37
![Page 60: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/60.jpg)
❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
37
![Page 61: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/61.jpg)
❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
37
![Page 62: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/62.jpg)
❖ The device’s native browser (Safari, Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
Browsers!
38
![Page 63: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/63.jpg)
❖ The device’s native browser (Safari, Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
38
![Page 64: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/64.jpg)
❖ The device’s native browser (Safari, Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
38
![Page 65: WCCHS: Responsive Design with WordPress](https://reader038.vdocuments.net/reader038/viewer/2022110306/5551b6c8b4c905ca7f8b4ae0/html5/thumbnails/65.jpg)
Questions?
39
Discount Code: RWDWP with you order from peachpit.com
Slides will be at casabona.org/events