Post on 20-Feb-2021
transcript
Responsive Design with WordPress
Joe Casabona
casabona.org@jcasabona
http://casabona.orghttp://casabona.org
Who Am I?*
*Besides a handsome devil
Responsive Web Design: The idea that your website will automatically adapt to the device it's being viewed on.
Why?
How?
❖ EM-Based Breakpoints
❖ Breakpoints based on Content
❖ Consider Connection Speeds
RESS
❖ My Plugin: rwdwp.com/22
❖ Jesse's: rwdwp.com/35
http://rwdwp.com/35
WURFL Database
❖ Device Detection
❖ Feature Detection
❖ Open Source
❖ Scientia Mobile
rwdwp.com/20
http://rwdwp.com/20http://rwdwp.com/20http://rwdwp.com/20
wp_is_mobile()
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());
if(ISMOBILE){//display one way
}else{ //not mobile device//display different way
}
Responsive Workflow
❖ Sketch
❖ Code
❖ Test
❖ Repeat
Mobile First!
bradfrostweb.com
http://bradfrostweb.comhttp://bradfrostweb.comhttp://bradfrostweb.com
I use the web completely differently on mobile devices.
- No One
Design in the Browser
styletil.es
http://styletil.eshttp://styletil.eshttp://styletil.es
General Notes for Page Weight
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.
Make it Work with WordPress
Navigation
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to
❖ Select Box
❖ Responsive Nav
❖ Off-Canvas
Comments
❖ Incremental Loading (http://rwdwp.com/45)
❖ Paginated
❖ Separate Page (http://rwdwp.com/46)
http://rwdwp.com/45http://rwdwp.com/46
Responsive Images
picturefill.js
2.0 is out: http://rwdwp.com/96
http://rwdwp.com/96http://rwdwp.com/96http://rwdwp.com/96
Updating Plugin
❖ Replace Featured Images
❖ Check for element first, fallback to picturefill.js
$(function(){ $(".post img").removeAttr("width").removeAttr("height");});
Images Are Hard!
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { /* Retina-specific stuff here */}
rwdwp.com/95
http://rwdwp.com/95http://rwdwp.com/95http://rwdwp.com/95
Helpful Updates to Core
❖ HTML 5 Elements (figure, figcaption)
❖ Better Media Embeds (consider for themes)
HTML5 Galleries!
add_theme_support( 'html5', array('gallery', 'caption' ) );
http://rwdwp.com/97
http://rwdwp.com/97http://rwdwp.com/97http://rwdwp.com/97
Testing
❖ 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
❖ Broadband (wired or wifi connection)
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
Connectivity
❖ The device’s native browser (Safari, Browser, etc)
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
Browsers!
Questions?
Discount Code: RWDWP with you order from peachpit.com
Slides will be at casabona.org/events
http://peachpit.comhttp://peachpit.comhttp://casabona.org/eventshttp://casabona.org/eventshttp://casabona.org/events