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:
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).
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:
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!
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
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.
* We described this challenge at length in a previous post.
Photo credit: Muhammad Rafizeldi