Online Responsive Web Design Tool

This article is part of our "Web Responsive Design series" - consisting of tools, resources and tutorials to help you create websites for users of all platforms. Click here to see more articles from the same series.

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
JavaScript & jQuery Plugins
Testing & Preview
Sliders
Others

Grid & Frameworks

[Back to top]

Columnal

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.

Skeleton

Skeleton is a simple and powerful CSS framework, which is mainly liked by developers and designers because of its simplicity and efficiency. There is no heavy-lifting with Javascript here, only good and pure CSS with clean documentation.

LessFramework 4

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

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

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.

1KBCSSGrid

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.

Bootstrap

Bootstrap, created and maintained, by Mark Otto and Jacob Thornton at Twitter, is an excellent set of user interface elements, layouts, and javascript tools, freely available for you to download and use in your web design projects.

Fluid Grid Calculator

This simple tool will help you to quickly grab the CSS of your fluid grid website design.

Gridset

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

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

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

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.

Sketch Sheets & Wireframes

[Back to top]

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

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.

StyleTiles

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.

JavaScript & jQuery Plugins

[Back to top]

Adapt.Js

Adapt.js is a Javascript solution and an excellent alternative to the CSS media queries. Using @media approach is good practice, but this does not work for all browsers. Nathan Smith, the creator of 960 Grid System, released Adapt.js, a very lightweight javascript library to overcome this problem.

Isotope

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

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

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

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.

Testing & Preview

[Back to top]

ProtoFluid

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

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.Com

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.

ReView.Js

ReView is a dynamic viewport system, developed in pure JavaScript, which gives you a fantastic viewing experience for your responsive Web design.

Screenfly

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

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.

The Responsinator

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.

Sliders

[Back to top]

Elastislide

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

This is a pure responsive CSS3 slider that can adapt to any screen size and screen resolution with ease. The nice thing about this slider is that, the arrows go inside the box when the device screen size is small enough. No JavaScript needed.

ResponsiveSlides.Js

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.

Others

[Back to top]

Adaptive Images

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.

FitText.Js

FitText.js is a small javascript tool, which allows the automatic resizing of text and headlines when the browser window is resized. No more worries of text size mismatch with this tool on board.

FitVid.Js

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.

Retina Images

Retina Images is an awesome javascript solution, that will automatically serve @2X larger, high-resolution images when viewed on retina display. All you need to do is put a high-resolution version of each and every single image, and it will manage the rest.

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

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

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.