Haciendo una breve historia del Diseño Web, podemos decir que al principio, al menos cuando yo empece, el siseño fijo basado en píxeles fue el preferido por los diseñadores.
Más que nada que era mucho más facil hacerse una idea y controlar mejor lo que al final se iba a ver en pantalla. Un ancho fijo perse tampoco es malo, lo peor era dar tamaños fijos a las tipografias y maquetar con infinidad de tablas anidadas. Yo el primero.
Resultado: Un auténtico caos para un usuario con discapacidad visual.
Comparación de la web de Ecoembes tras aumentar dos veces el tamaño de letra.
Hemos perdido varias opciones de menu, y los datos emiezan a estar bastante apelotonados.
El tanto por ciento es la solución?, se acerca bastante ya que dejamos de usar tamaños fijos y las cajas de texto, botones… crecerían en proporción.
Por ejemplo en la web de la Universidad San Pablo CEU hemos aumentado cuatro veces el tamaño del texto.
Vemos que las cajas de texto han crecido, aunque tenemos algunos pequeños fallos como la imagen de fondo de la caja Grado que debería haber sido más grande.
Una buena practica será entonces basarse en tamaños relativos.
Lo ideal seria definir un tamaño en porcentaje para el body y definir los demás tamaños en em. Para evitar incompatibilidades con IE.
Por Ejemplo:
body {
font-size: 100%;
}
h1 {
text-size: 2.5em;
}
#contenido {
text-size: .85em;
width: 30em;
background-color: #f0f0f0;
}
Extraido de: http://www.100px.com/articulos/ni_fijo_ni_liquido_elastico#more-8
Cuya lectura recomiendo.
A decir verdad yo he usado normalmente porcentajes, pero en más recomendable los em dada la gran variedad de resoluciones existente actualmente. Definimos el tamaño respecto al tamaño de la letra que tiene nuestro usuario.
Un ejemplo de esto llevado al extremo seria http://www.csszengarden.com/?cssfile=063%2F063%2Ecss
Probad a ampliar el tamaño de letra…
Prometo aplicarlo en mis próximos proyectos.
[Fuente: loopx]
