Top 12 Tools and Resources for Responsive Web Design

This is the first in a series of post we’ll be adding to our site about Responsive Design. We are very excited to be talking about Responsive Design at tomorrow’s WordPress Meetup in NYC.

For tomorrow’s talk I’ve been putting together a list of my favorite resources and tools to test responsive design.

Must read Responsive Design articles and ebooks:

eBook: RESPONSIVE WEB DESIGN by Ethan Marcotte (A Book Apart)
eBook: MOBILE FIRST by Luke Wroblewski

Article: RESPONSIVE WEB DESIGN by Ethan Marcotte
Article: FLUID GRIDS by Ethan Marcotte
Article: FLUID IMAGES by Ethan Marcotte

Article: Responsive Web Design Guidelines and Tutorials by Smashing Magazine

Artile: A Beginner’s Guide to Mobile Responsive Design by StudioPress

 

responsive design green diablo

Tools to test your Repsonsive Design:

responsinator.com 
Test your site in 10 different screen sizes and devices

mattkersley.com/responsive 
Test your site in the 5 most common screen sizes

responsive.is
Test your site in the 6 most common screen sizes

responsivepx.com
Adjust dimensions of your viewport to find breakpionts

seesparkbox.com/foundry/media_query_bookmarklet
Media Query Bookmarklet

Other Resources:

Browser Support for Media Queries

HTML5 / CSS3 Browser Support

W3C on Media Queries

Responsive Websites Showcase for Inspiration

Slides

My Responsive Design presentation slides can be found on Prezi

I hope these tools and resources are helpful. What are your favorite tools and resources?

Enjoy!

Comments

  1. I have one question about your presentation, you were talking about how smashingmagazine is using responsive design. I have a doubt, when you see this website in mobile devices the ads disappear but does the user have to download the images and the code of that context?, can i do that some content doesn’t download?
    Thanks for your presentation!!!

    • Ads are usually loaded conditionally for web or mobile, so the code for the desktop / full-web ads won’t load on your mobile devices (if done right!). Instead the user-agent “mobile” will be detected and the mobile ads will be loaded.

  2. I’m curious to find out what blog system you’re working with?
    I’m experiencing some minor security problems with my latest site and I would like to find something more safe. Do you have any solutions?

    • I use WordPress as my blogging platform and CMS (content management system). It’s secure if you keep it updated and follow security best practices.

Trackbacks

  1. [...] Additional links: My Presentation Tools & Resources for Responsive Design [...]

Speak Your Mind

*