¿Deberían los sitios web expandirse al cambiar el tamaño de la ventana?
https://stackoverflow.com/questions/27381
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Hago esta pregunta únicamente desde el punto de vista de la usabilidad:¿Debería un sitio web expandirse/estirarse para llenar el área de visualización cuando se cambia el tamaño de la ventana del navegador?
Estoy seguro de que existen desventajas obvias:
- Las columnas anchas de texto son difíciles de leer.
- Escribir html/css usando porcentajes puede ser una molestia
- Te hace vulnerable a que tu diseño se extienda más allá de sus límites si una imagen es demasiado ancha o si se agrega un bloque de texto demasiado largo.(Mira, es complicado codificar html/css)
La única ventaja que se me ocurre es que los usuarios que utilizan el cambio de tamaño de fuente integrado en su navegador no tendrán que lidiar con columnas de solo unas pocas palabras, con un cuerpo de espacios en blanco a cada lado.Sin embargo, creo que puede ser un problema del navegador más que cualquier otra cosa (Firefox 3 te permite hacer zoom todo en lugar de solo el texto, que siempre resulta útil)
editar:Noté que el desbordamiento de la pila tiene un ancho fijo, pero el horror de codificación cambia de tamaño.Parece que Jeff no tiene una fuerte preferencia en ninguno de los dos sentidos.
Solución
El HTML sin formato hace precisamente eso.¿Está cambiando sus datos para que no se muestren tan bien en ventanas de tamaño aleatorio?
Antiguamente todo el mundo tenía pantallas VGA.Ahora bien, esa resolución es muy poco común.¿Quién sabe qué resoluciones serán comunes en el futuro?¿Y por qué esperar una determinada anchura o altura mínima?
Desde el punto de vista de la usabilidad, exigir una determinada resolución a los usuarios solo creará una experiencia degradada para cualquiera que no utilice esa resolución.Otra cosa que surge de esto es lo que es ¿ancho fijo?He visto muchas ventanas (popups) de tamaño fijo que simplemente no se muestran correctamente porque mis fuentes son diferentes a las del diseñador.
Otros consejos
En términos de escalamiento de sitios web, me gustan los sitios web de tamaño fijo que se escalan bien usando la función de "zoom" del navegador.No quiero una página muy ancha con fuentes pequeñas en mi monitor de resolución 1920.No sé si el diseñador web tiene que hacer algo para que se escale bien cuando se hace zoom, pero el zoom en FF3 es increíble, el de IE7 es inútil...
El diseño debe ser fluido dentro de límites razonables.
Usar CSS tiene min-width y max-width propiedades (que funcionan en todos los navegadores, incluido IE7+) para evitar que el diseño se estire demasiado.
Lo importante es nunca que un bloque de texto se extienda demasiado.Si se expande una ventana, ningún bloque de texto debería estirarse indefinidamente para coincidir porque la lectura se convierte en una dificultad.
Como ha dicho la gente, realmente depende de la información que muestre el sitio.Dos buenos ejemplos son StackOverflow y Google Images.
Si stackoverflow se estirara para ajustarse a la pantalla, las respuestas más largas serían molestas de leer, porque al ojo le resulta difícil escanear líneas largas; esto es exactamente por qué los periódicos usan columnas para todo y por qué los libros tienen todos el mismo ancho.
Con Google Imágenes, donde el contenido es básicamente un montón de imágenes de 200 píxeles de ancho, se adapta al ancho del navegador y sigue siendo perfectamente legible.
Básicamente, tenga en cuenta que el ojo odia leer largas líneas de texto y base su diseño en eso.Puede diseñar su sitio de modo que cuando aumente el tamaño de la fuente, todo el diseño se adapte bien (el único sitio que se me ocurre que hace esto es www.geektechnique.org; presione el botón ctrl and -/= o ctrl+scrollwheel, y el diseño cambia el ancho con el tamaño de fuente)
Supongo que me gustan muchas cosas:Eso depende.Normalmente hago ambas cosas.Parte del contenido mantiene el ancho fijo para verse bien o si no puede beneficiarse de más espacio.otras cosas están configuradas al 100% si parece que serían útiles.
Esto debe decidirse en función de lo complicado que sea el diseño de su sitio web.Lo más complicado, gráficamente o en cuanto a componentes (cantidad de divs de contenido), determinará qué tan bien escalará su sitio web.En general, encontrará que los sitios web de la mayoría de los diseñadores gráficos no se escalarán porque tienen un uso intensivo de gráficos.Sin embargo, el sitio web informativo se ampliará para aprovechar al máximo el espacio legible en la pantalla y no será complicado para facilitar su uso.Realmente es una cuestión de preferencia.
Creo que depende del contenido del sitio.Sitios como SOFlow, foros y otros sitios hacen hincapié en leer muchos detalles, por lo que tener más espacio para hacerlo es, en mi opinión, un gran beneficio.Cuanto menos desplazamiento vertical, mejor.
Sin embargo, para sitios un poco menos exigentes en el nivel de lectura, incluso blogs o sitios minoristas donde simplemente se muestra un producto individual, tener un ancho fijo le permite mantener las cosas más concisas.
Soy un gran admirador de los diseños totalmente fluidos.En cuanto a las quejas de usabilidad sobre líneas de texto que son demasiado largas...Si son demasiado largos debido al tamaño de la ventana de mi navegador, entonces puedo hacer la ventana más estrecha o más ancha con la misma facilidad.
Nota:Si utiliza la función de zoom en su navegador, un diseño fijo aplasta el texto, mientras que un diseño fluido le permite ocupar toda la pantalla.
Quizás esto sea sólo un problema del navegador, pero definitivamente es un argumento a favor de la fluidez.
Los anchos de párrafo mayores que la visualización hacen que un sitio web sea completamente inutilizable.Tienes que mover la barra de desplazamiento horizontal hacia adelante y hacia atrás para cada línea que leas.Estoy cursando una materia de diseño web en la universidad y el libro de texto menciona los diseños que se adaptan al ancho de tu pantalla. diseño fluido.
Estoy diseñando mi gran proyecto de clase usando un diseño fluido, es un poco más problemático que el ancho fijo.Sospecho que ninguno de los otros estudiantes lo usará, los marcadores no lo notarán y ninguno de los sitios profesionales que estamos imitando es fluido tampoco.
Yo diría fluido hasta el final. El usuario siempre puede volver a una ventana de tamaño más pequeño si no le gusta el resultado de ampliarla, pero no puede hacer nada con respecto a un diseño fijo.
Si realmente odias la idea de que tu sitio se vea feo debido a algo que hace un usuario con una pantalla grande, entonces, por el bien de todo lo que es verdadero y hermoso, al menos ¡Nunca utilices diseños fijos basados en píxeles! CSS tiene estas ordenadas unidades de tamaño relativo al texto como "em" que permiten que partes de su página escale con el tamaño de fuente mientras que otras (como las imágenes) permanecen en su tamaño "natural".
¿Por qué no usarlos y hacer que su página escale bien sin depender del menos flexible "escalar todo" de FF3 que en realidad es solo una solución alternativa para los sitios que usan un diseño fijo tonto basado en píxeles?
Mucha gente dice cosas como "esto es una cuestión de gusto" o "No me gustan las grandes fuentes en mi pantalla de alto píxel". El número de píxeles no tiene nada que ver con eso, y no es una cuestión de gusto.Es una cuestión de DPI, que está directamente relacionado con la resolución de pantalla y el tamaño de fuente.Si su diseño se escala junto con el DPI de las fuentes (especificándolo en ems, por ejemplo, y usando SVG), entonces terminará con sitios web muy hermosos y nítidos que funcionan de manera óptima con cualquier pantalla.
Esta es una cuestión de preferencia de estilo.Ambos pueden ser igualmente utilizables dependiendo de la implementación.También se pueden utilizar columnas, si la pantalla se vuelve lo suficientemente ancha.Personalmente, me resulta molesto cuando hay una única y estrecha columna de texto en la pantalla.
Editar para 2012:Sí, su sitio web debe responder al tamaño de la ventana en la que se muestra.
Hay muchos lugares para leer más sobre esto, incluyendo:
Probablemente exista un diseño de compromiso entre diseños fijos y fluidos.Puede diseñar un sitio fluido pero configurando la propiedad CSS max-width a 1024 (o lo que sea).Esto significa que obtienes un diseño fluido cuando el window width es menor que 1024 y fixed width cuando es mayor.
Entonces los usuarios de pantalla estrecha (como mi eee 701 de 800 píxeles) no tienen que girar la barra de desplazamiento horizontal para leer cada línea y los usuarios de pantalla ancha (que no saben cómo cambiar el tamaño de la ventana de su navegador) no obtienen 500 caracteres de ancho. , párrafos de 1 carácter de altura.
