Multi-Device Layouts
Responsive Web Design Patterns
Responsive web design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices.
Responsive web design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices.
Most layouts used by responsive web pages can be categorized into one of five patterns: mostly fluid, column drop, layout shifter, tiny tweaks and off canvas. In some cases, a page may use a combination of patterns, for example column drop and off canvas. These patterns, originally identified by Luke Wroblewski , provide a solid starting point for any responsive page.
To create simple, easy-to-understand samples, each the samples below were created with real markup using
flexbox
, typically with three content
div
’s contained within a primary container
div
. Each sample was written starting with the smallest view first and breakpoints were added when necessary. The
flexbox layout mode is well supported
for modern browsers, though may still require vendor prefixing for optimal support.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .