Responsive Web Design Patterns
Versatility is required to elegantly portray webpages in screens and windows of unpredictable sizes. An increasingly used solution is Responsive Web Design, wherein page elements adapt to size of the viewing space used. Content organization has developed into a few consistent patterns. The most common of these are:
- Column drop – At its largest, this format has a multi-column layout and, as the window decreases in size, moves to a single column. The size of the elements within the layout maintain cohesion.
- Layout shifter – A highly adaptable layout, as size decreases, rows can become separate columns.
- Mostly fluid – A single column layout which requires flexible images and grids to compress as the size decreases.
- Off canvas – Navigation elements are shifted off-screen as size is reduced.
- Tiny Tweaks – Text-heavy, single-column layouts which adapt simply to reduced widths.
Sources:
https://www.tisindia.com/blog/responsive-web-design-basic-patterns-principles-examples/
https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/
http://www.lukew.com/ff/entry.asp?1514
