The 5 best tools for responsive design

Let me start by saying this, I will not be including any point-and-click design tools in this list (think Adobe Edge Reflow). The reason is simple enough, I believe that they’re bad for everyone; designers, clients, coders… everyone suffers.

It’s not a question of the quality of code output by these programs. It’s not because it makes design “too easy”. It’s because no matter how good these programs are, they will always limit the people who use them.

They will be limited, not even by what the program can accomplish, but by what they think it can accomplish. If they think about it, the average user will likely compare it to tools like PowerPoint and/or any number of print design programs, falling once again into old mindsets. Therein lies the problem. Visual web publishing tools will always try to apply old processes to new technologies.

A truly web-oriented workflow is one that embraces the underlying concepts and technologies upon which the web is built. Sure, you can use any number of visual tools to create websites that are technically responsive, but you’d be missing the point.

It’s not about an adaptable layout. It’s about making information accessible to as many people as possible. There are some things a program like Edge Reflow just can’t do. In short, you need to write code.

Therefore, the best tools to aid you in responsive design are those tools that help you to understand and make use of web technologies, plan your website thoroughly, write better code more efficiently, and test/present your responsive designs to clients in context.

Let’s start with the obvious:

1) Your browser

No. I’m not kidding. This is quite literally the most important tool you have, because it shows you exactly what your website looks like under your specific conditions.

There has been much debate about whether or not designing in the browser is better than designing in an image editor like Photoshop or GIMP. Allow me to resolve this for you…

Are your website’s users going to do their browsing in Photoshop? Image editors can make pretty pictures, not emulate actual experiences. Use image editors for editing images. Use your browser to design websites.

It’s time to wean our clients off the hyper-detailed mockups that they’ve gotten used to. As the web changes, and our processes become more fluid and iterative, we must move on.

Install at least one browser with every major rendering engine, and get some developer extensions. Get used to looking at your source code the way your browser sees it, because you’re going to be here a while.

2) Google Drive’s drawing app

Technically, just about any vector-based image editor could do the job when wire-framing your websites and apps. I tend to wire-frame the desktop version of my site first, create a copy of the file, resize the canvas, and go from there. Using vectors makes it easy to quickly resize and rearrange your elements while you’re still in the planning stage.

Sharing and collaboration features: Google does information sharing better than just about everyone else. With in-context commenting, simultaneous editing, and Hangout integration, I’m in love.

Automatic guides: In each drawing document, guides are automatically created based on the dimensions of each object you put into the document. This makes it easy to depict consistently-sized elements in the document, which is great for grid-obsessed designers like me.

As I share these wireframes with clients, that professional-looking consistency is a big plus. And yet, I’m not constrained to those guides. I see it as a good alternative to mockup apps that try to constrain you to a grid.

Oh, and it’s free. Need I say more?

3) Style Prototypes

Based on Style Tiles, Style Prototypes are an in-browser deliverable designed to help you give your clients an idea of how their website’s typography, color, and UI elements will look. Since it is meant to be viewed in the browser, there will be fewer inconsistencies once the website is built.

Furthermore, I would posit that Style Prototypes could help our clients to mentally separate the concepts of UX and aesthetics. And really, anything that helps our clients to better understand the web design process can only be a good thing.

4) Responsinator

Responsinator is a simple tool that shows your website at different sizes. It imitates, in a very basic way, several different device sizes and contexts. This tool is not for your benefit. You want to see what your website looks like at smaller sizes? Resize your browser window. Better yet, get some actual mobile devices and do some real testing.

This web app is best used to show your clients a quick approximation of what their website will look like in contexts other than a desktop or laptop monitor.

Again, there are many tools that could do the same job as Responsinator, and just as effectively, I suppose. I chose this one because it presents several device silhouettes one after the other, for easy perusal.

5) Adobe Edge Inspect

Now this one is for you. If you have a mobile testing lab (and the sooner you can make one, the better) Edge Inspect will synchronize all of your devices to view the same page at once. Refresh the page on one device, and you refresh them all.

Unlike the others on this list, this one’s not free. However, if you can afford enough mobile devices to need a solution like this, it’s probably worth the money.

Conclusion

As always, your most important asset is your brain. These tools, and others like them, can only help you on your way. I chose these because they perform very specific functions that aid me in designing responsive sites. They don’t limit what I can do.

The best tools are really the ones that stay out of the way.

Do you use these tools? What are your top 5 tools for responsive design? Let us know in the comments.

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he's not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni

You forgot Twitter Bootstrap. I could reduce the numbers of line of code from 4,000 to 400!

cmegown

Valid opinion :) but I’m going to counter with this: stated at the start of the article, sometimes tools make design “too easy”. While I don’t particularly care for Bootstrap (actually I always advise against it’s use), the fact that you can just copy the HTML structure and classes and get the output you expect is both lazy and generic.

