15
Jul

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

Responsive-vs-Adaptive

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

The flow

Flow-vs-Static-2

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

Relative-Units-vs-Static-Units-1

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

With-Breakpoints-vs-Without-Breakpoints-1

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

Max-width-vx-No-max-width-1

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

Nested-vs-Not-Nested-1

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

Desktop-first-vs-Mobile-first-3

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

System-fonts-vs-Webfonts-1

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

Vectors-vs-Images-1

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/

 

Comments ( 0 )

    Let people know your thoughts.

    %d bloggers like this: