{"id":1903,"date":"2018-10-11T13:48:14","date_gmt":"2018-10-11T13:48:14","guid":{"rendered":"http:\/\/clapat.ro\/themes\/grenada-wordpress\/?p=1903"},"modified":"2018-10-11T13:48:14","modified_gmt":"2018-10-11T13:48:14","slug":"basic-principles-of-responsive-web-design","status":"publish","type":"post","link":"https:\/\/bitsec.ge\/ka\/2018\/10\/11\/basic-principles-of-responsive-web-design\/","title":{"rendered":"Basic principles of responsive web design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>A while back we made a list of animated gifs explaining the basic principles of responsive web design. The post was extremely popular. It turns we were not the only ones who find it difficult to explain what makes the web responsive. Today we are releasing a video, explaining few of the principles with some real examples.<\/p><br>\n\n\t\t<\/div>\n\t<\/div>\n<h4>The flow<\/h4>\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it\u2019s called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.<\/p><br>\n\t\t<\/div>\n\t<\/div>\n<h4>Relative units<\/h4>\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That\u2019s where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).<\/p><br>\n\t\t<\/div>\n\t<\/div>\n<h4>Breakpoints<\/h4>\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution\u200a\u2014\u200ait can get messy quickly when it\u2019s difficult to understand what is influencing what.<\/p><br>\n\n\t\t<\/div>\n\t<\/div>\n<h4>Max and Min values<\/h4>\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Sometimes it\u2019s 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. This is why Min\/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don\u2019t go over 1000px.<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"A while back we made a list of animated gifs explaining the basic principles of responsive web design. The post was extremely popular. It turns we were not the only ones who find it difficult to explain what makes the web responsive. Today we are releasing a video, explaining few of the principles with some [...]","protected":false},"author":1,"featured_media":1905,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3,6],"tags":[19,20,21],"class_list":["post-1903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-free","category-template","tag-portfolio","tag-psd","tag-showcase"],"_links":{"self":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/posts\/1903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/comments?post=1903"}],"version-history":[{"count":0,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/posts\/1903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/media\/1905"}],"wp:attachment":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/media?parent=1903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/categories?post=1903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/tags?post=1903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}