¿Qué es un sitio web responsivo?
México, D.F. noviembre 2015.- 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 duda, lo que en muchos de los casos representaría la mayoría de las visitas, es por ello que ofrecerle a los usuarios una versión optimizada para la pequeña pantalla del smarthphone o que este lista para la falta de mouse o teclado es una prioridad para tener un sitio web efectivo, debido a esta necesidad, surge el diseño responsivo.
Por ello, Alfonso Bribiesca, emprendedor y fundador de Vexilo, empresa especializada en desarrollo de sistemas a la medida, te brinda algunos tips sobre los sitios web responsivos.
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.
Existen varias técnicas para hacer un sitio web responsivo entre las cuáles las principales consisten en:
- Re-acomodo del contenido. 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 tablet deberá ser de 2 columnas y en un sitio móvil tendrás que ajustarlo a 1 sola columna.
- Ajustar o recortar las ilustraciones e 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.
- Ajustar en el tamaño de letra. 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.
- Menús alternativos y ajuste de botones. 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.
- Ocultar o mostrar contenido según el tamaño y tipo de pantalla. La versión de escritorio de tu 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, debes 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.