Un pequeño análisis al diseño de grandes blogs

Un pequeño análisis al diseño de grandes blogs

  21:07    vhanla

---

Este es una traducción a un artículo interesante realizado por SmashingMagazine y para ser más objetivos utilizaron la lista de los top blogs realizada por Technorati, y analizaron 50 de ellos, en realidad no importa si la lista de los top 50 de Technorati sea correcta o no, el propósito es encontrar las soluciones de diseño aplicadas por esos blogs.

Revisión al diseño de blogs

1. Disposición del contenido
1.1 Cuantas columnas usar
La pregunta de usar 2 columnas o 3 columnas en diseño de la página es casi filosófico. Desafortunadamente, no se pudo identificar estudios de usabilidad en relación a la disposición de las columnas. Como es usual, depende del contexto y el grupo al cual va dirigido el contenido. En algunos casos es simplemente imposible encontrar un balance adecuado entre lo primario y secundario con 2 columnas. En esas situaciones se puede recurrir a dividir la segunda columna ( sidebar ) en dos partes - de hecho esta es la más común solución.

En ambos casos es necesario hacer la estructura lo más transparente y claro posible. Utilizar más de 3 columnas es muy a menudo una malísima idea.

Del estudio se llegó a lo siguiente:

• 58% usan tres y más columnas en su diseño (ejemplos: TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),
• 42% usan un diseño 2 columnas (ZenHabits, GigaOM, Google Blog, Seth Godin, Boing boing).

TPM usa muchas columnas. 58% de los analizados usan este concepto.
Aparentemente, 50 blogs son suficientes para encontrar soluciones a la disposición de sus contenidos que resultan ser inusuales. Por ejemplo Drudgereport utiliza al que se puede denominar como un "anti diseño". TPM por ejemplo usa a veces 2 columnas, luego 3, otras veces 4 columnas.

1.2 Contenido centrado o alineado a la izquierda.
Actualmente, uno puede observar la creciente tendencia al diseño centrado desde hace pocos años - de hecho con la intención de ofrecer al lector un diseño óptimo para adaptarse a la resolución que estén usando. Puesto que más y más usuarios tienden a cambiarse a resoluciones más altas, uno trata de balancear el espacio que rodea al diseño para centrar la posición del contenido de tal manera que atraya la atención del lector.
ReadWriteWeb con contenido en el centro. De acuerdo a la investigación el 94% de los blogs analizados usan ese diseño.

Y aparentemente este conceto ha logrado llegar a ser un alcance estándar estos últimos años. Ahí tenemos como ejemplos a CopyBlogger, Problogger, ReadWriteWeb, Mashable, ArsTechnica, Techcrunch y Huffingtonpost.

1.3 Fijo, elástico o fluído
Para ser honesto, no se esperaba tal tendencia fuerte a diseño fijo (basados en pixeles "px"). Es en verdad resaltante que entre los 50 blogs analizados ninguno utilice un diseño elástico ( el ancho del diseño crece en relación al tamaño de la fuente) y únicamente una fracción utiliza elementos fluídos (el diseño cambia dependiendo del tamaño de la ventana). A continuación los resultados exáctos:

