Mucha gente se estará preguntando qué es una página responsive o mobile-friendly, pero realmente esas personas que se lo preguntan, ¿saben lo qué es o simplemente lo preguntan porque está de moda?
Aún recuerdo cuando hace mucho tiempo, mejor no recuerdo los años que han pasado, las web sólo se visualizaban en ordenador. Se realizaba la carga de la web en una pantalla de ordenador de sobremesa o de ordenador portátil y así era la única manera de poder verla. La resolución que yo recuerdo de esas webs partía desde los 800×600 hasta 1024×768. En aquel entonces no existían pantalla de mayor resolución para los usuarios domésticos o eran muy caras, así que se adaptaban a esas resoluciones.
Las webs Flash se pensaban en tamaño escritorio
Las webs se realizaban en HTML puro, desde software de creación de webs como FrontPage, Dreamweaver o «a pelo». También surgió una tendencia (que ya está totalmente desactualizada) que tuve que estudiar en la EASD (Escuela de Arte Superior de Diseño) cuando me diplomé en Diseño Gráfico, el tan odiado Flash. O bien eras programados o tenías conocimientos en lenguajes de programación (HTML, CSS, PHP) o debías morir a un programa de diseño como era Flash. Por aquel entonces, Macromedia Flash, pertenecía a la empresa de software de diseño Macromedia, competencia directa de Adobe, hasta que ésta última la compro y absorbió los programas.
Recuerdo en clase, en tercer curso de la carrera de Diseño Gráfico, un profesor nos explicaba las «bondades» de este software de creación de gráficos vectoriales animados mediante ActionScript 3.0. Era una asignatura troncal, que cubría todo el semestre y constaba en crear tu propia página web en este software. Mis compañeros y yo, con formación de Diseño Gráfico en anteriores cursos y con las ganas de poder crear tu propia página web, empezamos a trastear con el software y conocer las «acciones» o efectos que se podían realizar.
Sí, aunque parezca mentira, sólo pensábamos en «lo bonita que va a ser mi web». No se pensaba en el contenido, que para mí el contenido es rey, sino en la estética, pero claro es una Escuela de Diseño. Se diseñaba sólo, en ese momento en pantalla de escritorio, nunca se preparaba el diseño para otro tipo de resoluciones.
El cambio al mobile-friendly
Pero esto cambió radicalmente con el uso continuo de los smartphones, la llegada de los primeros smartphones como Apple iPhone sólo hacía prevenir un cambio de 180º de cómo se visualizaban las webs hasta el momento. La gente empezaba a tener tarifa de datos en los móviles, wifi y podía empezar a ver el contenido en dispositivos móviles. Podías ver cualquier web en cualquier momento, en el autobús, en el parque, con los amigos… La gente empezaba a ver el contenido en internet de otra manera, y esto creó una tendencia de lo que hoy llamamos mobile-friendly.
Cuando tú querías ver una web en internet, muchas empresas se pensaban que simplemente con adaptar el diseño de escritorio a la pantalla del móvil era suficiente, pero luego se entendió que no. Una web preparada para una estructura horizontal, de gran cantidad de píxeles, de gran tamaño, desde las 13» hasta las que se quiera, tendría que tener el mismo diseño que una pantalla de 4» o 5» en formato vertical. No era viable, botones que en pantalla grande se veían costaban de cliquear en el smartphone con el dedo. Ten en cuenta que desde el ordenador usamos un periférico como el ratón o un trackpad que guía un preciso puntero hasta donde queramos hacer clic; mientras que en los móviles, ese puntero es nuestro dedo. Más grande o más pequeño, pero necesitamos hacer clic en las diferentes secciones de la página.
La tipografía también sufría, no se escalaba de manera natural ni proporcional, se quedaba conforme al tamaño de la web en escritorio. Leer un artículo desde el móvil era todo una odisea; ampliar texto, minimizar, deslizar hacia abajo, deslizar hacia la derecha…
Cambios estructurales en el HTML5
Al ver que toda esta nueva tendencia estaba provocando un nuevo hábito en los consumidores, las empresas empezaron a cambiar sus webs modo «desktop» a otros tamaños para poder retener al mayor número de usuarios en su web cuando la visitan desde plataformas que no son ordenadores. El «bounce rate» en las analíticas en Google habían aumentado en la mayoría de empresas que no tenían su web preparada para esta nueva ola de mobile-readers. Cuando abrías una web y no estaba preparada para móvil, rápidamente salías de ahí, el esfuerzo en este caso lo tiene que hacer el emisor (la empresa/persona que tiene la web) para enviar el mensaje (contenido de la misma) al receptor (usuario online) y no al revés.
Comenzaron a salir nuevos frameworks en HTML5 que permitían una estructura en todos los formatos posible en los que voy a destacar dos por tener compañeros que han trabajado y siguen trabajando con ellas. Éstas dos nuevas vertientes son Bootstrap y Foundation.
Bootstrap, el más popular entre ellos
Es un framework para el front-end que permite construir sitios web rápidamente con estilos, plantillas y funciones predefinidas puestas a disposición del desarrollador. Este framework fue desarrollado por unos trabajadores de Twitter que pensaron en todo lo anterior citado y en la importancia de adaptar el contenido de una web a los distintos formatos.
Foundation, el más avanzado a su tiempo
En este caso también se trata de un framework CSS que permite cargar librerías con las funcionalidades para la adaptación a distintos formatos de la web. Se encarga de homogeneizar la experiencia de uso a lo largo de los diferentes navegadores disponibles en el mercado (browser compatibility), de forma que, nos olvidaremos de las particularidades de cada uno de ellos.
Tamaño de dispositivos
Siempre se han existido distintos tamaños de pantalla de píxeles en los diferentes dispositivos, se han creado unas reglas que todos los frameworks cumplen y sus desarrolladores también, no es lo mismo diseñar en pantalla de 25 pulgadas que en pantalla de móvil de 5 pulgadas, puedes ver cómo están diseñadas las aplicaciones de móvil. Por eso se estableció unas medidas estándar:
Desktop: 1680 x 1050
Laptop: 1280 x 800
Tablet: 1024 x 768 en horizontal (768 x 1024 en vertical)
Smartphone: 320 x 480 en vertical
Ahora podemos ver pantallas de móvil que tienen la misma o más resolución que la televisión de casa, superando en la mayoría de los casos el FullHD en incluso el 2K.
Los tamaños de pantalla han cambiado y ahora no sólo pensamos en los píxeles, sino también en la densidad de los mismos. No es lo mismo ver una imagen en una pantalla de ordenador con 72dpi ó 96dpi que verla en una flamante pantalla retina con más de 300dpi. La densidad de punto es superior, más de 4 veces. Por eso, muchso de los iconos también que se utilizan en web se han tenido que adaptar y reescalar para poder hacer frente a la mayor resolución de pantalla. Pero todo esto sin empeorar la experiencia de usuario en velocidad y carga de la web, pues el navegador manda el mensaje al servidor y le dice a la web responsive que cargue uno u otro diseño, dependiendo del dispositivo. La velocidad es un factor importante que ha implementado este nuevo estilo mobile-friendly. La mayoría de la navegación de internet desde el móvil se hace desde una tarifa de datos, y lo que se quiere conseguir es que la web cargue la menor cantidad de datos para que no repercuta en un gran gasto de «megas» de tu tarifa.
Lo que Google nos pide para nuestra web
Debido a estos grandes cambios durante estos años de era digital, Google marcó como fecha límite el 21 de Abril de 2015 como último día en que iba a indexar páginas que no tuvieran versión mobile. Es por eso que muchas empresas empezaron a cambiar sus webs en esas fechas porque no querían «caer en el olvido de Google» en el ranking. Hoy en día existen herramientas que te permiten testear si tu web está preparada para la era mobile. Entre ellas destaco la prueba de optimización para móviles de Google, la cual puntúa nuestra página y nos dice qué cosas podemos cambiar para mejorar la experiencia de navegación.
Conclusión y mejoras a la hora de crear tu propia web
En mi caso por ejemplo, yo opto por WordPress, que tiene plantillas y frameworks que ya están adaptados a mobile-friendly. Yo destaco por encima de todo el Framework de Genesis, el cuál es el más optimizado y con mejor calidad para su indexación en Google y además permite la adaptación de tu web en distintos dispositivos. Si en vuestro caso tenéis una web que todavía no cumple con este requisito o tenéis pensado hacer una web para tu negocio o empresa, yo os sugiero que busquéis a profesionales en este caso para que os puedan dar la mejor propuesta en vuestro caso o bien poneros en contacto conmigo, que yo os atenderé encantado.
