Comienza la cuenta atrás

abr 17, 2015

Alguien tenía que hacerlo y Google, todopoderoso, salvaguarda de la buena  experiencia de usuario y la accesibilidad, ha puesto fin a los desmanes de la web. Tanto es así, que para el día 21 de abril aquellos sitios web que no estén adaptados a dispositivos móviles, caerán en las catacumbas del buscador, pues el “mobile-friendliness” será la nueva estrella del ranking de posicionamiento para el motor de búsqueda. De momento, aquellos que no cumplan la condición sólo serán excluidos de las búsquedas realizadas desde dispositivos móviles, pero todo apunta a que muy pronto se hará extensivo a todo tipo de búsquedas. Ante la amenaza, por fin parece que la tendencia ha cristalizado en las mentes del común de clientes, diseñadores, desarrolladores y responsables de marketing, que hasta ahora utilizaban “responsive” a modo de buzzword y es que la cuestión lleva ya casi cinco años dando que hablar.

En mayo de 2010, Ethan Marcotte, escribía el primer artículo sobre “responsive design” en A List Apart y, hoy, la búsqueda del término genera 154 millones de resultados en Google. Grosso modo lo que sugería Marcotte era una apuesta por diseños flexibles y adaptables al medio. Más que plantear un diseño específico por cada dispositivo, tarea ingente ante la gran variedad de dispositivos de acceso a Internet y las estimaciones de crecimiento de los mismos que se preveía entonces, proponía empezar a diseñar con cuadrículas fluidas, imágenes flexibles y media queries.

Cisco Mobile

(Echando un vistazo a las estimaciones de Cisco, si aún no sabes lo que es M2M, claramente debes ponerte las pilas).

Al albor del “responsive”, como ya comentamos anteriormente, surgieron como setas multitud de sistemas de retículas flexibles listos para usar. Hay, desde auténticos frameworks como Bootstrap Twitter o Foundation, a sistemas más sencillos tipo Simple Grid o Kube. Sin embargo, hablar de diseño adaptado a móvil no sólo es cuestión de escalabilidad, sino también de peso y rapidez de carga. No hay que irse muy lejos para experimentar caídas de la red o retardos exasperantes de la conexión, y es ahí donde la velocidad de carga del sitio web o aplicación es clave.

Básicamente se trata de optimizar la entrega de los recursos del site, es decir, reducir el peso de los mismos y el número de peticiones al servidor para disminuir los tiempos de carga. Resulta de cajón, pero las imágenes siguen siendo los elementos que más ralentizan la carga, seguidas por scripts (js), css y html. Por eso es imprescindible contar con imágenes optimizadas para web y minimizarcomprimir, en la medida de lo posible, archivos js, css y html. Hacerlo sin perder la cabeza es posible automatizando tareas con CodeKit (para Mac) o Grunt.

Por último y, no menos importante, está la cuestión del diseño de interacción. Atrás quedan los días en los que el ratón era el dispositivo de interacción por excelencia. Pantallas táctiles, teclados, joystick… Adios al hover, mousehover. Se impone diseñar para dedazos. Eventos como touchstart, touchmove, touchend, pointerdown, pointermove y pointerup son soportados por los navegadores, sin embargo, hay que ser cuidadosos en su uso para no interferir en los comportamientos nativos de cada dispositivo:

touch gestures reference guide1

Avisados estamos. Que Google nos pille preparados.

 

No comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>