Episodio #5

Desempeño Web - Parte 2

Natalia continúa con la segunda parte de nuestra serie sobre desempeño web y nos habla sobre cuáles son algunas de las consideraciones de diseño que tenemos que tomar en cuenta para un buen desempeño.

Links de Recursos

Transcripción

Natalia En este episodio voy a estar compartiendo las consideraciones que tienen que tomar en cuenta como diseñadores para lograr un buen desempeño web.

Un sitio web cuyo desempeño sea malo, no sólo hace que pierdas usuarios, sino que también pierdas dinero. El desempeño web, como habíamos definido en el episodio 3, consiste en la eficiencia en la que funciona una app o un sitio web. Algo muy importante a considerar, es que el desempeño comienza con la planeación de los recursos que vas a ocupar para tu app o sitio web, y eso es tarea del diseñador y no se trata de algo que el desarrollador pueda arreglar como por arte de magia después de que se diseñó y se aprobó el sitio.

El desempeño web es una responsabilidad compartida y requiere de una muy buena colaboración de los equipos.

Así que en este episodio voy a platicarles qué cosas deben de tomar en cuenta para lograr que el desempeño del sitio sea bueno, porque también, un buen desempeño web es sinónimo de buen diseño.

La primer consideración consiste en la planeación de los recursos. Podemos definir como recursos a aquellos elementos en los que nos vamos a apoyar para diseñar nuestra página, que vienen siendo las imágenes, la tipografía, elementos multimedia (como audio o video), el código ya sea javascript, CSS si queremos dar animaciones o interactividad.

El primer paso para una buena planeación, es el conocer lo más que puedan sobre su medio de trabajo que es el web y sobre todo los recursos. Todos estos recursos tienen un gran impacto en el desempeño de nuestro sitio y es importante saber cuánto impacta cada uno. Por otro lado debemos estar conscientes de que entre más recursos utilicemos, más pesado será nuestro sitio. Como diseñadores nuestra responsabilidad es la de asegurarnos que los recursos sean utilizados de la mejor manera para lograr la mejor experiencia.

Ahora quisiera mencionar dos de los recursos que generalmente se sobre-usan y son las imágenes y las fuentes especiales. Bueno, empezando con las fuentes especiales son todas aquellas que no vienen instaladas con la computadora. Para utilizar esas fuentes hay varios servicios de paga, entre ellos está typekit o fonts.com y algunos gratuitos como font-squirrel o google fonts.

Y si ustedes son como yo, apasionados por la tipografía, entonces estarán muy contentos de que ahora contemos con mucha flexibilidad en este aspecto. Pero cuidado, porque esta flexibilidad viene con un costo, y puede llegar a ser muy caro si no la utilizamos con cuidado.

Cuando elegimos una fuente debemos de fijarnos en el peso, hay unas fuentes que son más pesadas que otras y tiene mucho qué ver qué tan completas estén.

Por lo tanto, si van a diseñar un sitio que está en nuestro bonito idioma español, deberán tomar en cuenta que la fuente debe contar con los caracteres de la ñ y vocales con tilde y diéresis. Este incremento de caracteres hace que la fuente sea más pesada que una que no los tenga.

Y otra cosa que tiene mucho qué ver, es cuántas fuentes utilizan. Ojo, si usan una sola fuente con diferentes variantes, como regular, itálica y negrita, eso ya está contando como 3 fuentes distintas. Cada variante es un archivo por separado y hay que pensar qué impacto va a tener eso en el desempeño de nuestro sitio.

Nuestro sitio por ejemplo hablemosdeweb.com utiliza nada más 2 fuentes, pero cada una tiene su variación regular y negrita. Estamos hablando entonces de que estamos utilizando 4 fuentes. Sin embargo, como se ya se habrán dado cuenta, casi no usamos imágenes. En el momento de la planeación de la página, nosotros decidimos prescindir del uso de imágenes y mejor enfocarnos en la tipografía, que es la que hace el diseño de nuestro sitio y por eso que pudimos utilizar muchas fuentes.

Pero bueno, eso es en cuanto a fuentes, ahora vienen las imágenes, chan chaaan. Las imágenes son las principales culpables de que un sitio resulte pesado. Por lo tanto, es de los recursos que tienen que utilizar con más cuidado.

Un sitio promedio hoy en día pesa casi 2 MB y de todos esos megas, aproximadamente el 70% son imágenes. Como ven, las imágenes son el recurso que impacta más en el desempeño y hay que cuidar cómo las usamos, por ejemplo, limitar el uso de fotografías que son las imágenes más pesadas. Imágenes como ilustraciones o con colores más sólidos, son menos pesadas y esas las podemos utilizar un poco más y con menos remordimiento.

Y pues también podemos usar imágenes vectoriales. Hay un formato, llamado SVG que precisamente es vectorial y lo podemos utilizar en web. Es muy útil para íconos y logotipos, o si llegan a hacer una ilustración con vectores. Y tiene la ventaja de que es independiente de la resolución, o en otras palabras, esto significa que siempre se verá bonito y nítido en cualquier tamaño y cualquier pantalla.

También es muy importante ver qué tanto de lo que hagan se puede replicar con código, sobre todo en el caso de que utilicen degradados, sombras o cuando hagan botones. Si tienen duda de qué se puede o no se hacer con CSS es muy importante estar en constante comunicación con quien va a desarrollar el sitio. Ahí podemos ver qué efectos que quieran utilizar se pueden replicar en código, en vez de utilizar imágenes. Y ya hay muchas cosas que se pueden hacer, como pues sombras, degradados e inclusive algunos modos de mezcla.

