Responsive design explained with animated GIFs

Do you know the difference between responsive design and adaptive design? If not, San Francisco-based web design tool company Froont has created a set of animated GIFs that explain the principles of responsive design. Check them out below.

Responsive vs Adaptive web design


They may seem similar, but both approaches complement each other, so there is no right or wrong way to do it.

The flow


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.

Relative units


The canvas can be a desktop, mobile or anything in between. Pixel density can also vary, so you need units that are flexible and work everywhere. That’s where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen.



Breakpoints allow the layout to change at predefined points–like having 3 columns on a desktop, but only 1 column on a mobile device.

Max and Min values


Having width of 100% and Max width of 1000px means that content will fill the screen, but don’t go over 1000px and become too wide.

Nested objects


Having a lot of elements depending on each other is difficult to control, therefore wrapping elements in a container keeps it more understandable, clean and tidy.

Mobile or Desktop first


Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger or vice versa.

Webfonts vs System fonts


Webfonts will look stunning, but each will be downloaded and the more you’ll have, the longer it will take to load the page. System fonts on the other hand are lightning fast, except if the user doesn’t have it locally, then it falls back to a default font.

Bitmap images vs Vectors


Does your icon have lot of details and fancy effects? If yes, use a bitmap, like a jpg, png or gif. If not, consider using a vector image–the best choice would be a SVG or an icon font.

Source: http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly

Images: http://blog.froont.com/9-basic-principles-of-responsive-web-design/


Daniel is an Art Director and Graphic Designer with over a decade of experience in advertising and marketing in the Greater Toronto Area.

Comments ( 0 )

    Let people know your thoughts.