Hoy en día es bastante probable que la gran mayoría de usuarios que accedan a tu web lo hagan a través de un dispositivo móvil, incluso tú puedes estar leyendo este post mediante tu smartphone o tablet.
Esto nos presenta la necesidad de crear diseños responsive (o adaptativos) para nuestra web, con la finalidad de alcanzar la experiencia deseada tanto para el usuario que acceda desde su ordenador como el que acceda desde su móvil. Pero, ¿en qué consiste exactamente un diseño responsive?
Se trata de colocar y redimensionar los diferentes elementos de nuestra web con la finalidad de que estos se adapten correctamente tanto al ancho como al alto de la pantalla en la que la página está siendo visualizada, todo esto sin perder su funcionalidad ni la experiencia de usuario.
A estas alturas ya te habrás dado cuenta de la importancia que tiene que nuestra web sea adaptativa, pero por si esto fuera poco, Google actualizó su algoritmo de posicionamiento en 2015 para penalizar a las webs que no estuvieran adaptadas para dar una buena experiencia de navegación a sus usuarios móviles. Por tanto, desde ese momento, que nuestra página sea adaptativa empezó a ser importante para el SEO de esta.
Está bien pero, ¿cómo hago que mi web sea responsive?
Primero de todo, tenemos que tener en cuenta diferentes aspectos y seguir una serie de metodologías:
• ¡OJO al diseñar! ¿Recuerdas cuando hablamos sobre los wireframes? Con ellos podíamos diseñar una web y posicionar los diferentes elementos antes incluso de escribir nada de código. Es importante en este punto tener presente cómo se verá el elemento que queremos diseñar en los diferentes dispositivos, incluso es una buena idea generar diferentes wireframes para las diferentes resoluciones para evitar futuros errores.
• Evita duplicar código. Esto solo conseguirá aumentar el peso de la página y, por tanto, el tiempo de carga de esta.
• La usabilidad del usuario móvil y la del usuario de ordenador puede no ser la misma. El usuario móvil utilizará sus dedos para moverse a través de nuestra web, mientras que el usuario de ordenador lo hará a través del ratón. Esto, dependiendo de la finalidad de nuestra web, puede presentarnos un problema. Un claro ejemplo son los elementos pensados para paginar o hacer scroll horizontalmente, seguramente te haya pasado que, a la hora de desplazarte por una web mediante tu móvil, al posicionar tu pulgar en la pantalla e intentar hacer scroll para desplazarte hacia arriba o hacia abajo, el elemento ha resultado ser un slider y te ha cambiado el contenido o incluso cambiado de página.
• Ten en cuenta el contenido multimedia. Procura que tanto imágenes como videos mantengan siempre un aspect/ratio correcto. También es recomendable el uso de imágenes SVG ya que estas, al contrario de las imágenes PNG o JPEG, no perderán calidad a la hora de ser redimensionadas.
Una vez tenemos estos aspectos claros, es hora de ponernos manos a la obra y programar nuestros breakpoints a través de nuestra hoja de estilos (CSS), utilizando media-querys.
Para ello nosotros recomendamos crear un nuevo archivo destinado completamente a responsive. Seguidamente marcar unos breakpoints estandarizados. Podemos echar un ojo a qué resoluciones son las más utilizadas.
Nosotros te proponemos estos breakpoints, teniendo como referencia (por ejemplo) los diferentes dispositivos de la marca Apple:
@media (max-width: 575.98px) {
/* reglas CSS */
}
// Small devices (landscape, ancho menor a 768px)
@media (max-width: 767.98px) {
/* reglas CSS */
}
// Medium devices (tablets, ancho menor a 992px)
@media (max-width: 991.98px) {
/* reglas CSS */
}
// Large devices (desktops, ancho menor a 1200px)
@media (max-width: 1199.98px) {
/* reglas CSS */
}
Analicemos rápidamente el código de arriba. Las reglas de CSS escritas dentro de cada elemento @media se aplicarán mientras la pantalla cumpla la especificación dada entre paréntesis, en este caso utilizamos max-width, pero podemos utilizar también min-width, max-height, min-height, o incluso combinarlos. Sencillo, ¿verdad?
Puede suceder que para ciertos elementos se requiera de un cambio bastante grande. Para ellos se puede considerar utilizar funciones de javascript para colocar los elementos de la mejor forma posible.
Una vez finalizado, podemos dirigirnos a https://search.google.com/test/mobile-friendly, donde poniendo la url de nuestra página esta valorará si la legibilidad de esta es correcta en responsive.
