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.
Técnicas de diseño:
- 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.
- 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.
- 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.
- Diseño hibrido: Diseño que utiliza unidades de medida absolutas, porcentaje y em.
- em:el tamaño ('font-size') de la fuente relevante H1 { margin: 0.5em }
- %: valor relativo al valor del elemento padre P { line-height: 140% }
- ex:la 'altura de la x' de la fuente relevante H1 { margin: 1ex }
- px:pixeles, relacionados con los dispositivos visuales P { font-size: 14px }
3 comentarios
Marlene -
torresburriel -
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 -