> Manuales > Manual de Responsive Web Design

Problemática sobre el diseño adaptable. Responsive Web Design es algo más que tamaños de pantalla, hay que adaptarse en muchos otros sentidos a las características de la navegación en escritorio y dispositivos.

En marzo de 2012, Guy Podjarny @guypod ejecutó un test comparando el rendimiento de cientos de resplandecientes páginas "Responsive" en cuatro resoluciones de pantalla distintas. Los resultados fueron decepcionantes.

Después de dos años presenciando el meteórico ascenso del diseño Responsive, toda clase de desarrollador y diseñador subido al tren, bastó casi un solo test para tirar abajo la teoría.

Guy probó que la gran mayoría de webs responsive sufrían de sobrepeso.

"Hemos creado la Red a nuestra imagen… Obesa", - Jason Grigsby.

Pero lo que es más importante, los usuarios de móvil estaban recibiendo la misma sobrecarga de kilobytes que los de escritorio.

La comunidad tuvo reacciones variopintas. Algunos aprovecharon para clamar que "Responsive Web Design" nunca fue la solución definitiva. Quizás todavía no estaba maduro para los desafíos del diseñador de hoy en día.

Por suerte, la comunidad web siempre cuenta con gente que se atreve a coger el toro por los cuernos. Gurús de la web moderna como Brad Frost @brad_frost, Luke Wroblewski @lukew o Christian Heilmann @codepo8 vieron oportunidad donde otros gritaban crisis y consiguieron darle la vuelta a la tortilla.

"Si tu Web pesa 15Mb no es HTML5, es estúpida", - Christian Heilmann.

Los orígenes del rendimiento web se caracterizan por involucrar (sin ofender) argot exclusivo de desarrolladores.

Conceptos como GZIPping, uglifying, minifying, DNS, concatenación de ficheros… Estas palabras obscuras (con b) tienden a dejar a los diseñadores fuera de la ecuación.

Sin embargo, varios miembros avispados de la comunidad se han dado cuenta de que el problema tiene una raíz más profunda. No importa que optimices o comprimas una imagen en ultra-alta-resolución si tu plan es escondérsela a un usuario móvil y que aún así la descargue.

"Buen rendimiento es buen diseño", - Brad Frost.

Para conseguir sitios web realmente ligeros, el rendimiento no debería ser una preocupación. Hay que tratarlo como una parte del diseño.

Para esta gente el rendimiento es como cualquier otro problema. Los que consiguen quitárselo de encima son las que se preocupan de ello desde el punto de partida. Y los que lo ignoran son los que lo sufren al final.

"El rendimiento tiene que ver con el respeto. Respeta a tus usuarios y volverán", - Brad Frost.

¿Por qué?

No se trata simplemente de servir una buena experiencia web a tus usuarios.

Abandono de páginas web
Los estudios demuestran que el 57% de los usuarios abandonarán tu página si tarda más de tres segundos en cargar.

Google, velocidad y SEO
Desde la primavera de 2010 Google toma la velocidad de carga como un factor en su ranking. El impacto no es tremendo para sitios que tarden más o menos en cargar, pero si la página asciende de cierto umbral, será castigada por su algoritmo de búsqueda.

Todo esto prueba que la velocidad no es sólamente un asunto de interés cuando hablamos de experiencia de usuario. Cuida la velocidad si quieres que tu página quede bien parada entre la maraña de sitios de hoy en día.

Ancho de banda
Tiempo atrás, la gente solía hablar del abstracto concepto de 'Contexto Móvil'. La famosa teoría de Google divide a los usuarios en tres grupos:

Bueno, la cuestión es que el famoso 'Contexto Móvil' no existe. La gente no sólo utiliza su teléfono mientras anda por la calle, viaja en tren o 'chilea' en su casa. ¡Hacen todo al mismo tiempo!

Los móviles están con la gente en todos lados, así que la gente los utiliza en cualquier parte.

"El 'Contexto Móvil' es importante, pero ¡primero habría que descubrir qué demonios es!", - Tim Kadlec.

Luke Wroblewski tiene unas estadísticas muy interesantes al respecto: www.lukew.com/ff/entry.asp?1263

¿Dónde utiliza la gente su teléfono móvil?

Mientras sigan generándose nuevas situaciones, nuevos mercados y nuevos hábitos, el contexto móvil cambiará. Podemos asumir tranquilamente que el concepto de 'Contexto móvil' será siempre cambiante, hasta que la gente deje de usar su teléfono.

Esto nos lleva inevitablemente a mirar de reojo al ancho de banda. Hay un solo escenario en que puedes irte de rositas sirviéndole a tus usuarios una página obesa: si la sirves a sus MacBook Pro, mientras están en su casa de Inglaterra o EE.UU. con un tremendo ancho de banda.

El resto de posibles situaciones, que no son pocas, tienen que ser cubiertas también. Incluido el interminable torrente de nuevos dispositivos que inunda el mercado en nuestros días. La gente los utiliza para visitar tus páginas.

"Tú no decides qué aparato utiliza la gente para acceder a tu página. Tus usuarios sí. ", - Karen McGrane.

Por supuesto, hay que incluir los países a los que hace un par de años no llegaban los smartphones, pero que ahora han pasado violentamente a la cabeza del mercado.

"Si tu contenido, tu información, tus productos, tus servicios no están disponibles en formato móvil, no existen para esta gente", - Karen McGrane.

Aún más importante: hay que incluir los lugares desde donde la gente accede a tu página. Hay que considerar todos los anchos de banda. No sólo a los habitantes de zonas 'subdesarrolladas' (terrible término) les es imposible disfrutar de la misma velocidad de datos. La gente intentará acceder a tu página web en el trabajo, con 100Mb/s; en su casa, con una conexión entre 2 y 30Mb/s y también con 3G y con 4G y con un plan de datos y etc, etc, etc.

Conclusión

Hablando en plata, el diseño Responsive no trata ya de tamaños de pantalla, sino de diferentes situaciones y escenarios. Las soluciones han de ser flexibles, adaptables y muy bien pensadas.

Entendidos todos estos motivos creo que muchos de nosotros debemos hacer el esfuerzo de replantearnos el diseño "Responsive". No miro a nadie, pero la realidad es que más de uno servimos webs obesas innecesariamente. En el próximo artículo trabajaremos los "cómo" en vez de los "por qué" que hemos podido repasar en el presente texto.

Nota: Este texto es una traducción realizada al español del artículo Responsive Design is Not About Screen Sizes Any More. Esta versión en castellano es obra del mismo autor Gorka Molero, que gentilmente nos la ha proporcionado para publicar en DesarrolloWeb.com.

Atentos entonces a cómo puedes mejorar el rendimiento, la carga y la experiencia de usuario en webs Responsive, adaptando de verdad su funcionamiento a los dispositivos.

Gorka Molero

Diseñador autodidacta, músico, ingeniero de sonido y entusiasta de Internet.

Manual