¿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?
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.
Entre las ventajas más importantes, se debe destacar que trabajando adecuadamente un único código fuente, se pueden abarcar las diferentes resoluciones de pantallas. Con ello el sitio web estará preparado para poder ser navegable en cualquier dispositivo.
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.
En cambio, si conoces muy bien la audiencia que tiene la web para la que diseñas, tendrás la capacidad de concentrar más esfuerzs en en los dispositivos que los usuarios del sitio utilizarán con mayor frecuencia.
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.
Lo más importante es optimizar nuestros diseños para las plataformas de los browsers y dispositivos en los cuales estimamos que éstos serán visualizados más comúnmente, de acuerdo al tipo y localización de la audiencia de cada sitio.
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.
Para modificar esto y restablecer el valor que tomará, podemos hacer uso del metatag viewport, el cual indica al navegador que ancho debe tomar y deshabilita la escala inicial.
Este metatag debe ser incluido dentro de la etiqueta “head” y debe ser representado de la siguiente manera:
|
1
|
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
Los media queries son propiedades de CSS3, las cuales básicamente nos dan la capacidad de agregar condiciones a nuestra hoja de estilo, permitiéndonos utilizar una serie de layouts para desplegar de distintas formas un mismo contenido, el cual se irá adaptando al dispositivo que lo despliegue.
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:
|
1
2
3
4
5
6
7
8
9
10
11
|
@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óvilpodríamos hacer esto:
|
1
2
3
4
5
6
7
8
9
10
11
|
@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.
Estas propiedades nos permiten establecer la mínima y máxima anchura que puede recibir un elemento, esto es importante de fijar cuando se manejan porcentajes como valor de las propiedades CSS, de esta manera establecemos un limite de ampliación.
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:
|
1
2
3
4
|
#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:
|
1
2
3
4
|
img { max-width: 100%; height: auto;} |
Uso de medidas relativas
Finalmente debes tener siempre en consideración que las medidas relativas siempre serán mejores que las absolutas al realizar diseños adaptables.
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 chica 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.
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
Por otra parte, existen herramientas más complejas capaces de simular las experiencias de usuario en una variedad de plataformas. Sigos es una de las más populares, ya que permite testear nuestros diseños webs en más de 2.000 dispositivos diferentes.
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.
Fuente: https://www.lawebera.es/
