Hace unos años las páginas webs tenían un solo formato adaptado a una resolución específica de pantalla, pero la llegada de los smartphones cambió considerablemente la situación. La gente empezó a usarlos para navegar por internet, lo que obligó a los sitios web a desarrollar nuevas versiones que se ajustaran al nuevo formato. Por esta razón saber cómo hacer una web responsive debe ser una prioridad para cualquiera que quiera encontrar un hueco en internet, sea una persona o un negocio. Cuando hablamos de canales digitales, si no se ve bien en el móvil, lo demás no importará.
¿Qué es una web responsive?
Se trata de una página que puede cambiar su distribución, diseño y contenido dependiendo del dispositivo en el que se muestra. De esta forma, aparecerá distinta en un ordenador de escritorio con un monitor de 24 pulgadas, un portátil, una tablet y un móvil. El objetivo es que se adapte al tamaño y resolución de cada pantalla, de forma que la navegación sea lo más limpia y natural posible.
Como vemos en nuestro curso de diseño web en Madrid, la principal característica de una web responsive es su flexibilidad, lo que significa que todos los elementos pueden variar su tamaño, e incluso su forma, según se requiera. Esta propiedad deriva del código y permite que la experiencia del usuario sea similar sin importar de donde acceda.
No hay que confundir las webs responsive con las adaptativas. Estas últimas funcionan con diseños predefinidos para distintos modelos de pantalla. Cuando un usuario accede a ellas, el servidor detecta el tipo de dispositivo y entrega el formato más conveniente entre sus opciones. De esta forma la versión para móvil puede ser completamente distinta de la tablet u ordenador.
¿Cómo hacer una web responsive?
En desarrollo web no hay nada escrito en piedra. Como cualquier otra disciplina tecnológica, existen muchas vías para llegar a un mismo resultado y todo dependerá de las preferencias del programador. Sin embargo, cuando se trata de páginas responsive hay una hoja de ruta que funciona en casi todos los casos.
1. Empezar por la versión móvil
Aunque es muy común comenzar a crear cualquier web por su versión para ordenadores, resulta una mejor idea hacer lo opuesto y arrancar por el formato más pequeño en el que se puede visualizar: el móvil. El desarrollo de un tamaño reducido que se va ampliando y escalando es una tarea más sencilla y ofrece más flexibilidad. De hecho, existe un término conocido para esta filosofía, el mobile first design.
2. Utilizar un tema o plantilla responsive
Es una forma de acortar el camino y ahorrar tiempo y esfuerzo durante la programación. Hoy en día existe una gran variedad de opciones que se adecúan según el proyecto y las necesidades, en especial desde la última versión de HTML5. Y aunque es posible hacerlo todo mediante códigos manuales, la plantilla evitará muchos errores y servirá de marco referencial, por lo que es una opción más interesante.
3. Implementar AMP
Las páginas móviles aceleradas, conocidas como AMP por sus siglas en inglés, tienen un formato de HTML con una variación propia que es exclusiva para dispositivos móviles. Aplicarlo puede reducir el tiempo de carga hasta un 85%, lo cual es una ventaja de cara a la experiencia del usuario. Además, Google prioriza y distingue estas webs con un icono especial en los resultados de búsqueda.
4. Insertar media queries
Las media queries o medidas de diseño son una configuración en el código CSS que rige los cambios en las dimensiones de la página. Con ellas se condiciona la aplicación de determinado formato según las características de los dispositivos, y se resuelven los problemas de jerarquía en caso de que dos comandos compitan entre sí.
5. Configurar el viewport
El viewport es la metaetiqueta encargada de indicar al navegador cómo debe mostrar la web. Funciona con valores expresados en porcentajes y se corresponden con el área disponible para visualizarse. Sin una correcta optimización de esta etiqueta el trabajo de las media queries sería inútil.
6. Emular los resultados durante todo el proceso
Los emuladores permiten comprobar la funcionalidad de la web en cualquier equipo móvil sin necesidad de tenerlo. Hay que asegurarse de que cada nuevo paso en el desarrollo responda de manera apropiada en todas las resoluciones para evitar errores de diseño que cuesten trabajo y dinero más tarde.
¿Por qué es importante hacer un sitio web responsive?
Hoy en día toda página en internet que se precie tiene un diseño responsive. Pero aunque su esencia es poder adaptarse a cualquier dispositivo, las razones para tenerla van mucho más allá. Algunas de ellas son:
Mayor alcance
Se estima que más del 60% de las visitas que reciben las webs en la actualidad provienen de dispositivos distintos al ordenador. El móvil y la tablet son los principales encargados de llevar a los usuarios hasta tu web, y la versión de escritorio queda relegada a un segundo plano. Por esta razón, el diseño responsive te permitirá llegar a más personas y ofrecerles una experiencia de usuario eficiente. No tenerlo es arriesgarse a perder a 6 de cada 10 visitantes potenciales, con las consecuencias negativas que eso tiene.
Mejor posicionamiento
Google siempre está pensando en la satisfacción de los usuarios que navegan por su red y por eso premia a todas aquellas páginas que tienen un diseño adaptable. ¿Cómo lo hace? Pues colocándolas en mejores posiciones en los resultados de búsquedas realizadas en un móvil, en comparación con las de aquellas que no son responsive. Si consideramos que más de la mitad de personas navegan desde este tipo de aparatos, se multiplican las posibilidades de atraer tráfico de calidad a la web.
Eficiencia
En el pasado era necesario crear varias webs diferentes con una configuración de tamaño rígida para cada dispositivo desde el que se accedía. Aunque sigue siendo una opción, es una tarea tediosa que se evita con un diseño responsive, lo que ahorra tiempo, esfuerzo y dinero. Además, no todo termina en la creación, sino que el mantenimiento y las actualizaciones serán más fáciles de llevar, ya que lo que se haga en el sitio se aplicará a todas las versiones móviles.
Simplicidad
Un diseño responsive permite integrar en un mismo documento la información de la web en todas sus versiones. Esto facilita el uso de las estadísticas, la evaluación del rendimiento y las decisiones sobre acciones necesarias para optimizar el sitio. Incluso se pueden ver los datos filtrados según el equipo que usan los usuarios, lo que permite afinar las estrategias. De no tenerlo habría que administrar las distintas webs por separado, lo que supone mayor complicación en la gestión de las analíticas.
Consejos para mejorar la adaptación móvil de la web
Más allá de hacer una web responsive, hay ciertas prácticas extra que pueden ayudar a que funcione de forma amigable y eficiente en cualquier resolución. Recogemos algunas recomendaciones.
Cuidar la estética
Cuando se trata de diseño, menos es más. Aunque cada página responde a necesidades específicas y está pensada para su público objetivo, nunca es buena idea sobrecargarla con demasiados elementos visuales. Aquí entran en juego tipografía, colores, gráficos y temas de fondo, por mencionar algunos. Mientras más limpios y claros sean, mejor será la usabilidad y la navegación. Hay que recordar que los dispositivos móviles tienen un tamaño reducido, y lo que se ve bien en un ordenador de escritorio puede resultar abrumador en otras pantallas.
“Lo que diferencia el diseño del arte es que el diseño está hecho para ser funcional”
Elegir un buen alojamiento
El hosting es un factor decisivo en el desempeño de cualquier web, pues es uno de los principales responsables de la velocidad de carga. Por esta razón hay que asegurarse de alojar la web en uno que ofrezca suficientes recursos, soporte y la máxima rapidez posible. Recuerda que desde el móvil los usuarios suelen ser más impacientes, y si una página tarda más de tres segundos en mostrarse, lo más probable es que terminen por abandonarla, o lo que es peor, ir a la de la competencia.
Optimizar el contenido multimedia
Junto con un hosting inadecuado, el contenido multimedia es el otro gran culpable de las cargas lentas. Por eso es indispensable optimizar fotos, vídeos y animaciones e intentar que tengan el menor peso posible. Hay que jugar con una combinación de factores como el formato, el nivel de compresión y la calidad, de modo que estos archivos se vean bien, pero no consuman mucho ancho de banda en el momento de cargarse.
Poner atención a los botones
Aunque parezca un detalle menor, los botones de acceso son muy importantes para la usabilidad de una web cuando se trata de las versiones móviles. Todo empieza por el menú, que siempre debe ser visible y desplegar una lista de opciones desde cualquiera de las páginas. Después está el tamaño, ya que por ser espacios reducidos los usuarios suelen presionar enlaces por error, lo que hay que evitar con botones grandes, pero separados entre sí. Por último, es buena idea utilizar iconos para sustituir los textos del menú principal, pues son mucho más visuales y facilitan la interacción.
Huir de banners y pop-ups
Las ventanas emergentes, más conocidas como pop-ups, son uno de los elementos que más molestan a la hora de visitar una web. Aunque en el ordenador son bastante incómodos, desde el móvil convierten la tarea en una misión imposible, pues obligan a pasar más tiempo cerrando ventanas que navegando. Además, como es obvio, incrementan las tasas de abandono y Google penaliza porque interfieren en la experiencia. Por tal motivo lo mejor es olvidarse de ellos o, en caso de ser necesarios, evitar que ocupen toda la pantalla.
Una página exitosa es aquella que sabe responder a las tendencias y necesidades actuales de los internautas. Bajo esta premisa, saber cómo hacer una web responsive ya no es solo una opción sino algo obligatorio, pues los usuarios de smartphones y tablets no han parado de crecer, lo que se traduce en más visitas desde dispositivos móviles. Aunque la tarea demanda esfuerzo, es una inversión de futuro, ya que con la optimización adecuada hay más probabilidades de alcanzar los objetivos.
