¿Tu sitio web se ve bien en todos los dispositivos? ¿Cuánto demora en cargar en las distintas resoluciones? ¿Funcionan todos los elementos de navegación en los dispositivos móviles?
Cuando diseñamos una web responsive, queremos que sea fácilmente usable y consumible y por ello debemos optimizarla en varios sentidos. El objetivo es el de siempre, que las personas aprovechen la página, tengan una experiencia de usuario grata y accedan a los contenidos que nosotros queremos. Y lo más importante: que vuelvan y recomienden nuestra página.
Pero muchas veces nos centramos en un único formato de diseño, siendo el de una computadora de escritorio el más considerado. Esto genera problemas cuando el usuario quiere ingresar desde un dispositivo móvil con un formato de pantalla y resolución diferentes. El diseño se rompe, los botones no funcionan, las imágenes se ven mal, la carga es muy lenta, etc-etc..
La variedad de dispositivos existentes en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien sea accesible pero con una experiencia de navegación muy pobre. Como consecuencia, los usuarios abandonan la página en cuestión, y buscan una alternativa con mayor facilidad de navegación que les ofrezca una mejor experiencia, perdiendo así visitas y bajando la cantidad de potenciales conversiones.
¿Cómo resolver esta problemática? ¿Cómo optimizar nuestro sitio web para ofrecer una mejor experiencia al usuario y aumentar nuestras visitas?
A estas cuestiones las podemos responder con la siguiente pregunta:
¿QUÉ ES EL DISEÑO WEB RESPONSIVE O ADAPTATIVO?
El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos, tales como como tablets, smartphones, libros electrónicos, portátiles, PCs, etc., adaptándose a las condiciones técnicas, principalmente a las dimensiones de la pantalla, del dispositivo que la está accediendo.
Es muy importante recordar que cada dispositivo tiene sus características concretas además del tamaño de pantalla: resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras.
Por lo que debemos diseñar no sólo para todos los tipos de pantalla, sino también para todas las velocidades de conexión, todos los navegadores, etc., contemplando estas características.
¿Cómo lograrlo?
El diseño responsivo pretende que con un único diseño web todo se vea correctamente en cualquier dispositivo.
Ventajas del Diseño Web Responsive
El uso de dispositivos móviles ha aumentado notablemente y la evolución de la navegación en Internet ha ido a la par, popularizando la navegación mediante una creciente variedad de dispositivos de diferentes características.
Con una sola versión en HTML y CSS, se pueden cubrir todas las resoluciones de pantalla, con lo que el sitio web estaría optimizado para distintos dispositivos y formatos. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.
De esta forma, se reducen los costos de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños. También evita tener que desarrollar aplicaciones para cada sistema operativo móvil: iOS, Android, Windows Phone, BlackBerry OS, entre otros, aunque hoy en día las webs para móviles todavía no pueden realizar las mismas funciones que las aplicaciones nativas.
Desde el punto de vista del posicionamiento en buscadores, aparecería una única URL en los resultados de búsqueda, con lo cual se ahorrarían múltiples redirecciones y los fallos que se derivan de estas.
También se evitarían errores al acceder al sitio web en concreto desde las redes sociales, es decir, desde enlaces que los usuarios comparten en medios tales como Facebook o Twitter, y que pueden acabar en error dependiendo desde qué dispositivo se copió y desde qué dispositivo se intenta acceder a ese enlace.
Resumen: El diseño web responsive se consolida como una de las mejores prácticas hoy en día en diseño web ya que permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que puede compartirlos de una forma mucho más rápida y natural.
¿Cómo funciona?
El diseño web adaptable se hace posible gracias a la introducción de las media queries en las propiedades de los estilos CSS3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.
Son las herramientas fundamentales para especificar estilos con respecto a diversas condiciones del cliente web que está visitando el sitio.
Al trabajar con MediaQueries, tenemos los llamados comúnmente breakpoints, que son aquello spuntos o medidas de anchura donde se pueden crear saltos en el diseño Responsive, a partir de donde aplicar las media queries para Responsive Web Design. Lo cual está íntimamente relacionado a las medidas estándar de pantallas. Para lo cual se debe contar con un listado de resoluciones y viewports* comunes de dispositivos y ordenadores de escritorio para hacernos una idea de hacia dónde podrían apuntar nuestras media queries CSS.
* El viewport varía con el dispositivo, y será inferior en un teléfono móvil que en una pantalla de ordenador. Antes de las tablets y teléfonos móviles, los sitios web se diseñaban sólo para las pantallas de ordenador, y era común que las páginas web fueran estáticas, con un diseño y un tamaño fijo.
El diseño responsivo debe fluir con una adaptación constante del tamaño de los gráficos y las estructuras compositivas de un sitio web dentro de los diferentes dispositivos y tamaños de pantalla considerando de forma automática la disposición (vertical – horizontal) en la que se visualizan los contenidos.
Entonces, las técnicas responsive se focalizan en diseñar para:
- Todos los navegadores y sistemas
- Todas las resoluciones y tamaños de pantalla
- Todas las velocidades de conexión
Consejos a la hora de hacer tu Web Responsive
Hacer una web responsive está de moda. Y como todas las modas, la mayor parte de gente lo hace sin saber exactamente porqué.
Surge entonces la siguiente cuestión… Que será mejor: ¿Web responsive? ¿Web móvil? Cada una tiene sus ventajas e inconvenientes. La acogida del diseño responsive ha sido feroz y hay que tener cuidado.
Las opciones para ofrecer nuestra web a los usuarios que nos visitan desde dispositivos móviles son varias:
- web móvil,
- app nativa
- web responsive.
Cada una tiene sus pros y sus contras y a priori, la que más fuerza está tomando es la web responsive por una sencilla razón: es la más económica y rápida. Pero no por ello la más sencilla.
Esta técnica ha modificado totalmente la forma en la que se diseña. Incluso el propio usuario y sus hábitos de navegación y consumo han cambiado las reglas.
La inclinación hacia esta solución, se da porque la experiencia de usuario mejora considerablemente, evitando posibles problemas de contenido duplicado, al tiempo que se le ofrece al usuario una imagen consistente.
Sin embargo, puede que tu web no tenga que tener un diseño responsive. Un ejemplo es el caso de una landing page, cuyo objetivo está centrado en conversión, para la cual se necesita un diseño totalmente diferente en móvil y esta técnica, por lo tanto, no se ajusta a las necesidades de comunicación, ya que se pretende mostrar otro tipo de información.
Consejos a tomar en cuenta:
Carga de página
Uno de los grandes problemas que nos encontramos cuando evaluamos un desarrollo, es que en los diseños responsive no se diferencia, a nivel de servidor, la carga de elementos. Esto es un gran problema ya que, al hacer la web responsive, se cargan exactamente los mismos recursos que para la web de escritorio.
Para solucionarlo, aconsejamos utilizar librerías que permitan hacer una carga de página condicional, evitando cargar recursos innecesarios cuando la gente ingresadesde un dispositivo móvil.
Cuidado con los tamaños de pantalla
Hay que tener mucho cuidado a la hora de diseñar. Se recomienda diseñar con el patrón mobile-first, filosofía de trabajo que nos facilita la labor de diseño comenzando siempre por los dispositivos con pantallas menores, para evitar tener problemas de adaptación con las distintas resoluciones y evitar sobrecargar la página de elementos inútiles.
La gran cantidad de dispositivos y pantallas que existen en el mercado hace que tengamos que tener muy en cuenta tamaños de contenido fluidos y no estáticos para evitar que haya usuarios que no vean bien nuestro contenido.
Evitar los efectos
Algunos de los efectos que se usan en la web de escritorio no funcionarán en la web responsive. Esto es vital, ya que si no se hace una comprobación multi dispositivo-plataforma, puede que nos encontremos con que el tiempo por visita desde móvil es especialmente bajo. Esto pasa mucho, por ejemplo, cuando el “leer más” de una noticia aparece en el hover. El hover no existe en móvil por lo que el usuario no podrá continuar su visita.
No olvides medir, medir y medir continuamente para detectar posibles fugas y fallos de rendimiento en la navegación móvil.
Ten en cuenta todas estas cosas antes de lanzarte, así como el diseño responsive mejora la experiencia de usuario, como hemos visto, no siempre tiene que ser así.
Para obtener asesoría en el diseño de tu página web, en G2ROCKET podemos ayudarte bajo las mejores prácticas, mientras vos pensás en tu negocio. Escribinos a contacto@g2rocket.com y juntos definiremos la mejor estrategia.
