20 Useful Tools for Responsive Web Design

Nowadays people are dependent on Internet. They’re using laptops, netbooks, tablets, smartphones and even TVs to surf Internet. These devices have different screens and resolutions and it can be really hard to create website which works properly on all of these devices.

But there is a solution. Responsive design is all about adjusting designs to accommodate screens of different sizes. If you want to create a responsive web design you should use fluid grids, images and queries. In this post you will find 20 useful tools for creating responsive web design.

Golden Grid System

Golden Grid System

Golden grid system is a folding grid for responsive design. It has four main features: columns, gutters, a baseline and a script.

Lettering.JS

A jQuery plugin for radical web typography. With Lettering.js you can work with kerning type, editorial design, manageable code and you’ll have complete control.

FitText

FitText

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.

Fluid 960 Grid System

Fluid 960 Grid System

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.

Gridless

Gridless

Make future-proof responsive websites with ease. Gridless is an optioned HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Skeleton

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Responsive Design Testing

Responsive Design Testing

Simply enter the url of your website and test it in different browser resolutions.

PX to EM

PX to EM

Here’s a calculator for your custom EM needs. Just select your body font size and you’ll get conversions based on your body font size.

BluCSS

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials.

Seamless Responsive Photo Grid

Seamless Responsive Photo Grid

Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. Here you’ll see how to do that.

SimpleGrid

SimpleGrid

SimpleGrid is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Adapt.js

Adapt.js

Adapt.js is a lightweight (826 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Fluid Images

Fluid Images

In this article you’ll fin a lot of useful information and code examples related to fluid images.

Convert a Menu to a Dropdown for Small Screens

Convert a Menu to a Dropdown for Small Screens

When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. In this article you’ll learn how to do this.

resizeMyBrowser

resizeMyBrowser

Perfect tool for testing your responsive web design, resizeMyBrowser let’s you easily resize the browser to most popular or custom sizes.

Responsive Table

Responsive Table

Responsive design is all about adjusting designs to accommodate screens of different sizes. While data tables can be really wide you will definitely find this solution useful for your project.

Columnal

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. Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

1140 CSS Grid

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

Mobilize.js

Mobilize.js

A HTML5 and Javascript framework to transform websites to mobile sites. Mobilize.js allows web developers create mobile sites out of existing websites with little effort. It automatically detect mobile browsers, supports iPhone, Android, Blackberry, Opera Mini and many other browsers and devices.

Adaptive Images

Adaptive Images

Deliver small images to small devices. A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed.

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

3 Comments

Comments are now closed.