Users are becoming more and more reliant on their mobile devices every year. They expect to have mobile experiences that are just as productive and feature-filled as they have on their desktop computer but within limited real estate. Back in the day we’d build “mobile optimized” sites with limited functionality and create a custom app to download and install. Neither of those are good enough anymore; you’ve gotta go responsive.
A responsive site creates a better experience. Period. If your site is both mobile and tablet friendly, chances are you’re going to be a lot more successful with driving traffic and keeping the user engaged than if it isn’t.
Of course responsive site design brings with it a whole new set of challenges. Making every aspect of a mobile site resize, reposition and read correctly is a daunting task. And it’s not something you want to just leave to developers!
But how to get all those views and breakpoints and everything to look right? You need the right tools.
Every designer has their go-to design tools. Some of us hang on to our Photoshop license so tightly our fingers bleed. Others are downloading the latest, greatest tool every time only to the one they like fade to obscurity or get bought and absorbed. In the end, being able to quickly mock a responsive site can be a lot easier if you use the right tools.
Every one of these tools of a tool depends entirely on the designer and how they prefer to work (i.e. Do you need access to HTML/CSS?). Below is short list of popular tools designers are utilizing to begin tackling the challenges of responsive design.
“Sketch gives your the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.” 3
A single-time payment of $99, making Sketch one of the most inexpensive tools on this list. 30-day trial is offered.
For any PC users reading this, Sketch won’t be an option for you – Sketch is currently Mac compatible only. Sketch is well-known among designers for being vector-based and its potentially large library of elements. Buttons, icons, standard UI/UX elements are pre-loaded and can be added to and easily accessed to implement in any project.
“Design, prototype, and launch dynamic, responsive websites. All in your browser, without writing code.” 4
Webflow costs anywhere between $42/mo – $84/mo depending on license (professional or team), cheaper if you pay annually. You’re welcome to use Webflow without paying, but you won’t have access to that code! If you don’t want Webflow to host what you build, you’ll have to have a licenced version.
When compared to similar web-based and app-based design tools of this caliber, it’s difficult to find many pain points with Webflow. It is often touted by users as being one of the more “mature” platforms, even supporting jQuery. Outside of the need to be tethered to the internet to use it, Webflow is a straight-forward web-based app that can provide functional and clean code when you’re finished with the visuals.
This one isn’t really a responsive design application, but worth look into if you need simple landing pages that can be edited by non-designers.
“Our powerful drag & drop landing page builder lets you create responsive pages without any help from a technical team. The Unbounce “code-free zone” means you can easily build a high-converting landing page, then publish to the web in a single click – all without any knowledge of HTML.” 2
Unbounce it web-based and requires subscribing (either monthly or annually). Depending on your needs, unlimited access to all of Unbounce’s features can cost you anywhere from $49/mo to $499/mo. Of course, there are savings to be had if you choose the annual route.
They offer a 30-day, risk-free trial.
Unbounce primarily focuses on landing pages so it’s not a design too, per se, but it is a powerful way to crank out simple landing pages with ease. With powerful A/B testing, it can be an effective marketing tool and allow non-designers the ability to make good looking landing pages. The learning curve is not steep– just a few minutes of experimenting and Unbounce should make it easy to understand and use.