Upload
thad-allender
View
1.837
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Intro to responsive design in WordPress. Slides from Thad Allender's April 10, 2012 talk at WordPress DC at Fathom Creative in Washington, D.C.
Citation preview
OMGanother
ResponsiveDESIGN
just
talk
BACKSTORYthe
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
GraphPaperPress.com