¿Qué es un sitio web responsivo?

14

Aunque debido a la gran cantidad de variables es difícil tener un dato exacto se calcula que entre el 40% y el 70% de las visitas de un sitio web promedio se realizan desde un dispositivo móvil lo que en muchos de los casos representaría la mayoría de las visitas, es por ello que ofrecerle a tus 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:

Sitio web responsivo

Un sitio web responsivo se caracteriza por detectar el tamaño y tipo de la pantalla de cada dispositivo y adaptarse automáticamente para ofrecerle al usuario mayor accesibilidad y una mejor experiencia de uso. Esto se logra con una mezcla de trabajo de diseño gráfico, es decir, el acomodo del contenido y las ilustraciones para lograr ser coherentes si se ven, por ejemplo, en 4 columnas (en una versión de escritorio) o en 1 sola columna (en una versión móvil) y por otro lado el uso de programación CSS, HTML y Javascript para ocultar y/o mostrar el contenido según el tipo de dispositivo, por ejemplo, ocultar información menos relevante o generar un menú que se oculte automáticamente si se visita el sitio desde un móvil donde el espacio es más limitado.

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 en 2 columnas y en un sitio móvil ajustarlo a 1 sola columna.

Responsive grid

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 por lo que una técnica muy utilizada es utilizar 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 botones más grandes pensados para los dedos son una buena práctica para el desarrollo de sitios responsivos.

MultiLevelMenu

Ocultar/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.

¿Cuál es la diferencia entre una versión móvil de tu sitio y un sitio responsivo?

A veces la gente confunde un sitio responsivo con una versión móvil del sitio, 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.

Ejemplo de páginas y sitios web responsivos

A continuación te listamos algunos ejemplos de sitios responsivos, pueden hacer la prueba abriendo los sitios y ajustando el tamaño de tu navegador para ver como se re-acomoda el contenido.

Flash notes

http://www.flashnotes.com

Smashing Magazine

http://www.smashingmagazine.com

Nuestros amigos de: Vexilo

http://www.vexilo.com

Nuestro blog:

http://www.wizache.com/

 

 

Sobre el autor Ver todos los artículos Sitio web del autor

Alfonso Bribiesca

Alfonso Bribiesca

Ingeniero, soñador, emprendedor, geek, prolife y eterno estudiante. Creo que todo en la vida sigue un patrón. Fundador de @vexilo, @wizache y @rubiqom

Leave a Reply

Tu correo no será publicado. Los campos requeridos estan marcados con *