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
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.
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.
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.
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.
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.
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.
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.
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.
Less Framework 4
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
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.
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.
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.
Base
Super Simple Responsive Framework. Built to work on mobile devices, tablets, netbooks and desktop computers.
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.
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.
Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
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.
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.
Responsive Testing Tools
Adobe Edge Inspect
Preview & inspect web designs on devices.
Responsive Design Testing Tool – 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.
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.
Responsive Tools
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.
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.
Responsinator
The Responsinator is designed to test responsive websites on different device resolutions.
Responsive Sketch Sheets & Wireframes
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.
Responsive Web Design Sketch Sheets – MightyMeta
Printable sheets for wireframing for responsive layouts, with corresponding Photoshop templates.
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.
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.
JavaScript & jQuery Plugins
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.
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.
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.
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.
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.
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.
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.
Other Resources
RWD Calculator
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.
FitVids.JS
FitVids.js was built by Chris Coyier and Paravel. A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
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.
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).
Enquire.js
Enquire.js – Awesome Media Queries in JavaScript.
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.
- 24shares
- Share on Facebook
- Share on Twitter
- Buffer
One more tool for web designers, it helps with eye fatigue
http://eyepitstop.com