Aún recuerdo mis inicios en Internet donde lo que se podía ver en pantalla era solo texto, el protocolo GOPHER era la manera de interactuar con las fuentes de información. También existía ya para ese momento el protocolo HTTP sin embargo las velocidades de conexión eran tan bajas que las posibilidades de que el navegador mostrara alguna imagen eran mínimas. Desde aquellos años hasta la actualidad han aparecidos muchas tecnologías resumidas en siglas y nombres y todas funcionando sobre el perdurable HTTP. Entre estas el mas palpable HTML que en lo últimos tiempos ha recibido especial atención, y una evolución muy interesante con HTML5. Ver la evolución de la Web

HTML5 introduce nuevas funcionalidades, características y algo importante: los navegadores lo van implementando de manera muy aceptablemente uniforme, cosa que antes con otras definiciones de HTML no ocurría. Aunque HTML5 aun esta en desarrollo y no completamente implementado, los resultados son muy buenos, y resulta ser que son los dispositivos móviles es donde se ve el mayor crecimiento de HTML5. Esto es importante porque la web esta siendo utilizada desde millones de dispositivos móviles, con características, resoluciones de pantalla, colores y tamaños distintos. De hecho cada vez es mas común que los nuevos proyectos nacen y se diseñen primero para dispositivos moviles de donde se genera el concepto de “Mobile First”.

Sensibilidad en la Web

Los nuevos diseños Web deben asegurar que se visualizan bien, deben ser sensibles a las características de los dispositivos y la manera en que se esta mostrando la pagina. De aquí el termino “Responsive Design”, aunque no se refiere a una sensibilidad humana, nos ofrece una manera de que la información y su diseño nos llegue tal como se espera.

Ventajas

• Garantizar y mantener el estilo en diferentes resoluciones de pantalla y modo de visualización horizontal o vertical.
• Menor costo de desarrollo ya que se puede diseñar el sitio para distintos dispositivos sin reestructurar el sitio.
• Relativamente sencillo de implementar.
• EL diseño nuevamente toma un rol importante, y deja de lado en lo posible las limitaciones de los dispositivos, por ende mejora la experiencia del usuario en los dispositivos móviles.

Desventajas

• Requiere mayores recursos de hardware.
• Los elementos se cargan en los tamaños completos aun cuando se use un dispositivo de menor resolución de pantalla.
• No soportado en dispositivos anteriores.

Herramientas

Algunas herramientas para hacer y probar nuestros diseños “sensibles”:

• Para probar y simular en varios dispositivos… http://www.responsinator.com/
• Plugin Jquery para sensibilizar textos grandes… http://fittextjs.com/
• Para inspirarnos, una buena colección.. http://mediaqueri.es/
• Frameworks. Ya existe una variadad de frameworks que nos facilitan el trabajo, por ejemplo: Lessframework y también Bootstrap
• Libros. Hay muchos pero el mas representativo quizás es el libro “Responsive Web Design” de Ethan Marcotte.
• Adobe Shadow. Herramienta que nos permite monitorear los resultados en varios dispositivos de manera simultánea y remotamente.