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:
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)
Buena por esa, hacía falta una guía de Diseño Web Adaptable en Español.
Gracias por el aporte.
Buena, muy interesante esta guía en español de este tema tan nuevo.
Everything is really open and quite clear explanation of problems. was truly info. Your site is really useful. Many thanks for sharing.
Asombroso, las posibilidades son infinitas
Buen artículo, hace falta más información como esta. Bastante útil!
This has made my day. I wish all postngis were this good.
Oye que interesante gracias por esta info. 🙂
Really excellent blog post. I simply found your own web site as well as wished in order to mention which I have definitely appreciated examining your own web page as well as blogposts. Nevertheless I’ll end up being signing up your own give food to as well as We intend in order to look over your own web page for a second time.
Muy buen artículo sobre diseño responsive. También nos puede ser de gran ayuda Modernizr para conocer las funcionalidades del navegador que nos visita y habilitar o deshabilitar funciones como por ejemplo la carga de respond.js o de otros añadidos.
Excelente, me estaba volviendo loco con las imagenes… gracias.
Muy buen post. Pensar en la comodidad del usuario desde dispositivos móviles mediante un responsive web design es cada vez más importante. Llevamos observando un aumento de este tipo de tráfico en los sitios que administramos y el último año las visitas desde móviles fueron de un 15 a un 20% del total de tráfico.
Definitivamente un exelente articulo, muchas gracias.
Mil gracias, es muy dificil encontrar una expliación en español sobre diseño web responsive o adaptable, voy a intentar aplicarlo a mi sitio web, un saludo.
Excelente artículo de Diseño web adaptable o responsive, gracias!
Muy interesante el artículo. Me parece importante pensar hoy en día un sitio web con Responsive Design para mejorar la experiencia de navegación del usuario.
Creo que los contenidos siempre tienen que ser accesibles y fáciles de encontrar sin importar con que dispositivo se navegue.
Muy bueno artículo. Lo que estaba buscando y muy bien explicado.
Gracias!
Hola
Les comparto un muy buen video tutorial gratuito de Responsive Design:
http://responsivedesigndesdecero.com/
Espero les sirva!!
Muy interesante. Con tantos dispositivos diferentes conviene que haya un diseño que valga para todos!
Saludos.
Muchas gracias José por tu comentario !
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
Excelente artículo, el diseño responsive llego para quedarse. Sin embargo son muchos diseñadores que continúan desarrollando solo para computadores o equipos portátiles. El mayor problema que posee ante mi concepto son los antiguos navegadores como IExplorer 7, afortunadamente existen soluciones para esos problemas.
www.pcuserspanama.com
Estamos totalemte de acuerdo, muchas gracias por tu mensaje y por supuesto por tu interes !
Muy buena info.
Muy buena info la que ustedes manejan
Excelente post!
Muchas gracias. Buena publicación.
He leído que desde el 21 de abril, la web que no sea responsive (no se vea desde dispositivos móviles), la van a penalizar… ¿qué pensáis? Aquí os dejo la fuente: http://www.seoalcuadrado.es/seo-el-21-de-abril-o-eres-movil-o-desapareces-de-google/
Afortunadamente hay herramientas online que permiten crear webs responsive en pocos minutos, como http://go2movi.com . Hoy en día la empresa que no tenga su web adaptada está perdida: lo dice Google!
Muy buena esta guia, menos mal que hay unas cuantas herramientas que nuestra ayuda.
Muy buena explicación sobre el diseño responsive, nuestro equipo de desarrollo de aplicaciones web realiza todos los proyectos de nuestros clientes mediante frameworks como bootstrap. La experiencia por parte de los usuarios es muy positiva.
Siendo un 80% de las búsquedas en Google realizadas desde el móvil, creo que es más que imprescindible tener una página web responsive o incluso aún mejor, una hecha tan solo para móviles que ayuda a mejorar el posicionamiento.
Muy buen contenido. Me la pase leyendo muchos artículos relacionados al tema y este es el mas claro y completo, también encontré uno donde vienen las ventajas de el diseño adaptable y la verdad esta genial lo que te deja.