Multi-Device Layout Patterns

by

Introducción a los tipos de layouts más conocidos.

A medida que los layouts responsive fueron evolucionando, surgieron varios patrones que ya tienen nombre y apellido.

Los más populares

Según Luke Wroblewski (groso), los patrones más populares son:

En su post explica y grafica cada uno.

Off Canvas

Un web designer tomó el patrón Off Canvas (uno de los que mejor se adaptan) y profundizó un el concepto: http://jasonweaver.name/lab/offcanvas/

Básicamente se trata de un layout de 3 columnas que se acomoda segun el tamaño de pantalla. Dentro de las columnas, el contenido principal se ubica en la columna central. Los elementos secundarios o de navegación se ubican en las columnas de los costados.

Centrado por default:

Centrado por default

Acceso a sección izquierda:

Sección izquierda

Cuanto mayor es el espacio en la pantalla, más columnas se muestran dentro del area visible:

Todas las columnas visibles

Más patrones

Brad Frost (otro groso) escribió hace un par de años algunos posts sobre patrones de navegación responsive. Explica en detalle pros y contras de varios:

Más info sobre estos patrones en: