Cómo hacer un diseño web adaptable (reponsive design)

El diseño web adaptable o responsive design es un conceptoque lleva ya unos años, el cual se ha venido aplicado con la finalidad de alcanzar una correcta funcionalidad de las interfaces en cualquier dispositivo, ya sea un ordenador de escritorio, un móvil, un tablet, etc.

¿Qué es el diseño responsive?

Resumiendo, se trata de diseñar una página web para varias resoluciones de pantalla.

Entendemos como sitios web responsive, aquellos que están diseñados y desarrollados para la navegación desde cualquier dispositivo y resolución de pantalla. Es decir, desde cualquier teléfono podemos acceder a una versión optimizada de dicha web, sin tener la necesidad de descargar o instalar alguna aplicación.

No todos los móviles tienen la misma resolución y tamaño de pantalla. Tampoco es igual que la web se reproduzca en un sistema operativo u otro.

Habrá que adaptarla para que funcione a la perfección en iOS y Android. Así que a la hora de encarar la creación y desarrollo de webs, hay que pensar en todos ellos.

Cuando se inicia un nuevo proyecto de desarrollo, el diseño del sitio web debe planearse para adecuarse a todos los tipos dispositivos de uso común, desde teléfonos pequeños a grandes pantallas planas.

Puede que al principio este concepto suene como algo difícil de aplicar, pero en la práctica resulta bastante sencillo, basta con seguir ciertas reglas básicas para permitir que nuestro diseño sea adaptable al medio del usuario.

Saber para quién diseñas

Si buscas que tus diseños funcionen perfectamente en cada uno de los dispositivos que existen, es muy probable que no lo consigas.

El lugar geográfico de donde provienen la mayoría de los usuarios también importa. Por ejemplo, si el sitio es visitado desde Asia o el Oriente Medio, Symbian será la plataforma que sea utilizada con más frecuencia, ya que Nokia continúa siendo líder en esa área.

Por otro lado, si se trata de un sitio de finanzas, es muy probable que el público al que apunta el sitio tenga iPads, iPhones y Blackberries, y deberás aplicar este tipo de razonamiento y análisis de patrones de consumo de la audiencia para cada uno de los sitios que diseñes.

Ya que los browsers Mobile Safari (Apple) Nokia, el Google Chrome para Android y BlackBerry usan Webkit, hay ciertos parámetros básicos que facilitan el logro de una consistencia entre la visualización en estas plataformas, si bien siempre habrá variantes entre los diferentes dispositivos.

Actualmente, debido a la enorme cantidad de resoluciones diferentes que existe, resulta casi imposible hacer un diseño para todas, o peo raún un diseño para cada una… la idea es hacer un diseño capaz de adaptarse a cualquier dispositivo en base a rangos de resolución.

Hay que dejar de pensar en resoluciones y empezar a pensar más en la experiencia de usuario en sí de cada tipo de dispositivo (móviles, tablets, pcs, ebooks..)

Técnicas para hacer un diseño responsive

Para ayudarle a comenzar a trabajar rápidamente con este tipo de diseño, en este artículo enlistaremos los principales conceptos a considerar para realizar la lógica básica del diseño adaptable.

Si tienes conocimiento previo de CSS, el aprendizaje de estos conceptos no se te dificultará.

Uso de viewport en la etiqueta metatag

La mayoría de los navegadores utilizados en dispositivos móviles, escalan las páginas HTML en base a un ancho fijo el cual las ajusta para que quepan en la pantalla que las despliega.

Este metatag debe ser incluido dentro de la etiqueta “head” y debe ser representado de la siguiente manera:

meta name="viewport" content="width=device-width, initial-scale=1.0">

Con el código que mostramos en el ejemplo, estaríamos utilizando la anchura del dispositivo donde visualizamos la página para establecerlo como el nuevo viewport de nuestro sitio.

Uso de Media Queries

Para ver el potencial de media queries, esta web vale más que mil palabras: mediaqueri.es

El truco está en preveer la manera en que nuestro sitio se desplegará en distintos dispositivos y tamaños de ventana, para ello debemos utilizar una estructura HTML responsive, que sea flexible y fácil de adaptar a distintos entornos, para que después de esto, baste con agregar las condiciones necesarias a la hoja de estilo, las cuales permitan el uso de distintos layouts.

Por ejemplo, si quisiéramos aplicar un layout exclusivo para dispositivos que funcionen con un ancho de ventana menor a 980 píxeles, bastaría con utilizar el siguiente conjunto de reglas:

@media screen and (max-width: 980px){
    #contenedor{
        width: 90%;
    }
    #contenido{
        width: 60%;
    }
    #barra_lateral{
        width:30%;
    }
}

