Top Tools for Responsive Web Design Part II: Testing and Prototyping

July 6th, 2015

InPart 1, we discussed the importance of responsive front-end frameworks and icon fonts. While these are undoubtedly critical factors in fostering a fully responsive design, there are other considerations that you ought to keep in mind.

In Part 2, we discuss the importance of testing, prototyping, and outline the tools we think every web designer should have under their belt.



Browserstack is a great tool for live, web-based browser testing. With it, you can avoid the need for multiple virtual machines and devices for testing. Instead, you can test out your designs across any OS, browser or device from inside the browser itself.

Adobe Edge Inspect

Edge Inspect gives users the ability to test RWD on mobile devices and computers simultaneously, over a live network. Unlike Browserstack, which utilizes virtualization technology, Edge Inspect actually sends your RWD to your mobile devices for native rendering.

Maltewassermann Viewport Resizer

Viewport Resizer is a very simple, very fast tool that gives users the ability to test any page at any resolution with the click of a button. Just save the advanced bookmarklet to your bookmarks toolbar for use on any page. You get a range of resolutions to choose from, as well as a custom-size option.

Firefox Developer Tools

Firefox Developer Tools is a powerful RWD testing tool-set, integrated directly into Firefox, that gives users access to a plethora of functionalities, such as Web Console, Page Inspector, JavaScript Debugger, Network Monitor, WebIDE, Performance Tool, and much more.

With Firefox Developer Edition, users also get access to a set of experimental developer tools, that aren’t available in the regular edition of Firefox.

Chrome Developer Tools

Chrome Developer Tools brings device emulation, page speed improvements, the ability to find and fix errors, as well as the ability to live-update your code – all from within the page. In fact, it’s built into Google Chrome by default,

Code Pen

Code Pen is an HTML, CSS, and Javascript code editor, available in your browser, with instant previews. Code Pen supports a wide range of preprocessors in each language, including:

  • HTML: Haml, Markdown, Slim, and Jade
  • CSS: SASS, SCSS, LESS, and Stylus
  • JavaScript: CoffeeScript, LiveScript, TypeScript, and Babel

Code Pen markets itself as a front-end designer playground – and rightfully so – as it also functions as a “searchable trove” of Code Pen user’s creations.

The code editing tool also enables its users to create shareable, full page demos that can be sent across teams for feedback, viewed in presentation mode, or opened in CrossBrowserTesting mode for testing across browsers and platforms.



Axure brings industry leading early-stage design functionalities, such as wireframing, rapid prototyping, and sharing tools, that are likely to help you make the best design choices for your project.

Axure enables its users to map required interface behaviors to specific user inputs like clicks, or touch gestures, through the use of wireframes, form controls, and placeholders. The prototyping software outputs HTML pages and word documents for easy sharing across a team.


InVision is a powerful prototyping tool, that enables its users to upload their designs and add hotspots to designate clickable and interactive objects. The prototyping software supports real-time collaboration and presentation modes, a simplified feedback process, and powerful version control/sync features.

Style Tiles

Style Tiles are a design tool for the communication of a visual brand for the Web. Style Tiles are useful in cases where a client may already have an established brand, and would like to transition that brand to the Web. Style Tiles blend fonts, colors, and interface elements in an effort to create rich prototypes.

Photoshop Design Space

Design Space is an experimental technology built on HTML5 that aims to tap into Photoshop’s core features in order to create streamlined workflows and interfaces. Design Space is currently in a preview release phase, but you can get started using it by turning on “technology previews” in Photoshop’s preferences, and enabling it in the toolbar. At present, the feature is only available in Photoshop CC 2015 update.

This article is part of a series, read part 1 here

Clare Bittourna


Clare Bittourna is on Codal's digital marketing team. Responsible for designing marketing materials and proposals, Clare also tackles various aspects of marketing campaigns at Codal. When she's not at work you can find her playing with her pup, finding new restaurants to enjoy in Chicago, or traveling.


codal insights

Techweek Chicago 2015

5 Reasons Apple Rejected Your Mobile App Submission