65
Responsive Design with WordPress Joe Casabona casabona.org @jcasabona

WCCHS: Responsive Design with WordPress

Embed Size (px)

DESCRIPTION

Here's an updated version of my Responsive Design talk!

Citation preview

Page 1: WCCHS: Responsive Design with WordPress

Responsive Design with WordPress

Joe Casabona

casabona.org @jcasabona

Page 2: WCCHS: Responsive Design with WordPress

Who Am I?*

2

Page 3: WCCHS: Responsive Design with WordPress

Who Am I?*

2

*Besides a handsome devil

Page 4: WCCHS: Responsive Design with WordPress

3

Page 5: WCCHS: Responsive Design with WordPress

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

Why?

5

Page 7: WCCHS: Responsive Design with WordPress

6

Page 8: WCCHS: Responsive Design with WordPress

How?

7

Page 9: WCCHS: Responsive Design with WordPress

How?

7

Page 10: WCCHS: Responsive Design with WordPress

How?

7

❖ EM-Based Breakpoints

❖ Breakpoints based on Content

❖ Consider Connection Speeds

Page 11: WCCHS: Responsive Design with WordPress

RESS

8

Page 12: WCCHS: Responsive Design with WordPress

RESS

8

Page 13: WCCHS: Responsive Design with WordPress

RESS

8

❖ My Plugin: rwdwp.com/22

❖ Jesse's: rwdwp.com/35

Page 14: WCCHS: Responsive Design with WordPress

WURFL Database

9

Page 15: WCCHS: Responsive Design with WordPress

WURFL Database

9

❖ Device Detection

❖ Feature Detection

❖ Open Source

❖ Scientia Mobile

Page 16: WCCHS: Responsive Design with WordPress

Scientia Mobile

10 rwdwp.com/20

Page 17: WCCHS: Responsive Design with WordPress

10 rwdwp.com/20

Page 18: WCCHS: Responsive Design with WordPress

10 rwdwp.com/20

Page 19: WCCHS: Responsive Design with WordPress

10 rwdwp.com/20

Page 20: WCCHS: Responsive Design with WordPress

wp_is_mobile()

11

Page 21: WCCHS: Responsive Design with WordPress

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

13

if(ISMOBILE){ //display one way }else{ //not mobile device //display different way }

Page 23: WCCHS: Responsive Design with WordPress

Always ask what’s best for the users!

14

Page 24: WCCHS: Responsive Design with WordPress

Responsive Workflow

15

Page 25: WCCHS: Responsive Design with WordPress

Responsive Workflow

15

Page 26: WCCHS: Responsive Design with WordPress

Responsive Workflow

15

❖ Sketch

❖ Code

❖ Test

❖ Repeat

Page 27: WCCHS: Responsive Design with WordPress

16

Page 28: WCCHS: Responsive Design with WordPress

Mobile First!

17

Page 29: WCCHS: Responsive Design with WordPress

I use the web completely differently on mobile devices.

!

- No One

18

Page 30: WCCHS: Responsive Design with WordPress

Design in the Browser

19

Page 31: WCCHS: Responsive Design with WordPress

Expand Out!

20bradfrostweb.com

Page 32: WCCHS: Responsive Design with WordPress

20bradfrostweb.com

Page 33: WCCHS: Responsive Design with WordPress

20bradfrostweb.com

Page 34: WCCHS: Responsive Design with WordPress

Style Tiles

21 styletil.es

Page 35: WCCHS: Responsive Design with WordPress

21 styletil.es

Page 36: WCCHS: Responsive Design with WordPress

21 styletil.es

Page 37: WCCHS: Responsive Design with WordPress

General Notes for Page Weight

22

Page 38: WCCHS: Responsive Design with WordPress

Make it Work with WordPress

23

Page 39: WCCHS: Responsive Design with WordPress

Navigation

24

Page 40: WCCHS: Responsive Design with WordPress

Navigation

24

Page 41: WCCHS: Responsive Design with WordPress

Navigation

24

❖ Do Nothing

❖ Hide n' Cry

❖ Jump to

Page 42: WCCHS: Responsive Design with WordPress

Navigation

24

❖ Do Nothing

❖ Hide n' Cry

❖ Jump to

❖ Select Box

❖ Responsive Nav

❖ Off-Canvas

Page 43: WCCHS: Responsive Design with WordPress

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

26

<?php if(ISMOBILE){ ?> <nav id=“footer-nav”> <?php wp_nav_menu( array('menu' => ‘Main’)); ?> </nav> <?php } ?> !

Page 45: WCCHS: Responsive Design with WordPress

Comments!

27

Page 46: WCCHS: Responsive Design with WordPress

Comments!

27

Page 47: WCCHS: Responsive Design with WordPress

Comments!

27

❖ Incremental Loading

❖ Pagination

❖ Separate Page

Page 48: WCCHS: Responsive Design with WordPress

Responsive Images

28

Page 49: WCCHS: Responsive Design with WordPress

picturefill.js

29

2.0 Just Released: http://rwdwp.com/96

Page 50: WCCHS: Responsive Design with WordPress

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

31

$(function(){ $(".post img").removeAttr("width").removeAttr("height"); });

Page 52: WCCHS: Responsive Design with WordPress

Images Are Hard!

32

Page 53: WCCHS: Responsive Design with WordPress

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

HTML5 Galleries!

34

add_theme_support( 'html5', array('gallery', 'caption' ) );

http://rwdwp.com/97

Page 55: WCCHS: Responsive Design with WordPress

Testing

35

Page 56: WCCHS: Responsive Design with WordPress

❖ 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

❖ 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

❖ 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

❖ 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

❖ 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

❖ 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

❖ 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

❖ 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

❖ 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

Questions?

39

Discount Code: RWDWP with you order from peachpit.com

Slides will be at casabona.org/events