6 tools to get started with responsive web design

Nowadays – when building a website – one is confronted with a number of different sizes and browsers that is daunting.* Plus, with mobile adoption skyrocketing, the diversity of mobile devices on the market doesn’t fail to grow exponentially. Thank god / the vivid web design community no custom coding is needed for each device or screen size with current responsive web design frameworks and testing tools.

We’ve selected 6 tools and libraries to get you started with responsive web design:

Bootstrap

Built at Twitter by Mark Otto and Jacob Thornton, Bootstrap offers an easy configurable CSS front-end framework. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but also in tablet and smartphone browsers with a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and has a web-based Customizer. Bootstrap comes in different shapes and forms, like Google Bootstrap, Retriever Bootstrap and the super fun (and equally ugly) Geo Bootstrap.

Unsemantic

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. Instead of being a set number of columns, it’s entirely based on percentages, making your grid more flexible. For instance, if you want a 50% wide column, simply use.  There are grid classes for multiples of five (5, 10, 15 … 95, 100). As are there grid classes for dividing a page into thirds (grid-33 and grid-66).

Unsemantic supports all major browsers: Chrome, Firefox, Internet Explorer (7+), Opera, and Safari.

Brackets.io

Brackets is an open-source editor for web design and development built on top of HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License. As a developer, you want to hand-edit your CSS code and potentially do a wide array of specific tweaks for each media query. Brackets focuses on providing “Quick Edit” in-line views that provide context-sensitive access to your content, without taking you away from your source code. The browser is literally your design view. Brackets is in Beta and a bit flaky still, but definitely ‘one to watch’. Especially with the Responsive Design Tool add-on Lee Brimelow is raving about:

Responsivepx

Responsivepx offers a great way to check the status quo of your (responsive) web design. Entering the url to your site – local or online – you can use the controls to adjust the width and height of your viewport to find exact breakpoint widths and use that information in your media queries. You can play with our responsive design here:

ami.responsivedesign.is

Much like Responsivepx, ami.responsivedesign.is tests the status quo of your (responsive) website layout and offer you to drag, drop, slide and copy the CSS needed to make your web design truly responsive. Give it a try with the Usersnap blog!

Usersnap

Slapping a responsive framework or ready-made CSS on your website might make it almost instant responsive, but to find out if it really serves its purpose on all devices you need user feedback. Usersnap is great tool to do QA (Quality Assurance) on your responsive web designs. What better test group to cater than you your own user base, right? We invite you to try out our service for free. Sign up for our risk-free trial!

Usability testing isn’t just about finding/fixing problems. It’s about knowing what margins exist at the edge of your product.

— Joshua Porter (@bokardo), thought leader on all things web design, June 18, 2013

More tools

Onextrapixel, one of my favorite design blogs, went ahead and wrote a post on 55+ Great and Useful Tools for Responsive Web Design. If you can’t commit to using one tool – and why would you, with all those free resources available – make sure to check it out.

Happy developing!

* We described this challenge at length in a previous post.

Photo credit: Muhammad Rafizeldi