¿Qué es el diseño web receptivo?

• Mayo 4, 2024

Hay tres características principales de un diseño web receptivo, que son diseños fluidos, imágenes redimensionables y consultas de medios. Las consultas de medios no son realmente tan nuevas para el diseño web. Comenzando como tipos de medios en CSS2.1, podríamos diseñar hojas de estilo tanto para la web como para la impresión, asegurando de alguna manera que la página web se vería igual en la pantalla y cuando se imprima. Esto progresó en consultas de medios en CSS3. Esta consulta verifica el ancho del dispositivo de medios (max-device-width) y lo compara con un valor establecido como 480px o 768px. En respuesta a esta consulta, utilizamos estilos CSS para cambiar el diseño fluido y cambiar el tamaño de las imágenes para la pantalla.

Puede probar fácilmente si un sitio web tiene un diseño receptivo. Comience con el navegador en todo el ancho de la pantalla de su computadora. Luego arrastre el borde derecho del navegador hacia la izquierda para reducir el ancho de la ventana del navegador. Debería ver que las imágenes se vuelven más pequeñas y el diseño tomará los divs flotantes que están uno al lado del otro y los apilará verticalmente. Por ejemplo, si tenemos seis imágenes (seis divisiones) por fila en una página de galería en pantalla completa, a medida que reducimos el ancho de la pantalla, el número de imágenes en una fila se reduce y apila progresivamente, según sea necesario. Una vez que el ancho se reduce a una cierta cantidad, las imágenes mismas comenzarán a cambiar de tamaño. Si observa de cerca, también verá que ciertos elementos de diseño, como los enlaces de navegación, pueden reducirse a un icono o incluso desaparecer. Esto también está controlado por la hoja de estilo CSS.

Al diseñar sitios web, tenga en cuenta no solo cómo se verán los elementos de diseño de la página web en el ancho de pantalla completa, sino también cómo se verán cuando estén apilados. Considere qué elementos de diseño se pueden eliminar de la pantalla en el ancho de pantalla más pequeño sin reducir la funcionalidad del sitio web. Como las características y la tecnología para un diseño receptivo están cambiando rápidamente, mantenerse al día con todas las mejoras puede llevar mucho tiempo. Si prefiere pasar su tiempo diseñando en lugar de codificar, eche un vistazo a algunos de los hermosos temas receptivos disponibles para Wordpress. Si es una empresa de diseño pequeña, es posible que desee considerar comenzar desde uno de estos diseños de temas receptivos al diseñar sitios web.

Instrucciones De Vídeo: Como hacer un sitio web con Bootstrap 4 (Mayo 2024).