I can *almost* always tell when a site is built with Bootstrap, especially after looking at the source code for 5 seconds. Bootstrap is generic, and without doing a lot of overrides (which isn’t very DRY), you’re site is going to look too similar to the countless others for my taste.

With preprocessing langauges like LESS/Sass, and tools like Bourbon, there should be no reason to restrict yourself to a class-based framework.

Sorry for the ramble, but I really feel like people shouldn’t view Bootstrap as the all-in-one solution when in truth it’s only the right tool for certain situations.

Thomas

Totally agree with not bootstrapping. Many frameworks can include a lot of extra ‘bulk’ that you never need or utilize in a project.

cmegown

Yep, totally agree. I like a lean/mean stylesheet, and while you can set up tools to remove unused styles for production, I feel like it’s just good practice to do things by hand so you always end up with exactly what is needed – not just some variant of a default style.

Saleem Jivraj

I have been using bootstrap for the last month and would also have to agree with all the comments here the CSS stylesheet is very comprehensive.
Also thanks for the article

Saleem Jivraj

I also agree with cmegown, I’ve been using bootstrap for over month now and find the stylesheet very comprehensive.
Thanks for the post

Joe R.

While I agree that a lazily made bootstrap site looks as bad as a lazily made “custom” site, I think advising against it’s use just because you can copy and paste generic code for readily made modules is not a good mindset to have, considering you can do that regardless of whether you’re using a framework or not. Bootstrap was built to make developing responsive websites quicker and easier, and it accomplishes that perfectly. Those generic modules allow you to quickly implement placeholders for material you don’t yet have time to fully create, but they also allow other developers who are familiar with the framework to quickly implement their own changes. The modules themselves aren’t made to be some “end-all” solution for a production website(although people can do that).

If you can develop a responsive website using Bootstrap as a framework in half the time as it would take to develop the same website using your own custom style sheets to align everything, how can you justify the time spent re-inventing the wheel?

Also, anyone can figure out if a site is implementing bootstrap via the source code, (ie. “” is a major giveaway), but would it change your perspective on the site developers as well as the site overall if you had to look in the source code to know that?

Darren Fox

Control-Shift-M in Firefox really comes in handy and saves a lot of time during web development.

http://www.tim-holmes.com/ TimMH

ooooh, have no idea how i missed this bad boy of a shortcut… cheers :o)

Mirela Kasimovic

Nice article!! Thanks for sharing !!

HemanthMalli

Nice post !! I want to add one more to the list ..Icomoon is a web tool that makes the process of creating and deploying icon fonts easy.

http://www.lcddisplayscreens.co.uk/ aredey

This is first time I visit your site.I found a very good information about in your site.I will sharing this formation some other people.Thanks for sharing this information for me .

Squeaky Clean Code

Great tips, disagree with the point and click design suffering bit….

Call me old school but i design on paper before doing anything remotely digital. The point and click tools allow me to throw my visuals very quickly into a finished clickable responsive prototype in about half an hour – can you match that speed hand coding…. i think not. The time savings are massive and not design or thought limiting at all.

Really interesting…your use of Google Draw. I will have to play with it. How detailed of a wireframe are you making for clients ?

http://www.octoberland.com craig coffman

Thanks for the list. I really appreciate the lack of WYSIWYG editors. I agree that you need to know the underlying code. Otherwise, you are not really a web coder, but a button pusher. That just ruins the market for people who actually DO know what they are doing.

Google Draw is an interesting idea. I had not used it and am going to be considering it moving forward.

Alana

I’m a button pusher and a dragger and dropper too, and I’m more than happy to let others design software that allows me to build sites quickly and profitably. If I don’t have to be a coder to do this, why would I spend time learning it? Having said that, of course I greatly respect people who have invested thousands of hours learning code. Where would we be without them?

Technosys Australia

Very informative post…thanks for sharing

http://software-items.blogspot.com Sandrila Jones

I like your final point “It’s all about our brain”.
Responsive website is easy when we use these kind of tools.

http://www.gweone.con Julka Hendri

I think the best tool is your browser, because you can develop anything from there,

It’s completely customizable, SEO-friendly, and has a bunch of other
integrated tools for social and analytics. People are loving how easy it is. It’s worth checking out!

http://efusionworld.com/ Efusionworld

Very informative post. I think Responsinator is an incredible tool.

Thanks for the great article!

just saying

adobe requires your full name and “birthday” to sign in to even look at the product and download and try it … put in the wrong bday and you get locked out! What an arrogant system they have, to top it off you have to work off their servers so if anything goes south with them and you have all your clients in their system your are OOB till they get it back. Bad idea … Adobe.

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

Sorry, but this is just plain incorrect.

All of CC runs on your local machine—you don’t even need to be connected to the Internet.

As for your full name and birthday, I don’t recall if they ask for it or not. But they most certainly have password recovery in place should you need it.

John Allred

These tips can be very useful for any newbie looking to create a website. Thank you for taking the time in posting these tips.