El diseño Ajustable como una propuesta para la visualización de páginas Web en diferentes dispositivos

Por Luis Alejandro Muñohierro Cruz

Resumen

En el presente artículo se analiza de manera muy breve la historia del Internet para observar cómo han evolucionado los diferentes dispositivos desde donde se puede navegar la Web.  Así mismo, se hablará sobre cómo debe desarrollarse un sitio en la actualidad para que pueda ajustarse a los diferentes tamaños de pantalla que tienen los dispositivos móviles y se propondrá una técnica que combine el diseño del tipo Responsivo y Adaptativo.  Por otro lado, se mencionarán las tecnologías necesarias para desarrollar este tipo de páginas y se explicará el beneficio que representan y por qué se recomienda su uso mediante la propuesta de un nuevo método de trabajo llamado Diseño Ajustable.

Palabras clave:

Diseño, Ajustable, web

Abstract

In this article, the history of the Internet is analyzed very briefly to observe the evolution of  different devices where the Web can be surfed. Also, it will explain how a site should be developed today so that it can adjust itself to the different sizes of screen that the mobile devices have and a technique that combines the design of the Responsive and Adaptive type will be proposed. On the other hand, we will mention the technologies needed to develop this type of pages and explain the benefit they represent and why it is recommended to use them by proposing a new working method.

Keywords

Design, Adjustable, Web

PDF

Introducción 

Uno de los aspectos más importantes del desarrollo Web, desde los inicios del Internet, ha sido el poder cubrir las necesidades de los usuarios.  Una de estas ha sido tener presente el medio en el que el contenido de la Web va a ser visto, sin embargo, al principio no había muchos tipos de medios o dispositivos donde las páginas pudieran ser vistas, realmente sólo se veían desde una computadora.   

El presente trabajo explica la evolución del Internet, pero sobre todo, la forma en la que fueron creándose nuevas maneras y dispositivos de navegación, y de qué forma los desarrolladores Web han tenido también que evolucionar junto con la tecnología para desarrollar otras maneras de mostrar la información de una página, sin importar el dispositivo desde donde sea vista. 

Posteriormente se explicarán algunas de las posibles soluciones al problema de ver el sitio desde diferentes dispositivos y se profundizará en dos de las teorías que más fuerza tienen.   

En el presente artículo se propondrá una manera de trabajar el desarrollo de una página Web para que sea visible en cualquier dispositivo, así como las tecnologías que deberían utilizadas para tal efecto. 

Antecedentes 

Cuando el Internet comenzó en los años 90´s no existía la necesidad de diseñar páginas Web para diferentes formatos, ya que estos estaban muy estandarizados.  En aquel entonces la resolución dominante en las PC´s era de 640 x 480 pixeles, la llamada resolución VGA.  En el mundo Mac había un poco más de opciones ya que las tarjetas gráficas te permitían cambiar a resoluciones mayores como 800 x 600 pixeles.  Sin embargo, el uso de PC´s era lo más común y su resolución en la que más se codificaban las páginas web. 

A finales de los 90´s comenzaron a surgir las primeras computadoras multimedia que permitían tamaños de pantalla mayores de hasta 1024 pixeles, aunque el que se tenía por omisión era la de 800 x 600.  La gran mayoría de los usuarios no sabían que podían cambiar a una resolución mayor o bien no veían el punto de hacerlo.  Ésta fue la razón por la que dominó el mercado hasta mediados de los 2000’s. 

Posteriormente, las tarjetas gráficas mejoraron en calidad y capacidad. Poco a poco se lograron resoluciones más grandes.  A principios de la década de los 2010´s, el formato de pantalla que comenzaba a popularizarse era la de 1280 x 1024 pixeles, lo cual permitía tener un espacio más grande sobre el cual diseñar, esto era perfecto para los grandes monitores que aparecían en el mercado.  Actualmente, el más recomendado para diseño Web de escritorio es de 1366 x 768 pixeles.

Gráfica 1. Uso de las diferentes resoluciones en Julio de 2014. StatCounter. Web. 01-06-16.

El decidir un formato de trabajo era importante, ya que, en esos tiempos, se diseñaba para tamaños de pantalla específicos.  Según las características del usuario final, el desarrollador decidía cuál de las resoluciones era la más acertada para éste, tomando en cuenta las capacidades tecnológicas que éste pudiera llegar a tener.  El objetivo en aquel entonces era hacer que tu página se viera bien en el formato especificado, “no era sólo evitar la aparición del scroll, principalmente en el eje x… también era la relación de tamaños de las columnas entre sí y la ventana, evitar descuadres, que hubiese elementos que quedasen inaccesibles” (Keseso, 10) para que todo se viera en el formato especificado. 

Por ejemplo, si se diseñaba la página para una resolución de 800 x 600 pixeles, se esperaba que, al ser vista en un monitor con tal formato, el tamaño de la ventana del navegador se ajustara de tal forma que se viera el diseño completo o por lo menos las partes más importantes de éste, como el logo de la empresa, la barra de navegación y al menos un texto introductorio. Posiblemente debía utilizarse el scroll vertical para ver el resto del contenido que no cabía en la ventana del navegador. 

Otra consideración que se debía hacer en este tipo de diseño era que el tamaño de 800 x 600 pixeles, o el que hubieras escogido, no podías usarlo al 100% ya que tenías que considerar el espacio que utilizaba la barra del navegador en la parte superior de la pantalla, la barra de dirección URL y los espacios correspondientes a barras de desplazamiento, favoritos, etc.  Tomando en cuenta todos estos espacios, de una resolución inicial de 800 x 600 pixeles, tu área de trabajo se limitaba a 760 x 420 pixeles, lo cual reducía mucho el espacio útil de la ventana del navegador. 

¿Pero qué sucedía si la página estaba diseñada para ser vista a una resolución de 1024 pixeles y ésta era vista a un monitor con un tamaño de pantalla menor?  El diseño no se ajustaba a ésta y dejabas de ver parte del contenido que quedaba fuera de la ventana del navegador.  El problema no era tan grave si contemplabas el uso del scroll bar horizontal, pero si consideras que la mayoría de los usuarios no estaban acostumbrados a utilizar éste, la parte de información que quedaba fuera de la ventana podría nunca ser vista por el usuario y por consecuencia quedaría incompleta la visita al sitio. 

 Por otro lado, en los años 90’s no era muy común hablar de dispositivos móviles. De hecho, los teléfonos celulares comenzaban a tener un poco de popularidad, pero era difícil pensar que desde un celular pudieras acceder a Internet. 

