Post on 15-May-2015
description
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
@thadallenderinfo@GraphPaperPress.com
GraphPaperPress.com