Blog

6011
¡El diseño responsivo es responsabilidad de todos!

1 de June de 2013

¡El diseño responsivo es responsabilidad de todos!

Todos los medios cambian en algún momento, así como se creyó que la televisión iba a matar a la radio ó que la videocasetera iba a destruir al cine, las cosas fueron cambiando y la Internet también. Este es el de la web.

¿Qué es un sitio web responsivo?

Un sitio responsivo es mucho más que tener un sitio que se puede ver en un iPhone o en una tableta. Eso existe hace tiempo y, en función de la importancia del sitio, el contenido siempre pudo verse en dispositivos más limitados, con más o menos esfuerzo. Las grandes compañías siempre ofrecieron sitios mobile para sus contenidos.

Un sitio responsivo responde al dispositivo, adaptando su contenido para que sea visualizado de la mejor manera posible. Además, aprovecha óptimamente las capacidades nativas del dispositivo para ofrecer la mejor experiencia posible, aun cuando esta varíe de equipo en equipo.

¿Y para qué quiero un sitio responsivo?

La idea, principalmente, indica que todo nuestro contenido está disponible para la mayor cantidad y variedad de dispositivos posibles, los que existen y los que aún están por inventarse. Pero quedarnos solo con esta definición sería muy pobre. 

Un poco de análisis sobre la primera oración nos deja la idea que "el contenido tiene que verse" y lograr esto significa cambiar el punto principal de enfoque en un sitio web: el contenido es más importante que el diseño.

Antiguamente, los sitios webs se hacían para que logren impacto, tenían que ser lindos y, según la época, esto fue desde una imagen gif, a las fotos en jpg, a los fondos multicolores, al flash con animaciones y a las hojas de estilos con infinitas posibilidades, hasta llegar al HTML5 como corolario de posibilidades nativas en cualquier navegador web.

Si alguien se acuerda de la famosa línea "Este sitio está preparado para verse en Internet Explorer con una resolución de 1024x768 pixeles" que adornaba el pie de página de innumerables sitios web, sabe también que abrirlo en cualquier otra resolución o con cualquier otro navegador armaba instantáneamente un rompecabezas de diseño donde difícilmente encontráramos correctamente ubicado el contenido como el diseñador lo había imaginado...

Hoy en día, tener una frase así indica una aproximación errada hacia el usuario, donde nosotros no podemos decirle en qué y cómo tiene que ver el sitio, sino que es el usuario quien decide dónde y sobre qué plataforma mira nuestros contenidos (tranquilamente puede decidir ingresar a nuestro sitio en el baño a través de su teléfono, en vez de utilizar la computadora de escritorio).

Imponer dichas restricciones equivalen a tener un local donde solamente se deje entrar a gente con ropa verde, o que calza únicamente sandalias, que puede llegar a ser un modelo de negocio rentable en casos muy particulares, pero no es el estándar que se busca en el 99% de los casos.

Pero, entonces, ¿tengo que sacrificar el diseño para tener un sitio responsivo ? 

Nada más alejado de la realidad. No solo se trata de respetar las diferentes posibilidades de visualización de cada dispositivo, sino que también indica que debemos aprovecharlos al máximo y tener en cuenta las diferentes posibilidades de cada uno al momento del diseño. 

El objetivo de tener una web sigue siendo mostrar algo al mundo, y hacerlo con estilo y belleza siempre es mejor, pero pasa a ser fundamental que la información se vea correctamente, independientemente de las restricciones de diseño que nos imponga el dispositivo en el que se visualiza.

Todo el diseño tiene que ser pensado y elaborado en función de lo anterior. El diseño tiene que ser variable o fluido a través de los distintos dispositivos.

Ese pequeño botón que nos permite ver nuestro carrito de compras tiene que tener una superficie mínima de un dedo en dispositivos touch, de la misma manera que la proporción de la foto que ocupa media pantalla en un monitor de 24 pulgadas no debe requerir 5 minutos de scroll en una tableta para ver el texto que se encuentra al lado.

Todo tiene que estar pensado para ser soportado. Desde las capacidades de visualización de videos o contenidos multimedia hasta los márgenes y las tipografías grandes que ganan sentido en dispositivos portátiles.

¿Cómo hay que aplicar este nuevo método?

