Today we have compiled a list of 28 Tools for Responsive Web Design. Take a look!
1.Responsive web design sketch sheets
The .zip has been updated to include a 1 Up version of the sketch sheets created by Denise Jacobs.
2. styletiles
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
3.Responsive design sketchbook
4.Responsivewireframes
Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques.
5.Multi-Device Layout Patterns
6.Simple device diagram responsive design planning
7.Responsive Images
An Experiment with Mobile-First Images that Scale Responsively & Responsibly.
8.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.
9.Seamless responsive photo grid
10.fit text js
A jQuery plugin for inflating web type.
11.slab Text
A jQuery plugin for producing big, bold & responsive headlines.
12.retina images
Automatically serve high-res images, to those who'll appreciate them.
13.Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
14.The Responsive Calculator
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.
15.grid pak
The Responsive grid generator created by Erskine Design.
16.Golden Grid System
A folding grid for responsive design.
17.semantic
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Runs on LESS, SCSS, or Stylus.
18.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.
19.simple grid
SG is prepared for 4 distinct ranges of screen size: screens < 720px, screens > 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that's tuned to the size of their browser window. Say goodbye to horizontal scrollbars.
20.css grid
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
21.Susy
Susy is based on Natalie Downe's CSS Systems, made possible by Sass, and made easy with Compass. You can use it anywhere, from static sites to Django, Rails, Wordpress and more.
22.gridset app
Gridset provides all the measurements and tools you’ll need to integrate with your existing markup, without the need for any new classes or HTML.
23.A better Photoshop grid for responsive web design
24.css3 mediaqueries js
css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
Usage: just include the script in your pages.
25.categorizr
Categorizr is a modern device detection script that helps categorize different web capable devices into 4 categories, desktop, tv, tablet, or mobile. It take’s traditional device detection and flips it on it’s end, assuming devices are mobile first, unless otherwise detected as tablet or desktop.
26.Protofluid
ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries.
It works within your website, HTML5 app or game in the form of a single JavaScript include.
27.tiny fluid grid
Inspired by 1kbgrid.com. Developed with love by Girlfriend's overconfident and pretty good looking team of web developers. Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.
28.responsive
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.
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.
