This document introduces responsive web design for WordPress. It defines responsive design as designing one site that responds to different devices by changing its output. The core elements are media queries for breakpoints, fluid media assets, and a fluid grid layout using percentages. It recommends responsive themes like Twenty Eleven and plugins like WP Touch Pro. Finally, it provides resources for learning more about responsive design and testing on mobile.

1. An Introduction to Responsive Design
in WordPress
By Tom Carney
Philadelphia ‘Burbs Meetup, August 14th, 2012

2. What is Responsive Web Design?
 Is a concept where the website responds to the
device that accesses it and delivers the appropriate
output for it uses responsive design. Rather than
designing multiple sites for different-sized devices,
this concept designs one site but specifies how it
should appear on varied devices.

3. Core Elements of Responsive Web Design
1. @media-queries are the breakpoints within the
style.css file
2. Fluid media assets: Making sure the guts of the
website fit into each break point.
3. Fluid layout/grid: Using percentages or fluid
measurements (em) instead of static units (px) so
that the site doesn’t need bottom horizontal
scrollbars

4. Good Responsive WordPress Themes
 2011 Theme
 Responsive and very well coded with current HTML5 and CSS3
standards
 http://wordpress.org/extend/themes/twentyeleven
 Skeleton
 Very simple to use and has a minimal style. Easy to build on or create
child themes off of.
 http://demos.simplethemes.com/skeleton/
 Twitter Bootstrap
 Very flexible, has lots of options to customize it.
 http://rachelbaker.me/bootstrapwp-theme-twitter-bootstrap-for-wordpress/

5. Responsive WordPress Plugins
 WP Touch Pro
 http://www.bravenewcode.com/product/wptouch-pro/
 WordPress Mobile Pack
 http://wordpress.org/extend/plugins/wordpress-mobile-
pack/screenshots/

6. Great Responsive WordPress Sites
 http://css-tricks.com/
 http://smashingmagazine.com
 http://createdm.com/
 http://www.gosphero.com/

7. Resources and Links
 http://www.alistapart.com/articles/responsive-web-
design/
 http://www.slideshare.net/pkattera/design-process-
for-responsive-web-design
 http://webdesignerwall.com/tutorials/setting-
breakpoints-in-responsive-design
 http://webdesignerwall.com/tutorials/css3-media-
queries
 http://mobiletestingfordummies.tumblr.com/post/2634
6629275/ten-things-to-remember-when-testing-rwd
 http://build.codepoet.com/2012/05/11/wordpress-
meet-responsive-design/

8. Questions and Answers
 This slideshow is located at
http://slideshare.net/thomascarney/
 If you have any questions that haven’t been
answered please contact me via email at
tecdoc42877@gmail.com