Como se puede apreciar, utilizamos porcentajes para establecer el ancho de cada elemento del layout, esto hace que los contenedores sean más fluidos y adaptables, así no dependemos de un ancho fijo y nos ahorramos el despliegue de barras desplazadoras.

Si quisiéramos realizar lo mismo para el ancho de un dispositivo móvil podríamos hacer esto:

@media screen and (max-width: 480px){
    #encabezado{
        height: auto;
    }
    #contenido{
        width: auto;
    }
    #barra_lateral{
        display:none;
    }
}

En esta instrucción quitamos la barra lateral para que no ocupe espacio, asignamos un ancho automático al div de contenido y hacemos que el encabezado de nuestro sitio tenga una altura adaptable.

Así como en este par de ejemplos, puedes utilizar todos los media query que desees, así lograrás aplicar diferentes reglas CSS y estructurar diseños diferentes determinados por el ancho de ventana.

Debes tener presente que los media queries pueden estar en la misma hoja de estilo o en un archivo separado, todo dependerá de la manera en que tú quieras organizarte.

Uso de Max-Width y Min-Width

Estas dos propiedades CSS juegan un papel muy relevante en el diseño multiplataforma, gracias a ellas podemos idear distintas estructuras.

Si por ejemplo quisiéramos un contenedor que ocupe el 90% de la pantalla, pero que en casos donde la ventana sea muy grande su tamaño no exceda de 1024 píxeles, tendríamos que establecer un código como el siguiente:

#contenedor {
    width: 90%;
    max-width: 1024px;
}

De esta manera el contenedor se desplegará a lo ancho del 90% de la pantalla en todos los dispositivos donde esta medida no pase de 1024px, en caso de desplegar la misma página en un dispositivo más grande el div contenedor no sobrepasará la medida que especificamos.

Esta propiedad también se puede aplicar a imágenes, si necesitamos que una imagen se ajuste a las dimensiones del contenedor, podemos hacer algo como esto:

img {
    max-width: 100%;
    height: auto;
}

Uso de medidas relativas

El uso de porcentajes como valor de las propiedades hace que resulte más sencillo adaptar elementos a diferentes entornos, es por ello que se recomienda utilizarlos para márgenes, tamaños de fuente y padding.

Con el uso de valores relativos el espacio que se despliega en los elementos puede ser heredado, así no hay necesidad de utilizar medidas distintas para buscar uniformidad, ya que el resto de los elementos tomará como base el porcentaje especificado en el elemento padre.

De igual manera, permite crear estructuras más balanceadas, como en el caso de los paddings.

Cuando utilizamos un padding con valor absoluto, si hacemos más pequeña nuestra ventana y el contenedor va disminuyendo su tamaño, al final veremos un recuadro con un margen muy grande y con un contenedor muy pequeño, esto hará que no luzca bien, en cambio si utilizáramos porcentajes, el margen y el contenedor disminuirán proporcionalmente.

Tamaño de fuente en un diseño responsive

Si el diseño de tu estructura, demanda un manejo de distintos tamaños de letras y composiciones, entonces es necesario que tengas en mente qué representa cada una de las medidas que tienes a tu disposición, para ser utilizadas como valores de este atributo.

Píxeles (px)

Los píxeles es lo más cercano que encontraremos a un tamaño fijo, usualmente se considera que un píxel equivale a un punto de la pantalla del dispositivo utilizado para navegar, pero en realidad es una medida relativa a la resolución que tengamos en nuestro dispositivo.

Esta característica de “precisión”, hace que la medida tenga ventajas y desventajas.

• La principal ventaja que esto trae, es que el diseñador puede ser más exacto que con otras unidades.
• Sin embargo, esto hace que el tamaño no aumente o disminuya en base a alguna variación en el tamaño del espacio visual, lo que provoca que el texto se vea muy pequeño en monitores con resolución muy alta, o muy grande en pantallas pequeñas.

Puntos (pt)

Los puntos o points, son otra unidad de medida para establecer el tamaño de una fuente. Estos generalmente se utilizan para la impresión en papel, y basan su tamaño en las pulgadas. Cada pulgada equivale a 72 puntos.

Cuando se utiliza esta medida en CSS, varia mucho su presentación, ya que depende del navegador y de la pantalla donde se esté observando.

Los puntos son buenos al momento de crear plantillas de impresión con CSS, pero fuera de eso pueden causar más dolores de cabeza que soluciones. Es por esta razón, que estas unidades no son nada recomendadas para llevar a cabo un diseño adaptable.

Dentro de esta misma categoría también encontramos otras unidades como “cm” (centímetros), “mm” (milímetros), “in” (pulgadas) y “pc” (picas).

Ems (em)

