50 Useful Responsive Web Design Tools For Designers
For the past few days, we have showed you some of the best WordPress and Joomla responsive themes you can download and use on your site. Today, we’re going to give you the tools. Comprise of frameworks, services, and downloadble scripts, we think they are going to be a great help when it comes to responsive web development.
To make it easier to go down the entire list of tools, we’ve categorized them into the following sections:
- Grid & Frameworks
- Sketch Sheets & Wireframes
- Testing & Preview
Columnal is a Pulp+Pixels project, which has been borrowed from cssgrid.net while some code inspirations has been taken from 960.gs. Columnal helps you a lot in your responsive web design, by making your grids flexible to change dynamically when the browser window is resized.
Less Framework is more or less a framework, in the name of its creator. It is an adaptive CSS grid system based on using inline CSS media queries, which makes the development of responsive websites much easier.
Semantic Grid System
Semantic Grid System is used to design responsive grid layouts. It uses pre-processed CSS extensions like LESS, SCSS or Stylus to deliver maximum efficiency. You can select column and gutter widths, choose the number of columns and switch between pixels and percentages.
Golden Grid System
Golden Grid System is a fluid-grid system which serves as the starting point of your responsive web design. It enables the website to serve good-looking pages ranging from 240 to 2560px.
320 and Up
320 and Up is a CSS media queries boilerplate, which serves to be the starting template for your responsive design. It follows a completely reverse approach than the several other boilerplates available.
Inuit.css is a CSS framework, which is extremely easy to use, even for novices. It has a minimalist approach, thus you need to deal with only things that are needed, but if need be, it can also be extended with a handful of plugins available.
Gridless is a boilerplate for creating responsive and cross-browser websites with beautiful typography. This tool focuses on progressive development of a project, and it serves as the starting point of any design.
1140 CSS Grid
1140 CSS Grid is a great CSS grid system designed by Melbourne designer Andy Taylor, which lets your design fit perfectly at 1140px for large monitors and your fluid layout will adapt seamlessly to other smaller resolutions with very little extra work.
1KB CSS Grid designed by Tyler Tate, is a simple and lightweight CSS Grid generator. It will allow you to set the number of columns, column width and gutter width, and you can get a downloadable CSS for your websites grid.
Fluid Grid Calculator
This simple tool will help you to quickly grab the CSS of your fluid grid website design.
Fluid Grid is a simple yet useful fluid grid framework, that creates responsive layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.
Flurid is a simple and very useful cross-browser CSS grid framework with up to 16 columns. And moreover it doesn’t hide pixels into margins.
Gridset is a tool for making grids of any type, such as, columnar, asymmetrical, fixed, ratio, compound, responsive and more. This tool by Mark Boulton, is still in beta, but proves to be promising. And did I mention, using it is as simple as embedding a link.
Gridpak is an online responsive grid generator, where the number of columns, padding, and gutter can be changed, and custom breakpoints can be added. The CSS is generated by the tool and made ready for download. It also provides PNG grid templates, which can be used for designing purposes in Photoshop.
SimpleGrid, developed by Michael Kuhn, is a very simple and straightforward CSS framework for creating infinite grid-based layouts. By default, SimpleGrid is prepared for 4 distinct ranges of screen sizes.
Susy by Oddbird, is similar in action to the Semantic Grid System. It uses no extra markup or any other special classes, but is only aimed to the users of Saas and its extension Compass.
Tiny Fluid Grid
Tiny Fluid Grid is an awesome web app, that can help you determine the grid system of your website in an interactive way. You can set the number of columns, gutter percentage, minimum and maximum width of your website’s layout, and can get a downloadable CSS for it.
Variable Grid System
Variable Grid System is designed and developed by SprySoft and is based on the 960 Grid System. It allows the developers and designers to generate the custom grid and then download the accompanying CSS file based on that grid.
Responsive Web Design Sketch Sheets
This tool is useful in mapping out the placements of various elements in your website layout across various devices. With the help of this device, you can form an idea of where to place the necessary elements of a website for different screen sizes and resolutions.
Responsive Wireframes is an experimental tool created by James Mellers of Adobe. It is built with only HTML and CSS (no images or JS were used) which you can use to visualize how your responsive design would look like on actual browsers of various desktops and mobile devices.
Style Tiles gives you a way to develop an idea of how a website would look like, independent of the complicated styles that come into play. It gives you the opportunity for a perfect responsive design workflow and also the ability to integrate client feedbacks.
Isotope is an amazing jQuery plugin, which proves to be very useful while designing a responsive design. It not only helps to rearrange the elements of a page when the browser window is resized or the screen size is smaller, but it also helps to filter those elements.
Masonry is an excellent jQuery plugin, which is used to create dynamic and adaptive layouts. This plugin helps to rearrange the elements in your responsive design, so they can fit better in the open-spots on the grid.
Respond.js is a fast and lightweight (3 Kb minified and 1 Kb gzipped) script, whose main aim is to enable responsive web design in those which don’t support the CSS3 Media Queries, like IE browsers.
TinyNav.js is a small and lightweight jQuery plugin, only 362 bytes, that converts big navigation lists into small dropdown menus for smaller screens.
Wookmark jQuery Plugin
Wookmark is a jQuery plugin that detects the browser window size and automatically arranges the elements of the page into columns. You can also see a live preview at the bottom of the page itself.
ProtoFluid is a web-based prototyping tool that lets you test your website prototypes in various screen sizes and resolutions. Just type in the URL, select the device (or any custom dimensions) and press launch. Since it is a web-based tool, it also lets you use other extensions like FireBug.
Responsive.Is is created by TypeCast another browser emulator tool, which you can use to test your responsive design. Just type in a URL, and it will automatically change its size depending on the device you choose.
ResponsivePx is an awesome tool for testing your responsive website design. The main feature that distinguishes it from others, is its capability to resize the website pixel-by-pixel. This awesome feature, will let you identify the breakpoints and also test how the CSS media queries are working in your site.
Responsive Web Design Testing Tool
An awesome testing tool, that can allow you to view your responsive website in various screen sizes simultaneously in a single screen, while you build or design them. I like this tool mainly because it shows all the screen resolutions side-by-side which makes it easier for debugging.
Screenfly by QuirkTools, is an amazing tool that will enable you to view your responsive website in a variety of devices: Desktop, Tablet, Mobile and TV. It also has options to enable or disable scrolling or even to rotate the display.
Screenqueri.es is a pixel-perfect responsive design testing tool. Just enter any website address that you want to check, and this tool performs will show the website in various screen sizes according to device. You can also manually resize the size pixel-by-pixel to identify the breakpoints.
Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsinator. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.
Blueberry is a fantastic open source jQuery image slider, which is written to specifically work for fluid or responsive layouts.
Want a carousel that will automatically adjust to screen size when the browser window is resized or when you are in a smaller screen? Elastislide is the most suitable jQuery plugin for your needs.
Responsive CSS3 Slider
ResponsiveSlides.Js is a very simple and extremely lightweight (only 1Kb) jQuery plugin that creates a responsive slider using unordered lists.It works on a wide range of browsers, also on IE6 and up.
Adaptive Images is an online tool for responsive web design, which detects the visitors’ screen size and creates, caches and delivers rescaled images, based on the screen size and resolution.
Want to rescale the embedded videos when the browser window is resized or the device is of smaller resolution? FitVid.Js can help you acheive this. It is a lightweight, simple, easy-to-use jQuery plugin used to achieve fluid width embedded videos.
Seamless Responsive Photo Grid
Seamless Responsive Photo Grid displays the images edge-to-edge on the browser, without any gaps in between images. The photos are tiled and they flow from left to right throughout the page in columns. The number of columns adjust accordingly as the browser window is resized.
SlabText is a jQuery plugin or tool by Brian McAllister based on the slabText algorithm, that splits the headlines into rows before resizing each row to fill the available space. It is quite similar to the FitText.Js plugin in action.
Zurb – ResponsiveTables
Have you ever wondered how to deal with the big data tables in responsive design? Zurb, a CSS/JS combo gives you the answer; it takes the data tables and modifies them so that they do not break the responsive layout on smaller screen devices.
Categorizr is a very small PHP script, provides your visitors with a more targeted web experience. It will help you deliver device-specific designs for Tablet, TV, Mobile or Desktop.
Media Query Bookmarklet
Media Query Bookmarklet shows you what size the current viewport has and which media query was just fired for it.
The Responsive Calculator
The Responsive Calculator is a very simple online tool that can help you to turn pixels into percentages while designing your responsive website.
Up Next week
In the second week of this series, we will be brigning you tutorials that will really get you into Responsive Web Design (RWD).
Don’t miss it.