Para qué sirve el diseño responsivo

El diseño responsivo (Responsive design) se refiere a una manera de diseñar páginas web de modo que puedan visualizarse correctamente en cualquier dispositivo (computadora, celular, tablet), sin importar el tamaño u orientación de la pantalla.

Hagamos un experimento: en esta misma página o cualquier otra de nuestras páginas modifica el tamaño de la ventana de tu navegador: hacela más chica, más bajita, más pequeña y más grande. Vas a notar cómo los elementos se acomodan de manera automática y la página se sigue viendo bien a pesar de los cambios de tamaño. Si estas en un celular o tablet podes hacer lo mismo al rotar 90 grados tu dispositivo.

Eso es el diseño responsivo en acción y sobra decir que es de gran utilidad para el usuario.

¿Para qué sirve el diseño responsivo?

La utilidad del diseño responsivo reside en que permite a los usuarios disfrutar del contenido web con comodidad sin importar qué dispositivo utilicen para acceder a él.

Para entender mejor su importancia, hagamos un breve recuento de cómo ha cambiado el Internet en las últimas tres décadas.

Los inicios de Internet

Las páginas de Internet han evolucionado muchísimo desde su nacimiento, al igual que los dispositivos desde los que son consultadas. A fines del siglo pasado, únicamente las computadoras de escritorio podían conectarse a Internet y casi todas contaban con monitores de una resolución limitada.

Durante mucho tiempo era posible ver en la parte inferior de muchas páginas web una leyenda que decía algo así como “Esta página se visualiza correctamente en una pantalla de 800×600”.

Mientras tanto, en los albores del Internet móvil, los primeros teléfonos únicamente podían acceder a portales WAP, que eran páginas con muy pocos elementos, apenas con formatos de texto enriquecido y gráficos sencillos.

La masificación de la web

Pero los aparatos evolucionaron y se volvieron más versátiles: las pantallas cada vez lograban mayores resoluciones y las páginas web tenían que optar por uno u otro formato: el más novedoso o el más extendido.

Finalmente, en 2007 llegaron al mercado los primeros dispositivos móviles capaces de navegar en Internet y de visualizar sitios diseñados para equipos de escritorio.

En 2010, la irrupción de las tablets en el mercado inclinó definitivamente la balanza a favor de los dispositivos móviles. Consumir contenido en ellos era increíblemente cómodo, así que los diseñadores de sitios web tuvieron que encontrar maneras de que sus sitios pudieran ser visualizados correctamente en ellos además de que se vieran bien en las computadores de escritorio.

El resultado fue el abandono de plataformas cerradas como Flash y la adopción de estándares como HTML 5 que permite que las páginas sean dinámicas y se comporten de manera distinta según el espacio que tienen disponible en tu pantalla.

El antes y el después

Para darte una idea de cuánto han cambiado las páginas web y de lo importante que es el diseño responsivo, te recomendamos echar un vistazo a esta página (toda una joya para su época!) que sigue funcionando desde 1996 hasta el día de hoy. Ver Página

Si la visitas desde una computadora de escritorio, vas a poder ver que la mayor parte del espacio la ocupa un fondo repetitivo, y si intentas cambiar el tamaño de tu ventana, la página permanece inmutable. Esto es porque los elementos tienen un tamaño y una posición fijos.

En cambio, si visitas el sitio desde un dispositivo móvil como un teléfono, te vas a encontrar con que los elementos son diminutos y hace falta hacer zoom para poder verlos bien.

Ahora podemos ver cómo se comporta una página web responsiva actual. Vamos a usar como ejemplo el sitio de la marca Victorinox que se caracteriza por tener un diseño elegante, sobrio y moderno. Ver Pagina

Volve a hacer el experimento de cambiar el tamaño de la ventana y en seguida vas a notar la diferencia.

Cuando ves la página en una pantalla completa, podes ver abundante información y recursos gráficos con un generoso espacio. Si la estrechas un poco, los espacios vacíos comienzan a disminuir o a desaparecer. Si la estrechas todavía más, los textos innecesarios desaparecen y sólo quedan los elementos visuales más relevantes.

Al visitar la misma dirección desde un teléfono, nos encontramos con una versión bastante disfrutable de la página, con botones grandes, textos perfectamente legibles y que privilegia los elementos visuales sobre los botones con texto.

