Definición de diseño web adaptable

¿Qué es el diseño web adaptable? Esto es básicamente cuando el diseño del sitio web cumple con las dimensiones de la pantalla. En otras palabras, un sitio web diseñado para responder toma nota de la altura y el ancho de la pantalla (de hecho, el área visible suele ser una ventana del navegador, como en Internet Explorer) y ajusta el diseño. Página de la página web para adaptarse a la zona visible. apropiadamente (según lo considere apropiado el diseñador web o el director creativo).

Si bien esto se usa más comúnmente en diseños web, el diseño web receptivo puede ir mucho más allá de los diseños. El diseño web receptivo, que se realiza principalmente mediante un código llamado media queries (consulte mi artículo The Media Query), le permite producir páginas web independientes del área visible.

Ejemplos de casos de diseño web adaptable

Un buen ejemplo de uso de esto sería en el caso de un sitio web optimizado para adaptarse a dispositivos móviles y computadoras de escritorio, donde los enlaces en el menú superior serían más fáciles de reposicionar como una lista vertical, en lugar de una barra horizontal. Por otro lado. Este tipo de detalle se encarga de un diseño web adaptable.

Si tiene una cuadrícula en su diseño donde 10 miniaturas encajan bien en una pantalla de computadora de escritorio normal, esas miniaturas deberían ser terriblemente pequeñas para caber 10 en un iPad o iPhone. Con un diseño receptivo, puede cambiarlo para que si el ancho del dispositivo es tan corto como un iPad, solo coloque 7 miniaturas. Entonces tal vez 4 para un iPhone.

Muchos formularios de contacto en el sitio web vienen con un área de barra lateral (o dos) para ventas y otros fines. Esto es excelente para una computadora de escritorio, pero en un teléfono inteligente, de forma predeterminada, el formulario y la barra lateral están demasiado pequeños para leerlos. Con el diseño web receptivo, el formulario se puede hacer para llenar la pantalla y la barra lateral se puede ocultar, colocar debajo, «reemplazar» con otra versión más pequeña con el mismo mensaje, casi todo es posible.

Diseño web receptivo y diseños líquidos

Durante mucho tiempo, ha habido diseños web que se ajustan al tamaño (generalmente el ancho, en particular) de la ventana del navegador, llamados diseños líquidos. Estos todavía están en uso hoy en día, aunque nunca han sido tan comunes como el diseño fijo típico que encontrará en la mayoría de los sitios web (donde el diseño sigue siendo el mismo sin importar el ancho del área visible). Los diseños líquidos se utilizan con mucha frecuencia para dispositivos móviles porque se pueden contar para adaptarse a todos los tamaños de pantalla de dispositivos móviles. Este tipo de diseño suele ser muy simple, como una cuadrícula de miniaturas o una lista de botones. Pero si toma el mismo diseño y lo deja abarcar el ancho de un monitor de escritorio, generalmente resulta ser demasiado escaso, demasiado estirado o todo está sobredimensionado.

El diseño web receptivo incluye el uso de diseños tanto líquidos como fijos, para adaptarse a todos los tamaños de pantalla.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba