Diseño responsivo wikipedia
No es ningún secreto que cada vez más personas acceden a Internet utilizando sus dispositivos móviles, además de los ordenadores de sobremesa o en su lugar. De hecho, hay casi 7.000 millones de usuarios de móviles en todo el mundo. (Como referencia, la población mundial es actualmente de 7.800 millones. Eso es mucha actividad móvil).
El 40% de los consumidores utiliza su dispositivo móvil para investigar antes de realizar una compra en persona. Más de la mitad de los consumidores compran habitualmente a través de sus teléfonos inteligentes, y el 55% de los compradores compran a través del móvil después de encontrar productos en las redes sociales.
Pero, ¿qué es exactamente el diseño de sitios web con capacidad de respuesta, cómo funciona y por qué debería hacer el cambio? Esta guía se propone responder a estas preguntas, ofrecer algunas estadísticas convincentes y enseñar las características clave del diseño responsivo que todos los profesionales del marketing deberían conocer. Empecemos.
El diseño web con capacidad de respuesta se refiere a un sitio web diseñado con características, contenido y medios aptos para móviles. Los sitios web con capacidad de respuesta cambian y se adaptan a cualquier dispositivo que utilice el visitante, incluidos los teléfonos inteligentes, las tabletas y los ordenadores de sobremesa.
Bootstrap
}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) {
Ejemplos de sitios web con capacidad de respuesta
En todo el mundo se utilizan millones de dispositivos, desde tabletas hasta teléfonos y grandes ordenadores de sobremesa. Los usuarios de estos dispositivos quieren poder ver las mismas páginas web en cualquiera de ellos sin problemas. El diseño de sitios web con capacidad de respuesta es un enfoque utilizado para garantizar que los sitios web puedan verse en todos los tamaños de pantalla, independientemente del dispositivo.
El diseño web responsivo es un método que permite que el contenido del sitio web y el diseño general se muevan y cambien en función del dispositivo que se utilice para verlo. En otras palabras, un sitio web con capacidad de respuesta responde al dispositivo y muestra el sitio web en consecuencia.
Por ejemplo, si cambias el tamaño de esta ventana ahora mismo, el sitio web de Lifewire se moverá y cambiará para adaptarse al nuevo tamaño de la ventana. Si abres el sitio web en tu dispositivo móvil, verás que nuestro contenido se redimensiona a una columna para adaptarse a tu dispositivo.
Aunque ya en 2004 se utilizaron otros términos como fluido y flexible, el diseño web responsivo fue acuñado e introducido por primera vez en 2010 por Ethan Marcotte. Él creía que los sitios web debían estar diseñados para el “flujo y reflujo de las cosas” en lugar de permanecer estáticos.
Código de diseño web responsivo
El diseño web responsivo se utiliza para que su sitio web se vea bien y sea fácil de leer/navegar, independientemente del dispositivo que utilice el visitante. Esto significa que el contenido/diseño/maquetación de su sitio web va a cambiar en función del tamaño de la pantalla/orientación/resolución de la pantalla del espectador. Un diseño responsivo garantizará una buena experiencia de usuario en todos los dispositivos. Tus visitantes no tendrán que pellizcar el zoom en sus teléfonos ni tendrán problemas para navegar hasta el contenido que buscan.
Si sólo visitan su sitio web en un ordenador, nunca sabrán si su sitio web es responsivo o no. A continuación se muestra un ejemplo de un diseño responsivo sólido. Fíjate en cómo los diferentes elementos del diseño se encogen, se mueven y se apilan, dependiendo del dispositivo.
No todos los sitios web responsivos son iguales. Hay muchas maneras de implementar el diseño responsivo en un sitio web. Requieren una arquitectura HTML adecuada, consultas de medios CSS, opciones de navegación móvil y mucho más.
Si tienes un diseño de sitio web estático antiguo, probablemente sea muy difícil de usar en dispositivos móviles. ¿Has buscado alguna vez el menú de un restaurante en su página web desde tu teléfono? Apuesto a que te ha resultado muy difícil hacer un pellizco de zoom y navegar hasta una de sus piezas de contenido más importantes. Si el sitio web de tu negocio no es responsivo, te garantizo que tus visitantes están teniendo el mismo problema.