Fue hasta mediados de los 90’s que comenzaron a salir los primeros dispositivos móviles llamados PDA.  Uno de los primeros fue el Newton de Apple el cual desde su lanzamiento prometía cosas maravillosas.  Una de éstas era la posibilidad de que en un futuro te pudieras conectar a Internet y llevar la Web a casi cualquier lado.  Lamentablemente este proyecto no tuvo continuidad por parte de Apple y en 1998 decidieron sacarle del mercado. 

Por otra parte, “junto a Apple debemos destacar el importante papel que jugó Palm en el sector PDA, donde empezó a brillar en 1996 con la Palm Pilot 1000” (Ros, 58), que se volvió uno de los líderes en ventas en este mercado, antes de los teléfonos inteligentes.  Algunos de estos dispositivos, dentro de todas sus cualidades, te permitían hacer una conexión alámbrica a Internet por medio de una base de sincronía para descargar información que más tarde pudiera ser leída. 

Imagen 1. Una de las primeras y de las últimas pda´s. Imagen del autor.

El mercado de los PDA’s creció y a principios de los 2000’s Ericsson sacó un modelo que permitía hacer una conexión a Internet.  De hecho, este modelo tenía un pequeño teclado QWERTY debajo de la pantalla el cual facilitaba la escritura.  Debido a su precio elevado, este tipo de dispositivos no llegaron a tener mucha popularidad, caso contrario a los modelos de Palm. 

La interacción que se lograba con la Palm y el Internet se limitaba a la descarga y sincronización de información que había en la computadora y que por alguna razón se necesitaba tener en el dispositivo.  Esta información en su mayoría implicaba la descarga de correos electrónicos, sincronización de agendas y/o contactos y actualización de algunos tipos de archivos. Ya con la información descargada podías revisar tu correo electrónico o tus citas, pero si querías responder alguno de tus mensajes, en el PDA, podías escribir tu respuesta, sin embargo, no se enviaba hasta que se sincronizaba con la computadora. 

La navegación en Internet no era una opción como tal en este tipo de dispositivos y por tal motivo no era necesario tener una versión para Palm de los sitios Web. 

Pero no fue sino hasta 2007 que Apple lanzó su primer iPhone y revolucionó la forma de acceder a Internet.  Aun antes de su lanzamiento, ya había aplicaciones listas para ser instaladas en este dispositivo vía iTunes.  El iPhone traía instalado una versión de Safari para móviles que permitía navegar en la Web casi como si lo hicieras en una computadora. 

El lanzamiento de primer iPhone también dio pie al lanzamiento del iOS, sistema operativo nativo de los iPhones.  Este, fue la base para otros sistemas similares como el Android que venía instalado en la gran mayoría de los Smartphones que no eran Apple.  Otros, como Windows Phone fueron liberados con el paso del tiempo, pero no lograron la popularidad de los dos primeros. 

Fue con el lanzamiento de estos dispositivos que se dio la necesidad de pensar en lo que sucedería cuando una página web fuera vista en ellos.  Se pensaron muchas soluciones a este problema, de las cuales algunas se platicarán más adelante en este artículo, pero por muchos años, la gran mayoría de los sitios Web se observaron de forma reducida, lo que dificultaba mucho la lectura. 

Actualidad 

Es un hecho que desde 2007, a raíz del lanzamiento del primer iPhone, la forma de navegar en Internet cambio.  A partir de ese momento, la red se volvió disponible casi en cualquier momento y lugar, teniendo como único factor en contra, el perder la señal del proveedor de tu compañía celular.  Conforme los años pasaron, se dieron lanzamientos de diferentes marcas y modelos de Smartphones, así como de sistemas operativos.  Los dos que se volvieron líderes en el mercado fueron iOS y Android, seguidos de Windows Phone, BlackBerry OS y otros. 

Por otro lado, además del creciente mercado de los teléfonos inteligentes y de la necesidad creada de poseer uno de estos, se lanzaron al marcado las tabletas y los iPod Touch.  Estos dispositivos seguían una filosofía similar a la de los SmartPhones, pero su diferencia era la carencia de una conexión a Internet de forma celular.  El modo de conexión de este tipo de dispositivos era por Wi-Fi, lo cual le daba una ventaja sobre las conexiones celulares; la velocidad, pero con la desventaja de no estar conectado en todo momento. 

Imagen 2. Familia de dispositivos móviles de Apple. Imagen del autor.

El mercado de tabletas ha crecido a nivel mundial en los últimos años, ya que, por precio, son muchas veces más accesibles que una computadora de escritorio, y en ocasiones tienen el mismo rendimiento o a veces mayor.  Desde todas éstas es posible navegar a través del Internet, así como se hace desde los teléfonos inteligentes, ya que todas poseen un navegador gráfico.  En el caso de iPhone, iPod y iPad el navegador que viene instalado por omisión es Safari, pero el usuario tiene la opción de descargar otros navegadores como Firefox o Chrome.  En el mundo Android, es Chrome el que viene instalado de fábrica. 

Esta nueva forma de navegar en Internet ha tenido tanta influencia en el tipo de desarrollo web que se hace, y que se hacía, que tecnologías como Flash de Adobe murieron al no ser soportadas por estas plataformas.  Esta misma influencia es la que causado que los sitios web se tengan que ajustar a los diferentes tamaños de pantallas que presentan todos estos dispositivos. 

¿Qué pasaba al principio? Cuando navegabas desde tu celular o tu Tablet en una página de Internet veías exactamente el mismo diseño que podías tener en una computadora desktop pero en tamaño pequeño.  Un sitio diseñado para un width de 1024 pixeles, debía ajustarse a una pantalla de 320 pixeles y para esto todo el diseño completo se hacía diminuto, lo cual resultaba muy difícil de leer.  Una solución a este problema era tener que hacer zoom a la pantalla para incluso poder picar alguno de los botones y navegar en las secciones del sitio. 

