In short – responsive web design means that design and development should work hand in hand in responding to the user’s behavior and the environment based on screen size, platform or any other feature that makes it different from the usual desktop-oriented web design. This process involves smart use of CSS media queries, the ability to mix different grids, layouts, images and many more. Your website has to be responsive towards the user’s preferences, whether it’s on their Kindle, iPod, Blackberry, laptop or any other new and popular gadget that is going to enter the market anytime soon.

There are tons of tools and services that can help you in creating the best responsive design for your website. We have selected a handful of the most useful and helpful tools in creating a great responsive web design:

The Golden Grid System

“Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design…”
check it out

Test Responsive Web Design

“An easy and fast way to test your website according to width or device size ”
check it out

Responsivepx

“Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.”
check it out

Fluid Grid Calculator

“Build your own fluid grids by using this cool tool that automatically calculates everything for you”
check it out

Adapt.js – Adaptive CSS

“Adapt.js is a lightweight (848 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is…”
check it out

Resize My Browser

“This is a good tool for testing and resizing your browser to different popular sizes”
check it out

Adaptive Images

“Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques”
check it out

Fit text

“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”
check it out

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. Skeleton is built on three core principles”
check it out

Flurid

“A cross-browser CSS grid framework that doesn’t hide pixels in margins”
check it out

WebPutty

“A great web-based CSS editor that will be really helpful in creating cool responsive webs design. This tool has auto-save feature and a real-time preview that makes it easy to work with and catch on”
check it out

What other tools do you typically use for your responsive web design projects?