Responsive Web Design: si tu web no se adapta al usuario, tiene los días contados

responsive_web_design

La evolución de los sitios Web ha sido acompañada siempre por el progreso de otras tecnologías que están íntimamente ligadas. Redes Wi-Fi que se multiplican, Notebooks y tabletas al alcance de todos, 3G y 4G en el móvil, son factores fundamentales para la expansión que sigue experimentando Internet hoy en día.

Las nuevas tecnologías no dan respiro y ha llegado el tiempo de adaptarse ¿cómo lograr que un sitio o aplicación Web se vea bien en todas las pantallas y dispositivos? A esa pregunta responde convocado por PulsoSocial Damián De Luca, Desarrollador de aplicaciones Web y soluciones basadas en HTML5 para diferentes dispositivos, autor de libros y conferencista.

Equipos de escritorio, notebooks, netbooks, móviles y tablets hacen reflexionar sobre la variedad de opciones que tienen los usuarios a la hora de navegar. “Distintos tipos de pantalla, con dimensiones y proporciones variadas nos indican que ya no se puede pensar solo en resoluciones de equipos de escritorio. Pero eso no es todo, también está la experiencia del usuario ¿Y qué es lo que desea el usuario? Si bien no todos los usuarios son iguales, en general, podremos decir que lo que desean es tener una experiencia adaptada y pensada para su dispositivo. No es lo mismo una computadora que cuenta con mouse y teclado, que un teléfono móvil con interfaz táctil” aclara De Luca.

Adaptarse o morir

El Responsive Web Design, o Diseño Adaptado al Medio, agrupa una serie de técnicas que permiten a diseñadores y desarrolladores Web, crear una solución que se ajuste a las características del dispositivo del usuario. “Si bien la mayoría de los dispositivos actuales cuenta con un software (el navegador) que puede recorrer los sitios pensados para equipos de escritorio, cuando se trabaja con Responsive Web Design, es posible crear un proyecto que aproveche y se adapte al medio” aclara.

De Luca analiza cinco recomendaciones para lograr un sitio adaptable al medio:

El diseño del Boston Globe, ejemplo paradigmático de responsive web design

Objetivo: para quienes ya conozcan de diseño Web, la idea es lograr con un mismo HTML y CSS poder crear un diseño que se pueda adaptar a diferentes medios, sin perder de vista las necesidades de cada dispositivo y resolución. “La ventaja es que no hay que desarrollar para cada dispositivo una versión, lo cual beneficia el tiempo de desarrollo y los costos que esto pudiera requerir” destaca.

Etapa inicial: es importante analizar si es necesario realizar un diseño adaptativo. Si bien puede ser una gran tentación, en algunos casos puede ser recomendable entregar versiones distintas para móviles, tablets y equipos de escritorio. “Esto tiene que ver con lo que mencionábamos de la experiencia de usuario y también con la performance. En ocasiones puede ser más eficiente realizar una versión para distintos dispositivos, aprovechando mejor sus características” aclara.

Los lenguajes: “cuando hablamos de proyectos Web, los lenguajes y tecnologías que están en “la cresta de la ola” son HTML5 y CSS3. Ellos son los que nos permitirán lograr un diseño que se adapte al medio. Dentro de las características de CSS3, encontraremos en Media Queries las claves para lograr que nuestros desarrolles se adapten, creando reglas, que responderán según las características y disposición del dispositivo” comenta. Por ejemplo, es posible crear reglas según el alto o ancho de la pantalla, pero también tendremos la posibilidad de especificar opciones según el dispositivo esté en modo Landscape o Portrait (cuando se trata de smartphones o tablets)

Observar y aprender: las técnicas y tendencias relacionadas con Responsive Web Design siguen su evolución, por tal razón es importante estar siempre al tanto de lo que está pasando en ese ámbito: buscar información en libros e Internet nos puede ayudar. “Un consejo importante: tratar de verificar siempre que la información esté actualizada y que provenga de una fuente confiable” rescata.

Probar y probar: ¿cómo saber si se hizo un buen trabajo? La etapa de pruebas o testing es fundamental. Es importante contar con diversidad de dispositivos (en tamaño y tipo de interfaz). “El tiempo de pruebas es importante para detectar errores y asuntos que corregir o mejorar. Existen emuladores y simuladores que nos ayudarán en esta etapa, pero es recomendable contar con variedad de dispositivos físicos para poder evaluar si estamos entregando la mejor experiencia en lo que se refiere a usabilidad, accesibilidad y también en performance” resume.

Para nuestros lectores aquí hay más información para trabajar con Media Queries y obtener contenidos adaptables.

Para quienes busquen ejemplos de Responsive Web Design, se recomienda la lectura éste material

Acerca del autor

Clarisa Herrera

Clarisa Herrera Lafaille
Licenciada en Comunicación Social. Periodista especializada en marketing, tecnología y analista de medios. Docente de Periodismo y Comunicación. Investigadora de tendencias, hábitos y comportamientos sociales aplicados a negocios. Bailo Jazz. En Twitter: @theguapa