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

218

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?

Adán
fuente
1
if (a == 1) {+ a} else {'nawp'}
Sphvn

Respuestas:

52

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.

Bobby Ortiz
fuente
17
¿Cómo lo mezcla CNN?
Alix Axel
43

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.
Nick Presta
fuente
¿Algún comentario sobre la compatibilidad del navegador para eso?
HaveAGuess
Gracias, estoy probando la red reactiva de getskeleton ..
HaveAGuess
37

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.

Lucas Jones
fuente
24
"No es particularmente difícil hoy en día tampoco", ruego diferir. IE6 sigue siendo muy real. Escribir un diseño fluido que funcione en este pequeño f @@@ er es un desafío carnoso. Intenta buscar "css holy grail". Grrr.
Spender
44
Creo que, como todos los desarrolladores web, me gusta ignorar IE6 la mayor parte del tiempo. No se deshace de él, pero me hace más feliz :). (Sé que estoy evitando el comentario, pero no puedo pensar en ninguna respuesta en este momento.)
Lucas Jones
91
DEJE DE APOYAR IE6
Jason
21
Sí, en utopía, todos DEJAREMOS DE APOYAR IE6, pero generalmente el dinero dice lo contrario.
gastador
13
Según w3schools.com/browsers/browsers_stats.asp , el 13% de la Web usa IE6, el 15% usa IE7. Esa es una buena razón para admitir IE6. La simple aversión idealógica no es suficiente para volcar IE6. Lo siento Jason
Paul Nathan
16

¡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.

Alex Baranosky
fuente
2
OK, entonces, ¿qué significa qué? ¿De qué lado estás discutiendo?
Mark
1
Significa que estoy argumentando a favor de los sitios fluidos, porque no podemos suponer que los usuarios sepan cómo cambiar el tamaño ellos mismos.
Alex Baranosky, el
¿No tiene que cambiar el tamaño del navegador para decir que un sitio web es fluido? ¿Cómo podría alguien no saber cómo cambiar el tamaño de una ventana?
mk12
1
Sí, me refería a acercar :) Yo mismo acabo de acercar mi navegador por primera vez en mi vida hace 1 minuto.
Alex Baranosky
bueno, entonces tú eres el que no sabe cómo usar las computadoras
bevacqua
9

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

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.

August Lilleaas
fuente
y Wikipedia es difícil de leer en un navegador grande ya que los espacios entre oraciones no se escalan a medida que aumenta la longitud de la línea. Me resulta muy difícil escanear mi ojo de un lado a otro, ya que no hay "canal" que seguir mientras muevo el ojo de un lado a otro.
Ape-inago
8

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.

Elizabeth Buckwalter
fuente
6

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.

Elijah
fuente
5

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.

Jason
fuente
1
Siempre encajaría en mi navegador, en lugar de hacerme cambiar el tamaño. ¿Cómo sería eso una PITA? Hay casos en que los diseños gráficos complejos son difíciles de realizar con el diseño líquido, pero eso ciertamente no se aplica al diseño en gran medida espartano de SO.
bobince
2
sería una PITA porque todas las respuestas se extenderían por toda la página. Me alegra que el texto se ajuste a unos 500 píxeles. Es por eso que los libros son por lo general en la relación de anchura que son, porque los ojos de las personas se cansan después de un cierto punto que se mueve lateralmente ...
Jason
Eso no es una PITA. Así es como lo quiero. Si desea limitar las líneas muy largas, establezca max-width en em, pero 500 px en un tamaño de fuente típico no es largo. La poca investigación real que existe no respalda las longitudes de línea tradicionales basadas en impresión para la lectura en pantalla.
bobince
3
Preferiría que SO fuera fluido, yo mismo.
Nosredna
4

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.

allesklar
fuente
3

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)

Jani Hartikainen
fuente
Convenido. Tiendo a construir todos mis sitios en el rango amplio de 800 - 1200 px. Al mirar 1600 píxeles de ancho en una página, a menudo no hay suficiente contenido para distribuir y simplemente comienza a verse vacío.
womp
2

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!)

bobince
fuente
2

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.

Paul Nathan
fuente
2

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 .. :)

iAnuj
fuente
1

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.

Sergei
fuente
1

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

Narendra Kamma
fuente
0

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 ...

Tychoish
fuente
0

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"? , 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!"

Keith Williams
fuente
0

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.

luvieere
fuente
0

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.

Cabra descontento
fuente
Creo que las personas con pantallas de alta resolución están aprendiendo acerca de cómo configurar el zoom predeterminado, si construyes un ancho fijo del sitio, es posible que tengas que rediseñarlo en un año o dos
HaveAGuess
0

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.

shingokko
fuente