1

Diseño web responsivo, o como apreciar mejor un mensaje

Se calcula que entre el 40% y el 70% de las visitas de un sitio web promedio se realizan desde un dispositivo móvil. Sin embargo no siempre el mensaje puede ser apreciado en su totalidad. Por eso, las empresas se han afanado en presentar una versión optimizada para la pequeña pantalla del smartphone, y ante esto surge el diseño responsivo.

Un sitio web responsivo se caracteriza por detectar el tamaño y tipo de pantalla de cada dispositiva, así como, por adaptarse automáticamente para ofrecerle al usuario mayor accesibilidad y una mejor experiencia de uso. Alfonso Bribiesca, fundador de Vexilo, empresa especializada en desarrollo de sistemas a la medida, toma el tema en cuestión y asegura que existen varias técnicas para hacer un sitio web responsivo.

Alfonso Bribiesca es ingeniero experto en desarrollo de sistemas a la medida y seguridad en Internet. Cuenta con casi 10 años de experiencia en el sector y es egresado de la Universidad La Salle. En su opinión, el reacomodo del contenido es una de las técnicas para lograr un diseño responsivo.

Añade que esto consiste en ajustar el contenido según el tamaño o tipo de pantalla de la persona que visita el sitio, por ejemplo en un sitio de escritorio podrías tener el contenido en 3 columnas, en una tableta deberá ser de 2 columnas y en un sitio móvil tendría que ajustarse a una sola columna.

“Hay que ajustar o recortar las ilustraciones o las imágenes. Una imagen podría no caber en el tamaño de la pantalla por lo que, una buena práctica es ajustar el tamaño o recortar la misma para mostrarse siempre correctamente y no quitar espacio al contenido. Sin duda, esto nos lleva al siguiente punto que es el de ajustar el tamaño de la letra, porque aunque muchos dispositivos lo hacen automáticamente en muchas ocasiones es necesario cambiar el tamaño de letra para que se vea claramente en pantallas más pequeñas”.

Bribiesca añade que los menús alternativos y el ajuste de los botones, tienen que ser más accesibles en la mayoría de los casos. “El menú de navegación necesita volverse más accesible pero sin arriesgar espacio. Es por eso, que una técnica muy utilizada son los menús simplificados o que se ocultan solos cuando se visita el sitio desde un móvil, por otro lado gran parte de las pantallas de dispositivos móviles son “touch” por lo que colocar botones más grandes pensados para los dedos, es una buena práctica para el desarrollo de sitios responsivos“.

“El ocultar o mostrar contenidos según el tamaño y tipo de la pantalla, ya que en muchos casos la versión de escritorio del sitio podría tener mucho contenido que quizá no es tan relevante y arriesga el poco espacio que podrías tener en la versión móvil, es por ello que, una de las técnicas más utilizadas para el diseño de sitios responsivos es el ocultar contenido que no es tan relevante dejando solo lo esencial”.

-Sin duda, es básico no confundir un sitio responsivo con una versión móvil del sitio. Como tip, debe recordar que la principal característica del sitio responsivo es que los usuarios están visualizando el resultado del mismo código fuente pero acomodado distinto por medio de uso de hojas de estilos y javascript, por otro lado la versión móvil de un sitio utiliza un código, hojas de estilo y scripts distintos.

Alfonso Bribiesca
Alfonso Bribiesca

Mario Augusto Beroes Ríos

Periodista graduado en la UCV en la mención Audiovisual.