In web design today, our tools can make all the difference. Picking the right tools and knowing how to use them is critical to creating long-lasting responsive websites that clients and visitors alike will enjoy. There are so many tools to pick from and only so many hours in the day to find them.

Building for the “Responsive” Web

I’ll admit it freely, I’m already tired of this word. If I didn’t hear it come out of my own mouth and see it in blog posts twenty times a day, I might not feel this way. Alas, it is here to stay and we must cope not only with hearing it, but also incorporate it into our design paradigms.

To this end I would like to introduce a few of my preferred tools. It is likely that some of the tools in this list are already familiar to you, but hopefully there is at least one that benefits your process and perhaps even saves a little time on your next project.

My (Current) Utility Belt

By no means is this the full utility belt, I probably don’t have enough memory installed to list everything outright. I’ve slept since using some of these things, after all.

TypeCast

http://typecast.com/

This is perhaps the most awesome service for discovering new fonts and easily determining where to acquire them and how to implement them in to your website. Their amazing editor is the backbone of this service, letting you see in real time the changes you make to your TypeCast stylesheet, even going so far as to show you multiple columns with differing styles so you can compare your changes to previous ideas. It will even do all of the CSS work for you, if you let it.

While typeface continues to dominate the web design landscape, it is critical to always be thinking of new font combinations that might work well together to really tie a site together. TypeCast makes this process a very fun and almost relaxing experience.

CSS Preprocessors

http://lesscss.org/

http://sass-lang.com/

Great timesavers, CSS preprocessors have a short learning curve for the really cool features, and can compile on the fly with PHP or Ruby wrappers. LESS & SCSS/SASS allow you to give a more logical structure to your CSS, allowing future updates to take less time.

Imports allow for segregating your CSS into separate files named according to their purpose without increasing the number of stylesheets on your site. Variables allow you to easily change an entire color theme in seconds. And of course mixins can take the stress out when it comes to all the different browser prefixes.

Color Palettes

http://colrd.com/

Seriously, check out ColRD. You can create color palettes easily. Use an image to pull some colors or roll your own. Use your own source image or pick a random image from Picasa through their Image DNA tool. If you have ever suffered from “palette block” – bookmark this site. They even have a great gradient editor for making some sweet grad’s with export to CSS!

Web Developer Checklist

http://webdevchecklist.com/

Maybe you have your own checklist, but more than likely this one is more extensive. A great utility for determining if you really remembered everything for launch day.

Firefox Responsive Design View

Ctrl+Shift+M

Now I love Chrome, but Firefox has a great feature for testing out your responsive designs. Just hit Ctrl+Shift+M, or click Responsive Design View in the Web Developer menu to really nail down break points and see how your site renders at different resolutions.

Fill Out Your Toolbelt

There has never been a better time to fill up your toolbelt (bookmarks folder) with helpful web design utilities. And with so much recent innovation in the field, it is extremely helpful to have reliable tools that save time. With an ever–changing landscape, stay a step ahead and get to know new tools that can give you more free time to… find more tools!