An Introduction to Responsive Design                       in WordPress                                           By Tom C...
What is Responsive Web Design?   Is a concept where the website responds to the    device that accesses it and delivers t...
Core Elements of Responsive Web Design1.   @media-queries are the breakpoints within the     style.css file2.   Fluid medi...
Good Responsive WordPress Themes   2011 Theme       Responsive and very well coded with current HTML5 and CSS3        st...
Responsive WordPress Plugins   WP Touch Pro       http://www.bravenewcode.com/product/wptouch-pro/   WordPress Mobile P...
Great Responsive WordPress Sites   http://css-tricks.com/   http://smashingmagazine.com   http://createdm.com/   http:...
Resources and Links   http://www.alistapart.com/articles/responsive-web-    design/   http://www.slideshare.net/pkattera...
Questions and Answers   This slideshow is located at    http://slideshare.net/thomascarney/   If you have any questions ...
Upcoming SlideShare
Loading in …5
×

Rwd wp-8-14-2012

850 views

Published on

This presentation is an introduction in Responsive Web Design using WordPress.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rwd wp-8-14-2012

  1. 1. An Introduction to Responsive Design in WordPress By Tom Carney Philadelphia ‘Burbs Meetup, August 14th, 2012
  2. 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. 3. Core Elements of Responsive Web Design1. @media-queries are the breakpoints within the style.css file2. 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. 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. 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. 6. Great Responsive WordPress Sites http://css-tricks.com/ http://smashingmagazine.com http://createdm.com/ http://www.gosphero.com/
  7. 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. 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

×