¿Vale la pena hacer sitios web fluidos? [cerrado]

Estoy creando un sitio web ahora y estoy tratando de decidir si debo hacerlo fluido o no. Los sitios web de ancho fijo son mucho más fáciles de hacer y también mucho más fáciles de hacer que parezcan consistentes.

Sin embargo, para ser honesto, personalmente prefiero mirar sitios web fluidos que se extiendan a todo el ancho de mi monitor. Mi pregunta proviene del hecho de que en la mayoría de los navegadores modernos puede mantener el control y desplazar la rueda del mouse para cambiar básicamente el tamaño de cualquier sitio web.

Entonces, ¿vale la pena crear un sitio web fluido?

Depende de tu audiencia y tu contenido.

Los siguientes son sitios que respeto y creo que son un ejemplo para imitar.

Ejemplos fluidos:

Amazonas

Wikipedia

Ejemplos estáticos:

manzana

eBay

MSN

Desbordamiento de pila

MSDN

¡Algunos lo mezclan!

CNN

Creo que prefiero la estática la mayor parte del tiempo. Es más fácil hacer que se vea bien en más navegadores. También es más fácil de leer.

Hacer que un sitio web sea fluido, pero agregar un atributo min / max-width parece ser lo mejor de ambos mundos, para mí. Apoya la fluidez, pero la limita a cierto ancho (por ejemplo, 800 px y 1200 px).

Depende de usted, aquí hay algunas cosas a considerar:

1. El texto es difícil de leer cuando las líneas son muy largas.
2. Su audiencia puede tener resoluciones más grandes o más pequeñas de lo normal, y elegir un ancho estático 'incorrecto' los molestará.
3. Mantener un sitio fluido puede ser, pero no tiene que ser mucho más difícil que su contraparte estática.

Absolutamente. Es un gran inconveniente para las personas con grandes monitores tener que cambiar el tamaño de la página. También puede ser un poco dudoso con algunos diseños. Pequeños inconvenientes, no importa cuán triviales, realmente pueden afectar las opiniones de las personas sobre su sitio.

Además, las netbooks tienen resoluciones extrañas que dificultan el diseño de sitios. Por ejemplo, estoy escribiendo esto a 1024x600.

Tampoco es particularmente difícil hoy en día (en los navegadores modernos), especialmente con min-y max-heighten CSS, y los nuevos gradientes, etc. en CSS3, por lo que el escalado de imágenes no será un problema tan grande en el futuro cercano.

En respuesta al comentario a continuación, creo que los profesionales superan a los contras en este caso particular: IE6 es un problema en todas partes. Solo tenemos que lidiar con eso.

¡Debes darte cuenta de que la mayoría de los usuarios de computadoras ni siquiera SABEN cómo hacer zoom en el navegador! La mayoría de los usuarios están tan lejos de la comprensión de las computadoras que tenemos. Siempre tenemos que recordar ese hecho.

Aplicaciones basadas en texto: no . Aplicaciones basadas en tablas: sí .

Pros de diseños de fluidos

1. Las personas con grandes monitores pueden usar su pantalla de bienes raíces.
2. Más fácil para los usuarios con grandes monitores cuando tienes mucha información en tu página.

Contras de diseños de fluidos:

1. Una columna de texto de ancho fluido es difícil de leer si es demasiado ancha. Hay una buena razón detrás del uso de columnas en los periódicos: hace que saltar a la siguiente línea sea mucho, mucho más fácil.
2. (Algo) difícil de implementar, debido a las limitaciones en CSS.

Si está mostrando datos tabulares (iTunes, db manager, ...), el ancho del fluido es bueno. Si está mostrando texto (artículos, páginas wiki, ...), el ancho del fluido es malo.

Desde la perspectiva de mi iPhone, el diseño de ancho fijo es problemático cuando se usan bloques de código. La barra de desplazamiento para bloques de código ancho no aparece, por lo que no puedo leer el extremo derecho del bloque.

De lo contrario, creo que es una simple cuestión de qué tipo de sitio está diseñando y cómo se ve en pantallas y ventanas de diferentes tamaños. Como se mencionó anteriormente, hay una opción para establecer un ancho máximo, pero la misma advertencia se aplica a los bloques de código y los iPhones. He diseñado ambos, y no prefiero uno sobre el otro.

Sin embargo, es divertido ver moverse las cajas mientras juego con el tamaño del navegador con un diseño fluido, pero puedo divertirme fácilmente.

