Diseño Responsivo 2
Imágenes de fondo con Background-cover de CSS3
Antes de CSS3 teníamos que recurrir a plugins como backstretch para poner una imagen de fondo en una página web, ahora podemos ocupar la propiedad background-cover, si queremos ponerla en toda la página podemos utilizar el siguiente código:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ahora claro que no estamos obligados a poner la imagen en todo el sitio, podemos aplicarla a un div o una sección, cambiando la parte de html por el id o clase de la etiqueta(s) respectiva(s).
La gran ventaja de esta solución es que la imagen se adapta al ancho de la pantalla y por lo tanto no afectará a la responsividad de nuestro sitio.
¿Es tu página web responsiva?
¿Qué es una página web responsiva?
Es una página web que se adapta al dispositivo que la muestra, o sea si esa página es vista desde un celular automáticamente se adaptará para
En la página web de responsinator puedes revisar como se verá en página web en distintos dispositivos móviles y determinar por tu cuenta si su diseño es reponsivo o no.
¿Cómo hacer una página web responsiva?
La solución compleja es utilizar media queries.
Otra opción es ocupar frameworks de diseños responsivo como es el caso de Twitter Bootstrap
¿Por qué tu página web tiene que ser responsiva?
Cada día hay más dispositivos móviles, y esta tendencia va en aumento.
si tu página la twittean lo más probable es que la verán de un dispositivo móvil ya sea smartphone o tablet, y la página no se ve bien, indudablemente la cerrarán.
Otras consideraciones
En el diseño responsivo suelen haber imágenes responsivas, o sea, que se adapten al tamaño de la pantalla, pero esto no quiere decir que esas imágnes sean más livianas, solo se muestran en menor tamaño, es por eso que si el sitio tiene muchas imágenes es bueno considerar multiples fotos y enviar solo las específicas. Con PHP, Rails es posible detectar el dispositivo y enviar una página específica al usuario con el tamaño de las fotos correspondiente.
¿Quiéres aprender a hacer sitios web responsivos?
En el taller de En1mes te enseñaremos a hacer aplicaciones web responsivas optimizadas para tus clientes.