Embed Size (px)
DESCRIPTION
Your site is about your content. With mobile devices, iPads, phones, gaming consols, etc: people can access your content many different ways and formats. How can we maintain some control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform?Enter Responsive Web Design. A term coined by Ethan Marcotte. Many experts aren’t leaning on one static design anymore, but on structured content that adapts to its given environment.We are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods that you can implement to make your WordPress theme “Responsive”
Citation preview
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
