It’s no secret that many believe responsive web is the future. Creating a responsive site means that it’s able to adapt to the many different browsers and sizes that are available. If I want to make sure my website I’ve created on my desktop can be seen on a tablet with minium scrolling and zooming, I’m going to be interested in creating a responsive site.

One reason responsive sites have become popular is because it just makes sense. It’s cheaper than creating one or more extra sites for mobile phones and tablets. It also makes sure there’s a consistent viewing experience amongst devices and desktop screens. It’s not fun having to increase the size of your window or scroll horizontally to see an entire website.

While creating responsive web designs is becoming easier, there are some ways to get it going even quicker. Thanks to some CSS and HTML, we can code it right into our sites. Other elements require a bit more work. Either way, we’ve come up with a list to help you put your responsive site together with minimum fuss and maximum results.

jQuery plugins
Isotope

Isotope is a jQuery plugin that claims to create magical layouts that cannot otherwise be created by CSS and HTML. It has the ability to rearrange elements inside of a container so they fit within it as it resizes. You can also use Isotope to filter and sort items by categories and such.

Breakpoints.js

Breakpoint was made with developers and designers in mind. It’s a plugin that allows you to create breakpoints for different browser sizes. When your browser is resized to one of those sizes, the elements are able to fit into the screen.
FitText.js

This is one of my favorite jQuery plugins because it’s for fonts. Far too often in responsive web design, people don’t take into consideration that the headlines should be responsive instead of squished into a certain space. FitText allows you to do just that, but remember to only use it for headlines!
Response.js

If you like the idea of Breakpoint.js but want more customization, Response.js is the answer. It’s really great for those who know jQuery better than CSS and HTML and need to create responsive web sites. You use your breakpoints, but there’s so much more customization, such as device size, pixel rations and the ability to load different sources for different sizes.
TinyNav.js

TinyNav is a lightweight jQuery plugin that allows you to change any menu items using lists to turn into drop down menus when the browser is resized. You can specify the sizes as well as which menus change. Its not that broad in function, but it is very effective for what it does.
Popular frameworks and systems
Responsive Grid System

This system claims to not be a boilerplate or framework, but just a system to make your designs responsive. It seems to be one of the most flexible ones as it doesn’t restrict you to a certain size or to a certain gridsize. They use different CSS classes that are able to float and create their own columns.
Golden Grid System

The GGS is also a system, and not a ‘framework’. They like to refer to themselves as a starting place or guideline for those who wamt to use a certain amount of grids in their web design. You’re given 18 colums on the screen, but 16 to use in your design. You make up your own widths and gutters to use and essentially go from there.
1140 Grid System

For a while, many designers were using web designs that were 960px wide. Then that became to small and they went up. Now many designs are being developed using an 1140px width. This 1140 Grid System allows you to create 12 columns to use in a wide width web design.
Twitter Bootstrap

Bootstrap is one of the most popular frameworks available. It’s a 12 grid framework that has made itself usable cross-browser (including Internet Explorer 7) and can be used responsively in handheld devices. It comes with various styling components, typography and JavaScript to use and create sleek, intuitive sites.
SimpleGrid

SimpleGrid takes the idea of grids and simplifies it. With most grid systems and frameworks, you have these unknown classes and unknown columns. Simple grid has classes that specify what columns are first, middle and last. In addition, you can add different ‘slots’ to the columns to make it seem like there are more columns. It’s a very simple and straightforward framework.



Other responsive tools
Responsive Web Design Sketch Sheets

Much like any designer or developer, you probably sketch out your designs before you actually go about making them. Hopefully you do. If not, perhaps you should start by using these RWD sketch sheets. They come with difference device and desktop sizes on them so that you can plan everything out.
Responsive Design Sketchbook

If you like the idea of the sketching on paper, but want to have all your doodles together, you may consider getting the responsive design sketchbook. It comes with 50 pages, spiral bound with various screen sizes on each page. All the grids and math are already done for you, so this is a great tool for beginners and experts in responsive design.
Style Tiles

This is a nice little resource for web designers whether they are looking for something for responsive design or not. It’s a PSD that allows you to get the essence of a website by adding headings (typography), logos, colors and other elements. The reason why this works for responsive web design is because it doesn’t imply any dimensions, just a digital idea with no restrictions.
Responsive Calculator

There’s a ton of math involved in creating pixel perfect responsive designs. It’s necessary that your math is correct, as well, because you’ll be dealing with different percentages, widths and browser sizes. To help out, here’s a calculator that gives you the correct math and the CSS to go along with it.


Conclusion

It’s imperative that we take notice of what responsive web is doing. Many clients will want to have their sites available to a variety of devices, and it’s just more cost effective to create responsive sites. In addition, most of your frameworks and other resources for responsive design really help cultivate organized and high-quality, standard websites.

What are your favorite ways to start responsive designs? Have we missed a resource you rely on? Let us know in the comments.