Lo más importante es considerar los casos de uso dominantes de su sitio web o aplicación. ¿Esperas que la gente lo use exclusivamente en dispositivos móviles? Teléfonos móviles, netbooks, computadoras de escritorio?

Eche un vistazo al "Diseño web receptivo" de Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/

Gran artículo que demuestra el uso de diseños verdaderamente fluidos utilizando consultas de medios. A veces es necesario construir un front-end separado para diferentes agentes de usuario, pero a veces las consultas de medios son la herramienta perfecta para atender múltiples resoluciones en diferentes agentes de usuario.

Depende de lo que intentes hacer. Echa un vistazo a SO. Es de ancho fijo y es genial. De hecho, si fuera fluido, sería un poco PITA. Algunos sitios se ven mejor con diseños fluidos, pero personalmente, iría con fijo a menos que tenga una buena razón para hacerlo.

Muchos puntos buenos en los comentarios, pero de su pregunta parece que realmente le gustan los diseños fluidos y desea crear uno, así que vaya, es su sitio, no tiene que ser como cualquier otro sitio en la web.

Solo tenga en cuenta las ventajas y desventajas de cada solución.

Hasta cierto punto, sí.

Hay un cierto ancho, donde el texto comienza a ser molesto de leer si es demasiado ancho. Fácil de probar si tiene un monitor grande, simplemente tome el bloc de notas y pegue algo de texto en él sin saltos de línea.

Sin embargo, al bajar a tamaños más pequeños, ser fluido puede ser una buena idea. Los navegadores de teléfonos móviles son cada vez más capaces de mostrar sitios web "normales" muy bien, pero a veces tienen un ancho limitado y, como tal, se benefician si su sitio puede caber en un espacio un poco más pequeño.