“La primera reacción de las compañías fue hacer una versión optimizada del sitio para móviles de forma separada …pero muy a menudo estos sitios eran versiones escaladas del sitio web completo y fallaban en mostrar una visión completa del contenido” (Fielding, pag. 1), lo que generaba una muy mala experiencia de usuario, ya que la gran mayoría de las páginas se tornaban ilegibles.  Fue por esto, que se observó la necesidad de proponer soluciones para que las páginas pudieran ser vistas de forma más amigable y posiblemente adaptadas a los tamaños de pantallas de los dispositivos.   

Soluciones 

Para solucionar este problema que padecen las diferentes páginas web se han propuesto distintas opciones que varían desde su implementación, hasta la tecnología en la que están programadas.  Estas soluciones llevan a dos diferentes tendencias de diseño y sobre todo, de adaptarse a los diferentes tamaños de dispositivos.  Surgen así dos vertientes, el diseño Adaptativo y el diseño Responsivo.  Éstas se refieren a manejos muy parecidos de la forma en la que se despliega la información, pero ambas tienen sus diferencias, ventajas y desventajas.  A continuación, explicaré en que consiste cada una.  

Diseño responsivo 

El concepto de Diseño Responsivo fue acuñado por Ethan Marcotte en su artículo “Responsive Web Design”, del blog “A list apart” del año 2010.  Este tipo de diseño se basa en el manejo de tamaños proporcionales de los diferentes elementos con base en el ancho de la pantalla donde la página será vista.  Se tiene un solo documento HTML y la información de éste se va ajustando al tamaño de la pantalla donde se esté viendo. 

Algunas características de este tipo de diseño es el manejo de Media Queries; los cuales se explicarán más adelante en este artículo, el manejo de medidas relativas de tipografía, manejo de tamaños en porcentajes para facilitar el reacomodo de éstos, entre otros aspectos. El uso de CSS31 es vital para poder desarrollar los Media Queries y que estos se vayan ajustando a las diferentes resoluciones.  En la actualidad, la gran mayoría de los nuevos navegadores ya soportan el manejo de esta tecnología. 

Lo que se busca es hacer una estructura flexible y que el contenido de la web se adapte a las distintas resoluciones de pantalla, para que de esta forma, el usuario tenga una mejor experiencia a la hora de visitar el sitio Web desde el dispositivo de su preferencia. 

Imagen 3. Ejemplo de una retícula responsiva. Fotografía. Interaktiba. Web. 01-06-16.

En conclusión, el diseño Responsivo cambia de forma automática la apariencia de la página dependiendo del tamaño del display donde se vaya a mostrar.  Ésta se ajusta al formato que se le presente de tal forma que, si cambias el tamaño de la ventana, en tiempo real verás cómo se adapta siempre al nuevo tamaño. 

Diseño adaptativo 

Este concepto fue acuñado por Aaron Gustafson, en su libro “Adaptive Web Design”.  Este tipo de diseño busca hacer diferentes versiones de la misma página web en diferentes resoluciones de pantalla para que cuando ésta sea cargada en un dispositivo, la versión de la página que vea sea la más cercana a su resolución. 

El diseño Adaptativo es más rígido que el diseño Responsivo, porque, de entrada, las medidas de sus diferentes elementos son delimitadas en pixeles.  El tamaño de los elementos textuales, a pesar de que pueden ser manejados en medidas relativas, generalmente también se manejan en puntos o en pixeles.  Es desde el servidor que se detecta el tamaño de la pantalla donde será vista la página y es éste el que envía la información optimizada para el dispositivo. 

Imagen 4. Ejemplo de una retícula adaptativa. Fotografía. Blog Neothek. Web. 01-06-16.

Este tipo de diseño es más elaborado, ya que físicamente se tiene que diseñar la forma en la que se van a reacomodar los elementos en los diferentes tamaños de pantalla, para después programarlos en el HTML.  Es posible utilizar Media Queries para tal efecto y manejar un solo HTML para las distintas versiones de la página. 

En conclusión, este tipo de diseño se adapta a cada uno de los dispositivos, por lo que su contenido puede llegar a ser incluso diferente de uno a otro.  Si está bien programado y optimizado, puede funcionar más rápido ya que se cargan versiones optimizadas para cada dispositivo. 

Diferencias entre el diseño responsivo y adaptativo 

