going responsive with wordpress
DESCRIPTION
Responsive Web Design (RWD) with WordPress, tools and frameworks to make the effort easy.TRANSCRIPT
Going Responsivewith WordPress
@jrcryerjamescryer.com
Responsive Web Design: Definition
•Flexible grids
•Flexible media (images and video)
•Media queries
A responsive design is composed of three distinct parts:
Making sites device agnostic
Flexible Grids
•Use formula:
•Example
•Think in pixels percentages
Flexible grids expand and contract to fit the context in which they are viewed
target / context = result
900 / 960 = 0.9375
Flexible Grids
#sidebar { width: 33.333333333333%; }
Flexible Media
•Technique:
•Internet Explorer 6 or below:
Add constraints to prevent images overflowing their containers
img { max-width: 100%; height: auto;}
img { width: 100%;}
Flexible Media (cont...)
•Technique:
•Also applies to <video />, <embed /> and <object />
Use of overflow, instead of scaling
.container { overflow: hidden;}
img { max-width: auto;}
Media Queries
•Example:
“A robust mechanism for identifying not only types of media, but inspection of physical characteristics of the devices”
@media screen and (min-width: 1024px) { body { font-size: 100%; }}
<link href=”desktop.css” rel=”stylesheet” media=”screen and (min-width: 1024px)” />
Media Queries
• device-width
• device-height
• width
• height
• orientation
• and more...
Available features:
Media Queries
•Example:
Setting viewport size
<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />
Breakpoints
@media screen and (min-width: 480px) { ...}
@media screen and (min-width: 600px) { ...}
@media screen and (min-width: 768px) { ...}
@media screen and (min-width: 1024px) { ...}
Side note...
•Icon fonts
•SVG for logos with PNG fallback
•Web fonts
Also consider:
Responsive Design in Wordpress
Frameworks
•Bones
•Reverie
•Skeleton
Available frameworks to get started:
Alternatively, roll your own...
Flexible Media
/** * RESPONSIVE IMAGE FUNCTIONS */ add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); function remove_thumbnail_dimensions( $html ) { return preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );}
Preventing WordPress from adding width and height:
Going it alone...
•Take a mobile first approach
•Use a CSS preprocessor - LESS or SASS
•Start simple
Responsive Plugins
•Responsive Video Light
•SlideDeck 2
•Respond.js
•Simple Responsive Images
•Smooth Slider
Other tools
•Twitter’s Bootstrap
•ZURB’s Foundation
•IcoMoon
•Fontello
•Modernizr
Live Demo
LIVE DEMO
Questions?
Examples from today
https://gist.github.com/jrcryer
Further info?