}Mover el contenido de pantallas más anchas a más estrechas.Media QueriesCSS3 soporta todos los mismos tipos de medios que CSS 2.1, como pantalla, impresión y mano, pero ha añadido docenas de nuevas características de medios, incluyendo max-ancho, dispositivo-ancho, orientación y color. Los nuevos dispositivos fabricados después del lanzamiento de CSS3 (como el iPad y los dispositivos Android) serán definitivamente compatibles con las características de medios. Por lo tanto, llamar a una consulta de medios utilizando las características de CSS3 para dirigirse a estos dispositivos funcionaría perfectamente, y será ignorada si se accede a ella desde un navegador de ordenador antiguo que no soporta CSS3.En el artículo de Ethan Marcotte, vemos un ejemplo de una consulta de medios en acción:<link rel=”stylesheet” type=”text/css”
}El código anterior procede de una plantilla gratuita de consultas de medios múltiples entre dispositivos populares de Andy Clark. Vea las diferencias entre este enfoque y la inclusión de diferentes archivos de hojas de estilo en el marcado, como se describe en su libro “Hardboiled Web Design”.Consultas de medios CSS3Lo anterior son algunos ejemplos de cómo podrían funcionar las consultas de medios, tanto de CSS 2.1 como de CSS3. Veamos ahora cómo utilizar las consultas de medios de CSS3 para crear diseños web responsivos. Muchos de estos usos son relevantes hoy en día, y todos serán definitivamente utilizables en un futuro próximo.Las propiedades min-width y max-width hacen exactamente lo que sugieren. La propiedad min-width establece una anchura mínima del navegador o de la pantalla a la que se aplicará un determinado conjunto de estilos (o una hoja de estilo independiente). Si algo está por debajo de este límite, el enlace de la hoja de estilo o los estilos serán ignorados. La propiedad max-width hace justo lo contrario. Todo lo que esté por encima del ancho máximo del navegador o de la pantalla especificado no se aplicará a la respectiva consulta de medios.Tenga en cuenta en los ejemplos siguientes que estamos utilizando la sintaxis para las consultas de medios que podrían utilizarse todas en una hoja de estilo. Como se mencionó anteriormente, la forma más eficiente de utilizar las consultas de medios es colocarlas todas en una hoja de estilos CSS, con el resto de los estilos para el sitio web. De esta manera, no hay que hacer múltiples peticiones para múltiples hojas de estilo.@media screen and (min-width: 600px) {
El diseño responsivo optimiza la experiencia de navegación del usuario al crear una página web flexible y receptiva, optimizada para el dispositivo que accede a ella. El aumento del uso de Internet y la proliferación de aplicaciones web en tabletas y dispositivos móviles ha sido el motor de este desarrollo. ¿Qué es el diseño web responsivo?
El diseño responsivo es una técnica de diseño y desarrollo web que crea un sitio o sistema que reacciona al tamaño de la pantalla del usuario. El diseño responsivo optimiza la experiencia de navegación del usuario creando una página web flexible y receptiva, optimizada para el dispositivo que accede a ella.
Se ha producido un claro cambio en la audiencia hacia la navegación móvil y el diseño responsivo representa la forma más sencilla de llegar a los usuarios a través de múltiples dispositivos y garantiza una experiencia de usuario fluida. El año 2013 ha sido considerado el “Año del Diseño Responsivo”, y con la creciente preferencia de los lectores por leer las noticias en línea a través de múltiples dispositivos (es decir, tabletas y teléfonos inteligentes), el diseño responsivo es cada vez más importante
Leonardo Moreno 31 de marzo de 2021 El diseño responsivo consiste en responder al tamaño de los dispositivos (escritorio, tableta, smartphone, etc.) desde los que se visualiza un sitio web, adaptando la información, sus dimensiones y mostrando los componentes de forma correcta y ordenada. También es una práctica obligatoria para nuestros tiempos, en los que la tecnología se está diversificando, así como las formas de acceder a internet.Orígenes
Un punto de ruptura es cuando el contenido de un sitio web se adapta visualmente de una manera determinada para ofrecer una mejor experiencia al usuario. Por ejemplo, cuando entramos en la web de The New Yorker, podemos ver todas las opciones del menú de navegación en la cabecera. Sin embargo, si accedemos a la web desde un dispositivo móvil, el menor tamaño de la pantalla hará que la barra de navegación aparezca en la parte superior izquierda de la pantalla como un menú desplegable.Veamos algunos buenos ejemplos y prácticas:
YoutubeLa página principal de YouTube distribuye las miniaturas de los vídeos de forma fluida en sus dispositivos, pasando de una lectura horizontal en el escritorio a una vertical en el móvil. Otro cambio importante, y que se define como una buena práctica, es ocultar el menú de navegación en móvil, dentro de lo que se conoce como “botón hamburguesa”. Hay que tener en cuenta también que la búsqueda en escritorio es una entrada completa, mientras que en móvil es sólo un icono que tras la pestaña, mostrará la entrada.
Con el aumento estratosférico del uso de dispositivos móviles. Y el aumento de la popularidad de los teléfonos móviles; te harías un gran favor si tu sitio web no está diseñado para responder y ajustarse a los dispositivos móviles y de otro tipo.
Para evitar situaciones como ésta, valdría la pena evaluar la calidad del diseño de su sitio web. Los beneficios que le reportará a largo plazo compensarán lo que vaya a gastar en él al principio.
Con un diseño de este tipo, estarás muy por delante de tu competencia. Además, su sitio web se adapta perfectamente a los nuevos dispositivos con los que los usuarios navegan por Internet, por ejemplo, relojes inteligentes, dispositivos IoT, etc. Su sitio web puede ajustarse automáticamente para adaptarse a cada pantalla. Y por último…