Diseño web adaptable, práctico

AdinteractiveWebDiseño web adaptable, práctico

El diseño web adaptable o Responsive Web Design que son una serie de practicas aplicadas al diseño web que le permiten al usuario acceder a un sitio web desde diferentes medios como dispositivos mobiles, tablets, pantallas wide y diferentes resoluciones en los computadores, esto partiendo de la base que todo diseño web debe estar centrado en la experiencia del usuario al momento de acceder a un sitio web, por este motivo es que actualmente muchos sitios web estan usando el Responsive Web Design.

Por este motivo Adinteractive ha querido compartirles esta presentación que nos explica mejor las mejores practicas para aplicar el Responsive Web Design, y como aplicar un diseño fluido que se adapte a cualquier pantalla.

Comenzemos por el diseño fluido

El principal concepto en el que se apoya el Diseño Web Adaptable es en abandonar los anchos fijos de nuestra web. Estos deberán ser fluidos. En lugar de diseñar nuestra web basándonos en valores fijos (por ejemplo width: 960px), el diseño fluido está pensado en términos de proporciones. De esta manera cuando veamos nuestra web a través de la pequeña pantalla de un móvil todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. Por ejemplo, para saber ahora el ancho de un elemento tendremos que dividir el ancho inicial del mismo entre el ancho del elemento “padre”, por llamarlo de alguna manera sencilla. Pongamos que tenemos por ejemplo esta estructura:

Diseño web fluido

En este ejemplo partíamos de unos valores fijos: un contenedor de 960 pixels y dentro del mismo un elemento de 360 pixels de ancho. Si dividimos el segundo entre el primero y multiplicamos el resultado por 100 obtendremos el valor de 37,5%, que será el ancho que aplicaremos a dicho elemento. Es decir, el ancho del elemento interior será siempre el 37,5% del ancho del primero. De esta forma cuando el ancho del elemento “padre” se adapta, todos los anchos de los elementos interiores varían en función de su porcentaje. Ahora el elemento interno, en la hoja de estilos, tendrá en lugar de un width=”360px” un width=”37,5%”.

Lo mismo haremos con los tamaños de las fuentes (por ejemplo, si el tamaño general es del 100%, que equivale a 16px, y tenemos un título de 22px, su nuevo tamaño será de 22/16 = 1.375em). ¿Pero, qué pasa con las imágenes u otros elementos que tienen un ancho fijo? Podemos adaptar su ancho así:

[code]img, video, object {max-width:100%;}[/code]

De esta manera su ancho nunca excederá del ancho del elemento que la contiene. Y si dicho elemento cambia de ancho, también lo hará la imagen en todos los navegadores modernos. ¿He dicho modernos? Efectivamente, IE7 e IE6 no lo soportan. Para estos navegadores lo mejor es incluir en su hoja de estilos específica:

[code]img, video, object {width:100%;}[/code]

Esta regla es completamente distinta de la anterior: Ahora decimos que la imagen (por ejemplo) siempre tendrá el mismo ancho de su contenedor. Es por ello por lo que hay que tener cuidado sobre qué elemento se aplica.

Esto está muy bien hasta que nos encontramos con anchos de pantalla realmente pequeños (por ejemplo un móvil). Si tenemos una web con tres columnas, montones de botones, menú horizontal a la derecha del logo, etc.. al comprimir tanto el tamaño de la pantalla, por mucho que los anchos sean fluidos, puede acabar todo en un caos. Es probable que tengamos que prescindir de ciertos elementos de la web o situarlos en un lugar diferente. Para ello utilizaremos los Media Queries.

Media query

Como decíamos ningún diseño escala de manera adecuada cuando cambia el contexto para el que fue pensado. Los Media Queries forman parte de CSS3 e inspeccionan las características físicas del medio que va a mostrar nuestro diseño (no olvidemos que “query” equivale a “pregunta”, es como preguntar: ¿qué medio se está usando?). Si las características del medio utilizado por el usuario están dentro de un condicional establecido con los Media Queries, se aplicarán una serie de instrucciones CSS contenidas dentro del mismo, de esta manera cuando nuestro diseño fluido cambia de tamaño podremos aplicar una serie de instrucciones CSS pensadas en exclusiva para ese nuevo tamaño. Vamos a ver un ejemplo.

