Get our posts emailed to you with our monthly newsletter, subscribe here.
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 is a folding grid for responsive design. It has four main features: columns, gutters, a baseline and a script.
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 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.
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 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.
Simply enter the url of your website and test it in different browser resolutions.
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 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.
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 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.
In this article you’ll fin a lot of useful information and code examples related to fluid images.
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.
Perfect tool for testing your responsive web design, resizeMyBrowser let’s you easily resize the browser to most popular or custom sizes.
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.
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.
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.
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.