I don’t think there is no point to explain what responsive web design is because we all know what it is why it is important. What are the things behind a successful responsive web development? There are several aspects to help the work flow better and easier. There are some excellent tolls available for web designers to help the work flow. A good set of tools can help to make the prosess easier. Today in this post we gathered 45 Useful Responsive Web Design Tools for Web Designers.

Responsive Grid & Frameworks

Foundation 4

Foundation4

The most advanced responsive front-end framework in the world. Responsive design gets lighter, faster and more advanced, so you can code smarter. It’s a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements. And when the Grid isn’t enough for your site, it just gets out of the way.

Source

Gumby 2

Gumby 2

Gumby 2 is built with the power of SASS. SASS is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

Source

Golden Grid System

Golden Grid System

A folding grid for responsive design. 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.

Source

Responsive Grid System

Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Source

Bootstrap

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap created and maintained, by Mark Otto and Jacob Thornton at Twitter.

Source

Frameless

Frameless

Frameless shouldn’t really be in this roundup, seeing as it’s neither truly responsive or an actual framework. The core idea makes it easy to imagine and build layouts for infinite viewports, with the frameless grid simply adding columns as and when they’re required.

Source

Skeleton

Skeleton

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

Source

320 and Up

320 and Up

‘320 and Up’ is a lightweight, easy to use and content first responsive web design boilerplate. ‘320 and Up’ has been used by designers and developers.

Source

Less Framework 4

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Source

1140px CSS Grid System

1140px CSS Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Source

Wirefy

Wirefy

Wirefy is a style agnostic wireframe tool built on the principles of content first. It allows you to create functional responsive wireframes using standard elements. Many frameworks focus on quick layouts and base styles. This allows you to focus on the content rather than the subjective design decisions.

Source

Titan Framework

Titan Framework

A CSS framework for responsive web designs. Titan Framework uses the same CSS classes as 960.gs. Titan Framework comes in two versions, with 12 and 16 columns.

Source

Base

Base

Super Simple Responsive Framework. Built to work on mobile devices, tablets, netbooks and desktop computers.

Source

Columnal

Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Source

Semantic Grid System

Semantic Grid System

Semantic Grid System is used to design responsive grid layouts. Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

Source

Gridless

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Source

Gridset

Gridset

Gridset is a tool for making grids, designed and built by the team at Mark Boulton Design. Responsive design forcing us into working and thinking differently about web layouts, the maths involved in designing for a plethora of different screen sizes started to take up valuable time and cause more than a few headaches.

Source

Susy

Susy

Susy is based on Natalie Downe’s CSS Systems, made possible by Sass, and made easy with Compass. Susy was created by Eric A. Meyer & OddBird.

Source

Responsive Testing Tools

Adobe Edge Inspect

Adobe Edge Inspect

Preview & inspect web designs on devices.

Source

Responsive Design Testing Tool – Matt Kersley

Matt Kersley

This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website’s URL into the address bar at the top of this page (not your browser’s address bar) to test a specific page.

Source

Screenqueri.es

Screenqueri.es

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions.

Source

Responsive Tools

Responsive Tools

Source

Resize My Browser

Resize My Browser

resizeMyBrowser is proudly brought to you by Chen Luo. If you like it and would like to support the author, consider purchasing my other app Smaller and Resize.

Source

Responsivepx

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.

Source

Responsinator

Responsinator

The Responsinator is designed to test responsive websites on different device resolutions.

Source

Responsive Sketch Sheets & Wireframes

Wireframe Sketchsheets – Sneakpeekit

Wireframe Sketchsheets - Sneakpeekit

It’s an essential tool for web designers, developers or graphic designers (logo artists, font creators, et cetera). Sneakpeekit Wireframe© contains a multipurpose pixel-perfect grid for web designers, developers and graphic artists. Main box is 1200px wide. Grids contains 1140px, 960px, 768px, 640px, 480px and 320px guides for maximum design flexibility and easiness.

Source

Responsive Web Design Sketch Sheets – MightyMeta

Responsive Web Design Sketch Sheets - MightyMeta

Printable sheets for wireframing for responsive layouts, with corresponding Photoshop templates.

Source

Responsive Wireframes – ThisMansLife

Responsive Wireframes - ThisMansLife

The ‘wireframes’ on this page (which are only very simple, high-level examples) were created with HTML/CSS, and some argue that this is the answer; to design in the browser. Although a logical approach, for some this is too harsh a shift in approach. The creation of code is a precise process, with intention, a purposeful act.

Source

Responsive Web Design Sketch Sheets – Jeremy P Alford

Responsive Web Design Sketch Sheets - Jeremy P Alford

Inspired to make these responsive web design sketch sheets to help think through layouts for various devices.

Source

JavaScript & jQuery Plugins

JQVMap

JQVMap

JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

Source

Isotope

Isotope

Isotope: An exquisite jQuery plugin for magical layouts. Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

Source

jqFloat.js

jqFloat.js

jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be “floating” on your web page. It helps create simple floating animation and make your websites come alive with these little “floating” object.

Source

Masonry

Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Source

stroll.js

stroll.js

stroll.js – because it scrolls, and trolls. A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a special touch-enabled mode for iOS & Android 4.x.

Source

Cubism.js

Cubism.js

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.

Source

Storage.js

Storage.js

Simple HTML5 page edits. Storage.js uses the new HTML5 contenteditable attribute and localStorage to bring you HTML5 awesomeness.Storage.js was formerly known as Storagify.

Source

Other Resources

RWD Calculator

RWD Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Source

FitVids.JS

FitVids.JS

FitVids.js was built by Chris Coyier and Paravel. A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Source

Adaptive Images

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.

Source

FlexNav

FlexNav

A jQuery Plugin for Responsive Menus. The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using click events for tap targets (the key feature of FlexNav).

Source

Enquire.js

Enquire.js

Enquire.js – Awesome Media Queries in JavaScript.

Source

FitText

FitText

A jQuery plugin for inflating web type. 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.

Source