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.

CSS 2.x tiene 10 tipos de medios para utilizar. Sin mirar y sin soplar (no vale consultar las especificaciones), estos medios son:

1. All, Braille, PSP, PDA, Print, Screen, Aural, Tty, TV, Tivo.
2. All, Braille, Embossed, Handheld, Print, Projection, Screen, Speech, Tty, TV.
3. All, Braille, Embossed, PDA, Handheld, Print, Monitor, Speech, Tty, TV.
4. All, Braille, Handheld, Morse, Print, Screen, AS/400, Neutral, Default, TV.
5. All, Braille, Embossed, Handheld, Print, Projection, Screen, Aural, Tty, TV.

Respuestas y su fundamentación (hay 2 que pueden dar problemas si no conocen a fondo las especificaciones) en los comentarios. ¡A participar colegas!

Respuesta: Pueden ser dos opciones: 2 o 5, depende de que especificación se trate. Como bien dijeron Federico y Juan en los comentarios, CSS 2 define Aural como tipo de medio, lo cual es válido, pero está deprecado a favor de Speech (el cual es levemente nombrado en la especificación CSS 2.1, dejando su uso para una posible especificación, tal vez CSS 3).

¿El tipo de medio por defecto para una hoja de estilo es screen o all? Según la especificación HTML 4.0 (las negritas son mías):

(..) This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is “screen”.

Sin embargo, Eric Meyer, en Print Different, dice:

(..) The most important is all, which is the default value for any stylesheet which does not have a defined media.

Joe Clark, en Building Accessible Websites dice lo mismo:

If you do not specify a medium for a stylesheet, graphical Web browsers default to an interpretation of media=”all”. That may not be true for cellphones, toaster-ovens, or other Internet-connected devices, not that any of them actually make use of media CSS.

¿De donde han sacado estos señores que el tipo de medio por defecto es all? ¿Alguien puede apuntarme un enlace a donde se especifique eso en las especificaciones de CSS 2.0 y/o CSS 2.1?

Para agregar un poco más de leña al fuego, HTML 4.0 dice:

Note. Style sheets may include media-dependent variations within them (e.g., the CSS @media construct). In such cases it may be appropriate to use “media=all”

Lo cual es una razón perfectamente válida para suponer que el valor por defecto de media sea all. ¿Algún sabio lecturón de especificaciones que pueda hechar luz al respecto?

Hay hacks de todo tipo y para todos los navegadores, buscando un poco en Position Is Everything tal vez puedas encontrar la solución a tu problema. Pero si no la has encontrado, todavía puedes usar el último recurso: * html.

Vamos por partes. El selector universal, representado por el caracter asterisco (*) selecciona todos los elementos del árbol del documento. Esto quiere decir que la siguiente regla:

* { color: red; }

Le asignaría el color rojo a todos los elementos del árbol del documento, sobreescribiendo así su herencia (Eric tiene un excelente artículo sobre el poder de los selectores universales). Así, cualquier elemento de un documento HTML tendría el color rojo asignado.

Ahora bien, volviendo a nuestro hack:

* html { }

Esta regla en CSS, quiere decir “aplica esta regla a todos los HTML hijos del elemento universal”, o lo que es lo mismo, “aplica esta regla a todos los HTML descendientes de *“, o “selecciona todos los HTML hijos/descendientes de todos los elementos”. Ahora bien, como HTML es el elemento root por defecto (es decir, es el elemento por el cual comienza el árbol del documento ), no selecionariamos nada, ya que HTML no puede ser hijo de ningún otro elemento. La regla entonces no tiene sentido, pero es válida en CSS y nos servirá para ocultar reglas a navegadores buenos y mostrarlas al navegador malo (IE), ya que cualquier regla empezando por * html, es interpretada por IE (lo veremos más adelante) y puede ser usada a nuestro beneficio.

Esta regla, aunque sencilla, puede prestarse a confusión. ¿Por qué decimos “selecciona todos los HTML hijos de *” y no “selecciona todos los HTML”, o en todo caso, “selecciona EL HTML”? Si estamos pensando en “selecciona todos los HTML”, estamos pensando en D.O.S., en donde poner un dir *.txt quiere decir “muestra todos los archivos .txt”. Aquí, el espacio en blanco hace la diferencia. Al tener el espacio en blanco, estamos aplicando selectores descendentes y el elemento universal se toma simplemente como eso, como el elemento que quiere decir “todos los elementos”. La clave es esa, el elemento * significa “todos los elementos”, y no “todos los elementos X”.

Volviendo al hack, Firefox y Opera simplemente ignoran cualquier regla que empiece con * html, sin embargo, IE la interpreta. Entonces, el siguiente código:

* html body h1 { color:blue; }

Es interpretado por Internet Explorer como html body h1 { color:blue; } (noten que no interpreta el asterisco) y el resultado sería que todos los H1 (hijos de BODY y obviamente de HTML) tendrían color azul. En Firefox y Opera, no pasaría nada.

El hack funciona siempre poniendo a BODY como elemento hijo de HTML y luego poniendo el elemento que queremos estilizar, es decir, poniendo siempre * html body mi-elemento, lo cual es lógico, pues según el árbol del documento, no hay elementos para dar estilo entre HTML y BODY, es decir, no podríamos poner algo como * html h1 (nos estaríamos salteando a BODY, lo cual es incorrecto, pero sin embargo valida perfectamente).. Funciona si se pone * html h1, no hace falta ser tan estrictos con el árbol del documento siempre y cuando respetemos qué elemento contiene a quién (gracias Fede).

Nota: No lo piensen mucho ni se descerebren como yo, según el blog de IE, este hack ya está deprecado. Pero quien sabe, hasta que salga IE7 todavía puede serles útil :)