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”
11. BE RESPONSIVE!
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
16. BE RESPONSIVE!
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
23. BE RESPONSIVE!
HOW DO WE BECOME RESPONSIVE?
1. adaptive grid systems & images
2. media queries
3. lots of nagling and crying
4. ???????
5. pro t
WORDCAMP SAN FRANCISCO
39. BE RESPONSIVE!
e toughest challenge in
“ implementing the responsive bits
was 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
43. BE RESPONSIVE!
HOW DO WE BECOME RESPONSIVE?
1. adaptive grid systems & images
2. media queries
3. lots of nagling and crying
4. ???????
5. pro t
WORDCAMP SAN FRANCISCO
48. MEDIA QUERIES
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
49. MEDIA QUERIES
RESOURCES ON MEDIA QUERIES
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
50. BE RESPONSIVE!
RESPONSIVE WEB DESIGN
must see articles/resources
WORDCAMP SAN FRANCISCO