Un em es relativo al tamaño de la fuente que establecimos en el elemento contenedor o padre del texto.

En caso de no haber establecido ningún tamaño, entonces el em toma el valor estándar de 16 píxeles, medida que es usada por los navegadores para establecer el tamaño por defecto de las letras.

La desventaja de utilizar ems en nuestro diseño, es que su aplicación respeta el orden jerárquico, por lo que si tenemos un código algo completo, con frecuencia resulta difícil de calcular.

Porcentajes (%)

Los porcentajes son muy similares a los ems, sirven para asignar valores escalables y también asignan el valor en forma de cascada, por lo que su valor es relativo al valor del padre más cercano.

Si utilizamos un valor de 100% estamos indicando que queremos el tamaño de fuente estándar.

Prueba tus sitios con emuladores

Existe una gran cantidad de herramientas para que los diseñadores puedan testear sus diseños, las cuales ofrecen una reproducción fidedigna de la experiencia de los usuarios que visitan la web utilizando diferentes plataformas.

Por un lado están los programas y plugins que ofrecen la posibilidad de experimentar el sitio que diseñamos de la misma manera en que se verá un determinado dispositivo, por ejemplo Android (Android SDK) o Symbian.

Este tipo de programas se encuentran generalmente a disposición en las webs de los fabricantes de cada dispositivo. He aquí algunos de los más útiles:

• Android SDK Simulador para Android
• iOS SDK Información sobre simuladores para iOS
• Blackberry Web Development Page Simuladores y consejos de diseño para Blackberry

Sin un testeo a través de las plataformas más usuales, el trabajo de diseño no está completo, y con el tiempo, esta etapa se está volviendo cada vez más crucial.

Consejos a la hora de realizar un diseño web responsive

• Usabilidad: Es esencial que la web sea fácil de utilizar desde cualquier teléfono. Cuando se diseña una página para móvil hay que pensar en lo fundamental. Se debe ser conciso y concreto.
• Ahorro de tiempo: El usuario debe resolver pronto sus búsquedas, necesidades o dudas. Cuanto menos tiempo tarde, mejor. Por ejemplo, si queremos vender un producto por internet, hay que evitar cuestionarios y demás. Que la persona que quiera, pueda adquirir su compra en un ‘tap’ o dos. Además, no se deben incluir formularios pesados. Es mejor resolverlo con casillas que puedan ir marcando tu camino.
• Layout: Tienes que pensar en que el desarrollo de tu web es para móviles también. Para el ordenador se suelen utilizar una rejilla de entre 12 y 16 columnas. En el diseño de una página para móvil, esto se adapta y se transforma en un layout con una o un máximo de tres columnas. Eso se debe adaptar al smartphone y a su anchura.
• Imágenes: Se deben adaptar al tamaño del móvil que corresponda. Prescindir de todas aquellas que no sean esenciales. No es recomendado usar fotos para decorar en una versión web de móvil. No debes desperdiciar espacio, ni ancho de banda. El uso de svgs puede resolver el problema de las distintas resoluciones para imágenes, ya que al ser archivos vectoriales puedes ampliarlos y reducirlos a tu antojo sin perder calidad.
• El manejo se realiza con los dedos: No hay un ratón como en el ordenador. La pantalla es táctil y en vez de hacer un clik, hacemos un ‘tap’. Por ello, ten en cuenta que los espacios para realizar ese ‘tap’ deben ser mayores, para que el dedo pueda pulsarlos sin problemas. Los botones o enlaces necesitarán un tamaño más grande.
• No incluir scroll horizontal: Son muy incómodos en la navegación con el móvil. En cambio, el scroll vertical es de lo más habitual y resulta muy cómodo de hacer. Así que lo mejor es apilar los elementos verticalmente y evitar scrolls horizontales.

Ventajas e inconvenientes del responsive design

En el diseño web responsive encontramos una serie de ventajas como:

• Aumenta la visibilidad de la web entre usuarios de smartphone y otros dispositivos digitales. Tendremos un alcance mayor y eso nos reportará beneficio.
• En caso de tener un negocio, servirá para que las ventas crezcan. Una mayor visibilidad por parte de los clientes, nos hará llegar a más sitios.
• Mejorará la visibilidad de tu web en los motores de búsqueda. No duplicarás contenido. Tus esfuerzos se centrarán en un único sitio, por lo que con una campaña SEO, tendrás una estrategia común para todos los dispositivos en los que se reproduzca tu web.

Respecto a los inconvenientes destacamos uno:

• El principal problema es el mayor tiempo de desarrollo que implica hacer una web responsive. No basta con que se vea bien en desktop, consume mucho tiempo desarrollarla adecuadamente para las distintas resoluciones, aunque el esfuerzo merece la pena.