responsive design with wordpress (wcphx)
DESCRIPTION
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: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/1.jpg)
Responsive Design with WordPress
Joe Casabona
casabona.org@jcasabon
a
![Page 2: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/2.jpg)
Who Am I?*
2
*Besides a handsome devil
![Page 3: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/3.jpg)
3
![Page 4: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/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: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/5.jpg)
Why?
5
![Page 6: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/6.jpg)
How?
6
❖EM-Based Breakpoints
❖Breakpoints based on Content
❖Consider Connection Speeds
![Page 8: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/8.jpg)
WURFL Database
8
❖Device Detection
❖Feature Detection
❖Open Source
❖Scientia Mobile
![Page 10: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/10.jpg)
wp_is_mobile()
10
![Page 11: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/11.jpg)
11
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 12: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/12.jpg)
12
if(ISMOBILE){//display one way
}else{ //not mobile device//display different way
}
![Page 13: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/13.jpg)
Always ask what’s best for
the users!
13
![Page 14: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/14.jpg)
Responsive Workflow
14
❖Sketch
❖Code
❖Test
❖Repeat
![Page 15: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/15.jpg)
Mobile First!
15
![Page 16: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/16.jpg)
I use the web completely differently on mobile devices.
- No One
16
![Page 17: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/17.jpg)
Design in the Browser
17
![Page 18: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/18.jpg)
The next era in designing for the web is a more advanced, mature and intelligent one. It’s about streamlining, semantics, great markup, responsive or fluid design, great typography, web fonts, content first, rapid prototyping and advanced javascript. My argument is that html, CSS and the browser tools we need have all advanced us past the point of needing Photoshop.
18
- Josh Long (rwdwp.com/94)
![Page 21: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/21.jpg)
General Notes for Page Weight
21
![Page 22: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/22.jpg)
Make it Work with
WordPress
22
![Page 23: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/23.jpg)
Navigation
23
❖Do Nothing
❖Hide n' Cry
❖ Jump to
❖Select Box
❖Responsive Nav
❖Off-Canvas
![Page 24: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/24.jpg)
24
<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 25: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/25.jpg)
25
<?php if(ISMOBILE){ ?><nav id=“footer-nav”>
<?php wp_nav_menu( array('menu' => ‘Main’)); ?>
</nav><?php } ?>
![Page 26: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/26.jpg)
Comments!
26
❖ Incremental Loading
❖Pagination
❖Separate Page
![Page 27: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/27.jpg)
Responsive Images
27
![Page 28: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/28.jpg)
picturefill.js
28
![Page 29: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/29.jpg)
29
<span data-picture data-alt="A photo of a thing"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<noscript> <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </span>
![Page 30: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/30.jpg)
30
$(function(){ $(“.post img).removeAttr(“width”).removeAttribute(“height”);
}
![Page 31: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/31.jpg)
Images Are Hard!
31
![Page 32: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/32.jpg)
32
@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 33: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/33.jpg)
Testing
33
![Page 34: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/34.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)
❖ For fun: a Kindle or some other eReader
Devices
34
![Page 35: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/35.jpg)
❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
Connectivity
35
![Page 36: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/36.jpg)
❖ The device’s native browser (Safari, Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
Browsers!
36
![Page 37: Responsive Design with WordPress (WCPHX)](https://reader038.vdocument.in/reader038/viewer/2022110118/5551b6d6b4c905ca7f8b4ae2/html5/thumbnails/37.jpg)
Questions?
37
Discount Code: RWDWP with you order from peachpit.com
Slides will be at casabona.org/events