tipos - que es un layout de planta
¿Por qué elegirías un diseño de ancho fijo? (27)
Actualización: borré mi motivación porque parece distraer a los lectores. No se trata de "por qué no haces que tu ventana sea más pequeña". Vea las capturas de pantalla y verá texto obstruido debido al ancho fijo. Ver mi referencia a la notación "em / ex" en CSS. Me gustaría tener una discusión real aquí. Gracias.
Ahora me gustaría preguntarles a expertos reales sobre este tema (no soy diseñador web) por qué el diseño de ancho fijo sigue siendo tan popular y si hay realmente buenas razones para ello. (También puede señalar razones en contra de esto).
¿Es demasiado difícil diseñar su diseño de forma relativa (desde el principio)? Parece que algunas personas incluso olvidaron cómo hacerlo .
¿Tiene razones reales como la legibilidad y simplemente no sabe cómo manejarlo correctamente? Aquí me refiero a las piezas de sabiduría, como que es más difícil leer líneas más largas (es por eso que los periódicos usan columnas), pero luego, se debe dar ancho usando
emyex.¿Estás obligado por algunas viejas pautas ? En la vejez oscura del HTML, la gente hizo muchas cosas mal; ahora todos finalmente usan CSS, pero quizás este solo se quedó pegado.
¿O eres como yo, preguntándome por qué todo el mundo lo está haciendo "mal"?
Para ilustrar el problema, primero quiero dar capturas de pantalla de ejemplos negativos:
- StackOverflow (aquí ni siquiera puedo ver lo que haría que sea difícil arreglarlo)
- Filmstarts (un sitio web en alemán que no se puede leer, si no me llevo un vaso de lectura)
Y aquí hay un ejemplo positivo. Parece un sitio fijo típico (incluso con bordes transparentes), pero no lo es:
Sitio web en Wiki software - Foros asociados
¿Qué piensas?
Ahora me gustaría preguntarles a expertos reales sobre este tema (no soy diseñador web) por qué el diseño de ancho fijo sigue siendo tan popular y si hay realmente buenas razones para ello.
Ah, tanto subjetivo como argumentativo. Estoy seguro de que mi argumento no te convencerá, pero esta es una buena razón, en mi humilde opinión:
Presentación.
Al igual que una película, el director tiene una experiencia en mente para el espectador. Ellos enmarcan la película solo así. Mueven la acción a un ritmo determinado para la emoción que intentan invocar en el espectador. Aunque los DVD han tenido la función de "ángulo" desde el inicio, pocas películas han dado a los espectadores la oportunidad de ver la película desde un punto de vista diferente, y si tienen ese punto de vista todavía estaba bajo el control del director.
Ahora, cualquier savia vieja puede arrojar un sitio web, y en su mayor parte no están interesados en nada más que el contenido.
Pero los diseñadores reales entienden completamente que el diseño debe ser entendido como un todo. Un diseño amplio tiene un impacto muy diferente en las personas que una disposición de múltiples columnas o delgada. Los ojos del lector se mueven en un patrón determinado, y el texto está destinado a llevar al lector por un camino.
Aquellos que afirman que cada diseño debe tener ciertas características son miopes. No existen "reglas" universalmente verdaderas, y tratar de hacer que una disposición en expansión sea una regla es, en el mejor de los casos, miope y, en el peor de los casos, arrogante.
-Adán
Legibilidad y Previsibilidad
Necesita saber cómo se mostrarán las cosas para asegurarse de que sean legibles y agradables a la vista. Al usar un ancho fijo, usted sabe exactamente (casi exactamente debido a la compatibilidad con varios navegadores) lo que verán sus usuarios.
Sin embargo, los diseños de ancho fijo serían una cosa del pasado si los navegadores pudieran admitir correctamente exactamente 2 propiedades de CSS:
min-ancho
anchura máxima
Eso permitiría a los diseñadores diseñar sitios web que serían flexibles y predecibles . No más sorpresas y los usuarios pueden usar la resolución que deseen.
"Tiene una resolución de 1920x1200, por lo que todos los sitios de ancho fijo desperdician espacio. El factor de forma es solo 15". Así que tengo que usar fuentes más grandes y el texto ya no cabe en estos diseños repletos, a veces incluso obstruido por otros elementos ".
Hay una buena razón para ello. Si el párrafo se estira demasiado, se vuelve más difícil de leer. Los humanos necesitan un "descanso" después de aproximadamente 15 a 20 palabras y eso es EXACTAMENTE por qué no tenemos libros que sean muy amplios.
La resolución más alta le permite tener MÁS detalles PERO también depende de CÓMO usa el espacio. Nunca maximizo el navegador y las PC están diseñadas para la multitarea de ventana, no UNA ventana a la vez.
Aquí están mis $ 0.02 y valen exactamente lo que pagaste por ellos (y si ese no es un ejemplo perfecto de la situación económica actual ... :-))
El diseño de un sitio web debe estar dictado por la experiencia general del usuario. Esto está en parte determinado por la accesibilidad, en parte por el diseño, en parte por la funcionalidad:
- Accesibilidad: como señalaron varias personas, permitir que el sitio web use todo el ancho del navegador sin ningún control puede dar como resultado líneas bastante largas que dificultan su lectura [1]. Hacer el diseño automático del texto en múltiples columnas es una posible respuesta a este problema, pero es realmente difícil de lograr con CSS (esa debe ser la peor herramienta para hacer diseño de la humanidad que se haya ideado, pero ese es un tema aparte) y está plagada de otros problemas. también.
Debo señalar que sí tiene un punto: la mayoría de los sitios web con ancho fijo no son buenos para DPI porque no tienen en cuenta el tamaño de fuente modificado. Sin embargo, ese no es un problema inherente del diseño de ancho fijo; Lo he visto con diseños fluidos también.
[1] No, no tengo una cita. Yo, sin embargo, he intentado leer en pantalla completa en mi 24 "1920x1200 96dpi [2] y tengo que decirte que, después de 15 minutos, mi cuello está sufriendo calambres por el constante giro de mi cabeza.
[2] El usuario típico aún ejecuta 1024x768 o 1280x1024 (según la instrumentación del producto en el que trabajo, con aproximadamente un poco menos de 10 mln de instalación para la última versión). Entonces sí, no soy el usuario típico.
Diseño: la mayoría de los diseños modernos son muy ricos en elementos gráficos y de video. La mayoría de los elementos gráficos no se adaptan bien con el reflujo del documento y el video no se escala en absoluto. (Una vez más culpé a CSS por esto - su soporte para el cambio de tamaño dinámico de las imágenes carece de algunas operaciones básicas y no hay absolutamente ningún soporte para construir y controlar el árbol visual. Pero me estoy desviando otra vez :-)) Como tal, los diseñadores optan por para el enfoque más fácil.
Funcionalidad: el diseño fluido es realmente bueno para tratar fragmentos de texto grandes como documentos. Sin embargo, bastantes sitios web modernos son en realidad aplicaciones, no documentos. Tienen múltiples elementos y controles, y al aumentar el área en la que estos elementos se escatiman, es más difícil para el usuario mantenerlos enfocados.
Ejemplos de pareja:
- dos grupos de control que están alineados en el extremo izquierdo y el derecho estarán demasiado alejados el uno del otro en el ancho de pantalla completa. Nota: eso se puede aliviar eligiendo siempre mantener todos los controles agrupados, como lo hacen la mayoría de las aplicaciones de escritorio (casi todas las aplicaciones de escritorio mantienen todas las barras de herramientas alineadas a la izquierda).
- una imagen / video y texto asociado debajo de ella. En pantalla completa hay dos enfoques posibles para el diseño de fluidos: a) escalar la imagen a todo el ancho, en cuyo punto el texto se pierde visualmente b) dejar la imagen con el mismo ancho, pero dejar que el texto fluya a todo lo ancho, a señalar que la imagen está visualmente perdida.
Supongo que mi punto es que el diseño fluido no es el Santo Grial de todos los diseños y hay escenarios en los que no es aplicable. El diseñador y el desarrollador de la aplicación web deben elegir el diseño adecuado e implementarlo para que satisfaga las necesidades de los usuarios objetivo, ofrezca la mejor experiencia de la funcionalidad del producto y se adapte al entorno del usuario.
Creo que la pregunta no debería ser "¿Por qué elegirías un diseño de ancho fijo?" debería ser "¿por qué no?"
En primer lugar, debe atender el denominador común más bajo. Muchos desarrolladores se ejecutarán en pantallas con resoluciones como 1680x1050, 1920x1200 y 1280x1024. Algunos usuarios usarán 1024x768, que personalmente considero la resolución más baja que necesita atender (gracias a Dios ya no es 800x600). Si arregla el ancho a 960-1000 píxeles, entonces no se ejecuta el problema de los desarrolladores que, involuntariamente, crean páginas que no se pueden ver sin desplazarse en un monitor con menos de 1600 píxeles (ancho). Créame, sucede.
El diseño en cualquier página web no trivial es difícil. Agregue compatibilidad con varios navegadores para que su página no solo funcione, sino que se vea razonablemente consistente y sea un gran problema. Ahora intenta lanzar en ancho variable y se pone mucho peor si no imposible. Mire también la rentabilidad: ¿a quién beneficiará? Una pequeña minoría de usuarios que tienen altas resoluciones y realmente desean extender ese contenido en toda la pantalla. Tengo un monitor de pantalla ancha y no voy a maximizar mi navegador, por ejemplo. Muchas personas son como yo en este aspecto.
Considera otro problema: CSS. CSS es bueno para muchas cosas, pero es un dolor real en muchos otros. Por una cosa. Ahora, aparte de las diferencias del modelo de la caja del navegador, todavía hay muchas peculiaridades con la forma en que los diferentes navegadores manejan CSS e incluso si no hubiera, hay muchas cosas triviales que CSS no puede hacer y la única solución es hacer cosas por píxel.
Como ejemplo concreto, estoy haciendo algunas tablas en este momento que están a punto de explotar. Estoy recargando los contenidos con una llamada Ajax y reemplazando los contenidos. Ahora, al principio, intenté corregir el ancho de las columnas con porcentajes. Hacerlo de esta manera sería un requisito previo para no fijar el ancho. Firefox los trató como una sugerencia y los cambiaría de tamaño de todos modos, incluso cuando podría decirse que no era necesario. No obtuve resultados satisfactorios hasta que arreglé los anchos en píxeles.
Al final del día, ningún sitio web realmente se preocupa si se extiende a través de 1600 píxeles o no. A eso se reduce todo.
El punto de poder ajustar el tamaño de la ventana del navegador es ver mejor el contenido de una página web, de la manera que mejor se adapte a su situación. Si la página no se va a ajustar, ¿por qué no simplemente hacer que las ventanas del navegador tengan un tamaño único y fijo?
Si tengo un monitor grande, quiero poder extender mi ventana y hacer que el contenido la llene correctamente. Si necesito espacio para otra ventana, quiero poder reducir la ventana de mi navegador y hacer que el contenido se ajuste correctamente cambiando el diseño (hasta cierto punto mínimo, y luego cambiando a una barra de desplazamiento, por supuesto).
En mi experiencia, es por dos razones:
1) Velocidad: por lo general, es más rápido escribir una página web en la que está fijo, en lugar de intentar escribir una que cambie el tamaño correctamente en más de un número pequeño de resoluciones.
2) El diseñador del sitio web no es el máximo aprobador de lo que entra en producción: si tratas de trabajar con un flujo en lugar de un diseño fijo, obtienes preguntas sobre por qué se ve diferente en la PC de Sallys frente a los Grandes jefes, y ¿Por qué no puedes mover esto aquí, etc., que es más fácil de arreglar moviéndote a un diseño fijo?
He trabajado con muchos artistas. Diseñan un diseño para ser agradable y claro. Quieren que la presentación coincida con lo que diseñaron. El diseño dirigido por el artista conduce al ancho fijo. Para los sitios de folletos, el ancho fijo tiene mucho sentido.
Para sitios con contenido que cambia rápidamente (noticias o compras, o la mayoría de los elementos impulsados por un CMS), prefiero diseños fluidos de pantalla completa.
Los diseños de ancho fijo son perfectamente aceptables.
Los diseños de fluidos son agradables, pero son más difíciles de implementar, especialmente si hay más de dos columnas y el orden div de origen es importante.
La longitud de la línea es un problema relacionado con la legibilidad, pero esto interactúa con el tamaño de la fuente. Por lo tanto, debe equilibrar el ancho con los posibles tamaños de fuente en la pantalla.
Hoy en día, es razonable suponer que 1024 x 768 y más es la gran mayoría del mercado de usuarios de escritorio, por lo que puede diseñar con seguridad para un ancho fijo de 960 px, para el tipo de medio de pantalla.
Un par de restricciones importantes:
- asegurar que el usuario nunca requiera el desplazamiento horizontal
- si las conversiones son un problema, asegúrese de que las cosas en las que se puede hacer clic, particularmente las "llamadas a la acción" o cualquier otro elemento que haga que su caja registradora sea "ka-ching", no caigan a la derecha del 770º píxel, por las dudas.
Pero otra consideración es los medios portátiles. Debería proporcionar un CSS alternativo para el tipo de medio portátil. Muchas de estas pantallas tienen menos de 400 px de ancho.
Delivering a site that looks good and functions on a wide variety browsers, devices, display widths and viewport sizes is a moving target and continuous challenge.
As regards the filmstarts.de site, it is definitely a mess, but the problem is not that it is a fixed width layout, but rather with how the layout is designed and implemented. There are good and bad implementations of fixed width layouts, just like there are good and bad implementations of fluid layouts, or semi-fluid layouts with fixed width elements, etc.
Puede intentar acercar la imagen. La mayoría de los navegadores modernos harán zoom en toda la página de forma predeterminada, no solo en el texto. Esto conserva el diseño de la página y usa más de su pantalla. Por lo general, el atajo es ctrl + + y ctrl + -. Funciona bien en mi computadora portátil, al menos
Si desea que ocupe más espacio en pantalla, use una resolución más baja. Esto puede ser útil si está mostrando un sitio web en un gran monitor en una pared para su visualización pública. De lo contrario, tome el theomega @ theomega y use el resto de su pantalla para otras ventanas.
En cuanto a un poco (de lo muy poco) de lo que sé sobre diseño web y sitios de ancho fijo:
- Tienden a hacer un buen uso del espacio en blanco y dibujan su enfoque en la página. Tapar la página llenando cada esquina con contenido es lo que los diseñadores llaman "intimidación visual". Es difícil descubrir qué es importante versus qué no.
- Se sienten más "acabados", como una imagen en un marco en lugar de una foto impresa con el pulgar clavada en un tablón de corcho.
Sospecho que la mayoría de los desarrolladores web optan por el ancho fijo porque es mucho más fácil desarrollar dicho sitio (además, muchos sistemas de administración de contenido solo ofrecen un diseño de ancho fijo). Obtener un diseño dinámico para que funcione bien y correctamente en diferentes navegadores es más complicado, pero es definitivamente factible (recientemente estoy trabajando en ese tema ;-).
Y estoy de acuerdo con usted: quiero que las páginas web ajusten dinámicamente su contenido al tamaño del navegador con el que me gusta trabajar como ''cliente'' (ya sea pequeño o grande). No me gusta ser condescendiente con "no usar mi navegador en modo de pantalla completa" ni nada por el estilo ...
Una de las mayores preocupaciones que soluciona la resolución del ancho de un sitio web es la legibilidad. Si permite que un sitio sea arbitrariamente amplio y tenga un bloque de texto que use todo ese ancho, será muy difícil que la gente lo lea. Si aumenta el tamaño de la fuente para compensar, destruirá la experiencia para las personas con pantallas más pequeñas.
Por otro lado, si su contenido es visual o modular y puede hacer que ocupe toda la página de manera más inteligente, es posible que tenga un caso para un diseño totalmente fluido.
Pero estoy de acuerdo con los otros que cuestionan por qué maximizarías un navegador en una pantalla tan grande. ¿Por qué no hacer que la ventana de tu navegador sea más pequeña? Serás más productivo y dejarás de preocuparte por eso al mismo tiempo.
Muchos navegadores hacen un mejor trabajo escalando sitios web para que sean más grandes de lo que solían hacerlo; Firefox 3, al menos, hace crecer toda la página cuando amplía , sin interrumpir el diseño.
Y aquí, como era de esperar, aparece el típico canard: "las líneas largas son demasiado difíciles de leer".
[Cita requerida] , amigos.
Consulte http://webusability.com/article_line_length_12_2002.htm para obtener un resumen de la investigación real en esta área. Varias de estas, más http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp , encuentran que aunque los usuarios expresan una preferencia por longitudes de línea moderadas, las velocidades de lectura no disminuyen bruscamente con las líneas "largas". ; de hecho, muchos muestran mayores velocidades con las configuraciones más largas.
Siempre y cuando no sea ridículamente largo , y teniendo cuidado de usar una cantidad decente de líneas principales, largas no son en general un problema real en los anchos de navegador típicos de hoy y los tamaños de fuente predeterminados. (Si eres uno de esos diseñadores a los que les encanta usar minúsculos para todo, podría ser un problema, pero ya estás imposibilitando la lectura con el texto flyspeck. ¡Detente!)
Por lo tanto, dado que solo es una opción de preferencia del usuario que prefiere las líneas medianamente cortas, permítanos a los usuarios decidir cuánto espacio de pantalla queremos darle al sitio web para que podamos hacer nuestro trabajo. Somos los mejor equipados para saber. Si decides que sabes definitivamente que lo mejor es que desperdicies espacio o, si lo has adivinado durante demasiado tiempo, nos haces desplazarte hacia atrás y hacia adelante para leer el texto, y eso realmente es una pesadilla de legibilidad.
Si desea protegernos de nosotros mismos, puede comprometerse especificando un ancho mínimo y un ancho máximo en unidades ''em'' para que la página responda al diseño líquido, pero no se estire hasta los extremos.
Pero, por lo demás, la mejor razón para diseñar un ancho fijo es que es más fácil, especialmente para alguien con una vista fija de la red 2D del mundo y herramientas de diseño visual estáticas como Photoshop.
Ya es complicado crear un sitio web que se muestre correctamente en todos los navegadores populares; si también desea que se visualice correctamente en todos los tamaños de texto, es bastante trabajo. Muchos desarrolladores web diseñan sus sitios para el tamaño de fuente predeterminado e intentan admitir fuentes que son un poco más grandes o un poco más pequeñas. (Puede que le interese esta pieza fechada pero relevante de Jakob Nielsen).
En cuanto a los sitios de ancho fijo, es difícil de decir. Personalmente, sospecho que a muchos diseñadores web les gusta sentir que tienen mucho control sobre su apariencia, y piensan que el sitio se ve "feo" cuando lo estiras demasiado, por lo que no te dejan hacer. eso. Probablemente no sea sabio, pero ahí lo tienes.
[Olvide mi mención de la gestión de ventanas, no estaba en el tema]
Actualmente ejecuto una gran comunidad de Internet y cambiaremos al diseño de ancho fijo (para 1024px) lo antes posible porque solo tenemos problemas con un diseño de ancho dinámico: no puedes confiar en nada y (el problema más grande es el mío) el texto llega a ser largo, por lo que solo hay unas pocas líneas, pero las líneas en sí mismas son muy largas .
Navegadores con pestañas
Como utilizo un navegador con pestañas para el uso diario, cambiar el tamaño de mi ventana cada vez que cambio de pestaña es en realidad un poco molesto. Tengo la ventana configurada para el ancho máximo utilizable para mis propósitos, y para acomodar la pestaña "más grande" que está abierta. Para las pestañas restantes, tener diseños fluidos es realmente molesto y molesto. Los elementos y el texto saltan y cambian de posición según cómo haya cambiado el tamaño de mi ventana para otra pestaña. Además, los diseños fluidos resultan en bloques incómodamente anchos de texto corto (verticalmente).
Para mí, es mucho más fácil como lector mantener el seguimiento de mis ojos correctamente en bloques de texto más estrechos con muchos desplazamientos verticales, y es mucho más fácil cuando los sitios con los que estoy familiarizado permanecen del mismo tamaño para que el diseño y el posicionamiento sean predecibles. , independientemente de lo que he hecho a mi ventana para acomodar otras pestañas. De hecho, solía ser un gran admirador de los diseños fluidos, pero cada vez veo más que prefiero los diseños fijos ahora que uso un navegador con pestañas.
A major point for using fixed width is that the designer can actually control the way the webpage looks irrespective of browser environment. I see two reasons to use FW:
- The designer wants the webpage to look all the same.
- The designer lacks time/wish/... to test their page in different modes and in different browsers, and just avoids the risk of webpage layot starting flying around.
As far as I''m aware while all the reasons cited are valid, the primary reason is that a lot of machines in monolithic institutions like banks and government orgs are still on fixed and somewhat archaic low resolutions. It''s just the lowest common denominator sadly.
El diseño líquido que usa% como unidad se puede adaptar a cualquier pantalla.
Algunos diseños deben usar un diseño de columna fijo. Si hay una tabla o imagen en la columna, debe usar una columna fija, o la tabla o imagen dividirá la columna en diseño líquido. En diseños de cuadrícula con alturas de la cuadrícula normalmente fijadas, es mejor usar una columna fija o los anchos pueden ser desiguales.
Es hasta el contenido de la página web para usar una columna elástica o un diseño de columna fija.
I am frequently forced too. None of the 3 developers here has a strong background in design, and the dictated rules and implementations we strive for reflects this. It is an area I want to improve in.
I didn''t make fixed-size layout until I switched to a 32 inches monitor. It is very hard to read the text if the lines goes over 32 inches. I''ve learned appreciate text that do not span over more than 1,000 pixels, and I have switched to fixed layout since.
But I agree that reducing the content width to < 800px is a pain when you have a big monitor.
I just came across this site, which actually has a link in the top right corner that lets you switch between fixed and fluid.
I personally like fixed width sites better. I am not forced to mess with my browser window to get a line size I can deal with. I personally find very long lines very hard to read. I also just think it looks better although that is 100% completely subjective.
I have designed and worked with both. Some aspects of variable width sites make displaying data easier. The only problem I have had with them is due to right aligned navigation which was a little messy when it could move based on the user''s browser setting.
My final answer - both are fine and each have their place .
I put it down to laziness. Fixed width layouts are simply easier to design and make look nice because you do not need to worry about the size changing. This, for example, makes it really easy to add images, since you know what size the layout will be.
Personally, fixed-width websites really irritate me. I like to use large monitors. I paid a lot of money for them, so I''d like to make use to make use of them instead of having most of it be left blank. This is made even worse by sites which refuse to get larger if I increase the font size. I don''t have the best eyesight and often use larger fonts to read text on websites and nothing is worse than a fixed-width layout leaving me with three words per line and a mostly blank screen...
Long lines of text can be difficult to read. For the website I work on we limit the width for usability and readability. We have also designed our site to scale well using CTRL-+ to zoom.
Most users lack understanding of how to use a browser properly. When the day come such that users actually know how to use a computer then you will understand that fluid width is the obvious choice for web sites.