Personalmente, también me gusta mantener el navegador en mi monitor, pero solo a la mitad del ancho del monitor (24 "). Los sitios que se adaptan bien a eso son muy buenos.

Creo que es principalmente un caso de conveniencia para el usuario. No todos los sitios se beneficiarán de ser fluidos, pero creo que los sitios que tienen mucho contenido de texto son los que más se beneficiarán de él, al menos si son fluidos hasta un ancho máximo (digamos 800 px o lo que sea)

Si. El zoom de página es excelente, pero se usa principalmente para agrandar el texto, no para que el texto llene la ventana gráfica. Ciertamente, si el texto del cuerpo ya es demasiado ancho, al hacer zoom hacia abajo para ajustarlo, por lo general, será ilegible.

Necesita un diseño líquido si va a hacer que el texto se ajuste a la ventana gráfica, ya sea que esté o no ampliado.

Los diseñadores que intentan justificar los diseños de ancho fijo (*) a menudo exageran el punto de que "las líneas largas son difíciles de leer", pero en realidad no parece tener tanta fuerza en la pantalla como en el papel. Por supuesto, es importante establecer un buen inicio / altura de línea, y el ancho máximo se puede utilizar para inhibir los peores excesos de las líneas largas. (Configúrelo en unidades em relativas a la fuente). No obtiene el ancho máximo en IE6, pero ese no es el desastre que solía ser. (Puedes arreglarlo con un poco de JavaScript si realmente te importan esos tipos. A mí no).

(* que en realidad requieren menos trabajo para diseños altamente gráficos. Pero para un diseño más simple como, por ejemplo, StackOverflow's, no hay realmente ninguna razón para no volverse líquido. Tsk @SO, ¡eh!)

Prefacio: No es un artista web profesional.

Descubrí que hay demasiadas partes complicadas para que las cosas fluyan de la misma manera en los tamaños de teléfonos celulares y pantallas súper anchas, especialmente en cualquier cosa de complejidad razonablemente interesante.

Típicamente, diseño alrededor de tener un sitio de ancho fijo de alguna manera; generalmente acotado en [600,1200].

También encuentro que las columnas de contenido súper anchas son una molestia para leer. Me parece recordar que hay algunas investigaciones que sugieren un número óptimo de palabras por línea de columna.

Puedes hacerlo así.

# Haga que el diseño principal sea fluido y aplique ' max-width: 1140px ' y céntrelo .

De este modo, no habrá "largas líneas" de texto en pantallas más grandes y la solución adecuada de la página web en las más pequeñas (excluyendo 800x *** y menores).

He implementado este método en mis nuevos proyectos y está funcionando de maravilla.

atb .. :)

Creo que la decisión fluido / fijo debe basarse también en el contenido del sitio web:

1. Para sitios con grandes cantidades de información simple (como portales de noticias), es mejor usar un diseño fluido.

2. Los servicios web se ven y funcionan mejor en dimensiones fijas, para que siempre sepa dónde se encuentran los elementos de la interfaz en sus lugares y no se mueven constantemente.

Sí, vale la pena crear sitios web fluidos
Como dijiste, se ve bien y razonable cuando planificas adecuadamente en la fase de diseño.

Su duda sobre el impacto de Ctrl + Barra de desplazamiento no es gran cosa. Esta característica es principalmente para accesibilidad, para hacer que el texto sea más legible al aumentar el tamaño.

Sin embargo, si menciona todos sus tamaños en píxeles (px), no sucederá. El ajuste adecuado ocurre solo cuando usa "em" para especificar el tamaño. Entonces tienes una manera de encenderlo / apagarlo

Soy un gran fan de fijo a <800px ... es más fácil de leer columnas estrechas, y será trabajar en cualquier lugar. Es decir, si está intentando crear un sitio web que presente hipertexto ... Los sitios web que presentan aplicaciones frontales, creo que otra lata de gusanos por completo ...

El diseño fluido, realmente fluido, es difícil. Muy duro. No es solo una cuestión de ancho de página: ¿se escalan sus fuentes y todo se escala con ellas? Idealmente:

• Los tamaños deben definirse en emlugar depx
• ... y eso se aplica a los tamaños de los elementos, no solo a las fuentes.
• Dado un cambio en el tamaño de fuente o nivel de zoom, los elementos de la página deben ser del mismo tamaño entre sí

Nuestro producto principal es fluido, y desde mi punto de vista como diseñador es un dolor, especialmente porque involucra mucho contenido generado por el usuario.

Por un lado, las imágenes: en un sitio de ancho fijo, puede tener una imagen que ocupa la mitad del ancho y se ve muy bien. En un sitio fluido, es probable que esta imagen se pierda en un mar de espacios en blanco, y se vea bastante sola.

La vida debería ser más fácil una vez border-radiusy otras propiedades CSS3 entran en juego más, pero lamentablemente nuestra audiencia principal son los trabajadores del gobierno, que TODOS TODOS TODAVÍA UTILIZAN IE F @! * ING 6!

Para responder a la pregunta, "¿vale la pena"? Sí , si lo haces bien.

Aquí hay un escenario: elija un sitio de ancho fijo: su jefe lo muestra a un cliente en su nueva computadora portátil 1920x1600, luego se queja de "¡cómo se ve todo pequeño en la pantalla de este tipo!"

Creo que es bueno poder escalar bien en la pantalla de un usuario, en lugar de hacer que los usuarios se desplacen y hagan zoom. En un momento en que los usuarios navegan por la Web desde una variedad tan amplia de dispositivos, desde teléfonos inteligentes hasta PC ultramóviles, cada uno con su propia resolución, posiblemente no estándar, creo que es importante mantener la experiencia del usuario a un alto nivel cuando su sitio se ve en tales pantallas. Con respecto a la longitud del texto, podría estar limitado por una cierta proporción, por lo que encajaría perfectamente en el diseño. Creo que también hay marcos que pueden ayudar a escribir un sitio de manera fluida y ayudar a mantener la codificación.

Voy a ir contra la mayoría y decir NO. Razonamiento: los sitios fluidos como Wikipedia son una pesadilla para leer en pantallas grandes debido a su larga longitud de línea (aunque sus citas hacen que sea difícil de leer en el mejor de los casos).

El problema realmente ocurre porque no existe un mecanismo para dimensionar el texto en relación con la resolución de la pantalla. Si pudieras agrandar automáticamente el texto en resoluciones más grandes, podrías mantenerte más cerca de los 80 caracteres por línea que generalmente se consideran los mejores para la legibilidad.

También está el problema de las imágenes y otros elementos de tamaño fijo. Puede tener imágenes grandes y dejar que el navegador las reduzca si es necesario, pero luego se encuentra con otros problemas, como tiempos de descarga mucho más largos y problemas de calidad de imagen en muchos navegadores.

Soy fanático de los sitios que tienen un ancho máximo fijo de entre 800px - 1000px, pero también puedo reducirlo para poder leer el contenido sin desplazarme de lado a lado y sin alejar el zoom porque a menudo el texto se vuelve demasiado pequeño para leer y me duelen los ojos. Por lo tanto, esto normalmente es lo que quiero, porque quiero construir sitios de los que pueda estar orgulloso.