Diseñando webs para la ventana del navegador
Publicado el Sábado 10 de Marzo del 2007 @ 17:14 por Armonth.
En Franchu’s Lair han traducido un artículo, “Browser size does matter - Actual numbers” que trata sobre la resolución a utilizar a la hora de hacer nuestros diseños…
El primer error que siempre veo cometer (y he cometido) es diseñar para resoluciones en lugar de para ventanas, es algo que siempre se me ha atragantado pero que en el artículo han conseguido explicar razonablemente bien:
- Que el usuario tenga 1024 pixeles de ancho en su pantalla no significa que tenga 1024 pixeles de ancho en la ventana del navegador.
- Sólo el 66% de los usuarios usan el navegador maximizado (yo mismo uso 1280×1024 de resolución y 800×978 de ventana).
- Aún teniendo 1024 pixeles de ventana hay que contar con cosas como la barra de desplazamiento vertical, hay que descontar un mínimo de 30 pixeles a la resolución a utilizar como base.
- Es una solución de compromiso, los diseños líquidos escalan bien pero siempre habrá algún usuario fuera de “tus previsiones”…
Como conclusión dice lo siguiente:
Al optimizar el diseño para una anchura de 770 pixeles, se estaría logrando optimizar para el 97% de los visitantes, que es un valor mucho más interesante de cara a mejorar la usabilidad de las páginas. Sin embargo, esto no quiere decir que haya que hacer diseños estáticos de 770 pixeles de ancho.
La recomendación sería por lo tanto, optimizar los diseños para un ancho de 770 pixeles y asegurarse de que escalan de forma fluida desde los 770 pixeles hasta los 960.
Lo cual me suena… concretamente en SigT que está pensando para 1024 pero escalando bien a 800, 1024, 1280 (centrando la página al centro y añadiendo un color a los lados a medida que supera los 1024) y si se me apura a 640 con alguna que otra ligera deficiencia :-), serán cosas de la experiencia que te enseña como acercarte a más gente…
5 Comentarios (feed)
-
guillem nos comenta:
Uso desde 1280×854 hasta 1680×1050, con perspectivas de usar resoluciones mayores pronto. Tengo el navegador maximizado, porque yo lo valgo, y me gusta que las webs aprovechen razonablemente bien el espacio. Meneame.net por ejemplo lo hace y no creo que nadie vea muy mal esa web… desde luego no haces scroll horizontal excepto en casos extremos, y el scroll vertical no es problema porque todo el mundo tiene ratones con rueda y en alguna parte hay que meter la información, no!?
Y no es tan dificil hacerlo así de bien, leñe. Para mi los únicos diseñatas que se ganan completamente el sueldo son los que hacen diseños líquidos con limites minimos razonables, con margenes proporcionales y sin máximos absolutos.
Contenido aparte, una web “estrecha” tiene muchos más numeros para que yo no la visite nunca más. Y si además de estrecha es de esas a resolución fija (640×480, 800×600, o barbaridades por el estilo) me entran ganas de filtrar la IP del servidor en las iptables para no volver a meterme ni por accidente.
Y encima la tendencia es a monitores panorámicos y resoluciones Full HD, con lo que si gana la “usabilidad” (habria que definir eso… yo creo que se refieren a “compatibilidad con el CRT de la abuela, NCSA Mosaic y Windows de 16 bits”) pronto nos cabrán al menos tres o cuatro webs simultáneas en la pantalla :-DDD
Por cierto, mira si me fastidia el tema que mi primer script de GreaseMonkey justamente lo hice para reducir un poco el estropicio del nuevo diseño de FreeBSD.org, que pasó a un (para mí absurdo) ancho fijo.
http://bulma.net/beowulf/greasemonkey/fix-new-freebsd_org.user.js
Aunque acabo de probarlo y ya no queda bien del todo…
-
Armonth nos comenta:
Guillem hombre no te digo que no… el problema de los diseños liquidos es que hay webs que dificilmente los aprovecharan…
Por ejemplo en SigT, con el diseño minimalista la verdad es que es muy difícil hacer un diseño liquido 100% que aproveche toda la pantalla a 1600×1050 más que nada porque te quedas sin cosas que meter y para poner párrafos larguisimos sin saltos de línea de esos tan molestos para leer… pues casi mejor pasar xD
-
guillem nos comenta:
Yo a 1680×1050 veo soportable el diseño de SigT. El contenido me gusta y todos los aspectos del diseño me parecen fantásticos. Menos la columna, pero bueno, nadie es perfecto X’-D
Cuando tenga un monitor Full HD ya te diré qué tal se vé :-P
Por ejemplo, esta web se vé _perfecta_ en mi 20″ panorámico y es probable que se vea bien en un monitor mayor, tanto en tamaño como en resolución. Aprovecha todo el ancho y usa fuentes grandes. Lo que pasa es que no sé qué tal se veria en un monitor de 640×480. Por suerte tampoco me importa O:-)
P.S.: Sí, odio la compatibilidad hacia atrás, siempre que limite ir hacia adelante…
-
Armonth nos comenta:
Pues a 640×480… se ve bastante bien teniendo en cuenta que se empieza “a ver perfecto” a 800 y a 1024… salvo tonterías:
- El input del buscador salta a debajo del enlace “aleatorio” (copie la barra esa descaradamente de menéame y ahí cuando tienes un usuario largo también lo hacía xD).
- El logo de 20minutos genera una barra de scroll horizontal (aunque inutilizable)
- Y que a esas resoluciones el tamaño que tienes disponible para contenidos a lo ancho es ridiculo :P
Sobre lo de web perfecta ¿SigT o Pacoros? ya que pones debajo el enlace y no me queda claro ;P
P.S: Tu P.S me ha hecho pensar automaticamente en Windows y su código espaghetti complejo a muerte para mantener compatibilidad hacia atrás…
-
guillem nos comenta:
Lo siento pero como ejemplo de perfección ponia PacoRos.net. Entendiendo “perfección” como “a mi ahora mismo no se me ocurre qué podria hacerse mejor” X’-D
Y sobre la compatibilidad hacia atrás… totalmente de acuerdo. No digo que esté mal, per se, pero no debe condicionar seriamente los diseños futuros.
Mira a Apple: lo bien que les va y han pasado ya por tres arquitecturas hardware (68K, PPC, X86, las últimas con versiones de 32 y 64 bits) y por dos sistemas operativos que internamente no tienen nada que ver (Mac OS, Mac OS X) sin que el 99.9% de los usuarios notasen nada más que mejoras.
Y al 0.1% restante se les explica que es por su bien y si no les gusta a tomar viento, que uno de cada mil tampoco es tanto :-P