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”

1. RESPONSIVE WEB DESIGN
sara cannon / sara-cannon.com / follow @saracannon
WORDCAMP SAN FRANCISCO 2011

2. ABOUT ME
SARA CANNON
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
make.wordpress.org/ui
WORDCAMP SAN FRANCISCO

3. IN THE BEGINNING...
WORDCAMP SAN FRANCISCO

4. OVER TIME...
WORDCAMP SAN FRANCISCO

5. AWESOMER & AWESOMER...
WORDCAMP SAN FRANCISCO

6. SO MANY DEVICES AHHHH!
WORDCAMP SAN FRANCISCO

7. SO MANY DEVICES AHHHH!
WORDCAMP SAN FRANCISCO

8. SO MANY DEVICES AHHHH!
WORDCAMP SAN FRANCISCO

9. RESPONSIVE WEB DESIGN
CONTENT.
WORDCAMP SAN FRANCISCO

10. RESPONSIVE WEB DESIGN
WHAT DO WE DO?
WORDCAMP SAN FRANCISCO

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

12. RESPONSIVE WEB DESIGN
come on. be a smart little website.

13. BE RESPONSIVE!
Responsive Design is the
“ most exciting design idea
on the web since the
separation of presentation
and content.
- Ian Stewart

14. BE RESPONSIVE!
twentyelevendemo.wordpress.com

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

17. BE RESPONSIVE!
twentyelevendemo.wordpress.com

19. BE RESPONSIVE!
hicksdesign.co.uk

21. BE RESPONSIVE!
foodsense.is

22. BE RESPONSIVE!
morehazards.com

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

24. ADAPTIVE GRID SYSTEMS & IMAGES
responsive (responsible?) design

25. CSS GRIDS | BE RESPONSIVE!
960.gs blueprintcss.org
WORDCAMP SAN FRANCISCO

26. CSS GRIDS | BE RESPONSIVE!

27. CSS GRIDS | BE RESPONSIVE!

28. CSS GRIDS | BE RESPONSIVE!
exible grids
alistapart.com/articles/ uidgrids
WORDCAMP SAN FRANCISCO

29. CSS GRIDS | BE RESPONSIVE!
cssgrid.net

30. CSS GRIDS | BE RESPONSIVE!

31. CSS GRIDS | BE RESPONSIVE!
lessframework.com

32. CSS GRIDS | BE RESPONSIVE!
%
WORDCAMP SAN FRANCISCO

33. CSS GRIDS | BE RESPONSIVE!
target ÷ context = result
940
100%
720 220
76.5957447% 23.40425535%

34. CSS GRIDS | BE RESPONSIVE!
responsivetwentyten.com

35. CSS GRIDS | BE RESPONSIVE!

37. BE RESPONSIVE!
twentyelevendemo.wordpress.com

38. BE RESPONSIVE!
exible images
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

40. BE RESPONSIVE!
WORDCAMP SAN FRANCISCO

41. BE RESPONSIVE!
exible media
netmagazine.com/tutorials/create- uid-width-videos
by Chris Coyier
WORDCAMP SAN FRANCISCO

42. THEMING AND MOBILE
WORDCAMP SAN FRANCISCO

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

44. MEDIA QUERIES
whoa, this is css?

45. MEDIA QUERIES
IT’S KIND OF LIKE CONDITIONAL COMMENTS...
...BUT WITHIN CSS!
WORDCAMP SAN FRANCISCO

46. MEDIA QUERIES
@MEDIA
WORDCAMP SAN FRANCISCO

47. MEDIA QUERIES

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

51. BE RESPONSIVE!
books.alistapart.com/products/responsive-web-design

52. BE RESPONSIVE!
alistapart.com/articles/responsive-web-design

53. BE RESPONSIVE!
alistapart.com/articles/ uidgrids

54. BE RESPONSIVE!
smashingmagazine.com/2011/01/12/guidelines-for-
responsive-web-design

55. BE RESPONSIVE!
unstoppablerobotninja.com/entry/ uid-images/

56. BE RESPONSIVE!
smashingmagazine.com/2011/07/22/responsive-web-
design-techniques-tools-and-design-strategies

57. BE RESPONSIVE!
mediaqueri.es

58. BE RESPONSIVE!
BUT I WANT TO BE RESPONSIVE
right now!!!
WORDCAMP SAN FRANCISCO

59. RESPONSIVE WORDPRESS THEMES
I CAN HAS RESPONSIVE SITE NOW?!!

60. RESPONSIVE WORDPRESS THEMES
twentyelevendemo.wordpress.com

61. RESPONSIVE WORDPRESS THEMES
chateaudemo.wordpress.com

62. RESPONSIVE WORDPRESS THEMES
quintusdemo.wordpress.com

63. RESPONSIVE WORDPRESS THEMES
reactdemo.wordpress.com

64. RESPONSIVE WORDPRESS THEMES
basicmathsdemo.wordpress.com

65. RESPONSIVE WORDPRESS THEMES
shelfdemo.wordpress.com

66. TYPOGRAPHY ON THE WEB
Check All Browsers
Always.
WORDCAMP SAN FRANCISCO

67. Check Your Devices

68. THEMING AND MOBILE
CONTENT.
WORDCAMP SAN FRANCISCO

69. RESPONSIVE WEB DESIGN
ank You!
slideshare.net/saracannon
sara cannon / sara-cannon.com / @saracannon