Definición
El sistema de grid o rejilla facilita disponer los distintos componentes que forman la página de una manera ordenada y estructurada. De esta manera, contribuye a que las páginas tengan una buena jerarquía visual, legibilidad y escaneabilidad. Además, el grid se adapta de manera flexible a distintos tamaños de pantalla, lo que facilita la consistencia entre distintos tipos de dispositivos (ordenadores, tablets, móviles).
En la Junta de Andalucía se utiliza un grid de 12 columnas que se escala en función del tamaño del dispositivo o el navegador utilizado. En concreto, el grid está basado en Bootstrap, una biblioteca de software libre de uso frecuente.
El contenido de cada página se desarrolla en un bloque centrado horizontalmente, que se denomina contenedor. El tamaño del contenedor está determinado por la resolución de la pantalla en la que se está presentando la página. Se establecen además una serie de puntos de ruptura o puntos de corte, que son resoluciones a partir de las cuales se introducen adaptaciones en cómo se presentan los elementos del interfaz de usuario. Por ejemplo, a partir de un determinado punto de corte se pueden reordenar los elementos, cambiar el modelo de menú...).
Puntos de ruptura
En concreto, estos son los tamaños de contenedores y puntos de ruptura en el grid de la Junta de Andalucía:
| Puntos de ruptura | Contenedor | Dispositivos |
|---|---|---|
| 576px | 540px | Móviles |
| 768px | 720px | Tablets |
| 992px | 960px | Ordenadores |
| >1300px | 1275px | Ordenadores con pantalla grande |
Pautas de uso
A la hora de aplicar el grid, ten en cuenta las siguientes recomendaciones:
- Si tienes un sistema de navegación diferente para escritorios y móviles, utiliza el sistema de navegación diseñado para escritorio al menos hasta el punto de ruptura de 768px.
- Cuando en tu diseño introduzcas un bloque de texto largo, para resoluciones superiores a 992px utiliza como máximo 8 de las 12 columnas disponibles. De esta forma, te garantizas una longitud de línea adecuada para la legibilidad del texto.
- Cuando introduzcas en tu diseño un elemento interactivo complejo (p.ej. un mapa, un gráfico interactivo, un vídeo...) en resoluciones inferiores a 768px preséntalo a ancho completo, utilizando las 12 columnas disponibles. En resoluciones superiores a 768px, reserva al menos 6 columnas.
- Intenta que tu diseño se adapte correctamente a resoluciones de hasta 320px de ancho, para dar soporte a dispositivos antiguos o limitados.