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.

I prefer the drawing app on Google Drive for a couple of reasons:

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?

drawing

 

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.

prototype

 

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.

responsinator

 

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.

edge

 

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.

Featured image/thumbnail, tools image via Shutterstock.

  • Jake Student

    The Responsinator is an incredible tool, found it about a week ago, so handy.

    Another great tool is Dimensions, I use this one the most

    http://www.dimensionsapp.com/test/

    Thanks for the great article!

  • Chris

    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

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

  • Matt

    responsinator?? I use respondr, which is pretty cool. Think it’s http://respondr.webhoard.net

  • http://www.wiredtree.com/ Rachel Gillevet

    Hey Ezequiel- We loved your article and wanted to let you know it was featured in our Monthly Resource Roundup http://www.wiredtree.com/blog/the-monthly-round-up-octobers-best-web-designdevelopment-cms-and-security-content/.

  • Ltr10 Creative

    This is really
    valuable post. Thanks a lot for sharing this………..

  • sebop

    Nice article!

  • Stephen Lee

    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,

    __________________
    http://jhnworld.blogspot.com/2014/03/bingung-membuat-template-responsive.html

  • Content Activator

    What about a great responsive website builder? Check out http://www.contentactivator.com.

    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.