Hagamos memoria

Hace ya algunos años, cuando ya casi todo el mundo llevaba o tenía un móvil, alguien me dijo que había leido que, en poco tiempo, se podrían mandar correos electrónicos desde el terminal.
No existía la posibilidad de datos como ahora, era ciencia ficción y no todos pensaban que llegaría. Pero llegó, y de que forma…
¿Por qué te cuento esto? Porque durante mucho tiempo hemos creído que la gente sólo navegaba desde un ordenador, que nuestra página web se tenía que ver genial en pantallas grandes y lo demás importaba más bien poco pero Google nunca estuvo de acuerdo.
Ellos controlan gran cantidad del tráfico diario en la red y saben de primera mano lo que se cuece.

¿Quieres algunos datos?

Mira y pásmate:
Según su estudio (el de Google) 4 de cada 5 consumidores buscan negocios que estén en su zona para realizar alguna consulta y de ellos el 88% (guau!!!!) lo hace a través de un dispositivo móvil.
También, el 60% de los consumidores usan la búsqueda desde móviles para tomar una decisión de compra. Si, al final, deciden NO comprar, y se les pregunta por qué las tres razones citadas son:

• No encontré suficiente información
• La página web tardó mucho en cargarse
• La pantalla era muy pequeña (vamos que no veía nada de nada)

Y otro dato más para que te quedes con él, el 65% de los emails se abren por primera vez desde un dispositivo móvil.

¿Ya vas viendo a donde quiero llegar?

¡Si! Acertaste.

Si quieres tener presencia en internet y te lo tomas en serio, no te queda otra nada más que intentar por todos los medios que tu página web se vea de lujo independientemente de la pantalla que utilize tu potencial cliente/lector.

Ahora llegan los quebraderos de cabeza y las dudas. ¿Cómo se si mi web está adaptada? ¿Cómo puedo conseguirlo?
Lo primero, no confundas ser responsive con que se pueda ver en un móvil. Todas las páginas webs se pueden ver en un móvil, ese no es el punto. Hace un tiempo, simplemente se hacía todo más pequeño y ya, si querías simplemente aumentabas el zoom de la pantalla y listo. ¿No te pasado estar leyendo algo interesante y tener que estar moviendo el dedo sin parar para acabar las frases o los párrafos? Efectivamente se puede leer pero incómodo es un rato ¿o no? Y no te creas que sólo cometen este error los que acaban de empezar, la FNAC, por ejemplo, no tiene adaptada su web. Como puedes ver en la imagen, se ve perfecto en pantalla grande pero se corta en las pequeñas. FAIL!

También estaba (¿o está?) muy de moda que al ver la web en un móvil cambiara por completo el diseño. Vamos, que te perdías todas las cosas chulas que estaban en la web, porque lo único que aparecía en tu móvil era una versión pobre, pobrísima del contenido. Mira el ejemplo de la web de prueba que hice en Blogger vista desde ordenador y desde tableta o móvil. ¡Menuda diferencia!

Y, al final, lo que ha quedado y, lo que Google quiere que hagamos es que la web se “adapte” al dispositivo que la contiene. ¿Ehhh? Vale, voy, paso a paso. Esto quiere decir, simple y llanamente que tu web tiene que mostrarse de la mejor forma posible primando siempre la legibilidad, es decir la experiencia de usuario. Que tus lectores/clientes no tengan que hacer zoom en la pantalla para leer, que no haya fotos o gráficos cortados, que la barra lateral no se muestre en su sitio habitual sino donde moleste lo menos posible,…
Imagina que tienes una página dentro de tu web en la que parecen dos columnas con información escrita, este texto desde una pantalla grande se lee y se ve genial estructurado en dos columnas, pero ¿qué pasa cuando abres la página desde un móvil? Que la letra se hace más pequeña para poder mostrar las columnas y cuesta mucho leerla. ¿Qué hace el diseño responsive en este caso? Llegada una anchura mínima marcada hace que las columnas se vean a todo el ancho y pasen a estar una debajo de la otra, asi la información sigue bien estructurada y no hay que hacer esfuerzos para leer.
Como ya vas intuyendo, esto es básicamente un gran juego de tetris en el que las distintas piezas buscan su sitio para encajar de la mejor manera posible manteniendo siempre un orden lógico que permita la lectura.