Existen varias diferencias y algunas similitudes entre el diseño adaptativo y el responsivo que hacen que uno como desarrollador tenga que decidir cuál de los dos caminos va a tomar. Estas diferencias están basadas en los trabajos de Blog.Interdominios y de Virginia Peláez. 

 Identificar el dispositivo:  En el caso del diseño Adaptativo se utilizan códigos del lado del servidor para detectar el tipo de dispositivo donde se está viendo la página, a partir de esto el servidor manda la versión de la página, muchas veces optimizada, mediante CSS para el control de los elementos.  En el caso del diseño Responsivo, se utilizan Media Queries  los cuales detectan el tamaño del viewport2 y estos hacen que el diseño basado en columnas flexibles, la información, las imágenes y demás elementos, se ajusten casi perfectamente al tamaño del viewport.  Una desventaja del diseño Responsivo es que en ocasiones las imágenes están optimizadas para verse de forma correcta en la versión de escritorio de la página y son estas mismas imágenes las que se cargan en las demás versiones, lo que vuelve el proceso lento sobre todo cuando se usa la red celular y no el Wi-Fi. 

 Optimización de los contenidos de la página:  Sí el diseño Adaptativo está bien programado, el servidor preselecciona la información y ésta es descargada según la resolución desde la que se está viendo el sitio.  Además de que se descargan menos datos en la computadora del usuario, muchas veces las imágenes son optimizadas para dicho tamaño.  Esto hace que el sitio se cargue más rápido, y por ende, el tiempo de espera del usuario es menor.  En el caso del diseño Responsivo se manda toda la información al dispositivo y es desde la programación del Media Query que se decide si se mostrará toda o bien se esconderán algunas partes.  También manda las imágenes, aunque éstas no vayan a ser mostradas o bien, no estén bien optimizadas para el dispositivo en cuestión.  Esto puede causar que el desempeño de la página disminuya al ser muy pesada para una conexión por medio de la red celular. 

 Optimización de los dispositivos:  Para el diseño Adaptativo se deberá de configurar la página en los distintos tamaños en los que se quiera trabajar. Sin embargo, resulta muy difícil poder diseñar para absolutamente todos los tamaños de dispositivos móviles y de resoluciones de pantalla que existen en el mercado, por lo cual es muy probable que al ver el sitio en algún dispositivo no haya un diseño específico para él, esto causará que la información no se muestre correctamente y la experiencia del usuario sea en cierto punto desagradable.  En este caso, se deberá analizar la cantidad de resoluciones en las que se desea trabajar, hacer el ajuste del diseño para cada una de ellas y posteriormente programarlas.  En el caso del diseño Responsivo se diseña una sola plantilla, la cual, por la forma en que es programada, se ajustará a los diferentes tamaños de dispositivos en los que va a ser vista.  Un solo documento servirá para cualquier dispositivo, lo que optimizará el tiempo de desarrollo, aunque ya platicamos sobre los problemas que esto conlleva. 

 Diferentes características:  En el diseño adaptativo, se debe de detectar el tipo de dispositivo que se está utilizando para que el servidor ajuste los comportamientos de la página web, así como sus funcionalidades. Esto, como ya lo mencionamos antes, puede favorecer el tiempo de descarga de la página y hacer más dinámica la visita al sitio.  En cambio, en el diseño Responsivo se incluyen todas las características y funcionalidades de la página para que el navegador, ya sea de la computadora, del Smartphone o de la Tablet, pueda trabajar con todos ellos.  Recordar que, si nuestros contenidos no están bien optimizados, esto puede ser contraproducente ya que el tiempo de espera será mayor que en un sitio Adaptativo. 

 Rendimiento:  Como se ha mencionado anteriormente, en el caso de los diseños Adaptativos, el servidor envía la información optimizada para el dispositivo en cuestión haciendo que el tiempo de descarga sea mucho menor.  Las imágenes están también optimizadas para esa resolución, lo que hace que el tamaño de archivo disminuya.  Este es un aspecto muy importante a tomar en cuenta, porque navegar la Web desde un Smartphone es mucho más lento que si lo hacemos desde una red Wi-Fi, además de que muchas veces la transmisión de datos está controlada y no puedes exceder un cierto límite.  Si las imágenes están mejor optimizadas para estos dispositivos, la transmisión de datos será menor beneficiando al usuario en todos los aspectos.   

En el caso del diseño Responsivo los datos se envían siempre igual, sin importar el dispositivo desde donde se esté viendo la página. Las imágenes se envían en el formato optimizado para computadora (display más grande) y es el navegador, con ayuda del Media Query quie deciden la manera de desplegar dicho contenido.  Esto consume más tiempo de espera al ser vista la página desde una red celular y es más probable que consuma más datos del plan. 

 Desarrollo:  En el caso del diseño Adaptativo se parte de un primer diseño.  En este aspecto hay dos vertientes, una que dice que el primero que se diseña es el formato más pequeño para después ir creciéndolo y la otra nos dice justo lo contrario.  Sea cual fuere la forma seleccionada de desarrollo, se debe de ajustar ese primer diseño a los diferentes formatos sobre los cuales se quiere trabajar.  Los recomendados son 6:  320px, 480px, 760px, 960px, 1200px y 1600px; pero el desarrollador puede decidir sobre cuales va a trabajar o bien si, según el enfoque de la página, se desarrollara algún formato diferente.  Obviamente esto implica más trabajo, ya que desde el programa de diseño se tiene que ajustar el primer tamaño, sea el más grande o el más pequeño, y de ahí reacomodar los elementos para los demás formatos.  En el caso del diseño Responsivo se suele trabajar en una resolución intermedia, tal vez a 960px, y de ahí utilizar los Media Queries para ajustar el diseño a los tamaños menores y mayores. Teóricamente, sólo se diseña una vez y es desde la programación donde se ajustan los diferentes elementos para que se vean de forma correcta no importa el tamaño del display que utilicemos. 

 Aspecto técnico: En un sitio creado para diseño Adaptativo necesitarás utilizar programadores que tengan una base sólida en lenguajes como JavaScript y CSS, además del básico HTML, para poder decirle al servidor cual va a ser la información que envíe según el tipo de dispositivo que se vaya a usar.  En el caso del diseño Responsivo podríamos olvidarnos del JavaScript y enfocarnos solamente al CSS3 y sus Media Queries.  Se deberá programar un solo HTML y a partir del CSS se harán todos los cambios.  El proceso de desarrollo será más rápido. 

Costo:  El costo puede ser un factor de gran importancia para decidir si se hace uno u otro tipo de diseño.  El diseño Adaptativo es más caro porque implica más trabajo de diseño y de programación.  Al tener que personalizar 6 veces, en el mejor de los casos, el mismo diseño que ya se hizo, se deben de implementar muchos más recursos que el diseñar sólo uno, como es el caso del diseño Responsivo.  Para ese último, como ya lo mencionamos, al sólo diseñarse una vez, el proceso es más rápido y mucho menos costoso.  Así mismo, el precio del mantenimiento será mayor en el diseño Adaptativo que en el Responsivo, ya que, al hacer un cambio, seguramente lo deberás de replicar en los diferentes documentos que se tienen, en cambio, al tener sólo un documento en el diseño Responsivo, los cambios se hacen en ese único archivo y el tiempo se reduce considerablemente haciéndolo más barato. 

Tecnología para el diseño ajustable 

El manejo de las tecnologías estándar para la generación de páginas Web nos va a ayudar mucho en la generación de este tipo de diseño.  Las etiquetas semánticas de HTML 5, junto con el manejo de los CSS3 y sus Media Queries, van a favorecer el control de los diferentes contenedores para que puedan ser reajustados a los diferentes formatos. 

A continuación, explicaremos la forma en la que estas tecnologías favorecerán a la creación del diseño Ajustable. 

HTML 5 

