What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops as they do on smartphones, but there’s a lot more to it than that, leading to widespread confusion (heck, I’ll admit, I’ve even been known to misuse it myself, even after fellow Co.Design writer John Pavlus called me a dummy for it).

But the principles of responsive design aren’t that hard to understand, thanks to this amazing collection of animated GIFs put together by the guys Froont, a San Francisco-based company specializing in making tools for designers to create responsive websites. Spend just a few minutes with these GIFs, and you’ll never be hoightily corrected by a design pedant about “responsive websites” versus “adaptive websites” ever again. In fact, you can be that hoighty pedant!

The GIFs below show many of the basic principles of responsive designs, with explaining quotes by Froont co-founder Sandijs Ruluks.

Responsive designs fluidly expand, whereas adaptive designs hitch as you expand a browser or viewport.





Positioning your designs elements using pixels as X,Y coordinates can cause a site designed for one screen to look weird on another. Use relative units, like percent of the screen, instead of static units like pixels.

“As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down. It’s called the flow.”