Información práctica

Una vez aclarado qué es y qué no es el diseño responsive vamos a ver información más práctica. Probablemente te estés preguntando para qué tienes que tener todo esto en cuenta si, en el fondo, tampoco tienes tantos lectores o no vendes tanto o cualquier otra excusa que se te pase por la mente. Pues bien, desde el pasado 21 de abril Google penaliza a las webs no adaptadas. Es decir, si alguien te busca por mucho esfuerzo que hayas hecho en temas como el SEO, Google te va a “castigar”, te han pillado haciendo trampas y no acatando las reglas del juego y te van a hacer retroceder unas cuantas casillas; vamos, que es probable que si antes aparecías en el tercer puesto en determinadas búsquedas ahora ni siquiera estés en la primera página. Y eso es grave, muy grave y más cuando todo nuestro esfuerzo va dirigido a hacernos visibles, a que nos encuentren.
Entonces ¿qué hacemos? Lo primero es entrar en la página que los mismos de Google han puesto a nuestra disposición y desde la que podemos ver si nuestra web se adapta a lo que ellos consideran un diseño adecuado para dispositivos móviles.
Una vez dentro lo único que hay que hacer es teclear la URL (dirección de tu web), pinchar sobre el botón “Analizar” y esperar los resultados.
Mira lo que pasa cuando busco pepacobos.es:

Como ves en la imagen, Google me dice que cumplo con lo que ellos «esperan de mi». Aunque ten en cuenta que este tema es sólo uno de los muchos que tienen en cuenta en su famoso «algoritmo».
También puedes ver de forma mucho más gráfica como se ve tu web en los distintos dispositivos. Esta página me encanta. Pon tu URL, pincha en el botón “Go” y listo. Verás que bien se ve.

¿Y si no cumples qué pasa?

Pues la verdad es que la forma más fácil (y más barata) posible de adaptar tu web y tener un diseño responsive es cambiando de tema a uno que lo traiga ya “de serie”. Yo uso y recomiendo siempre Genesis, ya lo sabes pero hay muchos en el mercado que cumplen con este requisito. Puedes encontrar alguno en Creative Market como éste llamado Josephine y que es bien chulo, en Theme Forest como Noah que también me gusta bastante o en Elegant Themes que los hay maravillosos aunque sólo esta web daría para un post porque pagando una cantidad no muy elevada te llevas todos sus temas para que siempre tengas donde elegir.

Aún así, una simple búsqueda en Google te mostrará cientos de resultados.

La segunda opción es añadir un plugin a WordPress que te solucionará momentáneamente la papeleta. Pero ¡ojo! lo de momentáneamente no lo digo porque sí. Utilízalo como un recurso temporal mientras encuentras una solución definitiva. Por muchas razones que serían ahora largas de explicar no es la solución adecuada a largo plazo. Algunas recomendaciones son: WPTouch o JetPack.
La tercera y última opción sería contratar a un diseñador web que lleve a cabo los cambios necesarios por ti.
En cualquier caso, es algo que debes tener en cuenta si quieres que tu web no quede relegada al olvido y aparezca en las búsquedas de Google.
A continuación te dejo una lista de comprobación en PDF, descargable en la que puedes ir anotando los pasos que das. Sólo tienes que pinchar en la imagen para acceder a ella.

¿Es tu web responsive? ¿Ya conocías todos estos términos? ¿Te queda alguna duda?
Deja tu comentario y cuéntanos a todos qué te parece.
*Algunos de los enlaces que aparecen en el post de hoy son de afiliado, esto quiere decir que si compras algún producto yo me llevaré una pequeña comisión por ello. Pero quiero que estés tranquilo NUNCA JAMÁS recomiendo nada que no haya probado antes y que me guste.