El HTML es el lenguaje de marcas utilizado para la creación de páginas Web desde el inicio.  Este, ha pasado por varias revisiones desde su creación, siendo la versión 4 una de las más longevas de su historia.  Esta versión evolucionó dando paso a la versión 5 la cual se vio beneficiada con una forma semántica de trabajar las etiquetas. Así mismo simplifica muchas cosas del código para hacerlo más versátil y más rápido de cargar.  Esta es una característica que para los teléfonos inteligentes resulta muy práctica, ya que cuando se vea una página desde la red celular, ésta va a cargar de una forma más rápida que si fuera hecha en la versión anterior.  Por otro lado, el uso de las etiquetas semánticas favorece la forma en la que se estructura la página y de igual forma, ayuda al indexado de ésta por parte de los motores de búsqueda.  Una última ventaja, aunque no se profundizará mucho en ella en este artículo, es que el manejo que tiene de los formularios ayuda a su funcionamiento en los dispositivos móviles.  

Básicamente, en este apartado vamos a explicar el funcionamiento de las etiquetas semánticas para estructurar los contenidos y como podría ayudar a la creación de diseños Responsivos-Adaptativos. 

Nuevas etiquetas semánticas 

Al principio, para poder generar la plantilla de una página Web, se utilizaban tablas.  Estos elementos no habían sido creados para tal efecto, por lo que resultaban un dolor de cabeza el poder controlarlos para hacer un diseño decente.  Con la llegada de la versión 4 de HTML se liberó el uso de la etiqueta <div> la cual te permitía hacer una división o sección independiente dentro de tu página.  Por muchos años las páginas Web fueron estructuradas por medio de div’s, hasta que con la especificación del HTML 5 se propuso utilizar etiquetas semánticas en lugar del <div>.   

¿Cuál era el problema con esta etiqueta?  que a pesar de que se le podían dar identificadores a la etiqueta, el <div> por sí solo no hacía mucha referencia del tipo de contenido que en él había.  Por tal motivo, se propuso utilizar etiquetas estructurales que tuvieran una razón semántica para su uso y esto ayudaría al indexado por parte de los motores de búsqueda.  A continuación, se mencionarán y explicarán estas etiquetas semánticas para poder entender de una mejor manera como favorecen al desarrollo de retículas dinámicas. 

<header> Representa el encabezado de la página o de un <article> o <section>.  Este tipo de contenedor se pone en la parte superior de la página o bien de la sección donde se esté utilizando.  En éste se ponen generalmente el logotipo de la empresa, el slogan, algún banner (animado o no) y en muchas ocasiones se incluye aquí la barra de navegación.  También si se utiliza dentro de un <article> es aquí donde se pone el título de éste y algún subtítulo.  Es un elemento muy importante para la estructura del documento HTML y debe de ser utilizado de forma correcta. 

<main> Este elemento fue el último en agregarse a la especificación del HTML 5 y permite representar el contenido principal de la página.  Solamente debe de existir un <main> dentro de la página y se combina con un <header> y un <footer> para estructurar la información de ésta.  Dentro del <main> estarán incluidos los <article>’s, <aside>’s y demás elementos que estructuren la información.  Este elemento es muy importante y nunca debe faltar en la estructura del documento. 

<footer> Este elemento se refiere, por lo general, al pie de la página, donde podemos incluir elementos tales como los derechos de autor, un índice de contenidos, enlaces a las redes sociales, términos y condiciones, entre otros.  El uso de este elemento es muy importante para la estructura básica de una página, pero también puede ser incluido en <article>’s para denotar el nombre de quien escribió la información, etc.  Se puede decir que el <footer> es un “pie de zona de visualización” (Aubry, pag. 43) cuyo contenido variará dependiendo de donde sea aplicado. 

Imagen 5. Estructura básica de un documento de HTML 5. Imagen creada por el autor.

<nav>   Dentro de esta etiqueta deberá de estar la barra de navegación principal de la página.  Aquí se encontrarán todos los vínculos necesarios para poder navegar al menos a los niveles primarios del sitio.  Se recomienda que este elemento esté dentro del <header> si es una barra de navegación horizontal, o bien dentro de un <aside> si es una barra vertical.  Es importante un buen manejo de la etiqueta <nav> ya que los motores de búsqueda la utilizan para poder indexar el resto de las páginas de un sitio, partiendo de la página de inicio.   

Es recomendable que se maneje únicamente un <nav>, pero en caso de requerir trabajar con una barra secundaria, se podría utilizar uno más, la técnica de control dependerá del desarrollador, pero puede ser por ID’s, por contextos o por jerarquías.  Dentro de este elemento debería de estar incluida una lista desordenada con los hipervínculos añadidos a cada <li>.  “El elemento <nav> está pensado en especial para la navegación principal del sitio Web.”  (Aubry, pag. 43). 

<aside> Este elemento se utiliza para generar barras laterales de información, ya sea del lado derecho o izquierdo de la pantalla.  Permite incluir contenido adicional a la página y datos complementarios a la información principal que va incluida en uno o varios <article>’s, puede ser también el lugar donde se incluyan diferentes tipos de widgets o aplicaciones que complementen la experiencia de usuario en la página y cualquier información, de la que, a pesar de su importancia, el usuario pueda prescindir. Aunque es importante para la estructura, ésta puede no ser incluida en el armado de la página, pues no es necesaria para su funcionamiento. 

<article> Esta es la etiqueta que se utiliza para mostrar el contenido principal de la página.  Es aquí donde se ponen los textos importantes para que el usuario pueda acceder a ellos y que los motores de búsqueda sepan que la información que existe dentro de este elemento es el desarrollo del tema en cuestión.  Un <article> puede ser dividido en <header> (con uno o varios <hx>), <footer> y varios párrafos de información.  Sigue la misma filosofía que se tendría en un artículo de periódico y más o menos esa misma estructura.  La inclusión de esta etiqueta es muy importante para el funcionamiento y el desplegado de la información principal. Es semánticamente incorrecto poner el texto principal dentro de otro tipo de contenedor. 

 <section> Esta etiqueta se utiliza para generar un grupo de elementos que trabajan entre sí para un fin común o bajo el mismo tema dentro de la página.  Es un tipo de contenedor que funciona de forma más genérica que el resto de los contenedores y en él puede haber otros elementos estructurales.  De esta condición depende su importancia, ya que ayuda a estructurar los contenidos de la página.  Se pueden tener más de un <section> en el mismo documento HTML y su manera de controlarlos dependerá del desarrollador. 

