Rol de los fondos en el diseño web sensible (Responsive design)

Rol de los fondos en el diseño web sensible (Responsive design)
Es una verdad, el fondo es una tortura a menos de que sea un patrón o se trabaje para un solo dispositivo, pero en este momento, con las variadas resoluciones de pantalla y los diferentes dispositivos móviles, los usuarios quieren ser sorprendidos con algo diferente y el fondo es un punto muy importante que puede marcar la diferencia. Ahora bien, sucede se tiene un fondo como el de la imagen anterior, la línea básica de estilo es:
  1. body {
  2. background-image: url(bg_body.png);
  3. }
.. y este es el resultado : Bueno en realidad no es lo que se espera, y si...
  1. body {
  2. background-image: url(bg_body.png);
  3. background-repeat: no-repeat;
  4. background-position: left top;
  5. }
Parece que ese resultado tampoco es el requerido y seguro no va a descrestar al usuario, entonces se debe comenzar a pensar en soluciones como: hacer el fondo más grande o ajustes en algún programa de edición de imágenes, pero eso no siempre es muy conveniente, hay que tener varias cosas en cuenta como: el peso del archivo o la pixelación en caso de que sea un archivo demasiado pequeño. La solución Bienvenido css3 :) Los nuevos atributos de css en su tercera versión y el diseño de sitios web sensibles traen la solución casi definitiva a este problema. Bien a hacer lo básico:
  1. body {
  2. background-image: url(bg_body.png);
  3. background-repeat: no-repeat;
  4. -moz-background-size: cover;
  5. -webkit-background-size: cover;
  6. background-size: cover;
  7. }
El resultado : El peso de la imagen es el mismo al igual que su tamaño en pixeles, pero ahora esta cubriendo el área total del body. El background-size cover es una propiedad css3 que se ajusta al tamaño del contenedor sin necesidad de un alto o ancho especificado, para cualquier resolución de pantalla. Listo ahora el fondo se auto ajusta a nuestras pantallas problemas resuelto . o no? Bueno sucede que surge otro reto, dispositivos móviles, Tomemos como referencia el iPad, el cual sirve como punto de partida para comenzar un proyecto que soporte responsive design. Las propiedades que se utilizan anteriormente solucionan muy bien los problemas que se generan en una pantalla de PC o un portátil sin tener que modificar las imágenes, pero ese tipo de pantallas no responden a la variación de ángulo (modos landscape o portrait). La imagen anterior muestra, haciendo uso de las propiedades mencionadas anteriormente, cómo responde un dispositivo como iPad, comportamiento muy similar en otros dispositivos. Solución css3 y diseño sensible junto a la propiedad media query: Hagamos el avanzado:
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px) {
  4. body {
  5. background-image: url(bg_body.png);
  6. -moz-background-size: auto;
  7. -webkit-background-size: auto;
  8. background-size: auto;
  9. }
  10. }
El media query reconoce el tamaño del dispositivo en el cual se renderiza el sitio y toma los tamaños definidos en el css para mostrar los atributos únicamente donde el tamaño o la posición se cumplan. Este fue un tip ajustado para un fondo, pero las posibilidades de los media query permiten ajustar cualquier elemento del DOM, en un próximo post mostraremos otras posibilidades de esta poderosa herramienta. Bueno para finalizar dejamos un listado de media query que hasta ahora se utilizan en cuanto a diseño sensible para los dispositivos más comunes:
  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  3. /* Styles */
  4. }
  5. /* Smartphones (landscape) ----------- */
  6. @media only screen and (min-width : 321px) {
  7. /* Styles */
  8. }
  9. /* Smartphones (portrait) ----------- */
  10. @media only screen and (max-width : 320px) {
  11. /* Styles */
  12. }
  13. /* iPads (portrait and landscape) ----------- */
  14. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  15. /* Styles */
  16. }
  17. /* iPads (landscape) ----------- */
  18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  19. /* Styles */
  20. }
  21. /* iPads (portrait) ----------- */
  22. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  23. /* Styles */
  24. }
  25. /* Ordenadores de escritorio y portatiles ----------- */
  26. @media only screen and (min-width : 1224px) {
  27. /* Styles */
  28. }
  29. /* Large screens ----------- */
  30. @media only screen and (min-width : 1824px) {
  31. /* Styles */
  32. }
  33. /* iPhone 4 and high pixel ratio devices ----------- */
  34. @media
  35. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  36. only screen and (min-device-pixel-ratio : 1.5) {
  37. /* Styles */
  38. }
Compatibilidad: IE9+ - Ffox 3+ - Chrome - Safari 2+ Enlaces relacionados:

Hemos trabajado con estas marcas, es la tuya la siguiente?

  • Shock
  • OndadeMar
  • AxiaCore
  • Credibanco

Nueva York

50 West. 72nd Street. NY 10023
+1 646 688 2356

Londres

145-157 St John Street. EC1V 4PW
+44 07751 092 425

Bogotá

Cll 100 # 14 - 63 OF 801
+57 1 704 7348 | +57 1 236 0310