15
Jul

Responsive design explained with animated GIFs

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

9 basic principles of responsive design: Responsive vs Adaptive

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

9 basic principles of responsive design: Static vs 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

9 basic principles of responsive design: Relative vs Static 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

9 basic principles of responsive design: Breakpoints vs without

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

9 basic principles of responsive design: Width vs Max Width

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

9 basic principles of responsive design: Nested vs Not Nested

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

9 basic principles of responsive design: Desktop design vs Mobile first design

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

9 basic principles of responsive design: System fonts vs Webfonts

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

9 basic principles of responsive design: 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/

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.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.