Básicamente, significa volver al origen de Internet para volver a reinterpretar la idea. Se inventó para compartir información y conocimiento. Entonces, ¿para qué existe un sitio web? Existe para mostrar algo.

Si nos basamos solo en este principio, tenemos que repensar las interacciones que queremos ofrecer, tomando como punto de partida la información que nos interesa compartir con el mundo.

Lo que tenemos que mostrar va siempre primero. El diseño cambió mucho en los últimos tiempos, pero las palabras se siguen usando y el texto es ahora el contenido primario.

Hay que dejar de pensar en la distribución de las cosas por ubicación. Los elementos no van en el pie, o en la barra lateral. Los elementos son más o menos importantes y, por ende, aparecen primero o después. La distribución va a cambiar de acuerdo al dispositivo que se use.

Es necesario empezar el diseño para las pantallas más pequeñas primero. Una vez que sabemos qué y cómo vamos a mostrar en los dispositivos más limitados, es fácil seguir para arriba. El conjunto más reducido es nuestro límite inferior y de ahí en adelante es cuestión de modificar o ampliar el contenido.

Sacarse de la cabeza los dispositivos específicos. Al ritmo tecnológico de hoy, posiblemente el año que viene, los dispositivos más utilizados hayan cambiado o tengan el doble de resolución de pantalla. Tenemos que pensar en cualquier cosa que existe y en lo que vendrá también.

Lo ideal es trabajar sobre el browser. Es necesario que tanto el diseño como el contenido se puedan ver y probar sobre la plataforma de uso. Basta de "Lorem Ipsum": es más práctico armar el diseño con el contenido real, así descubrimos las fallas de comportamiento un paso antes.

A pesar de todo, no entiendo la diferencia...

Los sitios para móviles existen hace mucho. Aunque no todos los saben, cualquier celular GSM (de los que usan la tarjeta SIM para tener un número) puede navegar por Internet. Sí, incluso los que son monocromos, todos ellos traen una tecnología que se inventó hace tiempo y se llama WAP. Esto, sumado a algunas variantes livianas de XHTML, conforman un universo ya existente de sitios Mobile-Friendly que es lo que hasta hace algún tiempo se proponía como un estándar, llegando incluso a estar promocionado con el dominio .mobi.

Con las posibilidades tecnológicas de hoy en día y con la profunda inserción de los teléfonos inteligentes (smartphones), y todo el universo de tabletas (tablets) desde el nacimiento de Android y el iPhone, el público cambió su herramienta de visualización y la cantidad se multiplicó en varios órdenes de magnitud.

El diseño responsivo no solo cubre este universo de dispositivos, sino que además plantea un desarrollo tomado como filosofía, donde además de aumentar considerablemente los posibles usuarios, también logra proporcionarles sus propias libertades, ya que mantenien siempre el concepto o idea a transmitir, incluso abarcando la visualización en dispositivos que aún no existen.

Más que diseñar el sitio, abarca el desarrollo de un conjunto de elementos (paleta de colores, formatos de texto, fondos e iconos) que permite luego adaptar todos los contenidos a los diferentes dispositivos. Así, se mantiene la identidad del proyecto sin importar cómo y dónde se esté viendo.

Ariel Sanchez

Tecnología

4036
El nunca bien ponderado trabajo de cuentas...

El nunca bien ponderado trabajo de cuentas...

Se puede decir que algunos somos muy afortunados, sobre todo cuando hacer nuestro trabajo es algo que nos gusta: ayudar a los clientes.

14 de July de 2013

+14K
Cómo preparar OSX para programar con PHP

Cómo preparar OSX para programar con PHP

Si te compraste una Mac, o estás experimentando con el sistema operativo de Apple, acá tenés un listado del software necesario para convertirlo en una máquina implacable de desarrollo web.

17 de February de 2013

4753
El poder de Pinterest

El poder de Pinterest

Pinterest se ha hecho popular en los últimos 2 años, abarcando una audiencia muy variada. Tiene miles de categorías que van desde autos y motos a comida y tragos.

20 de May de 2013

Comentarios


Contact us

Email.info@elwebstudio.com
Skype.elwebstudio
All rights reserved.
© ELWEBSTUDIO. 2013.