{"id":10896,"date":"2015-12-17T21:27:48","date_gmt":"2015-12-18T05:27:48","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10896"},"modified":"2024-06-12T02:56:04","modified_gmt":"2024-06-12T09:56:04","slug":"5-useful-responsive-design-layouts-to-consider","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/","title":{"rendered":"5 Timeless Responsive Design Layouts to Consider"},"content":{"rendered":"<p>Google Product Director Luke Wroblewski <a href=\"https:\/\/www.lukew.com\/ff\/entry.asp?1514\" target=\"_blank\" rel=\"noopener noreferrer\">recently described<\/a> five broad categories of responsive layouts. Reiterated in <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/patterns\/?hl=en\" target=\"_blank\" rel=\"noopener noreferrer\">a Google Developers post<\/a>, these patterns give designers a head start when deciding how and why to set elements on a page. Remember that an \u201cultimate responsive layout\u201d doesn\u2019t exist. Each of these options comes with its own merits, and the best choice all depends on the type of site you\u2019re designing.<\/p>\n<h2>1. Mostly fluid<\/h2>\n<p>Luke\u2019s \u201cmostly fluid\u201d pattern reflows content dynamically within a fixed parent container instead of the browser\u2019s viewport. Parent containers \u2014\u00a0those that hold other elements \u2014 frequently use the CSS max-width property to keep from expanding beyond a certain width while fitting within narrow viewports. According to Google, this pattern only requires one breakpoint, assigned to the parent element, while the elements inside them reflow automatically as the parent resizes. This pattern works well on sites with a diverse set of layouts among its many pages like marketing sites, ecommerce sites, news sites \u2014 anything with more than one type of content. The site for <a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin<\/a> actually follows the mostly fluid pattern. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0216.png\" alt=\"mostly fluid\" width=\"600\" height=\"400\" \/><\/p>\n<h2>2. Column drops<\/h2>\n<p>Thinking <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">mobile-first<\/a>, Luke\u2019s \u201ccolumn drop\u201d pattern turns a stack of columns on its side to take advantage of additional horizontal space in tablet and desktop-sized viewports. Unlike other patterns, this one tends to fill the available viewport regardless of size. This is ideal for responsively designed sites that users will view on a very wide range of displays. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0115.png\" alt=\"column drops\" width=\"600\" height=\"400\" \/><\/p>\n<h2>3. Layout shifter<\/h2>\n<p>Unlike the column drop pattern, Luke\u2019s \u201clayout shifter\u201d uses many breakpoints. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0310.png\" alt=\"layout shifter\" width=\"600\" height=\"400\" \/> Smartphone and tablet-sized viewports see a typical stacked layout, and the design grows more complex with wider browsers by rearranging content with a specific plan. This requires designers to consider each breakpoint range as if it were an independent design, but works well for visual-heavy sites like portfolios, agency sites, and photo galleries.<\/p>\n<h2>4. Tiny tweaks<\/h2>\n<p>Luke\u2019s \u201ctiny tweaks\u201d pattern is the most straightforward strategy: content, margins and padding all subtly increase with viewport size while using the same layout. This low-maintenance approach best serves simple, single-column designs \u2014 or designers on tight deadlines with little budget for later adjustments. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0414.png\" alt=\"tiny tweaks\" width=\"600\" height=\"400\" \/><\/p>\n<h2>5. Off-canvas<\/h2>\n<p>Luke\u2019s \u201coff-canvas\u201d pattern pushes secondary content out of sight, literally outside of the viewport until called upon. Rather than stacking content vertically on small viewports, this pattern places them side by side with a trigger \u2014 typically JavaScript \u2014 that \u201cshifts\u201d adjacent panels into and out of the viewport. This is a real boon not only to navigation, but also to blogs that need to focus on large amounts of text and keep asides literally to the side. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0018.png\" alt=\"off-canvas\" width=\"600\" height=\"400\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p>When Luke Wroblewski researched these at the <a href=\"https:\/\/mediaqueri.es\/\" target=\"_blank\" rel=\"noopener noreferrer\">Media Queries<\/a> website, he looked for broad, repeating trends among many different sites. He found that there is no one quick design solution that covers every situation. And while exceptions to the above patterns may exist, these cover most situations that occur across the web. Designers can choose from these five patterns to give their layouts direction before they design \u2014 a real head start in their work. To learn more about current web design trends and techniques, check out the free guide <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web Design Trends 2015 &amp; 2016<\/a>.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone \" src=\"https:\/\/www.awwwards.com\/awards\/gallery\/2015\/08\/ux-pin-ebook-trends.jpg\" width=\"714\" height=\"277\" alt=\"Web Design Book of Trends\"\/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion. <\/p>\n","protected":false},"author":27,"featured_media":10902,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,15,4,7],"tags":[],"class_list":["post-10896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-responsive-web-design","category-ui-design","category-web-design"],"yoast_title":"","yoast_metadesc":"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Timeless Responsive Design Layouts to Consider | UXPin<\/title>\n<meta name=\"description\" content=\"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Timeless Responsive Design Layouts to Consider\" \/>\n<meta property=\"og:description\" content=\"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-18T05:27:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-12T09:56:04+00:00\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-17-at-9.30.16-PM.png\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"5 Timeless Responsive Design Layouts to Consider\",\"datePublished\":\"2015-12-18T05:27:48+00:00\",\"dateModified\":\"2024-06-12T09:56:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/\"},\"wordCount\":534,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-17-at-9.30.16-PM.png\",\"articleSection\":[\"Blog\",\"Process\",\"Responsive Web Design\",\"UI Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/\",\"name\":\"5 Timeless Responsive Design Layouts to Consider | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-17-at-9.30.16-PM.png\",\"datePublished\":\"2015-12-18T05:27:48+00:00\",\"dateModified\":\"2024-06-12T09:56:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-17-at-9.30.16-PM.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-17-at-9.30.16-PM.png\",\"width\":860,\"height\":337,\"caption\":\"Screen Shot 2015 12 17 at 9.30.16 PM\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/5-useful-responsive-design-layouts-to-consider\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Timeless Responsive Design Layouts to Consider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Timeless Responsive Design Layouts to Consider | UXPin","description":"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/","og_locale":"en_US","og_type":"article","og_title":"5 Timeless Responsive Design Layouts to Consider","og_description":"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/","og_site_name":"Studio by UXPin","article_published_time":"2015-12-18T05:27:48+00:00","article_modified_time":"2024-06-12T09:56:04+00:00","author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-17-at-9.30.16-PM.png","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"5 Timeless Responsive Design Layouts to Consider","datePublished":"2015-12-18T05:27:48+00:00","dateModified":"2024-06-12T09:56:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/"},"wordCount":534,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-17-at-9.30.16-PM.png","articleSection":["Blog","Process","Responsive Web Design","UI Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/","name":"5 Timeless Responsive Design Layouts to Consider | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-17-at-9.30.16-PM.png","datePublished":"2015-12-18T05:27:48+00:00","dateModified":"2024-06-12T09:56:04+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Learn about the 5 most common responsive design patterns. Written by responsive designer Ben Gremillion.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-17-at-9.30.16-PM.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-17-at-9.30.16-PM.png","width":860,"height":337,"caption":"Screen Shot 2015 12 17 at 9.30.16 PM"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/5-useful-responsive-design-layouts-to-consider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"5 Timeless Responsive Design Layouts to Consider"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=10896"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10896\/revisions"}],"predecessor-version":[{"id":53439,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10896\/revisions\/53439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/10902"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=10896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=10896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=10896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}