Tipografías: una introducción

Death by typography

Typograpy for lawyers es una pequeña joya que explica de una forma clara (aunque en inglés) unas cuantas nociones básicas sobre las tipografías y sus posibles usos.

Está enfocado al mundo de los abogados porque, como comenta, Even though the legal profession depends heavily on written expression, legal typography is often poor.

Esa dependencia de la claridad en la escritura, el tratar de facilitar la lectura a los usuarios es también clave en la mayoría de las webs, por eso vienen muy bien las ideas que da en su blog en forma tutorial.

Imagino que el siguiente y esperado paso será crear un “Grammar for lawyers”, aunque eso atentaría contra las bases mismas del derecho, supongo. Habrá que conformarse con no ver sentencias escritas en “Comic Sans”.

Si gracias a su blog te enganchas al mundillo de las tipografías:

Convertir pixels (px) a em

A la hora de hacer una web elástica, uno de los problema con los que nos encontramos es la falta de exactitud de las medidas con las que trabajamos.
Un pixel, es 1 pixel en pantalla, pero ¿cuánto es 1em o 1ex?

(Casi) Fácil. Aquí va una pequeña tabla de equivalencia sacada de (Worldtechies)

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%

Jon Tan lo explica mejor, indicando la fórmula para calcular la equivalencia:

1 ÷ parent font size (px) × required pixels = em equivalent

Asumiendo que, por defecto, el tamaño por defecto de la fuente en los navegadores es de 16px.

Para cálculos más complejos, podéis usar Em calculator.

Diseñando mediolleno.com

Mediolleno.com Iba a poner rediseñando mediolleno.com pero, siendo sinceros, no hay mucho diseño previo, así­ que empezaremos desde el principio.

Ahora mismo, mediolleno.com es un muy buen nombre de dominio con demasiada parte vací­a. Se nota que el webmaster pasa más tiempo jugando al pádel que trabajando en la web. Aún así, podemos sacar en claro algunas cosas:

  • Está claro que es una web para mostrar imágenes de los viajes que Héctor realiza.
  • De vez en cuando surge algún evento especial del estilo “cachorrillos buscan dueño” y similares de los que la gente se entera por correo personalizado y en voz baja (ssshhh!)

Y esa es toda la web, tal y como la conocemos.

Mi propuesta

Espero que Héctor sepa perdonar mi atrevimiento y que le cite aquí­, donde apenas tengo entradas, no le suponga un incremento descomunal del ancho de banda.

Sólo pretendo mejorar la calidad del site y que todos disfrutemos más y mejor de sus fotos… y de los originales comentarios, por supuesto.

Como la gente que vaya a ir a mediolleno.com esta claro que quieren ver las últimas fotos, ¿por qué no darles una muestra desde el principio? Los enlaces están muy bien, pero anda que no molaría saber con lo que te vas a encontrar. Por eso, para la home, podríamos tener algo como:

Prototipo para mediolleno.com

Además, si quieres poner algún evento sui generis de los tuyos, lo puedes colocar en alguno de los bloques de fotos de la derecha. Ya sabes un fondo de color y luce mucho.

Por otro lado, las galerías interiores están un poco… uuuhhmmm… de aquella manera, digamos. Pero esto tiene una solución bastante sencilla y que además nos da un poco de interacción y así los colegas podemos decirle algo sobre las fotos: folderblog. Está todo hecho, no tienes que hacer (casi) nada, así que ¡por dios instálatelo ya!.

Se ve relindo con eso mi amol: un ejemplo.

En general

  • Home. Según la propuesta. A mi me mola.
  • Galerías de fotos. Por favor, estandariza la forma de presentarlas. Yo me quedo con folderblog
  • Logo y espacio. Con ese nombre, el no poner un logo es un crimen. ¿Qué tal un vaso de txikito medio lleno de buen Rioja Alavesa?. Por otro lado, al no haber mucho contenido, la web puede tener mucho espacio y dejarlo muy espacioso y claro.

Ey. De nada.

Múltiples IE en tu PC

Con la llegada del infame Internet Explorer 7, ya tenemos otra vez la liada habitual: a ver que se ha roto…

Lo de tener que diseñar para 3 o 4 navegadores con sus distintas versiones, en las diferentes plataformas, sabiendo que ninguno cumple las estándares al 100% es la tí­pica labor que podría hacer cualquier otra persona.

El bueno de Carlos, ha encontrado una pequeña aplicación para poder tener las distintas versiones del Internet Explorer (¡desde IE3!) funcionando en tu ordenador y así ir probando como se comportan tus páginas.

En Install multiple versions of IE on your PC

A ver cuando encontramos algo así­ para Safari…

Diseño ‘open source’

Me extrañaría mucho que alguien se pasase a un programa de código abierto cuando está acostumbrado a las teclas rápidas y las formas de hacer de programas comerciales como Freehand, Adobe Illustrator, Dreamweaver, Photoshop, etc.

Otro punto en contra es que, muchas veces, la gente con la que trabajas y a quien le tienes que enviar el trabajo, te lo solicite en formatos propietarios (pásame el PSD, te envío el frijan, …)

