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
“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
PROS
- Allows for symbols and shared styles, as well as layer styles
- Multiple pages/artboard & versioning support
- Designs are vector based, code friendly, and individual elements can be exported into CSS.
CONS
- Cannot export a comprehensive HTML/CSS, or access code during design.
- Some difficulty managing elements when they become responsive (i.e. cannot change font size directly or it will reconcile cross-platform. Must resize the box rather than directly edit the text)
- Exporting and opening in an Adobe product such as Illustrator and Photoshop have varied results; It works, but some tweaking and fine-tuning might be necessary once the design jumps into Adobe.
COST
A single-time payment of $99, making Sketch one of the most inexpensive tools on this list. 30-day trial is offered.
BREAKDOWN
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.
WEBFLOW
“Design, prototype, and launch dynamic, responsive websites. All in your browser, without writing code.” 4
PROS
- Clean, compliant HTML/CSS for those who need/want it.
- Ability to build an entire website without ever having to touch or look at code (if that’s your thing).
- Designs are vector based, code friendly, and individual elements can be exported into CSS.
CONS
- Another web-based app. This means you need an internet connection to continue designing or editing.
- Some difficulty managing elements when they become responsive (i.e. cannot change font size directly or it will reconcile cross-platform. Must resize the box rather than directly edit the text)
- Exporting and opening in an Adobe product such as Illustrator and Photoshop have varied results; It works, but some tweaking and fine-tuning might be necessary once the design jumps into Adobe.
COST
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.
BREAKDOWN
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.
UNBOUNCE
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
PROS
- Easy to use and useful for those with or without HTML/CSS knowledge
- A/B testing functionality
- A plethora of templates to start with
CONS
- A web-based app. Requires internet connection to run.
- No direct access to HTML/CSS to edit/fine-tune for those who are familiar with code.
- Relies heavily on hiding and revealing elements that differ between views.
- Only two automatic breakpoints: Mobile and Web.
COST
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.
BREAKDOWN
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.
