En la entrada de hoy daremos una introducción al diseño adaptable, conocido también como "responsivo" o flexible, proviene del ingles Responsive Design y permite adaptar el diseño de la página web a los distintos dispositivos con los que se pueda ver una página web (tablets, ordenadores, smartphones). Así que sin más vamos al meollo del asunto.
1. ¿Qué es el diseño adaptable o fluido?
Debido al auge de internet y de su acceso por parte de diferentes dispositivos con su propio ancho y alto de pantalla como smartphones, tablets u ordenadores, los diseñadores y desarrolladores, necesitaban adaptar sus páginas web a dicho formato de manera dinámica. Por ello y para ahorrar tiempo y esfuerzo nació el diseño adaptable.
Las estrategias para realizar este tipo de diseño en una página web son:
- Disposición líquida o fluida: Permite, usando hojas de estilo, que los diferentes layouts o partes de una página constraerse o extenderse. Para ello es necesario usar en su posicionamiento valores porcentuales (%) para las anchuras y alturas ya que desconocemos de antemano la configuración de la pantalla en la que se va a visualizar la página. Es recomendable usar el formato em para el texto ya que se adapta mejor (al contrario que los píxeles que son valores fijos).
- Media queries o consultas de medio: Permite, usando hojas de estilo, definir los valores necesarios para que los componentes de la página se vean bien en una determinada configuración de pantalla (resolución, relación de aspecto, orientación de la pantalla, etc).
- Imágenes fluidas: Para que las imágenes puedan adaptarse a las distitnas configuraciones de pantalla deben ocupar el máximo de ancho de la misma.
Existen varios patrones de diseño que pasamos a resumir a continuación:
1. Casi fluido: Permite adaptar el contenido de la página a las diferentes configuraciones hasta que sea imposible seguir adaptándolo, pasando entonces al diseño de una sóla columna.
2. Caída de Columna: Muy parecido al anterior. Los elementos se van colocando en columna hasta llegar al diseño de una sola columna.
3. Cambio de la Estructura: Ofrece un diseño distinto para cada configuración de pantalla.
4. Pequeños cambios: Se usan en diseños de una sola columna y sólo se realizan pequeños cambios sobre los elementos de la página.
5. Fuera de la pantalla: Esconde fuera de la pantalla elemtos de la página apareciendo estos sólo cuando son solicitados por el usuario, como por ejemplo, un botón que pulsa.
Como consejo siempre es mejor empezar con el diseño de pantalla del teléfono móvil pues así ya lo tendremos soportado desde el inicio y será mucho más fácil su desarrollo progresivo para las distintas configuraciones.
3. Pros y contras
Pros
- Ahorro de tiempo y dinero porque sólo existe un sitio web para los diferentes dispositivos.
- No se preocupa por los agentes de usuario.
- Escalabilidad.
- Necesita de javascript para implementarlo en algunos navegadores como internet explorer. Lo que lleva a una carga del mismo más lenta.
- Hay cambiar los sitios viejos para adaptarlos a este tipo de diseño.
Es importante añadir el siguiente meta-tag en nuestro elemento header pues permitirá al navegador usar el ancho del medio como ancho de la web (no tienen el mismo ancho un teléfono y una tablet, por ejemplo).
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximun-scale=1.0">
De esta manera hacemos que el contenido sea de lectura más amigable al usuario pues no tiene que hacer zoom para leer el contenido de la página web (gracias al maximun-scale) y se arregla un bug en IOS que causaba zoom al girar el móvil.
En futuras entradas hablaremos de cómo implementar este tipo de diseño de una manera práctica. Esto ha sido una introducción a la misma con la que espero que os haya quedado más claro lo qué es el diseño adaptable.
¡Gracias por leerme!.
Un apunte por experiencia propia. Un amigo mío navegaba con un tablet un poco tocado y si no le permite aumentar la fuente no puede hacer clic en los enlaces de la parte izquierda.
ResponderEliminarEs una tontería, pero creo que sirve de ejemplo para darnos cuenta de que no es bueno limitar las opciones de los usuarios. En este caso, el zoom máximo.
Bueno, la diseño adaptable debe permitir dar la opción al usuario de poder interactuar con el interfaz. Para ello siempre podemos ocultar el componente que nos interesa para ahorrar espacio y mostrarlo posteriormente de alguna forma. Por ejemplo, los menús, podemos mantenerlo oculto y usar un icono u otra forma para indicarle que al pulsarlo se desplegará dicho menú, una vez hecho esto, el usuario podrá elegir la opción sin que esté minimizado. Un ejemplo es la forma que tienen blogspot o wordpress de mostrar los menús en los móviles, con un componente cuadrado con tres líneas.
Eliminar