Muchas veces sólo es cuestión de hacer un pequeño cambio a su propuesta para que pueda hacerse con código y ahorrarse imágenes.

En general para la planeación de recursos, esto se trata de una constante evaluación de qué tanto valor va a aportarle x cosa. De medir el impacto de nuestras decisiones y ver qué tanto podemos estar reutilizando y sobre todo evitar utilizar muchos recursos sólo porque sí. Una buena planeación no restringe la creatividad y pueden hacer cosas muy interesantes.

La segunda consideración, es la de cómo implementar la conciencia del desempeño en nuestro ambiente de trabajo. De nada nos sirve saber la importancia del desempeño y diseñar al respecto cuando somos los únicos que lo toman en cuenta.

No es algo sencillo, ni algo que suceda de la noche a la mañana pero se pueden hacer pequeños cambios a la vez.

Una sugerencia es de que desde que se está diseñando siempre mantener una buena comunicación con el resto del equipo incluidos los desarrolladores para poder estar midiendo constantemente el peso que va a estar teniendo el sitio y tratar de no llegar a un peso muy elevado. Siempre tener esa conciencia del desempeño y siempre estar midiendo cada que agreguemos algo, cuánto le agrega de peso.

Otro aspecto, es de que, si van a empezar un proyecto que tengan que diseñar todo desde 0, hacerlo con el enfoque de Mobile First. Mobile First quiere decir darle prioridad al diseño móvil, o sea, comenzar diseñando desde el tamaño más pequeño de pantalla y después ir acomodando el diseño conforme se vaya incrementando el espacio, conforme se vaya incrementando el tamaño de la pantalla.

De esta manera, pueden identificar desde un inicio cuáles son las prioridades de funcionalidad y contenido del sitio, establecer patrones repetibles y hacer un mejor uso de los recursos.

Ya para finalizar, quiero tocar otro aspecto que como diseñadores ** a muchos nos les gusta, pero es una parte muy importante de nuestro trabajo, y eso es actuar como mediadores entre lo que el cliente quiere, entre lo que el usuario necesita y entre lo que nosotros recomendamos.

Cuando yo estudiaba la carreras, yo tenía un maestro que siempre nos solía decir que diseñar, era la parte más bonita de nuestra profesión, pero también la más pequeña, porque la mayor parte del tiempo íbamos a tener que estar tratando con gente. Y eso es muy cierto.

La mayor parte de nuestro trabajo es tener que estar encontrando el balance entre los objetivos de cada quién y llegar a una solución que beneficie a todos. Me ha tocado mucho ver que hay diseñadores que no quieren complicársela cuando lidian con el cliente. Entonces, ellos exponen una sola vez su punto de vista y si el cliente no cambia de opinión, simplemente lo aceptan lo que dice y lo ejecutan.

Y no se trata de eso. Como diseñadores siempre hay que estar educando al cliente. Debemos tener una constante comunicación de por qué cierta manera de hacer las cosas es importante. En este caso, hablando de desempeño, si el cliente nos pide que utilicemos muchas imágenes y muchos videos sólo porque lo vio en otro sitio, en algún sitio de un competidor, pues hay que explicarle el impacto de cómo va a afectarle si llegamos a hacer eso que nos está pidiendo.

Nuevamente, esto no es sencillo, pero de lo que más funciona es llegar a encontrar un lenguaje o una motivación que los mueva. En el caso de los clientes o por ejemplo los ejecutivos de una compañía, cuando presentan los proyectos; en el momento en el que tú, les hablas en términos de dinero, por ejemplo les empiezas a decir: vas a perder dinero por este motivo si hacemos las cosas de esta manera o te voy a hacer ganar más dinero si seguimos o aplicamos esta estrategia, te van a prestar los oídos inmediatamente a que si les empiezas a hablar de la experiencia de usuario.

Por otro lado, también hay que ver los verdaderos motivos por los que están pidiendo algo. El cliente, o al menos la mayoría de ellos, siempre van a querer darnos soluciones en vze de dejarnos que nosotros resolvamos un problema. Nos van a decir, queremos llamar la atención, ah, entonces pon como 20 videos o pon esa imagen super grande. Decirles que no, puede ponerlos a la defensiva inmediatamente y hacer que ya no escuche nuestras explicaciones.

Cosas que a mí me han funcionado, es preguntarle más para poder llegar al motivo de por qué, por ejemplo, quieren esa imagen más grande. A veces pregunto cosas y me dicen: Ah!, es que quiero que se vea más moderno. Entonces, a sabiendas de esto yo ya puedo decirle ok, y trabajar por mi cuenta en una solución alternativa a la imagen grande que el cliente quiere para que el sitio se vea más moderno. Una vez teniendo ambas soluciones ya le puedes explicar mejor porque el cliente tiene ya el punto de referencia a entre las 2 soluciones y tú ya le puedes decir cómo es que tu solución es mejor, sobre todo porque no daña el desempeño y está satisfaciendo su objetivo que él buscaba.

Y pues bueno, estas son las consideraciones, algunas de las consideraciones que podemos tomar en cuenta a la hora de diseñar. Vuelvo a repetir, el desempeño web es sinónimo de buen diseño y también es una responsabilidad compartida, no es algo que esté solamente en manos del desarrollador.

Y espero que esta información les haya sido de utilidad.