8 Tools and Scripts for Responsive Web Design

By / Sep 8, 2011 / Tools
shares

At Theme Trust, we recently launched our first responsive WordPress theme. Since it was also my first time building a responsive website, I had to do some learning and research. Along the way, I discovered some interesting techniques, useful resources, and handy tools to help with the task. So in this article, I’m sharing some of those tools and scripts I came across that make developing a responsive website a whole lot easier.

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Tools and Scripts for Responsive Web Design

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Adobe Device Central CS5.5

Adobe® Device Central CS5.5 software simplifies the production of innovative and compelling content for mobile phones, tablets, and consumer electronic devices.

Tools and Scripts for Responsive Web Design

Responsive Web Design Sketch Sheets

During Denise Jacobs’ workshop on CSS3 at ConvergeSE 2011, I was inspired to make these responsive web design sketch sheets to help think through layouts for various devices.

Tools and Scripts for Responsive Web Design

Golden Grid System

Columns, gutters, a baseline and a script.

Tools and Scripts for Responsive Web Design

Hardboiled CSS3 Media Queries

Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Responsive Design Testing

Test your own site… type the url and hit enter.

Tools and Scripts for Responsive Web Design

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

11 Comments

  1. ehhwhat.co.uk
    September 8, 2011

    Cheers for the collection , just begun working on my first mobile version of a website and the “Responsive design testing” is really useful.

    Reply
  2. Dzinepress
    September 8, 2011

    thanks for all of these.

    Reply
  3. Jules – Web Design
    September 8, 2011

    Great collection – I’ve downloaded quite a few of them to use in my own projects! Thank you!

    Reply
  4. Waheed Akhtar
    September 8, 2011

    Great tools for responsive designs

    Reply
  5. php devlopment
    September 8, 2011

    awesome post! amazing!Great collection too!

    Reply
  6. David Poninski
    September 9, 2011

    Much appreciated! I actually used some of these tools last night to turn my portfolio site into a responsive site.

    Reply
  7. Paulo Henrique
    September 10, 2011

    Thx for sharing !!! Nice post I’ll try to use the Skeleton or the Golden Grid. A friend ask me to develop a site with an horizontal slideshow that fits the dimensions of the browser. Hope I can do it with those scripts.

    Reply
  8. Rancid
    September 10, 2011

    Great bunch of tools you listed here. I didn’t know some of them, so thanks for the new toys.

    Reply
  9. Yordan
    September 20, 2011

    Аmazing!Great collection.

    Reply
  10. Prodyot
    February 23, 2012

    Great information.
    Thanks.

    Reply
  11. Howard Steele
    July 24, 2013

    Your compilations are always the best!

    Reply

Leave a Reply