Responsive Web Design“, en español “Diseño Web adaptativo” es el método que sugiere que el diseño y el desarrollo Web deben responder al comportamiento y entorno del usuario. En pocas palabras, un sitio Web se debería adaptar correctamente al dispositivo con el que se está navegado, dígase smartphone, tablet, Web browser, etc; lograr que el sitio se adapte visual y funcionalmente al medio con el que se está accediendo a él.

responsive web design

Esta práctica se lleva adelante poniendo en juego un conjunto de herramientas; templates flexibles, imágenes que se ajustan, javascript para identificar los tamaños de pantalla, CSS media queries para establecer estilos según los dispositivos, etc. El sitio deberá automáticamente adaptarse al tipo de dispositivo mostrando su contenido de manera correcta para le usuario.
La información deberá tener un correcto tamaño de texto para ser leído adecuadamente, las imágenes tendrán que ajustarse a la pantalla evitando scrolls horizontales, las páginas no deberán excederse demasiado en cuanto a su largo y así evitar el exceso de scroll vertical, ocultar el contenido poco relevante en pantallas pequeñas, y otras tantas medidas a tomar en cuenta para facilitar la adaptación de nuestro sitio.

 

Media Queries

Las media queries forman parte de la sintaxis de CSS3 y nos permiten asignar estilos específicos de acuerdo al tipo de dispositivo, tamaño de pantalla, resolución u orientación (landscape, portrait).

Existen dos maneras de aplicar media queries, una de ellas es dentro de una hoja de estilos ya creada y la otra es crear hojas de estilos específicas según el dispositivo. La elección quedará a elección de cada uno de ustedes dependiendo el volumen y tipo de modificaciones que necesiten realizar.

En caso de querer tener separados los estilos para uno o varios dispositivos, podemos asignar una hoja de estilos independiente de la siguiente manera:


La línea de código anterior adjunta una hoja de estilos que será compatible únicamente con un dispositivo móvil con una pantalla de resolución inferior a 481px de ancho. Por lo tanto lo que hacemos es sobre escribir estilos en esta hoja y agregarla inmediatamente después de la hoja de estilos general.

En caso de querer colocar los estilos que hacen las modificaciones en una hoja de estilos ya creada, utilizamos el siguiente procedimiento:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/* Estilos aquí */
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
	/* Estilos aquí */
}

En este ejemplo observamos una condición creada para dispositivos con resolución de pantalla entre 320px y 480px.

Es importante remarcar la diferencia entre las propiedades: max-device-width, max-device-height, min-device-height, min-device-width y max-width, max-height, min-height, min-width. Las primeras funcionan únicamente para cuando la página se está viendo en un dispositivo con esa resolución de pantalla, y las segundas para el ancho que tenga el browser, por ejemplo cuando hacemos resize de nuestro navegador.

 

Imágenes flexibles

Cuando un dispositivo tiene una pantalla con una definición inferior al ancho de una imagen, se produce un scroll horizontal. Un buen truco para resolver este problema es especificar en CSS el ancho máximo de las imágenes en 100%, de esta manera la imagen mantendrá su tamaño a menos que la definición de ancho de pantalla sea inferior al ancho de la propia imagen, en estos casos la imagen se escalará teniendo como ancho máximo el ancho de la pantalla del dispositivo.

img { max-width: 100%; }

 

Etiqueta meta para dispositivos de Apple

Los dispositivos de Apple que utilizan Safari, incorporan un tipo de etiqueta META para definir el viewport del dispositivo. Lo que hace es mostrarnos el documento con un ancho equivalente al ancho del dispositivo que estamos utilizando.


 

Orientación horizontal y vertical para iPad

Específicamente para la famosa tableta iPad de Apple podemos utilizar la propiedad “orientation” que nos permite aplicar estilos de acuerdo a la orientación del dispositivo.

@media screen and (orientation: landscape) {
  /* Estilos aquí */
}

@media screen and (orientation: portrait) {
  /* Estilos aquí */
}

 

Correcta aplicación de tamaños de texto

Lo más importante es evitar los tipos de unidades absolutas (puntos, centímetros, pulgadas). Un centímetro es igual en un monitor de 17′ y en un dispositivo móvil, por lo tanto no se adaptará correctamente a su entorno. También es importante que exista la posibilidad de aumentar o reducir el tamaño de la fuente; la mayoría de los navegadores permiten esta opción y para ello las medidas ideales son las relativas (em, ex, px, %)

La W3C recomienda la utilización de la unidad “em“; lo más común es que 1em corresponda a 16 pt, aquí lo más importante es entender la proporción correcta para la aplicación de otros tamaños. Supongamos que queremos aplicar un tamaño de fuente de 12 pt, para eso tendríamos que dividir 12 / 16 = 0.75 esto significa que para utilizar “em” y aplicar un tamaño de fuente de 12 pt tenemos que especificar 0.75 em.

Otra medida recomendable son los “px”, dado que el tamaño de fuente siempre tendrá una medida proporcional de acuerdo a la definición de pantalla.

También podemos considerar la unidad porcentaje “%” la cuál es muy similar a los “em” y nos evita el cálculo constante de proporción para la asignación de los distintos tamaños de fuente.

En conclusión, lo ideal es el uso de medidas según este órden: em, px, %

 

Javascript

¿Qué pasa cuando el dispositivo no soporta media queries? … en estos casos tenemos la alternativa del uso de javascript para identificar las medidas del dispositivo y aplicar estilos en consecuencia.

if(document.all){
	if(window.innerWidth < 500){
		document.getElementById('container').style.width = "480px";
	}
}else{
	if(document.body.offsetWidth < 500){
		document.getElementById('container').style.width = "480px";
	}
}

Los condicionales anteriores (IE y otros navegadores) permiten identificar el ancho del browser, al conocer el mismo, podemos determinar que estilos aplicamos en cada caso. En el ejemplo aplicamos un ancho de 480px al contenedor siempre cuando el navegador tenga un ancho inferior a 500px.

 

JQuery Mobile

JQuery Mobile

JQuery cómo su slogan bien lo dice "Escribe menos, haz más!" es un framework que permite programar javascript de manera más sencilla y de forma no obstructiva. Esto significa que si un dispositivo no soporta javascript, la funcionalidad de la página se mantiene intacta. JQuery Mobile está basado en JQuery y es un framework orientado al armado de páginas Web para móviles que permite optimizar templates para smartphones y tablets, permitiendo especificar propiedades que se adaptan de acuerdo a las dimensiones de pantalla y tipos de dispositivos manteniendo siempre las proporciones.

ThemeRoller es una aplicación Web que nos permite a través de una interfaz gráfica amigable, armar diseños personalizados de templates para dispositivos móviles utilizando JQuery Mobile.

Una importante e inteligente alternativa también puede ser tener dos tipos de templates en un sitio, unos pensados para los navegadores Web y otros para cuando se accede desde un dispositivo móvil, para estos últimos utilizar las bondades de JQuery Mobile.

Estos son dos ejemplos de sitios que utilizan esta tecnología:

Disney

Disney

 

Excelentes ejemplos de sitios que utilizan Responsive Web Design

Intenten re dimensionar el navegador Web y observen como los módulos, textos e imágenes se adaptan para brindar una mejor experiencia de uso según el espacio.

Smashing Magazine

http://www.smashingmagazine.com/

Smashing Magazine

 

Sony

http://www.sony.com/index.php

Sony

Categoría: Web

Publicado por: negro

Entradas más populares

7 Respuestas para “Responsive Web Design”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>