Responsive Design in WordPress

OMGanother

ResponsiveDESIGN

just

talk

BACKSTORYthe

GraphPaperPress.com

What We DoThemesPluginsHosting

EducationSupport

2004let’s rewind

2007fast forward

VISUALIZATIONfree WordPress theme

JOBStwo full-time

NO LIFEI had

I QUIT.so

STARTEDthat’s when things

EXAMPLESa few

FUNDAMENTALSthree

1Flexible Grid

700 / 1000 = .70 (70%)

700px

1000px

300px

(70%) (30%)

(100%)

target / context = result

Fluid or Fixed Width?fluid fixed

•scales horizontally•fits all screen sizes•use width: 100%

•scales to 1000px•fits all screen sizes but stops at 1000px•use max-width: 1000px

AUDIENCEknow your

2FlexibleImages&

Media

img { max-width: 100%; height: auto;}

img { } img { max-width: 100% }

blowout! woot!

VIDEOS & EMBEDSresponsive

video,embed,iframe { max-width: 100%; height: auto;}

3Media Queries

HUH?

Media Queries in CSS3 looks at the capability of the device loading a webpage and checks for:

★Width and height (of the browser window)★Device width and height★Orientation – ( landscape or portrait)★Resolution

If the user has a browser that supports media queries then we can write CSS specifically for certain situations.

@media screenand (max-width: 850px) { body { background: red }}

Added to bottom of stylesheet (style.css)

@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}

#primary, #secondary { width:100%; float: none; margin: 2em 0 0;}

Media Queries for Standard Devices

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

ALL TOGETHERnow

NAVIGATIONresponsive

MENU HELLwelcome to

MENU HELL TO DROPDOWN

Convert Menu to a dropdown for small

screens

http://css-tricks.com/convert-menu-to-dropdown/

BACKGROUNDSresponsive

background-size: 100% auto;

large screens

max-width: 850px with no background-size: 100% auto;

max-width: 850px with background-size: 100% auto;

RETINAdisplay

Retina Display has 4 times the number of pixels than previous

iPhones and many other smart phone

screens currently on the market.

1. Make two versions of the image2. Increase the second by 200%3. Define your CSS4. Use Media Queries to swap high-res image

@media screen and (-webkit-min-device-pixel-ratio: 1.5) { .i { background: url(images/pic-2x.png); background-size:64px 12px; }}

SERVER SIDEwhat about

mobile detection

$is_iphone

$is_mobile

http://wordpress.org/extend/plugins/mobile-detector/

wp_is_mobile()

more core support for mobile in 3.4 & 3.5

TOOLSsweet

iOS Simulator+

iWebInspector

RESPONSIVE SITE CHECKER

http://mattkersley.com/responsive/

go forth and do

@thadallenderinfo@GraphPaperPress.com

GraphPaperPress.com