• 92% de los top blogs usan un diseño fijo.
• 8% usa un diseño fluído o al menos uno híbrido, mezcla de elementos fluídos con fijos ( Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

Lso diseños fluídos pueden adaptarse muy bien a las preferencias del lector mientras que los diseños fijos hacen fácil el trabajo al diseñador.
La mayor desventaja de los diseños fluídos es el crecimiento del ancho cuando se utilizan pantallas anchas, la cual hacen las líneas de texto muy largas ( aquí en el ejemplo Engadget) muestra 150 caracteres por línea.

1.4 Ancho del diseño fijo.
Como se onservó la tendencia fuerte al diseño fijo, se quizo ahondar en el ancho que usualmente corresponde al #container o #wrapper. Aparentemente,

• 9% utiliza ancho menor a los 800px,
• 15% utiliza un ancho de 801 a 900px,
• 20% 901 a 950px,
• 56% utiliza entre 951 a 1000px de ancho.

1.5 Proporción entre el área de contenido y el diseño
Como se vió, cada diseño requiere al menos una barra lateral con contenido secundario y ofrece opciones de navegación a los lectores. Sin embargo, ¿cuál sería la proporción a darle a ambas áreas? Se sabe que a menos espacio en el contenido principal, hace más amplio el área secundaria. ¿Dónde yace el balance?
El ancho en BoingBoing es de 870px, en contenido usa 550px, lo cual resulta en una disposición a ratio 0.63 (ancho de contenido / ancho del diseño)

De acuerdo al estudio,

• En promedio el 58% del ancho del diseño es utilizado para mostrar el contenido principal.

1.6 Diseño a base de CSS o a base de Tablas?
Es obvio que los blogs populares que se actualizan muchas veces en un día, deben preferir soluciones basadas en CSS pues permite mejor y más fácil mantenimiento y reduce el tiempo de carga. Consecuentemente, no es raro que el 90% de los 50 top blogs usen diseños basados en hojas de estilo (CSS = Cascade Style Sheets).

2. Tipografía

De hecho que "el contenido es el Rey". Esto va para cualquier otro tipo de sitio también. Pero va mas allá de que el diseñador ofrezca al lector un entorno comfortable, y es pues aquí donde la tipografía juega un papel muy importante. ¿Cómo lograr la mejor forma de entorno de lectura para el contenido? ¿Qué tipo de fuente utilizar? ¿Qué tamaño de fuente elegir? A continuación algunos puntos a tomar en cuenta para lograr ese objetivo.

2.1 ¿Oscuro sobre claro o claro sobre oscuro?
Como se podría esperar, el 98% de los top blogs utilizan texto oscuro sobre un fondo claro. Únicamente el blog PostSecret lo hace al revés ( al igual que éste blog ;) ). Sin embargo, esta decisión de diseño está relacionado al tipo de contenido a ofrecer.

2.2 ¿Cuántos caracteres por línea?
Para ofrecer una mejor legibilidad se necesita un ambiente agradable a la lectura. Mientras algunas investigaciones acerca de éste tema sugiere el uso de 52 a 68 caracteres por línea (incluídas los signos de puntuación y los espacios), otros estudios muestran que incluso si las líneas se alargan, no afecta en lo absoluto a la usabilidad. Como no hay reglas exactas, los diseñadores experimentan con diferentes cantidades.

Utilizando la configuración de tamaño de texto por defecto del navegador se obtuvo de que el 34% utilizan 85 a 94 caracteres por línea, resultado ésta la más preferida por los blogs, hay otros que llegan a 105 caracteres por línea, lo mínimo que se obtuvo es de 65 caracteres por línea.

Por lo tanto, podríamos asumir que 80 a 100 caracteres por línea sería el adecuado. Esto ya depende del diseñador.

Es interesante remarcar que ningún blog utiliza alineación de texto justificada sino alineación a la izquierda y esto en el todos los blogs, sin excepción.

2.3 ¿Tipo de fuente predominante en el contenido?
Sans-serif se ha convertido en el estándar por defecto para el texto en pantalla, especialmente online. Se ha sugerido que la razón de esto es porque el tamaño pequeño de la fuente ocasiona a este tipo de fuente el aparecer bién distribuído en la pantalla. ¿Cómo se refleja esta sugerencia en el texto de los blogs populares?

De acuerdo al estudio:

• El 34% utilizan Verdana(sans-serif) para el cuerpo del texto (A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, Smashing Magazine),
• 24% utilizan Lucida Grande(sans-serif, included with Mac OS X)(Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress),
• 18% utiliza Arial (sans-serif)(ReadWriteWeb, Engadget, Google Blog, CNN Political Ticker),
• 14% usan Georgia (serif)(Scobleizer, GigaOM, Wired, BoingBoing, Huffington Post),
• 6% utiliza Trebuchet MS (sans-serif) (Andrew Sullivan, Seth Godin, Postsecret),

ars-technica utiliza 85-94 caracteres por línea.

Para leer más del estudio original vean el artículo original en Smashing Magazine