El ancho de pantalla actual del iPhone es de 320px. Vamos a suponer que para ese ancho nuestro diseño fluido presenta una serie de dificultades (puede ser desde cambiar el logo, eliminar una columna, cambiar la organización de los elementos de la pantalla, etc…). Dentro de nuestra hoja de estilos haríamos:

[code]@media screen and (max-width: 320px) {
/* Aquí van las reglas CSS necesarias */
}[/code]

Como veis la instrucción se compone de dos partes: el tipo de medio utilizado (o Media Type, en este caso “screen”, que agrupa a todos los medios que se ven via una pantalla) combinándolo mediante un “and” con el Media Query (max-width: 320px). Estamos preguntando: ¿Es un medio con pantalla y tiene un ancho de 320px o menor? Entonces le aplicamos los estilos situados entre los corchetes correspondientes.

Podemos empezar desde este ancho e ir subiendo a otras posibles opciones. Algunos autores recomiendan optimizar estos anchos de pantalla:

    • 320 px
    • 480 px
    • 600 px
    • 768 px
    • 900 px
    • 1200 px

La mayor parte de las veces estos son demasiados anchos de pantalla, no hay tiempo suficiente para tanta optimización. Investiga bien cuales serán (o son si tienes ya datos históricos gracias por ejemplo a tu herramienta de analítica web) los anchos usados por tus usuarios y céntrate en ellos. Lo más habitual es, al menos, hacerlo para 480 píxeles.

También puedes, si quieres, dar una serie de reglas CSS para pantallas superiores a un ancho determinado, usando min-width. Por ejemplo, para anchos superiores a 1.200px:

[code]@media screen and (min-width: 1200px) {
/* Aquí van las reglas CSS necesarias */
}[/code]

Como veis podemos tener perfectamente separados los estilos de cada ancho de pantalla para el que queramos optimizar nuestro diseño. Si queréis incluso separar las hojas de estilo podéis también hacerlo. Por ejemplo, si queréis cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

[code]<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”style.css” />[/code]

O también:

[code]@import url(“style.css”) screen and (max-device-width: 480px);[/code]

Podéis ir incluso más allá gracias al uso de “and” para poner un mínimo y un máximo en los anchos de pantalla donde aplicar los estilos:

[code]@import url(style.css) screen and (min-width:800px) and (max-width:1280px);[/code]

O detectar si es un iPhone 4 (por Thomas Maier):

[code]<link rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” type=”text/css” href=”iphone4.css” />[/code]

Navegadores que soportan Media querys

En general todos los navegadores modernos lo soportan. Eso quiere decir que Internet Explorer 6, 7 y 8 no lo soportan (Tan raro en IE!). Afortunadamente hay soluciones utilizando Javascript, por ejemplo respond.js. Tal y como podéis ver “respond.js proporciona un script rápido y ligero (3kb minified / 1kb gzip) que permite utilizar diseños web adaptables en navegadores que no soportan CSS3 Media Queries – en concreto Internet Explorer 8 e inferiores”.

Fuente principal del ARTÍCULO: Agencia EMENIA

Por: Alexander Bernal, ADinteractive

Comentarios (34)

  1. Chiwake Comunicaciones, un sitio web responsive, Publicidad Asturias | Asturias Target

  2. Hola un saludo, muy buen artículo, me parece muy completo pero a la final yo opté por un diseño responsive en plantilla, me pareció mucho más cómodo, hasta ahora no me ha dado ningún dolor de cabeza.

    Yo trabajo para varias empresas y hoy por hoy se ofrece es un diseño responsive pero sigo diciendo yo uso mejor las plantillas me parecen más comodas.

    te dejo el link de la página web para que lo revises y veas el diseño responsive un saludo desde Bogotá – Colombia.

    http://www.fotografiabogota.com

  3. Diseño “Responsive”, un cambio necesario en la web | ManguTech

Ingresar comentarios aquí

Tu email no será publicado. Los campos marcados son obligatorios *

Newsletter AD

Suscríbete para enviarte nuestro brochure y actualizaciones GRATIS.

* No compartiremos tu información con nadie. Revisa nuestra política de privacidad.