Archivo de la etiqueta: móviles

Cambios de Google para smartphones

El blog oficial para Webmasters de Google ha publicado ayer un post en el que anuncia una serie de cambios en los rankings de resultados en las búsquedas para smartphones. No hace falta ser especialmente avispado para entender que esos cambios afectarán negativamenta al ranking de aquellos sitios web que no tengan correctamente configurada su versión móvil. En definitiva, estamos ante una razón más para apostar por el diseño web responsable o adaptativo (responsive web design) en nuestros sitios web.

Google quiere responsive

Google responsive

Estas son algunas de las ideas fundamentales que aparecen en la entrada del blog de Google:

Redirecciones erróneas: Algunos sitios web tienen URLs distintas para la versión de escritorio y para la versión para móvil o tablet. En ocasiones, la URL original redirige a contenidos que no se corresponden con el contenido original, enlazando siempre a una página inicial para la versión móvil. Esto será considerado por Google como un error que interrumpe la secuencia de navegación de usuario y puede llevar a que éste abandone el sitio web. Por tanto, las redirecciones deben llevar al usuario a contenidos equivalentes para la versión móvil. Una vez más, la solución también podría pasar por un diseño web responsable

Errores específicos de la versión móvilOtro error más común de lo deseable es la aparición de errores al intentar acceder a un contenido desde la versión de escritorio a la versión móvil o viceversa. En el post se mencionan casos como los errores 404 al acceder desde una página en versión móvil a otra en versión de escritorio. Este error se subsana incluyendo una redirección al contenido en la versión correspondiente (o equivalente). 

  • En caso de no disponer de un contenido equivalente para la versión móvil, es preferible enlazar con la portada del sitio móvil. Pero, como se indica anteriormente, lo deseable es disponer de una versión equivalente para cada dispositivo.
  • Uso incorrecto del Googlebot mobile que deriva en un bucle infinito. En el post lo explican así: «Un error típico es cuando Googlebot-Mobile para smartphones se redirige incorrectamente a la página web optimizada para smartphones que, a su vez, redirige Googlebot-Mobile para smartphones de nuevo al sitio de escritorio. Esto da como resultado bucle infinito de redireccionamientos, que reconocemos como error«.
  • Otro error mil veces comentado es la incrustación de vídeos que que no se pueden reproducir en ciertos smartphones. De sobra conocido es el uso del reproductor de Flash en dispositivos iPhone o en versiones de Android 4.01 o superiores. 
  • Como es norma en los post del Google Webmaster Central, éstos vienen aderezados con una serie de enlaces que nos facilitan las cosas, como esta lista problemas habituales en los sitios para smartphones.  



 

 

Diseño web responsable

Que el diseño web está cambiando es un hecho que no tiene discusión. A los cambios en los lenguajes, en las versiones en los estándares del W3C, se suman, desde no hace tanto, la aparición de nuevos dispositivos que ya forman parte de nuestra cotidianidad. Me refiero, lógicamente, a los teléfonos móviles y a las tablets. Hoy en día no se debe(ría) concebir un diseño y un desarrollo web que no esté basado en parámetros de diseño web responsable (responsive web design). Veamos.

Diseño web adaptativo

Diseño web responsable

¿A quién no le a tocado visitar una web con su móvil para acabar dejándolo por imposible? ¿Quién no ha sufrido un horrible scroll horizontal en la web de un periódico para poder leer completo un texto, cada vez que cambiaba de línea? ¿Quién no se ha dejado la vista después de reducir el zoom de un sitio web en el móvil o tablet, precisamente para evitar desplazamientos en cada línea? El diseño web responsable busca, precisamente, que nos dejemos de hacer estas (y otras) preguntas. Se trata de implementar una solución a nuestros diseños para que nuestra web se adapte al dispositivo donde se esté visualizando. En definitiva, un sitio web profesional se debe adaptar a distintas resoluciones, orientaciones (vertical/horizontal), plataformas, navegadores, etc.

Para conseguir un diseño web responsable (o diseño adaptable), se pueden aplicar varias técnicas. Una de las más populares es el uso de un fluid grid (rejilla o retícula fluida). Existen frameworks bastante conocidos a este respecto como el Bootstrap (desarrollado por técnicos de Twitter) o el skeleton (que incluye características tipográficas, de botones o elementos de formulario) . Existe más frameworks como éstos, muchos de ellas basados en la división de nuestra pantalla en columnas que adaptarán su ubicación y tamaño dependiendo del dispositivo con que se abran.

Estas soluciones, basadas en las Media Queries  también han significado un cambio radical a la hora de desarrollar nuestros sitios web. El sistema de las media queries está basado en una estructura CSS condicional, mediante rangos de resolución. Podemos especificar las características visuales de una parte de nuestra web (por ejemplo, el menú de navegación) en base a la resolución del dispositivo del cliente. Por ejemplo, el menú de navegación de esta misma web, se transforma en un desplegable en el momento que de detecta una resolución propia de un teléfono móvil.

Como ven, las posibilidades de la tecnología responsive web design son infinitas. Además implica un ahorro económico nada desdeñable para nuestros clientes y es que, no hace tanto, se estilaba la creación de páginas distintas dependiendo la resolución utilizada por el navegador del visitante a nuestra web. Los nuevos estándares HTML5 y CSS3, sumados a las media queries abren un horizonte prácticamente ilimitado y en permanente desarrollo. Como muestra, este estupendo post publicado en Smashing Hub donde encontraremos 17 frameworks orientados al diseño responsable. ¡Que lo disfruten!

Fuente de la imagen: http://www.dotcominfoway.com