Si la página detecta un espacio de visualización grande, privilegia elementos con los que puedes interactuar usando un ratón. En cambio, al detectar que está mostrando la página en un área limitada, da mayor prioridad a elementos con los que puedes interactuar usando tus dedos.

¿Por qué es importante el diseño responsivo?

Imagina que queres comprar un modelo específico de cámara de fotos, lo buscas en tu teléfono y el primer resultado que te aparece es una tienda online que anuncia un precio bastante atractivo. Sin pensarlo dos veces, abrís la página pero te encontras con que no está optimizada para dispositivos móviles.

Al intentar ver más detalles, te cuesta trabajo desplazarte por los menús y ver las imágenes y ante la frustración decidís cerrar la ventana y probar con otro sitio. A pesar de tener un buen precio, la página en cuestión acaba de perder una venta.

Si tomamos en cuenta que al día de hoy el 50% de los usuarios entra a las páginas web por celular podríamos decir que esta empresa está perdiendo por lo menos la mitad de sus ventas web.

El diseño responsivo se encarga de que esto no le ocurra a tu sitio web. Ofrecer un portal que todos tus visitantes pueden disfrutar te permite disminuir drásticamente el rebote y aumentar el tiempo de permanencia de los usuarios. Ambos factores sumamente deseables si estás emprendiendo una campaña de inbound marketing.

¿Cómo se hacen los sitios web responsivos?

Aunque puede parecer algo bastante fácil de hacer, la realidad es que hay una gran cantidad de programación detrás de un sitio web responsivo. Para que te hagas una idea, la página de Dole Kemp 96 que usamos como ejemplo tiene sólo 135 líneas de código. En contraste, el sitio de Victorinox está construido con 3087 líneas de código.

Para poder hacerse una idea, cuando se hace un sitio responsivo, se debe diseñar y desarrollar por lo menos 3 sitios: uno para pc, otro para tablet y por último otro para celular. Todo esto en el mismo código. Así mismo hay que lograr que el sitio se vea bien en todos los dispositivos sin perder la identidad que se quiere transmitir. Además, hay que tener en cuenta que muchas funciones que funcionan para las computadoras de escritorio no son compatibles con los móviles y viceversa.

Si no se toman en cuenta estos aspectos puede que se logre un sitio responsivo de mala calidad y poco funcional, estropeando la imagen de la empresa.

Conclusión

Como podrás ver, tener un sitio responsivo es algo casi obligatorio al día de hoy. De no tenerlo, la mitad de tus usuarios van a ver un sitio “obsoleto” ya que no funciona para teléfonos móviles y esto va a afectar tu imagen de marca.

Como decíamos anteriormente, para lograr un sitio responsivo hay que pensarlo como si fueran 3 sitios distintos: uno pensado para computadoras de escritorio, otro para tablet y por último otro para celulares. Por ejemplo, en los dispositivos móviles, el diseño va a ser diferente, el contenido más breve y las imágenes van a pesar menos MB.

Si todo esto todavía no te convenció para tener un sitio responsivo no te preocupes que Google se va a encargar de convencerte. Esto es porque si los sitios no son responsivos y amigables para los dispositivos móviles, Google te penaliza al no mostrarte en su motor de búsqueda, además de dificultarte el posicionamiento de tus campañas de Google Ads.

Aprende más sobre el diseño responsivo

Aunque es un aspecto bastante técnico, vale la pena informarse acerca de los pormenores de este tema. No hace falta que seas un ingeniero en computación para que estés al tanto de todos los beneficios y novedades del diseño responsivo. Si queres saber más sobre este tema te invitamos a contactarnos y con gusto te podemos asesorar sobre este tema.

¿Necesitas ayuda con el diseño responsivo de tu sitio web?

En <KLICK> podemos ayudarte a tener tu sitio web con un diseño responsivo y elegante que transmita la importancia de tu marca además de resaltar tu imagen. Nuestros diseñadores web implementarán el diseño que más se adecue a tu empresa para que luego nuestros programadores se encarguen de desarrollar tu sitio web con todas las funcionalidades responsivas. Así vas a tener un sito web que se vea bien en todo dispositivo!

¿Qué es <KLICK>?

<KLICK> es una agencia de marketing digital especializada en ayudar a todos aquellos que deseen captar más clientes y aumentar sus ventas a través de internet. Si queres lograr estos resultados te invitamos a contactarnos hoy completando el formulario de debajo y así conversar en que temas podríamos ayudarte.