Blogia
UnClick

La vida en em

Este mes me está volviendo bastante procastina, entre enfermedades y eventos amigables, no consigo centrarme en los miles de frentes abiertos que tengo. Diseños para amigos, borradores de post inacabados, fotografías mil que retocar, la publicidad de Tribeca... agosto está pasando de vacio, no he acabado nada. Y no es propio de mi. Menos mal que el trabajo por el que me pagan si lo acabo.... Y de eso quería hablar.

Llevo una semana enfrascada en una web que me estaba volviendo loca por momentos, pero por fín estoy viendo la luz y el final. Una web institucional que debe pasar el doble nivel A de accesibilidad, según las Directrices de Accesibilidad para el contenido Web , con todo lo que ello supone. No empezar de cero, no no... retocarla hasta el infinito. Y me he roto la cabeza. No ha sido tanto mi quebradero por los javascripts incorporados en la web, ni por corregir el diseño semántico, ni por revisar formularios mal etiquetados..., lo realmente frustrante ha sido convertirla en elástica. En un primer momento pensé, pan comido esto de pasar de píxeles a em. Y en realidad si empiezas una web de cero, no es ningún problema. El problema es casar todo, intentar que te cuadren los em, me ha hecho no desconectar en toda la semana. Mi cabeza estaba todo el día haciendo conversiones... Pero al final parece que lo he logrado, mañana una última revisión y lista.

Un poco de teoría:

Técnicas de diseño:

  1. Diseño fijo: Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
  2. Diseño liquido (o fluido): Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado.
  3. Diseño elástico (o flexible): Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.
  4. Diseño hibrido: Diseño que utiliza unidades de medida absolutas, porcentaje y em.

 

  1. em:el tamaño ('font-size') de la fuente relevante H1 { margin: 0.5em }
  2. %: valor relativo al valor del elemento padre P { line-height: 140% }
  3. ex:la 'altura de la x' de la fuente relevante H1 { margin: 1ex }
  4. px:pixeles, relacionados con los dispositivos visuales P { font-size: 14px }

 

 

¿Y esta publicidad? Puedes eliminarla si quieres

3 comentarios

Marlene -

Bueno bueno, gracias por los links! muy interesantes :D voy a dar una vuelta por tu blog.
¿Y esta publicidad? Puedes eliminarla si quieres

torresburriel -

Lo más chulo de todo esto, y a la vez lo más irritante, es que de alguna forma se dejan las webs adaptadas a los usuarios, para que las puedan manipular en cuanto a tamaño de la forma que ellos quieran.

El inconveniente más gordo, para mi, es que no todos los navegadores usan la misma configuración de tamaño de fuente por defecto, lo cual hace que algunos diseños que se ven bien en unos equipos, en otros no se vean tan bien.

De todos modos no deja de ser un trabajo complejo lo de la adaptación a elástico, frente al diseño desde cero.

Y por cierto, el título del post es genial.

unjubilado -

¡¡¡ Uffff !!!
¿Y esta publicidad? Puedes eliminarla si quieres