Responsive web design tips from the community

In a previous post, 6 tools to get you started with Responsive Web Design, we selected and discussed 6 tools and libraries to help you get started with – really – responsive web design. We received loads of positive feedback and additional tips and tricks from our followers and decided to collect them in another post about one of our favorite subjects. Here we go:

If you like this article, give it some sharing ❤️

Responsive Design View for Firefox

Responsive Design View for Firefox

Did you ever try and press CMD+OPTION+M on your Mac or ctrl+shift+M on your (Windows) PC in Firefox? If not: do so. It will tell you your current page size and it allows you to test other sizes. – @bastilian

Responsive Inspector for Chrome

Responsive Inspector for Chrome

And what about the Chrome Dev Tools Responsive Inspector extension, allowing you to inspect page media queries? A very useful tool when developing responsive web layouts as it can visually show what resolutions are defined in CSS stylesheets. In addition it has pixel perfect browser resizing and CSS media query code viewing. – @bastilian

More CSS libraries for RWD

Moreati came up with the following services:
bourbon.io a simple and lightweight mixin library for Sass;
inuit a powerful, scalable, Sass-based, BEM (Block-Element-Modifier), OOCSS (object oriented CSS) framework;
compass Compass is an open-source CSS Authoring Framework

… talking about Responsive web design tips! Those are quite a few. What are we talking about here?

Compass offers great grids that are almost always responsive by default. Inuits is Sass based, Object Oriented and provides little-to-no design which means no deleting CSS code and no adhering to other peoples’ (bad) design decisions. Read: more design patterns, no design decisions (if you need a framework that supplies design I’d still use Bootstrap, as mentioned in the previous post). Inuit.css is intended for IE8 and above only and documented extensively on GitHub. Bourbon is very much a Rails darling, and has Neat – ‘a lightweight semantic grid framework’ – to create responsive designs. Neat was created with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not cram HTML documents with presentation classes or extra wrapping divs/

Zurb Foundation

Zurb Foundation

And ‘zalew’ responded on our Hacker News item that we should definitely include Zurb Foundation in this follow-up post. After a little research, we can’t agree more! Zurb Foundation is a responsive front-end framework that allows you to quickly prototype and build sites or apps that work on any kind of device with Foundation (which is MIT-licensed and absolutely free to use). Make sure to check out Zurb’s HTML Templates, Icon Fonts, Off-Canvas Layouts, Responsive Tables, SVG Social Icons and Stencils for yourself!

Happy developing!

This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.

manage web projects - usersnap

If you like this article, give it some sharing ❤️

Feedback on Responsive Web Design

Usersnap is the easiest way approach
to set up QA for your reponsive web design.

Give it a try!