FLS blog

share the best free resources




Responsive Design Explained Brilliantly

Category : Help, Inspiration · by Nov 28th, 2014

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.

But the principles of responsive design aren’t that hard to understand, thanks to this amazing collection of animated GIFs. 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. Responsive designs fluidly expand, whereas adaptive designs hitch as you expand a browser or viewport.

responsive-vs-adaptive-01

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.

relative-units-vs-static-units

“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.”

flow-vs-static

“Breakpoints allow the layout to change at predefined points, i.e. having three columns on a desktop, but only one column on a mobile device.”

with-breakpoints-vs-without-breakpoints

By using nesting elements, you can make it so collections of onscreen elements adapt to a shrinking or expanding screen as one, instead of individually.

nested-vs-not-nested

“Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense.”

max-width-vx-no-max-width

“Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first.”

desktop-first-vs-mobile-first

“Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image.” A vector image can more properly adapt to different resolutions.

vectors-vs-images

 

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

SHARE :

Marin Petrov

Marin Petrov is a young freelancer and designer from Sofia, Bulgaria. As a founder of FrelancerStuff and owner of PMD Studio, he enjoys posting and sharing his experiences in freelancing and design with others.


Leave a Reply

Your email address will not be published. Required fields are marked *