Responsive Design: 3 Tips To Make Life Easier

I have been building responsive websites for the last couple years. Since then I have found, or been shown, different tools, frameworks, plugins and other resources that make designing and coding a responsive website a breeze. To pay if forward, here are the top three tools that have made my life easier when it comes to responsive design.

1. Foundation

This framework has it all: an easy-to-use grid system, JavaScript plugins for almost every function, and amazing documentation. One of the best things about Foundation is the available customization. Custom options through Foundation include components, grid size, and colors. It also has starter templates, which can be a huge time saver. Foundation has not only sped up my development time, but it makes creating responsive websites a snap. It almost makes me feel like I am cheating!

Learn more about Foundation

2. IcoMoon

Font icons are a key component of any responsive design. They are easy to use, scalable, and reduce the time you have to spend in Photoshop. The great thing about IcoMoon is that it allows you to import your own vector icons and convert them to font icons. The web-app also provides a ton of free icon sets, allowing you to mix and match to fit the client's needs.

Learn more about IcoMoon

3. FancyBox

There are a ton of light-box plugins out there and I have used a lot of them. However, FancyBox 2 is the best one I have used thus far. The implementation of this plugin is extremely simple. FancyBox 2 is also very well supported, and best of all, it is completely responsive.  The only down side is that it costs money for commercial websites. Honestly though, the prices are reasonable and just like everything else, you get what you pay for.

Learn more about Fancy Box

Share your thoughts on the above resources for responsive web design, and let us know what other tools you recommend in the comments below!