To continue our ongoing series of responsive web design articles here is a collection of 14 free tools. Enjoy!
Wirefy
A tool that helps you with everything you need to create wireframes. The biggest difference between Wirefy and other wireframe tools is that it helps you create functional responsive wireframe by focusing on the importance of content.
Image may be NSFW.
Clik here to view.
Rubber Cheese Template
The lovely team at Rubber Cheese created a free download for an .AI template to help all of you lovely web designers create responsive websites.
Image may be NSFW.
Clik here to view.
This Man’s Life
This tool helps you toggle between desktop and mobile layouts and shows you how a series of pages could look across different devices. This is done by showing the viewer how the layout of the different pages would change (responsively).
Image may be NSFW.
Clik here to view.
Columnal
They explain it best: “A responsive CSS grid system for rapid prototyping”
Image may be NSFW.
Clik here to view.
Get Skeleton
This tool provides you with some great CSS files that help quickly develop sites that look beautiful at any size and from any device. They also do a really great job of explaining each file before you choose to download or not.
Image may be NSFW.
Clik here to view.
Frameless
Responsive design without the frame, can you dig it?
Image may be NSFW.
Clik here to view.
Semantic
It is considered the new breed of CSS grid that has many advantages over other grid systems. The four areas that is shines above the rest are: it can either be fixed or fluid, it’s semantic, responsive and you can directly modify the columns and gutters on the style sheet. WOOHOO. Responsive life made simpler.
Image may be NSFW.
Clik here to view.
Golden Grid System
It focuses on all things folding grid (for responsive design). What’s great about this tool is that it not only provides downloadable resources for columns, gutters, a baseline and script but also provides you with useful responsive design tips in general.
Image may be NSFW.
Clik here to view.
Simple Grid
A really well-made tool for creating a basic grid that works with responsive design. This is a basic lightweight grid, it’s not a CSS framework.
Image may be NSFW.
Clik here to view.
Responsive Design Testing
This tool is awesomeeee!! It allows you to type in any URL and to see what the site looks like over different sizes and devices. Really useful and simple!
Image may be NSFW.
Clik here to view.
Fit Text
This plugin makes your font-sizes adjustable! It allows for your headlines to properly be adjusted to the specific device or element size it is being used on.
Image may be NSFW.
Clik here to view.
Interface Sketch
These free sketch templates will be useful when you’re designing a website or app.
Image may be NSFW.
Clik here to view.
Foundation
According to their calculations, they claim to be “The Most Advanced Responsive Front-End Framework in the World.” But you’ll have to be the judge of that, won’t you?
Image may be NSFW.
Clik here to view.
The Responsive Calculator
And last but not least: the responsive design calculator that helps you convert pixels into percentages to better help build your responsive site.
Image may be NSFW.
Clik here to view.
You’re On Your Way!
Now that you have all these free tools at your disposal you’re steps closer to creating that perfect beauty of a responsive website. Good luck friends.
Please share with us any tools you’ve used and loved in the comments below! Aaand, up next in our responsive design series: 8 Stunning Examples of Ecommerce Responsive Design!
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