<figure> Esta etiqueta nos va a servir para incluir información gráfica en nuestra página.  En ella se podrán poner imágenes, mapas, esquemas, videos, ilustraciones y cualquier otro tipo de material visual que complemente la información de la página.  Esta etiqueta tiene un doble uso, ya que puede funcionar como un contenedor para una o varias imágenes o ser incluido dentro de algún otro elemento, como un <article> solamente para hacer referencia a la existencia de material gráfico.  Junto con el <figure> se utiliza el <figcaption> que ayuda a colocar un pie de foto con que complemente dicha imagen.  Su uso es muy importante porque ayuda a determinar donde estará esta información gráfica. 

Imagen 6. Maquetado de una página con todas las etiquetas estructurales. Imagen creada por el autor.

Es por este tipo de etiquetas y el manejo de ellas que se recomienda utilizarlas para el desarrollo de sitios web responsivos-adaptativos. Así mismo, su integración con el CSS3 y los Media Queries, harán que los diferentes elementos sean controlados de una forma más eficiente y productiva.  Otros aspectos importantes que ofrece el trabajar con la versión 5 del HTML son los siguientes: 

Accesibilidad:  Las etiquetas de HTML 5 hacen que los sitios sean más accesibles, ya que favorecen la lectura porque ayudan a identificar los tipos de contenidos y como están estructurados. 

Soporte de Audio y Video:  HTML 5 tiene etiquetas nativas que permiten el manejo de este tipo de recursos.  Esto es importante porque “ofrece un mejor soporte en los dispositivos móviles al momento de trabajar en los navegadores ya que no requiere de plug-ins para su funcionamiento”. (Fielding, pag. 19)  Esto hará que la visualización de este tipo de contenido no esté a expensas de terceros fabricantes o de tecnologías obsoletas. 

Nuevas interacciones:  Nuevas API´s de JavaScript te permiten agregar nuevas y mejores formas de interactuar con tu contenido.  Por ejemplo, te permite hacer cosas como arrastrar y pegar, geolocalización, etc. 

Canvas:  Una de las nuevas mejoras del HTML es la adición de un espacio propio para el dibujo llamado <canvas>.  Este permite hacer dibujos dentro de la página y “…construir aplicaciones enriquecidas para internet, casi de la manera como se hacían con Flash” (Fielding, pag. 19).  Esto favorece la compatibilidad entre diferentes dispositivos, así como entre sistemas operativos. 

Por todo esto es que HTML 5 es la mejor herramienta para estructurar el contenido de una página Web y se recomienda su uso para hacer un sitio responsivo-adaptativo.  Pero el control de cómo se verán los contenidos en los diferentes dispositivos lo darán los Media Queries que a continuación se explicarán.   

Media queries 

Con el lanzamiento de la versión de CSS3 se incluyó una nueva forma de trabajo que se ajusta de manera casi perfecta al manejo responsivo-adaptativo de una página Web.  A este manejo se le llama Media Queries y estos “son el núcleo del diseño responsivo ya que permite a los desarrolladores crear estilos en CSS específicos basados en las capacidades de un dispositivo”. (Fielding, pag 59).  La característica principal que va a tomar en cuenta a la hora de ajustar el diseño es el manejo del ancho del viewport, que significa que va a detectar el tamaño de la pantalla del dispositivo donde se verá la página, así como la orientación. 

Este tipo de manejo de las hojas de estilo tiene su principio en el uso de los Media Types, que son propios de la especificación del CSS2.  Esta forma de trabajo permitía hacer una hoja de estilo dependiente del medio donde fuera vista la página, pero tenía que ajustarse a alguno de los medios disponibles.  En total había 10 tipos diferentes de Media Types, de los cuales la gran mayoría de ellos no eran utilizados.  El más común que se utilizaba era el valor all que se refería a todos los tipos de dispositivos, aunque el valor print también tenía su popularidad. 

¿Cuál era el funcionamiento de los Media Types?  El objetivo principal era que cuando la página se observara desde el dispositivo apropiado, el sitio utilizara una hoja de estilos propia para ese medio, por ejemplo un CSS propio si la página se veía en una televisión.  En aquel entonces aun no teníamos los teléfonos inteligentes y no se necesitaba que tu sitio se ajustara a muchos formatos, de hecho, era muy raro que se utilizará un dispositivo distinto a la computadora para navegar el Internet.  Lo que se usaba con mayor frecuencia era una hoja de estilos ideal para impresión, donde eliminaras elementos como colores de fondo, barras de navegación, un exceso de imágenes o cualquier otro elemento que pudiera causar un posible desperdició de tinta.  De esta forma, tenías una versión imprimible de tu página sin tener que cambiar la URL o descargar un archivo PDF.  

Los Media Types evolucionaron con la llegada del CSS3 y la forma de codificarlos también tuvo sus ajustes dándole al desarrollador más control sobre la forma en la que la página se visualiza en diferentes dispositivos, distintos navegadores y múltiples resoluciones de pantalla.  La idea es que, en lugar de tener que dar mantenimiento a diferentes hojas de estilos, solamente se le diera a una y desde ahí se controlara la forma de visualizarse.  Este tipo de trabajo de las hojas de estilo, lo hace muy propicio para el tipo de desarrollo que se propone en el presente artículo. 

Uno de los conceptos de mayor importancia a entender al momento de trabajar con Media Queries es el manejo del Viewport.  “El viewport es la vista que se tiene por la cual se ve el sitio Web” (Fielding, pag. 6) y que dependerá del dispositivo donde ésta sea vista.  Cada tipo de dispositivo, computadora, tablets, iPads, teléfonos inteligentes, etc., tienen sus propias medidas de pantalla por lo que cada una tiene una medida de viewport diferente.   

A diferencia de los Media Types, los Media Queries te permiten un nivel de lógica para el acomodo de los elementos basados en el viewport donde serán vistos, de esta forma serán cargados los estilos necesarios para la correcta visualización de la página y posiblemente algunos otros serán ignorados. 

