Diseño web adaptable ¿Cómo organizar los contenidos?


Hoy te comento sobre una de las tendencias más seguidas por los diseñadores web en la actualidad: el diseño web adaptable o adaptativo (Responsive Web Design en inglés), a partir del cual lograrás que tus páginas luzcan bien en la mayor parte de los dispositivos.

Como el uso de dispositivos móviles crece día a día y sus características son tan distintas en cuanto a resolución, potencia, memoria y tamaño, el diseño web ha debido evolucionar hacia páginas que puedan visualizarse correctamente en cualquier pantalla, y de eso se trata el diseño adaptable, que funciona mostrando u ocultando elementos de la página de acuerdo al dispositivo de que se trate.

Desde el punto de vista del desarrollador web, esto se realiza introduciendo una serie de órdenes en la hoja de estilos que le indican al documento HTML cómo adaptarse a diferentes resoluciones de pantalla, pero desde el punto de vista del diseñador se deben tener en cuenta también algunos requisitos en cuanto a la organización de contenidos que le facilitarán el trabajo a los desarrolladores, a la vez que mantienen la estética general de la página.

Siendo así, lo más importante que debes tener presente al diseñar tu página es cuáles son sus elementos principales, o sea, los que son imprescindibles para mantener la usabilidad de la página en cualquier dispositivo, pues éstos deben ser mostrados siempre. En cambio, los elementos secundarios podrán mantenerse ocultos e ir mostrándose a medida que el usuario los exponga o el tamaño de la pantalla aumente.

Esto dependerá del tema que escogiste y los contenidos que deseas insertar, pero en sentido general te aconsejo como elementos principales los menús, la selección del idioma, el logotipo y la información (breve) que consideres de mayor importancia, pues ésto será lo que apreciará el usuario durante su inspección inicial en los dispositivos más pequeños.

En cuanto al contenido, existen varias formas en que puedes organizarlo, y ahora te muestro las principales de acuerdo a los diferentes tamaños de pantalla, pero ten en cuenta que cada uno puede tener disímiles variaciones que dependerán de los intereses de quien diseñe:

Columna única

Este es el modo más sencillo de organizar el contenido, pues se basa en una única columna que agrupa toda la información, lo cual es útil para páginas que contienen muy pocos elementos.

Columna única

En este caso sólo deben hacerse pequeños cambios en el puntaje de la letra y el tamaño de las imágenes. No obstante, y aun siendo la forma más simple, es la menos utilizada por no ser muy atractiva.

Columnas fijas

Esta es una de las maneras más sencillas y populares de organizar el contenido, pues la estructura central de la página en realidad no cambia hasta que llega al tamaño de pantalla más pequeño.

Columnas fijas

Aquí, lo mismo que en el ejemplo anterior, de forma general sólo deben hacerse cambios en el tamaño de la letra y de las imágenes, logrando además un diseño mucho más atractivo.

Columnas decrecientes

Este es otro método que utiliza una capa de varias columnas que van disminuyendo su número a medida que el tamaño de pantalla decrece, terminando con una única columna en los dispositivos más pequeños.

Columnas decrecientes

En este caso la mayor parte de los elementos de la página tienden a mantener su tamaño, adaptándose a las diferentes pantallas en vez de apilarse juntos en una columna.

Capas variables

En este diseño se utilizan diferentes capas, por lo general una para cada tamaño de pantalla, por lo que es uno de los más adaptables, y sus posibilidades son tantas como diseñadores que lo utilicen.

Capas variables

No obstante, también es uno de los más complejos, y es por eso que está entre las formas menos usadas de organizar los contenidos.

Columnas horizontales

Si bien en los ejemplos anteriores las columnas se organizaban de forma vertical, en este caso lo hacen de forma horizontal, por lo que no resultan en páginas largas donde impera el scroll, sino que funcionan ocultando parte del contenido hasta que el usuario lo exponga o se visualice la página en pantallas más grandes.

Columnas horizontales

Para finalizar, ten en cuenta que no todas las páginas web pueden ser adaptables, pues algunas son tan complejas que es imposible agrupar todo su contenido o servicios de forma tal que se visualicen correctamente con un mismo diseño.

En estos casos se recurre a confeccionar aplicaciones específicas para los dispositivos más pequeños, como es el caso de Facebook o Gmail, que han dividido sus servicios en varias aplicaciones móviles.

Conclusiones

Esta entrada constituye una pequeña guía sobre las formas más comunes de organizar los contenidos en el diseño web adaptable. Espero haberte sido de ayuda, y si es así no olvides dejarme tus impresiones en los comentarios.