Entonces, ¿para qué molestarse?

Ya te digo..

  1. Por costes. Ya sé que puede sonar algo estúpido tal y como están las cosas. Todo el mundo tiene acceso a software comercial sin pagar, pero ¿y si tienes una empresa?

  2. Por flexibilidad. Al ser código abierto, lo puedes adaptar a lo que necesites. Y si no eres tú, seguro que hay alguien que ya lo ha hecho por ti: plug-ins, modularidad, skins, versiones, traducciones,… En estos casos, una comunidad potente funciona mucho mejor que una empresa.

  3. Por calidad. El código abierto no significa un fulano que en sus ratos libres tira un par de lí­neas de código, se gira y dice joer que chulo me ha quedado, voy a por otra Mirinda. Esa etapa, si existió alguna vez, hace tiempo que terminó.

    Ahora mismo, son grupos, organizaciones, muy preparados con una noción muy clara de lo que quieren hacer y hacia donde quieren ir. Eligieron código abierto porque los programas comerciales no les bastaban.

Si no te convence ninguna de las razones (lo cual es muy probable), quizá si echas un vistazo más de cerca a alguna de ellas te acaben convenciendo.

  • The GIMP. Tu sustituto para el Photoshop. No creo que eches de menos funcionalidades y su versión portable es simplemente impresionante.
  • Inkscape. Editor de SVG. Puede sustituir lo que haces con Freehand. También puedes combinarlo con Scribus y cierras el cí­rculo de la edición.
  • Blender. Modelado 3D, animación, rendering, … ¿De verdad necesitas algo que no te pueda proporcionar este programa?
  • Amaya, Aptana, … Usa Dreamweaver si quieres, pero estos editores están aquí para quedarse. Además hay muchos plug-ins para Eclipse (facilitadas en EasyEclipse) que hace que no eches nada en falta.

¿Dudas, ruegos, preguntas?

1024×768 vs. 800×600

Desde hace unos años se nota una evidencia esperada y que ha empezado a tener cierta repercusión en el diseño de páginas: la lenta muerte de 800×600 como resolución de referencia.

Muchos diseñadores, utilizan equipos que no tienen nada que ver con el usuario tí­pico (p.ej. en un Macintosh con pantalla de 1600×1200, lo normal, vamos) y una pantalla de 800×600 les resulta antediluviana. Sin embargo todaví­a representan, en general, entre un 15% y un 20% de los visitantes. Obviamente dependerá de que web estemos hablando.

Parece lógico adoptar la resolución de 1024×768 como tamaño de referencia, y diseñar para ese tamaño, dejando el diseño lí­quido para que se vea correctamente a resoluciones menores (eso es lo que predica Nielsen, al menos). Personalmente nunca me ha convencido demasiado tanto líquido… necesito algo más sólido para soportar mis diseños.

No creo que el problema sea el tamaño de la pantalla, sino el uso que se le da. Si nos fijamos, actualmente, muy poca gente llega a utilizar todo el ancho que le proporciona una pantalla de 800×600, simplemente, porque sus sites son de 2 columnas, y será­ muy difí­cil para un usuario la lectura de los artículos, con los tamaños de letra que se suelen usar actualmente. Quedará­n lí­neas de 23-25 palabras, algo que puede resultar muy cómodo de leer en papel, pero que, al menos a mi, se me atraganta en pantalla. Por eso me resulta casi imposible leer un artículo de useit.com en pantalla, por mucho que use párrafos cortos. Si en esa página las lí­neas tuviesen la mitad de tamaño facilitarí­a mucho la lectura; eso es algo que se puede comprobar en la mayoría de los blogs actuales. Para conseguir un tamaño de lí­nea legible, los diseños se estrechan y muy pocos llegan a los “normales” 1024, a no ser que hagan uso de diversas columnas para aprovechar ese espacio.

Un ejemplo de diseño para ambas resoluciones de pantalla es el de nba.com. Para evitar el scroll horizontal, capturan la resolución de pantalla del visitante, y si es mayor de 800×600, le añaden una columna adicional, con información extra que resulta de utilidad pero no es imprescindible, por lo que en 800×600 esa columna desaparece, y así­ se evita el scroll horizontal. Es una opción que puede resultar interesante.

Con esto de las pantallas pasa algo parecido a lo de los CV de los coches, parece que todo el mundo quiere más y más hasta que llega un momento en que se da cuenta que nunca ha necesitado tantos CV y que incluso les llega a perjudicar (precio del seguro, consumo, impuestos, …). Pantallas muy grandes, pueden venir muy bien si trabajas con muchas ventanas abiertas, hojas de cálculo muy grandes, diseño gráfico, CAD, ví­deo, o similares, pero nadie se imagina teniendo una página web maximizada en una pantalla de este tipo. Es el caso de los periódicos británicos: inmanejables.

Mi consejo es que diseñes para un máximo de 1024×768, la fluidez del diseño dependerá del tipo de diseño que tengas, no siempre es conveniente.