Un análisis del nuevo Cadena3.com
Recientemente, Cadena 3 presentó su nuevo sitio en un evento con bombos y platillos en el Sheraton de Córdoba. Lamentablemente, el sitio está tan mal encarado que las críticas empezaron a aparecer enseguida en toda la blogósfera cordobesa.
A continuación, contribuyo con un análisis visual y de código sobre el sitio, esperando que Cadena 3 tome estas sugerencias para mejorar.
El amor entra por los ojos
Visualmente, el sitio es pobre. Como no hay muchos espacios en blanco es dificil que a alguien le de placer leer el sitio. El contenido está muy junto, el diseño no respira y se extraña una buena grilla que dé más orden y separación entre los elementos.
Pero, el diseño no es terrible —como muchos piensan—; solamente faltan un par de toques y tal vez ampliar un poco más la paleta de colores. Me imagino que ese azul es un color institucional, por lo cual a los diseñadores no les quedó otra que usarlo en todas partes.
Los degradados están mal logrados: Parecen un descarte de algun sitio Web 2.0 hecho por un amateur. Me da la impresión de que usando degradados Cadena 3 quiere ser cool o ser Web 2.0 —si es así les faltó el reflejo en el logo—. Un poco más de sutileza y contraste ayudaría mucho a mejorar el diseño. No hay que inventar nada nuevo ni engancharse en ninguna moda estúpida, solamente seguir principios básicos del diseño gráfico.
Por otro lado, no hay una jerarquía de la información. Para mí, el Ranking de Radio Popular es tan o más importante que las noticias del día. El banner de Creativos Unidos tiene tanta o más importancia que el inmenso logo de Cadena 3. Miren por ejemplo la sección Bitácora de Audios: Yo, que solo escucho la radio cuando me subo a un taxi, no diferencio el El Chiki Chiki de Juntos.
Al igual que en el sitio de La Voz del Interior, el clima no es accesible a simple vista, el usuario tiene que hacer click y esperar a que se cargue otra página para saber un dato tán básico. Hubiera sido mejor ubicar un par de íconos y su descripción dentro del encabezado. Al menos, el enlace para consultar el clima está en la parte superior del sitio, en La Voz del Interior es inevitable presionar Cmd + F y luego tipear «clima» para que el navegador busque y resalte el enlace —que está en la última sección derecha del sitio!—.
Si todo es importante, entonces nada es importante
A simple vista, Cadena 3 tiene más contenido en la página principal que el New York Times. Y realmente no creo que produzcan más notas que la Gray Lady; el problema aquí es la pésima maquetación, el uso poco inventivo de la grilla —si es que hay alguna— y la política de encajar todo en la homepage. Está bien, para muchos cordobeses el cuartetero Damián Córdoba puede ser muy importante, pero dedicar más de 800 pixels de alto a una sección de rankings musicales —de dudosa calidad, o no— es demasiado.
En este sentido, separar casi 900 pixels de alto para las posiciones del campeonato futbolero es también curioso, y de hecho, me sugiere el tipo de audiencia de la cadena, más preocupado por saber como salió Instituto y por las ventas de La Fiesta, que de las noticias del país. Pero mejor evitemos las críticas tendenciosas y nos dediquemos a lo que realmente sabemos hacer: diseñar.
Podemos imaginar un mejor uso de la grilla para maquetar y disponer los elementos. Por ejemplo, para ahorrar los casi 600 pixels de alto de la columna Boletines Informativos, reemplazamos la lista de corresponsalías y redacciones por una lista desplegable. De esta manera reducimos el alto de esa sección a 150 pixels como mucho, 1/4 parte de la actual.
Fig. 1. Una propuesta para las secciones con mucho contenido.
Es más, con una pequeña cookie podemos recordar la opción que eligió el usuario y mostrar por defecto la corresponsalía que le interesa cada vez que entra al sitio. Las posibilidades son muchas y sólo observando como actúan los usuarios se pueden sacar grandes ventajas.
Por otro lado, podemos repetir el mismo enfoque en El Campo Hoy y otras secciones largas, de esta manera estandarizando muchos de los bloques de información del sitio y reduciendo la altura total.
Sería bueno también agrupar algunas secciones para que se muestren horizontalmente —al mejor estilo The Onion, fijensé la sección Features—. En este caso, por ejemplo, El Espectáculo, Estrenos y Ranking de la TV, podría agruparse en una sola sección Espectáculos y mostrarse horizontalmente. Clickeando en las flechas de izquierda o derecha, el usuario puede hacer aparecer el contenido que desee a gusto.
Tipografía
El uso de una buena fuente es primordial para un diario o publicaciones con mucho contenido. Fuentes bien escogidas permite evitar gastos innecesarios en papel, meter más caracteres en espacios reducidos y aumentar la legibilidad de las notas.
Generalmente se considera que las fuentes con buen ojo medio —la altura de la x minúscula— son mas legibles. Por otro lado, como el ojo no analiza cada letra individualmente, sino la palabra entera, se cree que las letras con serif —las terminaciones de cada letra— aumentan la legibilidad de un texto, ya que cada serif produce la ilusión de continuidad en el texto. «Así como yo puedo leer tu letra, vos también vas a poder leer la mía» diría Spiekermann en la película Helvetica, refiriéndose a la continuidad de los trazos al escribir con la mano.
Cadena 3 usa una tipografía sans-serif, Tahoma, en todo el sitio. En cualquier caso, el sitio está tan mal maquetado que si uno no tiene Tahoma instalada en el sistema —como en mi caso—, ve la tipografía por defecto del navegador, generalmente Times New Roman. Si Cadena 3 quería usar una tipo sans-serif, tendría que, al menos, haber dado otra alternativa sans-serif a Tahoma. Esto se puede hacer muy fácilmente en CSS usando algo similar a font-family: Tahoma, Arial, sans-serif. En este caso, el navegador buscará Tahoma, si no está instalada probará con Arial, y por último, en el peor de los casos, con cualquier tipografía sans-serif.
Aunque Times es una fuente probada y que funciona, la mancha de gris que produce en pantalla y en cuerpos muy pequeños —como lo hace Cadena 3— es poco homogénea. Mejor hubiera sido usar una tipografía especialmente creada para la web, como Georgia, con poco contraste —el contraste es la diferencia entre los trazos verticales y horizontales de una letra— y mancha más homogénea, aún en cuerpos pequeños. Mejor aún hubiera sido aumentar aunque sea un punto el cuerpo de las notas, ya que realmente son ilegibles.
Pero nos limitemos a tipos sans-serif. Todavía me sigo preguntando porque usaron Tahoma en vez de algo universal como Helvetica, para Mac, y Arial, en Windows.
Optimizado para IE 4.0
A mí, que navego con Safari y vivo en 2008, me parece sumamente graciosa y hasta inocente la afirmación de arriba. Más allá de lo visual, me llamó muchísimo la atención que un sitio lanzado en éstos días no haya sido maquetado siguiendo estándares web, aunque sea mínimamente. Y no me refiero solamente a no usar tablas —de hecho el «no uses tablas!» suena más a un argumento de alguien que toca de oído más que al de alguien que realmente sabe usarlas en algun contexto determinado de la vida real, como en formularios—, sino, a un pobre entendimiento de CSS y HTML para maquetar.
El código del sitio abusa de estilos en linea y prácticamente no reusa ninguna clase de CSS. No hay una clase noticia para mostrar cada post, entonces, estilizar una nota es un proceso individual y repetitivo que incluye hacer encajar la nota dentro de una celda de una tabla y luego jugar con elementos hiperdeprecados como font.
Todo esto, claro, se repite para cada nota.
En el futuro, cuando Cadena 3 quiera cambiar el estilo de las notas —digamos, aumentar en 1px el cuerpo de la tipografía— va a tener un problema grande.
Éste es el código que se usa en el sitio para mostrar una nota:
<table width="30%">
<tr>
<td>
<p style="margin-top: 0; margin-bottom: 0"><a href="post_ampliado.asp?post=480"><font color="#001242" style="FONT-SIZE: 20px" face="Tahoma">Sismo en Catamarca</font></a></p>
</td>
</tr>
<tr>
<td>
<p class="destacado" style="margin: 5px"><font color="#800000" face="Tahoma"><b>17:54</b></font>
<font face="Tahoma" color="#333333">Según datos del Inpres, el movimiento telúrico se registró a las 16.26 y tuvo epicentro a 40 km de la capital de Catamarca. El temblor tuvo una intensidad de 3 a 4 gradosº en la escala Mercalli y una magnitud de 4,5 en la escala de Richter.</font>
</td>
</tr>
<tr>
<td width="100%">
<table border="0" width="100%" id="table1280" bgcolor="#F4F4F4">
<tr>
<td width="16">
<a href="javascript:popup('enviar',480)"><img alt="Recomendar por mail" border="0" src="http://www.cadena3.com/images/iconomail.gif" width="16" height="17"></a>
</td>
<td width="30">
<a href="javascript:popup('enviar',480)"><font face="Tahoma" style="FONT-SIZE: 11px" color="#737173">Enviar</font></a>
</td>
<td width="16">
<a href="post_ampliado.asp?post=480"><img alt="Comentar la nota" border="0" src="http://www.cadena3.com/images/iconocomentar.gif" width="16" height="17"></a>
</td>
<td width="47">
<a href="post_ampliado.asp?post=480"><font face="Tahoma" style="FONT-SIZE: 11px" color="#737173">Comentar</font></a>
</td>
<td>
<p align="right"><font face="Tahoma" style="FONT-SIZE: 11px" color="#151672"><a href="comunidad.asp?comunidad=6">Sociedad</a> </font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td background="http://www.cadena3.com/images/lineagris.jpg" height="15"></td>
</tr>
<table>
Como pueden ver, no hay una separación clara del contenido (la nota) y la presentación (lo visual). Tampoco hay semántica: Google entiende que Sismo en Catamarca es un párrafo, cuando debería ser un título y la lista de enlaces «Enviar», «Comentar», «Sociedad», no es una lista, es simplemente contenido tirado en una celda que dificilmente será leído por un lector de pantalla.
Más allá de eso, este pedazo de código ocupa 4KB y se repite muchas veces en la página. Ahora imaginen la cantidad de dinero mensual en hosting que está perdiendo Cadena 3 por no optimizar un poco su código.
Éste es un mejor enfoque para maquetar una nota:
<div class="post">
<h3><a href="">Sismo en Catamarca</a></h3>
<p><span class="hora">17:54</span> Según datos del Inpres, el movimiento telúrico se registró a las 16.26 y tuvo epicentro a 40 km de la capital de Catamarca. El temblor tuvo una intensidad de 3 a 4 gradosº en la escala Mercalli y una magnitud de 4,5 en la escala de Richter.</p>
<ul>
<li class="enviar"><a href="">Enviar</a></li>
<li class="comentar"><a href="">Comentar</a></li>
<li class="categoria"><a href="">Sociedad</a></li>
</ul>
</div>
El título de la nota es un título en HTML, H3, el contenido, un párrafo P, y la lista de enlaces, bueno, una lista de enlaces, LI. Cada nota es un DIV con clase post. En el archivo CSS se estila la nota a gusto.
En el hipotético caso de que Cadena 3 decida aumentar 1px de cuerpo para las notas, solo tendrá que cambiar 1 sola línea en este archivo y no miles en cada noticia. Ni hablar de la reducción en el peso del sitio, que contribuirá a todo cargue mucho más rápido que los 40 segundos actuales —en algunas conexiones—. Pueden ver cómo se estiliza la nota original y cómo quedaría la nueva propuesta funcionando.
Conclusión
Realmente hay mucho que mejorar en el nuevo Cadena3.com. Desde la gráfica, que en mi opinión es solamente correcta, hasta la maquetación, que ya vimos que es pésima.
Espero que a la gente de Cadena 3 le haya servido este post para poder mejorar el sitio en un futuro. No es una crítica infundada y con mala leche hacia los desarrolladores y diseñadores, después de todo, las decisiones son tomadas por otros y uno es un simple diseñador —y todos estamos bien conscientes de qué tan difícil es remar con un cliente necio—, pero solo en la diversidad de opiniones se puede construir algo mejor.
