Diseñando una web responsive desde 0

Cómo hacer que un sitio web sea responsive con css

A estas alturas, la mayoría de los propietarios de negocios entenderán lo importante que puede ser tener un sitio web, no sólo para su imagen de marca, sino también para ayudar en sus esfuerzos de marketing y promoción. El marketing digital se ha convertido en un pilar para las empresas que buscan nuevos clientes y más ventas, y para ello se necesita un sitio web bien construido. Sin embargo, en la actualidad, los principales motores de búsqueda y otras plataformas publicitarias hacen cada vez más hincapié en que los sitios web ofrezcan a sus usuarios una experiencia fluida y adaptable que satisfaga las necesidades de los usuarios de dispositivos móviles. Aquí es donde entra en juego el diseño web responsivo.

Básicamente, la idea de hacer que un sitio web sea adaptable es ayudar a los usuarios de dispositivos móviles a encontrar la información que necesitan de la forma más fácil y directa, y ofrecerles una experiencia positiva cambiando el diseño del sitio web para adaptarlo a su dispositivo. Esto le beneficia a usted al guiar a sus clientes potenciales hacia la información más relevante para aumentar la probabilidad de conversión (después de todo, a nadie le gusta tener que buscar en un sitio web durante mucho tiempo para encontrar el producto que quiere comprar). También beneficia a los motores de búsqueda, ya que los sitios responsivos y bien construidos tienen muchas más probabilidades de ofrecer la información más relevante y más rápidamente, al tiempo que proporcionan a los usuarios la mejor experiencia de usuario (o UX).

Plantillas de sitios web con capacidad de respuesta

Media QueriesCSS3 admite los mismos tipos de medios que CSS 2.1, como screen, print y handheld, pero ha añadido docenas de nuevas características de medios, como max-width, device-width, orientation y color. Los nuevos dispositivos fabricados después del lanzamiento de CSS3 (como el iPad y los dispositivos Android) soportarán sin duda las funciones de medios. Por lo tanto, llamar a una consulta de medios utilizando las características de CSS3 para apuntar a estos dispositivos funcionaría bien, y será ignorado si se accede por 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 para 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". "CSS3 Media QueriesAbove are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Veamos ahora cómo utilizar las consultas de medios de CSS3 para crear diseños web adaptativos. Las propiedades min-width y max-width hacen exactamente lo que sugieren. La propiedad min-width establece la anchura mínima del navegador o de la pantalla a la que se aplicará un determinado conjunto de estilos (o una hoja de estilos 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. Cualquier cosa por encima de la anchura máxima del navegador o de la pantalla especificada no se aplicaría a la consulta de medios respectiva.Tenga en cuenta en los ejemplos siguientes que estamos utilizando la sintaxis para las consultas de medios que se podrían utilizar todas en una hoja de estilo. Como se mencionó anteriormente, la forma más eficaz de utilizar las consultas de medios es colocarlas todas en una hoja de estilos CSS, con el resto de los estilos del sitio web. De esta manera, no es necesario hacer múltiples peticiones para múltiples hojas de estilo.@media screen and (min-width: 600px) {

Ejemplos de sitios web con capacidad de respuesta

Significa diseñar su sitio web de forma que fluya fácilmente desde el escritorio al móvil, tabletas, smartwatches, IoT y otros dispositivos, redimensionando las páginas, el texto y las imágenes según el dispositivo en el que se visualicen. De este modo se evita que las páginas se muestren más grandes que la altura y anchura del dispositivo.

Una de cada tres personas en el mundo utiliza un smartphone. Esto demuestra hasta qué punto se navega por Internet desde el móvil. Un diseño web responsivo elimina la necesidad de hacer zoom, desplazarse a derecha e izquierda innecesariamente. Los usuarios dispondrán de espacio y visibilidad suficientes para diferentes pestañas y llamadas a la acción. Esto no sólo mejorará los resultados de búsqueda de los sitios web para móviles, sino que también proporciona fluidez y una experiencia óptima.

Al incorporar el diseño web responsivo, las empresas no tienen que invertir tiempo y dinero por separado en una versión móvil junto con una versión de escritorio. Tanto si hay que desarrollar, ampliar o actualizar, todo se hace en un mismo sitio, por lo que resulta asequible y lleva menos tiempo. El mantenimiento de los sitios web creados con una interfaz de usuario adaptable también es menos costoso.

Ejemplos de diseño web adaptable con código fuente

</div>El código anterior incrusta un vídeo de YouTube como un iframe y un contenedor div con la clase videoWrapper.Desglose del código:Responsive Design Checker5. Por lo general, los desarrolladores web definen el tamaño de las fuentes con píxeles. Esto funciona en sitios web estáticos, pero los sitios web responsivos necesitan una fuente responsiva. El tamaño de la fuente debe cambiar con respecto al ancho del contenedor principal. Esto es necesario para que la tipografía se ajuste al tamaño de la pantalla y sea fácilmente legible en varios dispositivos. Es similar a la unidad em pero actúa de forma relativa al elemento HTML. Debido a esto, el código debe restablecer el tamaño de fuente HTML:html { font-size:100%; }Ahora define los tamaños de fuente responsive:@media (min-width: 640px) { body {font-size:1rem;} }