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

Top Tools for Responsive Web Design

In Part 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.

Testing

Browserstack
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.

Prototyping

Axure
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
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