{"id":384,"date":"2015-07-25T13:15:08","date_gmt":"2015-07-25T13:15:08","guid":{"rendered":"http:\/\/fazilabdulkhadar.com\/?p=384"},"modified":"2021-02-23T12:08:41","modified_gmt":"2021-02-23T12:08:41","slug":"5-responsive-web-design-patterns","status":"publish","type":"post","link":"https:\/\/fazilabdulkhadar.com\/index.php\/2015\/07\/25\/5-responsive-web-design-patterns\/","title":{"rendered":"5 Responsive Web Design Patterns"},"content":{"rendered":"

1.Mostly fluid:<\/strong><\/p>\n

On large or medium devices, it usually remains the same size, but adding the margin to right and left on wider screens.<\/p>\n

On smaller screens, the grid causes the main content to reflow, while columns are stacked vertically. The main advantage of this pattern is that it usually only requires fewer breakpoints between small screens and large screens.<\/p>\n

\"\"<\/div>\n

2.Off-canvas:<\/strong><\/p>\n

Rather than stacking content vertically, the off-canvas pattern places less frequently used content, perhaps navigation or app menus off-screen, only showing it when the screen size is large enough, and on smaller screens, content is only a click away.<\/p>\n

\"\"<\/div>\n

3.Column Drop:<\/strong><\/p>\n

For full-width multi-column layouts, column drop simply stacks the columns vertically as the window width becomes too narrow for the content. Eventually, this results in all of the columns being stacked vertically. Choosing breakpoints for this layout pattern is dependent on the content and will change for each design.<\/p>\n

\"\"<\/div>\n

4.Layout shifter:<\/strong><\/p>\n

The layout shifter pattern is the most responsive pattern, with multiple breakpoints across several screen widths. The key to this layout is the way content moves about, instead of reflowing and dropping below other columns. Due to the significant differences between each major breakpoint, it is more complex to maintain and likely involves changes within elements, not just the overall content layout.<\/p>\n

\"\"<\/div>\n

5.Tiny tweaks:<\/strong><\/p>\n

Tiny tweaks simply make small changes to the layout, such as adjusting font size, resizing images or moving content around in very minor ways.<\/p>\n

\"\"<\/div>\n

Courtesy: Udacity<\/p>\n","protected":false},"excerpt":{"rendered":"

1.Mostly fluid: On large or medium devices, it usually remains the same size, but adding the margin to right and left on wider screens. On smaller screens, the grid causes the main content to reflow, while columns are stacked vertically. The main advantage of this pattern is that it usually only requires fewer breakpoints between…<\/p>\n","protected":false},"author":1,"featured_media":386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/comments?post=384"}],"version-history":[{"count":3,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/384\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/384\/revisions\/1090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media\/386"}],"wp:attachment":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media?parent=384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/categories?post=384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/tags?post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}