RESPONSIVE WEB DESIGN
sara cannon / sara-cannon.com / follow @saracannon
WORDCAMP SAN FRANCISCO 2011
WORDCAMP SAN FRANCISCO
SARA CANNON
A B O U T M E
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
make.wordpress.org/ui
WORDCAMP SAN FRANCISCO
I N T H E B E G I N N I N G . . .
WORDCAMP SAN FRANCISCO
O V E R T I M E . . .
WORDCAMP SAN FRANCISCO
A W E S O M E R & A W E S O M E R . . .
WORDCAMP SAN FRANCISCO
S O M A N Y D E V I C E S A H H H H !
WORDCAMP SAN FRANCISCO
S O M A N Y D E V I C E S A H H H H !
WORDCAMP SAN FRANCISCO
S O M A N Y D E V I C E S A H H H H !
WORDCAMP SAN FRANCISCO
R E S P O N S I V E W E B D E S I G N
CONTENT.
WORDCAMP SAN FRANCISCO
R E S P O N S I V E W E B D E S I G N
WHAT DO WE DO?
B E R E S P O N S I V E !
We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more !exible, but more adaptive to the media that renders them.
- Ethan Marcotte
“
alistapart.com/articles/responsive-web-design
come on. be a smart little website.
RESPONSIVE WEB DESIGN
B E R E S P O N S I V E !
Responsive Design is the most exciting design idea on the web since the separation of presentation and content.
- Ian Stewart
“
B E R E S P O N S I V E !
twentyelevendemo.wordpress.com
B E R E S P O N S I V E !
Responsive Design has to do with being as canvas agnostic as possible, while offering a consistent and attractive experience on different devices and screen sizes. e web-canvas conforms the design, and, since the proportions and visual balances you set are only going to change, it makes sense to help them change with grace.
- Matías Ventura
“
B E R E S P O N S I V E !
twentyelevendemo.wordpress.com
B E R E S P O N S I V E !
hicksdesign.co.uk
B E R E S P O N S I V E !
foodsense.is
B E R E S P O N S I V E !
morehazards.com
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images
2. media queries3. lots of $nagling and crying
4. ???????5. pro$t
ADAPTIVE GRID SYSTEMS & IMAGES
responsive (responsible?) design
WORDCAMP SAN FRANCISCO
C S S G R I D S | B E R E S P O N S I V E !
960.gs blueprintcss.org
C S S G R I D S | B E R E S P O N S I V E !
C S S G R I D S | B E R E S P O N S I V E !
WORDCAMP SAN FRANCISCO
C S S G R I D S | B E R E S P O N S I V E !
!exible grids
alistapart.com/articles/!uidgrids
C S S G R I D S | B E R E S P O N S I V E !
cssgrid.net
C S S G R I D S | B E R E S P O N S I V E !
C S S G R I D S | B E R E S P O N S I V E !
lessframework.com
WORDCAMP SAN FRANCISCO
C S S G R I D S | B E R E S P O N S I V E !
%
C S S G R I D S | B E R E S P O N S I V E !
target ÷ context = result
940
720 220
76.5957447% 23.40425535%
100%
C S S G R I D S | B E R E S P O N S I V E !
responsivetwentyten.com
C S S G R I D S | B E R E S P O N S I V E !
B E R E S P O N S I V E !
twentyelevendemo.wordpress.com
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
!exible images
B E R E S P O N S I V E !
e toughest challenge in implementing the responsive bitswas !uid media. A lot of trial and error went into $nding the right CSS solution, but what's cool is we've been able to apply it to many more themes that we maintain on wordpress.com.
- Lance Willett
“
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
!exible media
netmagazine.com/tutorials/create-!uid-width-videos
by Chris Coyier
WORDCAMP SAN FRANCISCO
T H E M I N G A N D M O B I L E
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images
2. media queries3. lots of $nagling and crying
4. ???????5. pro$t
MEDIA QUERIES
whoa, this is css?
WORDCAMP SAN FRANCISCO
M E D I A Q U E R I E S
IT’S KIND OF LIKE CONDITIONAL COMMENTS...
...BUT WITHIN CSS!
WORDCAMP SAN FRANCISCO
M E D I A Q U E R I E S
@MEDIA
M E D I A Q U E R I E S
WORDCAMP SAN FRANCISCO
M E D I A Q U E R I E S
CSS3-MEDIAQUERIES.JS
code.google.com/p/css3-mediaqueries-js
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries
WORDCAMP SAN FRANCISCO
R E S O U R C E S O N M E D I A Q U E R I E S
M E D I A Q U E R I E S
w3.org/TR/css3-mediaqueries
smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website
css-tricks.com/css-media-queries
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
RESPONSIVE WEB DESIGNmust see articles/resources
B E R E S P O N S I V E !
books.alistapart.com/products/responsive-web-design
B E R E S P O N S I V E !
alistapart.com/articles/responsive-web-design
B E R E S P O N S I V E !
alistapart.com/articles/!uidgrids
B E R E S P O N S I V E !
smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design
B E R E S P O N S I V E !
unstoppablerobotninja.com/entry/!uid-images/
B E R E S P O N S I V E !
smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies
B E R E S P O N S I V E !
mediaqueri.es
WORDCAMP SAN FRANCISCO
B E R E S P O N S I V E !
BUT I WANT TO BE RESPONSIVEright now!!!
RESPONSIVE WORDPRESS THEMES
I CAN HAS RESPONSIVE SITE NOW?!!
R E S P O N S I V E W O R D P R E S S T H E M E S
twentyelevendemo.wordpress.com
R E S P O N S I V E W O R D P R E S S T H E M E S
chateaudemo.wordpress.com
R E S P O N S I V E W O R D P R E S S T H E M E S
quintusdemo.wordpress.com
R E S P O N S I V E W O R D P R E S S T H E M E S
reactdemo.wordpress.com
R E S P O N S I V E W O R D P R E S S T H E M E S
basicmathsdemo.wordpress.com
R E S P O N S I V E W O R D P R E S S T H E M E S
shelfdemo.wordpress.com
WORDCAMP SAN FRANCISCO
T Y P O G R A P H Y O N T H E W E B
Always.
Check All Browsers
Check Your Devices
WORDCAMP SAN FRANCISCO
T H E M I N G A N D M O B I L E
CONTENT.
ank You!
RESPONSIVE WEB DESIGN
sara cannon / sara-cannon.com / @saracannonslideshare.net/saracannon
