Historias
Slashboxes
Comentarios
 

Login Barrapunto

Login

[ Crear nueva cuenta ]

Análisis sobre el tamaño óptimo en diseños web

editada por Yonderboy el 10 de Marzo 2007, 13:00h   Printer-friendly   Email story
desde el dept. diseño-web
Un pobrecito hablador nos cuenta: «Acabo de encontrar un post sobre el diseño del tamaño horizontal de la pantalla que me ha parecido muy interesante compartir con los barrapunteros. Pocas veces se pueden encontrar explicaciones razonadas a temas tan esotéricos como el tamaño tamaño idóneo a la hora de hacer un diseño web desde cero. Es una traducción libre de este otro post en inglés. Si alguien tiene alguna referencia de estudios similares creo que sería muy útil compartirla. :-)»

Este hilo ha sido archivado. No pueden publicarse nuevos comentarios.
Mostrar opciones Umbral:
Y recuerda: Los comentarios que siguen pertenecen a las personas que los han enviado. No somos responsables de los mismos.
  • Me ha gustado mucho

    (Puntos:4, Interesante)
    por Super Coco (22314) el Sábado, 10 Marzo de 2007, 13:23h (#887271)
    ( http://www.vicente-navarro.com/blog/ | Última bitácora: Jueves, 15 Enero de 2009, 22:18h )

    El artículo es muy bueno y muy útil para el desarrollo web. El mérito es del autor del artículo original pero ¡muchas gracias para el traductor!

    Me ha parecido especialmente interesante el párrafo:

    Mientras que se puede apreciar una clara tendencia que indica que cuanto mayor es la anchura de la pantalla, es menos probable que el navegador esté maximizado; también se puede observar que la mayoría de los visitantes siguen maximizando su navegador. El punto de inflexión en este comportamiento parece ocurrir cuando la gente pasa de una anchura de pantalla de 1400 a 1600 pixeles.

    Aunque cada vez tiene más sentido conforme aumentan los tamaños de nuestras pantallas, somos muchos los que tradicionalmente hemos odiado tener todas las ventanas maximizadas. Alguna vez he leído (hace un tiempo creo que hubo una discusión de esto aquí en Barrapunto) que en los usuarios tradicionales de X/UNIX es muy típica la costumbre de tener muchas ventanas a la vista, mientras que en los usuarios de Windows es más típico tener todas las ventanas maximizadas.

    Eso, claro, sin tener en cuenta que hay aplicaciones que nos piden cuanta más ventana mejor (por ejemplo los IDEs), pero no es el caso de los navegadores, que si los tienes maximizados en una pantalla grande las líneas se hacen excesivamente anchas para poder leerlas confortablemente.

    --
    Me lo contaron y lo olvidé, lo vi y lo aprendí, lo hice y lo entendí.
    • Re:Me ha gustado mucho

      (Puntos:5, Inspirado)
      por morris (13783) el Sábado, 10 Marzo de 2007, 15:49h (#887286)
      ( Última bitácora: Miércoles, 10 Septiembre de 2008, 07:53h )

      pero no es el caso de los navegadores, que si los tienes maximizados en una pantalla grande las líneas se hacen excesivamente anchas para poder leerlas confortablemente.

      Eso no es excusa: una página bien diseñada hará uso de las propiedades min-width y max-width de CSS y utilizará em como unidad para controlar las longitudes de las líneas. Hoy en día no existe justificación alguna para no hacer diseños usables; otra cosa es la ignorancia o la incompetencia.

      [ Padre ]
      • Re:Me ha gustado mucho de Defero (Puntos:2) Sábado, 10 Marzo de 2007, 15:56h
        • Re:Me ha gustado mucho

          (Puntos:4, Interesante)
          por morris (13783) el Sábado, 10 Marzo de 2007, 17:18h (#887306)
          ( Última bitácora: Miércoles, 10 Septiembre de 2008, 07:53h )

          Efectivamente, las mismas que pueden ser emuladas con expresiones (traducción literal) JavaScript en IE 6 y 5.5 (ya que el 7 las soporta de forma nativa).

          Por otro lado, podrías ver la web con Links [sourceforge.net] y a tomar por culo las hojas de estilo. O desactivarlas en tu navegador favorito (si lo soporta). Pero sigue sin ser excusa para utilizar unos estándares que existen para algo: no es mi problema que no utilices la herramienta adecuada, yo como desarrollador me veo obligado a proporcionar con todos los medios a mi alcance la mejor experiencia posible. Y este caso en concreto es uno de esos que pueden ser resueltos de una forma bastante sencilla. Como los PNG con canal alfa. Otra cosa es que sea más sencillo lamentarse de las cosas, y más si se trata de un producto de Microsoft. Que sí, que el Explorer es una mierda, pero afortunadamente algunas cosas tienen solución, guste o no.

          [ Padre ]
        • Re:Me ha gustado mucho de pobrecito hablador (Puntos:1) Sábado, 10 Marzo de 2007, 19:08h
      • Re:Me ha gustado mucho

        (Puntos:4, Inspirado)
        por gonssal (6995) el Sábado, 10 Marzo de 2007, 17:12h (#887305)

        Te has pasado un poco de listo.

        Esas dos propiedades no están soportadas por IE6, que desgraciadamente y por desconocimiento de alternativas de la gente, es el navegador más usado (y de lejos) actualmente. Vete a un cliente y explícale que no ve bien la página porque su navegador (que según él será "el que usa todo el mundo") no soporta esas propiedades.

        Utilizar la medida relativa em para determinar la longitud de los contenedores tampoco es una buena práctica, ya que por ejemplo gente con visibilidad reducida que necesita ampliar el tamaño de fuente tendrán que usar siempre la barra de desplazamiento inferior.

        --

        Vivir es una ilusión.

        [ Padre ]
    • 1 respuesta por debajo de tu umbral de lectura actual.
  • Estadisticas

    (Puntos:1, Interesante)
    por pobrecito hablador el Sábado, 10 Marzo de 2007, 13:37h (#887273)
    ¿se ha calculado con estadísticas de sitios españoles, lo sigo porque no creo que sea el mismo porcentaje ni de lejos, mi web, 3 meses 4000 visitas aprox.

    1280x1024 o más--> 23.5%
    1024x768 --> 55.3%
    800x600 --> 20%

    Me imagino que la cantidad en España de resoluciones altas será menor proporcionalmente a la de EEUU.
  • analítica pérdida de tiempo

    (Puntos:1, Interesante)
    por pobrecito hablador el Sábado, 10 Marzo de 2007, 13:52h (#887279)
    en mi opinión el ancho óptimo es el 100% de la ventana. como en barrapunto por ejemplo. es el usuario el que decide cuánto ancha quiere la web ajustando el ancho de su ventana.

    creo cualquier intento de calcular en píxeles el ancho de una web pierde de vista a los usuarios de pantallas de resolución menor (dispositivos portátiles) o de pantallas con mayor densidad de puntos por pulgadas (aumentan el tamaño de letra para leer).

    las mejores ideas son las más simples.
  • Debería ser dinámico

    (Puntos:4, Inspirado)
    por anllogui (18141) el Sábado, 10 Marzo de 2007, 14:22h (#887281)
    ( http://www.slowhabits.com/ | Última bitácora: Jueves, 14 Octubre de 2010, 14:44h )
    No me gustan las páginas que solamente están diseñadas para una resolución, aunque sea la más baja. Debería de diseñarse para cualquier resolución (siempre dentro de algunos rangos). Pero para eso son necesarias dos cosas: Saber y trabajo.

    Estuve un año en ese mercado, y vi mucho espabilado que no tenia ni idea de diseño web, y en vez de aprender y trabajar, se dedicaba a sacarse estándares de resolución del bolsillo, para poder aplicar lo poco que sabían. No he tenido más experiencias, pero supongo que es facil de extrapolar a otras empresas, y al diseño amateur, ya ni te digo. Por supuesto siempre habrán excepciones...
    --
    por una vida slow [slowhabits.com]
    • Re:Debería ser dinámico

      (Puntos:4, Interesante)
      por charlieman (23327) el Domingo, 11 Marzo de 2007, 03:54h (#887372)
      ( http://charlieman.net/ )
      No solo dinámico respecto de la resolución, también respecto del tamaño de la letra. A mi me gusta mantener el navegador maximizado (mi res: 1280x1024), pero poner una letra bien grande (y el monitor tenerlo algo lejos de mis ojos). Lo que fastidia es que muchas webs usan px en lugar de em y los textos se salen de sus contenedores al agrandarla. Es algo que no toman en cuenta.
      --
      A menudo unas pocas horas de "Prueba y error" podrán ahorrarte minutos de leer manuales.
      [ Padre ]
  • A quien corresponda

    (Puntos:2, Informativo)
    por fisikoloko (28249) el Sábado, 10 Marzo de 2007, 16:10h (#887289)
    ( Última bitácora: Miércoles, 05 Marzo de 2008, 17:07h )

    explicaciones razonadas a temas tan esotéricos como el tamaño tamaño idóneo

    No sobra un tamaño?

    Un saludo.
    --
    Physics is like sex. Sure, it may give some practical results, but that's not why we do it.
  • Ancho de Diseño Web: Reflexiones

    (Puntos:3, Interesante)
    por OeL (29351) el Sábado, 10 Marzo de 2007, 16:40h (#887296)
    Bueno, sobre este tema yo he tomado la siguiente decisión, después de estudiarlo mucho:

    (1) Anteriormente diseñaba a 750 píxeles de ancho fijo. Pero con el incremento del tamaño de las ventanas uno se plantea el dar el salto a los 900píxeles.

    (2) Los diseños líquidos de ancho variable permiten pocas florituras de diseño. Puede ser util para "barrapunto" y similares, todos llenos de letras (grandes) sin más pretensiones de diseño. Pero poco más. (Evidentemente, el control de diseño sobre un ancho fijo es infinitamente mayor).

    (3) Pero es que además, el diseño líquido es CONTRAPRODUCENTE. Un ancho de página mayor de 900px es una barbaridad para el lector (salvo que las letras sean enormes). Así que hemos llegado a un punto donde el ancho disponible es mayor del necesario.

    (4) Tener en cuenta los proyectores. Si la página es para una institución y necesita proyectarla en un proyector (para una presentación, un congreso o lo que sea) resulta que la mayoría de proyectores son todavía de 800px de ancho. (Yo he tenido que tener en cuenta esto en algunos casos).

    (5) Y sobre todo: Está la fisiología de la visión. Con una fuente verdana a 12px, el máximo aconsejable es de 600 píxeles de ancho. No seáis locos. Más de eso los renglones son larguísimos y se dificulta la lectura y la visión. ¡¡Por eso los periódicos tienen columnas!!

    Así que, si queremos legibilidad, nos sobran con 500-600px para un renglón de texto. Eso sumado una columna lateral adicional te vas como mucho a 800px totales para la página.

    Así que REALMENTE con 800px tenemos suficiente. Creo que "más de eso" genera un exceso de información a lo ancho: Tenemos los ojos que tenemos, y la capacidad mental que tenemos ... y PONER MÁS COSAS en un diseño de 1.000 o 1200 píxeles produce un efecto de SATURACIÓN y exceso de información contraproducente (y DISMINUYE la legibilidad).

    Mi conclusión: en vez diseñar a 750, se puede colocar a 800px:

    - En un proyector a 800, o un ordenador a 800, se ve con muy poco efecto de las barras de desplazamiento. Y se salva el tipo.

    - La longitud de renglones nunca sobrepasará (contando con una barra lateral de 150 o 200) los 600px, que es el MÁXIMO aproximado para poder leer con cierta comodidad.

    - Los 50 px ganados al pasar de 750 a 800 son una maravilla de posibilidades infinitas, muy cómodos.

    MI DECISIÓN (contraria a todas las normas "oficiales", todas las reglas y todos los consejos) ha sido diseñar a 800px fijos.

  • Tiene que ser dinámico!!!

    (Puntos:5, Inspirado)
    por Pegasus (17180) el Sábado, 10 Marzo de 2007, 17:36h (#887309)
    ( http://www.pegasusnet.com.ar/ )

    El sitio tiene que ser dinámico: jamás vi a nadie cambiar la resolución de su monitor porque un sitio dice "se ve a 800x600".

    La solución de compromiso de trabajar a ancho fijo pequeño es simplemente inaceptable: la franja blanca a la izquierda de la imagen se dice al usuario "tiraste tu dinero en un monitor grande".

    Los estándares de publicación actuales permiten sin problemas trabajar en porcentajes, y hacer todo el layout relativo a como sea que el usuario esté navegando, ya sea maximizado o en ventana o con el monitor al tamaño que quiera.

    Es cierto que si el texto es muy largo, se dificulta la lectura, pero puede ponerse simplemente en columnas o determinar un ancho máximo fijo del contenedor del texto dentro del diseño, de manera que el sitio se vea proporcionado y a lo sumo generar márgenes internos más amplios. Un buen ejemplo de esto es Camaleon CSS [camaleoncss.com], pero noten que además de la página principal hay muy pocos diseños dinámicos: esto es porque trabajar con anchos variables es más difícil y tal vez haya que ser un poco más profesional para currárselo.

    Entiendo el argumento de que "a tamaño fijo se tiene más control", pero temo decirle a los que opinan así, que trabajando en porcentajes el control no se pierde y que pensar tamaños fijos es una irrealidad del medio que tiene su justificación únicamente en la formación de los diseñadores gráficos a los que se les enseña a trabajar en medios estáticos y en las mediocres herramientas de desarrollo que no tienen toda la flexibilidad que el lenguaje soporta.

    Supongo también que Nielsen está escribiendo para que las empresas puedan justificar la inversión es esas herramientas que generan sitios mediocres, técnicamente hablando.

    El problema de siempre de los sitios web es que hacerlos es tan fácil, que cualquiera sin un poco de (auto)formación se anima... de ahí a que alguien quiera calcular la calidad de un sitio mirando "el promedio de los sitios" puede ser motivo de otro estudio.

    --

    -----
    Tag: No elegimos dónde nacer.

  • Y que?

    (Puntos:1)
    por ghostbar (20927) el Lunes, 12 Marzo de 2007, 04:48h (#887658)
    ( http://ghostbar.ath.cx/ | Última bitácora: Martes, 23 Agosto de 2005, 13:04h )
    Yo jamás veo las cosas maximizadas, mi navegador (y la mayoría de mis aplicaciones) están a unos 1074x780 y mi resolución es 1600x1200... No es más fácil que simplemente se adapte al tamaño del navegador teniendo seteado en las CSS el ancho máximo y el mínimo?... no sé, digo yo...
    --
    weblog de ghostbar [ghostbar.ath.cx]
  • 3 respuestas por debajo de tu umbral de lectura actual.