Do you know the difference between responsive design and adaptive design? There’s some argument over whether responsive or adaptive designs are better. Regardless, responsive design is the solution most chosen for multi-screen problems. That means designers need to become familiar with the concepts and basic principles for responsive design.

To help us with these principles, San Francisco-based web design company Froont, has created a series of animated GIFs to simplify our understanding.

The basic principles of responsive design

Responsive vs adaptive web design

Responsive design and adaptive design may seem similar, but both approaches complement each other. That means there’s no right or wrong way to do it.

Responsive design flow

As screen sizes become smaller, content starts to take up more vertical space. Therefore, anything below will be pushed down; that’s called the flow.

Relative units

The canvas can be a desktop, mobile or anything in between. And because pixel density can vary, you need units that are flexible and work everywhere. That’s where relative units like percents come in handy. Therefore, by making something 50% wide, it means it’ll always take half of the screen size.

Breakpoints

Breakpoints in a responsive design are what allows 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 a width of 100% and max width of 1000px means that content will fill the screen, but it won’t go passed 1000px in width.

Nested objects in responsive design

Having a lot of elements depending on each other is difficult to control. But, by wrapping elements in a container, they stay more understandable, clean and tidy.

Mobile or desktop first

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

Webfonts vs system fonts

Webfonts look good and bring a new design element to your creation. But each font has to be downloaded, and the more you have, the longer it will take to load the page. System fonts on the other hand, are lightning fast because they’re loaded from users’ computers—except if the user doesn’t have it; then it falls back to a default font.

Images vs vectors

Does your icon have lot of details and fancy effects? If yes, use an image like a jpeg, png or gif. If not, consider using a vector image like an SVG or icon font. They can scale in size without distorting quality.

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/