• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rwd wp-8-14-2012
 

Rwd wp-8-14-2012

on

  • 766 views

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

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

Statistics

Views

Total Views
766
Views on SlideShare
766
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rwd wp-8-14-2012 Rwd wp-8-14-2012 Presentation Transcript

    • An Introduction to Responsive Design in WordPress By Tom Carney Philadelphia ‘Burbs Meetup, August 14th, 2012
    • 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.
    • 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
    • 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/
    • 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/
    • Great Responsive WordPress Sites http://css-tricks.com/ http://smashingmagazine.com http://createdm.com/ http://www.gosphero.com/
    • 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/
    • 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