La sintaxis de los Media Queries se basan básicamente en tamaños mínimos y máximos del ancho y alto de la pantalla, entre otros elementos.  A partir de estos tamaños se cargarán los estilos correspondientes para el desplegado de la información.  Cabe mencionar que este artículo no pretende explicar a forma de tutorial como usar los Media Queries, pero si se explicará la sintaxis básica que se debe de seguir para su creación.

La sintaxis de para crear los Media Queries es la siguiente: 

Imagen 7. Ejemplo de CSS3 para crear un Media Query. Imagen creada por el autor.

En este ejemplo de código, se puede ver como se designa un estilo genérico para el <body> del documento HTML donde se tiene un color de fondo gris.  Sin embargo, al especificar los tamaños máximos de los diferentes viewports utilizando max-width voy a tener un distinto color de fondo del <body> que dependerá del dispositivo donde sea visto.  Si se observara la página desde un iPhone, se cargarían los estilos propios para un max-width de 320 pixeles y así vería un color de fondo verde.  Algo similar sucedería si la página fuera vista en otros posibles tamaños.  

Cabe mencionar que con los Media Queries se puede controlar, no sólo el color de fondo de la página, sino todo el diseño completo de ésta.  

3. Propuesta: ¿Cuál tipo de diseño debo de usar?  

Al comparar ambos tipos de diseño, podemos ver que los dos tienen ventajas y desventajas.  Parte de lo que se propone en este artículo es que se haga una combinación de ambos para hacer la mejor experiencia de usuario sin importar el dispositivo donde se visualice la página Web.  Se recomienda por ello utilizar las medidas proporcionales basadas en porcentajes que se usan en el diseño Responsivo, pero, por otro lado, se propone no dejar al azar la forma en la que se reacomodan los elementos en los distintos formatos, por lo tanto, habría que diseñar las diferentes plantillas para los distintos formatos y después programarlas a través de los Media Queries. 

Al utilizar esta tecnología; que más adelante será explicada con mayor amplitud, es posible hacer que elementos como las imágenes se carguen de forma distinta según la resolución en la que se esté viendo.  Así mismo, es posible hacer que cierta información textual cargue de forma incompleta o no se cargue del todo y con la ayuda de pequeñas rutinas de JavaScript: las cuales no necesitan un alto nivel de experiencia para hacerlas, se muestren conforme el usuario lo necesite. 

Así mismo, elementos como las barras de navegación podrían ajustarse en su funcionalidad, de un formato a otro directamente desde el CSS, lo que ayudaría a que la navegación dentro del sitio fuera más fácil, ya que se tendrían barras de navegación personalizadas para cada dispositivo, que funcionarían en las resoluciones intermedias a las 6 mencionadas más arriba.   

Por otra parte, se recomienda el uso de un mismo HTML para que el usuario siempre tenga acceso a la misma información sin importar el dispositivo desde donde se vea la página.  El control que se muestra y que no tendría el Media Query, siempre con la opción de poder ver información que originalmente no esté presente. 

La combinación de ambas formas de diseño, Responsivo y Adaptativo, favorecería la experiencia de los usuarios en las distintas plataformas, ya que un usuario que viera la página desde una computadora con un monitor de gran resolución, al reducir el tamaño de la ventana del navegador vería como los elementos responderían y tal vez se van reducirían en tamaño hasta llegar a algún punto específico en donde el acomodo de los elementos cambié según lo diseñado y no basado en lo que los tamaños proporcionales decidan.  De esta manera se tendría más control de los diferentes elementos que conforman la página, que estaría lista para verse desde cualquier dispositivo sin importar que su resolución no esté contemplada en las 6 básicas. 

Para lograr la integración entre estos dos tipos de diseño se deberá de trabajar con ciertas tecnologías que, para cualquier desarrollador Web son más que comunes.  Éstas implican el manejo de HTML 5 para la estructuración y el manejo de la información; CSS para el diseño de la información y la manera en la que se va a organizar la información, y el manejo de Media Queries para la adaptación de los diferentes formatos.  Ambas tecnologías ya se han explicado en este artículo. 

Aquí el manejo de los Media Queries es básico, ya que con la ayuda de estos podrás especificar la forma en la que se va a visualizar el diseño para los diferentes tamaños.  Para esto se propone que el desarrollador diseñe al menos tres diferentes retículas para su sitio.  Una para ser visto desde una computadora, otro para tabletas y uno más para teléfonos inteligentes.  Al tener el diseño de estos formatos se tendrá la certeza de donde deberían acomodarse todos los elementos de la página, haciendo la respuesta del sitio del tipo Adaptativo, pero para las resoluciones intermedias, la página se ajustaría al tamaño del viewport teniendo una respuesta del tipo Responsivo.  Para que los elementos no se desajusten en los tamaños intermedios a los que se ha diseñado, será necesario trabajar con medidas relativas, no con medias absolutas como pixeles, para favorecer de esta forma el acomodo correcto sin importar el tamaño del viewport. 

Por último, se recomienda que contenidos como imágenes se trabajen desde el punto de vista del diseño Adaptativo, es decir, que para los diferentes tamaños de pantalla que se ha diseñado, se carguen distintas imágenes, pero estas controladas desde la hoja de estilos (del lado del cliente) no desde al servidor con alguna programación en JavaScript (como lo propone el diseño Adaptativo).  De esta manera, se pretende garantizar que la descarga de la información del sitio será la óptima para el dispositivo con el cual sea vista la página.  

Conclusiones 

A partir de este trabajo hemos podido ver como el desarrollo Web ha cambiado a lo largo de los años y como sus necesidades lo han hecho también.  Situaciones que en los noventas solo se tenían en la imaginación o en la ficción, ahora son reales, como la posibilidad de navegar en Internet desde un dispositivo móvil, en cualquier parte que uno esté.  Es por ello que se necesita que las páginas Web puedan adaptarse a estos dispositivos sin ninguna complicación, ya que el desarrollador no tendrá la certeza de con cuál de ellos será vista su creación.  Ya no estamos en el tiempo de condicionar la vista de un sitio Web a un determinado navegador o resolución de pantalla, más bien debemos de darle la posibilidad, de que sin importar el medio donde se vea la información, se ajuste de una forma lógica. 

