{"id":127,"date":"2014-11-28T14:56:58","date_gmt":"2014-11-28T14:56:58","guid":{"rendered":"http:\/\/www.freelancerstuff.com\/blog\/?p=127"},"modified":"2014-11-28T15:04:49","modified_gmt":"2014-11-28T15:04:49","slug":"responsive-design-explained-brilliantly","status":"publish","type":"post","link":"http:\/\/www.freelancerstuff.com\/blog\/responsive-design-explained-brilliantly\/","title":{"rendered":"Responsive Design Explained Brilliantly"},"content":{"rendered":"

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.<\/p>\n

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!<\/p>\n

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.<\/p>\n

\"responsive-vs-adaptive-01\"<\/p>\n

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.<\/p>\n

\"relative-units-vs-static-units\"<\/p>\n

“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.”<\/p>\n

\"flow-vs-static\"<\/p>\n

“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.”<\/p>\n

\"with-breakpoints-vs-without-breakpoints\"<\/p>\n

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.<\/p>\n

\"nested-vs-not-nested\"<\/p>\n

“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.”<\/p>\n

\"max-width-vx-no-max-width\"<\/p>\n

“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.”<\/p>\n

\"desktop-first-vs-mobile-first\"<\/p>\n

“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.<\/p>\n

\"vectors-vs-images\"<\/p>\n

 <\/p>\n

Original post:\u00a0http:\/\/blog.froont.com\/9-basic-principles-of-responsive-web-design\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,11],"tags":[],"class_list":["post-127","post","type-post","status-publish","format-standard","hentry","category-help","category-inspiration","end"],"_links":{"self":[{"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":4,"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":140,"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions\/140"}],"wp:attachment":[{"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.freelancerstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}