El manejo del tipo de desarrollo Ajustable pretende favorecer a esta forma de desarrollo, para que la experiencia del usuario siempre sea la misma, sin importar el dispositivo donde el sitio será visto, ni tampoco tener que tomar en cuenta elementos como la velocidad de transmisión, para poder ver, o no, una página Web desde el dispositivo de la preferencia del usuario.

Fuentes de consulta 

 Knight, Kayla.  “Responsive Web Design: What It Is And How To Use It.” Responsive Design Junio 2012: 5-33.  Smashing Magazine.  Web. 05-30-16. <URL>. 

 Frain, Ben.  Responsive Web Design with HTML5 and CSS3. Birmingham: Packt Publishing Ltd., 2012. Versión Digital. 

 Fielding, Jonathan.  Beginning Responsive Web Design with HTML5 and CSS3.  New York: Apress, 2014. Versión Digital. 

 LaGrone, Benjamin.  HTML5 and CSS3 Responsive Web Design Cookbook.  Birmingham:  Packt Publishing Ltd., 2013. Versión Digital. 

 Menhennett, Ashley.   A Guide to HTML5 and CSS3.  Ciudad no especificada: Zenva, 2014.  Web. 30-05-16. <URL>. 

 Murphy, Chistopher. Et. Al. Beginning HTML5 and CSS3.  New York: Apress, 2012. Versión Digital. 

 Aubry, Christophe.  HTML 5 y CSS 3, Revolucione el diseño de sus sitios web.  Ciudad no especificada:  sin año.  Eni Ediciones.  Web.  30-05-16.  <URL>. 

 Vega, Adrián Alonso.  Responsive Web Design: Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3.  (Trabajo de Fin de Grado). Alcalá: Sin año.  Web.  30-05-16.  <URL>. 

 Ros, Isidro.  “Un trocito de historia: evolución y “muerte” de las PDA”.  Muy Computer. Diseñador No especificado.  Julio 2014.  Web.  <URL> 

 Ikeda, Paula.  “La era de los smartphones.”  Para ti.  Lucia Venegas.   Abril 2013.  Web.  25-05-16.  <URL>. 

 Martí, Anna.  “El mercado de los smartphones en la actualidad: suben las exigencias y baja la demanda.”  Xatakamovil.  Diseñador no especificado, Julio 2015.  Web.  20-05-16.  <URL>. 

 Autor no especificado.  “Análisis de los sistemas operativos para smartphones.”  Kioskea.net.  Diseñador no especificado, Junio 2014. Web. 20-05-16.  <URL>. 

 Marcotte, Ethan.  “Responsive Web Design”.  A List Apart.  Diseñador no especificado, Mayo 2010.  Web.  <URL>. 

 Autor no especificado.  “Adaptive vs Responsive, ¿qué diseño web es el adecuado?”  Smartec.  Diseñador no especificado, Agosto 2015.  Web.  20-05-16.   <URL>. 

 Peláez, Virginia.  “Diseño Responsive vs Adaptive. ¿Cuál es mejor?.”  Idento.  Virginia Peláez, Septiembre 2015.  Web. 20-05-16.  <URL>. 

 Keseso.  “Del diseño web Responsive y Adaptive: que no te líen ni confundan.” EsCss.  Diseñador no especificado, Enero 2016.  Web.  20-05-16.  <URL>. 

 Autor no especificado.  “7 grandes diferencias entre Adaptive Web Design y Responsive Web Design.”  Blog Interdominios.  Diseñador no especificado,  Octubre 2013.  Web.  20-05-16.  <URL>. 

 Marketing.  “El diseño web adaptive vs responsive.”  Sinermedia  Diseñador no especificado, Julio 2015.  Web.  20-05-16.  <URL>. 

 Quesada, Sara.  “Diferencias entre el diseño web adaptativo y responsive.”  Puro Marketing.  Diseñador no especificado,  Junio 2014.  Web.  20-05-16.  <URL>. 

 Santa María, Luiggi.  “La diferencia entre las páginas web responsive y adaptive.”  Staff Digital. Diseñador no especificado,  Diciembre 2015.  Web.  20-05-16.  <URL>. 

 Autor no especificado.  “HTML5 Introduction.”  W3 Schools.  Diseñador no especificado, Fecha no especificada.  Web.  25-05-16.  <URL>. 

 Diaz, Pedro.  “El HTML 5 y las etiquetas semánticas.”  Smartec,  Diseñador no especificado,  Julio 2014.  Web.  25-05-16.  <URL>. 

 Autor no especificado.  “HTML5. Nuevas etiquetas semánticas.”  Aula Clic,  Diseñador no especificado, Junio 2015.  Web.  25-05-16.  <URL>. 

 Sin apellido, Luis.  “HTML5: Nuevas etiquetas semánticas y estructurales.”  Arume,  Diseñador no especificado,  Agosto 2012.  Web.  25-05-16.  <URL>. 

 Santa María, Luiggi.  “La relación entre el diseño web responsive y el HTML5.”  Staff Creativa.  Diseñador no especificado,  Abril 2015.  Web.  25-05-16.  <URL>. 

 Fotografía.  Interaktiba.  Web.  01-06-16.  <URL>. 

 Fotografía.  Blog Neothek.  Web.  01-06-16.   <URL>. 

 Gráfica.  StatCounter.  Web.  01-06-19.  <URL>. 

Resumen curricular

Luis Alejandro Muñohierro Cruz – amunohie@yahoo.com / alejandro@digitarts.com.mx

Estudios realizados:  Lic en Diseño Gráfico, por la Universidad Iberoamericana.  Maestría en Comunicación con Medios Virtuales en ICONOS, Instituto de Investigación en Comunicación y Estudios de la Cultura.

Experiencia Laboral:  Desarrollador de sitios Web desde 1995; Diseñador Gráfico desde 2003; Profesor en la Lic. De Diseño Gráfico en la Universidad Iberoamericana así como en ICONOS, Instituto de Investigación en Comunicación y Estudios de la Cultura.