para - paginas web en html hechas
¿Vale la pena hacer sitios web más fluidos? (20)
¡Tienes que 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 hay que recordar ese hecho.
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 más fáciles de hacer que parezcan consistentes.
Sin embargo, para ser honesto, personalmente prefiero mirar sitios web fluidos que se extiendan hasta el ancho completo 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 básicamente cambiar el tamaño de cualquier sitio web.
Entonces, ¿vale la pena crear un sitio web fluido?
Absolutamente. Es un gran inconveniente para las personas con monitores enormes tener que cambiar el tamaño de la página. También puede ser un poco dudoso con algunos diseños. Los pequeños inconvenientes, sin importar cuán triviales sean, pueden afectar la opinión 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 en 1024x600.
Tampoco es particularmente difícil hoy en día (en los navegadores modernos), especialmente con max-height min- y max-height en CSS, y los nuevos gradientes, etc. en CSS3, por lo que la ampliación de la imagen no será un problema tan grande en el futuro cercano.
En respuesta al comentario a continuación, creo que las ventajas superan a las desventajas en este caso particular: IE6 es un problema en todas partes. Solo tenemos que lidiar con eso.
Aplicaciones basadas en texto: No. Aplicaciones basadas en tablas: sí .
Pros de diseños fluidos
- Las personas con grandes monitores pueden usar su pantalla de bienes raíces.
- Más fácil para usuarios con monitores grandes cuando tiene mucha información en su página.
Contras de diseños fluidos:
- 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 más fácil.
- (Algo) difícil de implementar, debido a las limitaciones en CSS.
Si está mostrando datos tabulares (iTunes, administrador de db, ...), el ancho del fluido es bueno. Si está mostrando texto (artículos, páginas wiki, ...) el ancho del fluido es malo.
Creo que es bueno poder escalar bien en la pantalla de un usuario, en lugar de hacer que los usuarios se muevan y hagan zoom. En un momento en que los usuarios navegan por la web desde una amplia variedad de dispositivos, desde teléfonos inteligentes hasta PC ultra móviles, cada uno con su propia resolución, posiblemente no estándar, creo que es importante mantener la experiencia del usuario en un nivel alto cuando Su sitio es visto en tales pantallas. Con respecto a la longitud del texto, podría estar limitado por una cierta proporción, por lo que encajaría muy bien en el diseño. Creo que también hay marcos que pueden ayudar a escribir un sitio de una manera fluida, y ayudar con la capacidad de mantenimiento de la codificación.
Creo que la decisión fluida / fija debe basarse también en el contenido del sitio web:
Para sitios con grandes cantidades de información simple (como portales de noticias), es mejor utilizar un diseño fluido.
Los servicios web tienen una mejor apariencia y funcionan en dimensiones fijas, para que siempre sepa dónde se ubican los elementos de la interfaz en sus lugares y no se muevan constantemente.
Depende de lo que estés tratando de hacer. Echa un vistazo a SO. Es ancho fijo y es genial. De hecho, si fuera fluido, sería un poco como un PITA. Algunos sitios se ven mejor con diseños fluidos, pero personalmente, lo arreglaría a menos que tenga una buena razón para hacerlo.
Depende de tu audiencia y de tu contenido.
Los siguientes son sitios que respeto y creo que son ejemplos para imitar.
Ejemplos de fluidos:
Ejemplos estáticos:
Home
Algunos se mezclan!
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.
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 se muestra, por lo que no puedo leer el extremo derecho del bloque.
De lo contrario, creo que es una cuestión simple de qué tipo de sitio estás 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 iPhones. He diseñado ambos, y no prefiero uno sobre el otro.
Aunque es divertido ver cómo se mueven las cajas mientras juego con el tamaño del navegador con un diseño fluido, pero puedo divertirme fácilmente.
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
emen lugar depx - ... y eso se aplica a los tamaños de elementos, ¡no solo a las fuentes!
- Dado un cambio en el tamaño de fuente o el nivel de zoom, los elementos de la página deben ser del mismo tamaño en relación a los demás
Nuestro producto principal es fluido y, desde mi punto de vista, es un problema como diseñador, especialmente porque involucra una gran cantidad de contenido generado por el usuario.
Por un lado, imágenes: en un sitio de ancho fijo, puede tener una imagen que ocupe la mitad del ancho y se vea genial. En un sitio fluido, esta imagen tiene la misma probabilidad de perderse en un mar de espacios en blanco, con un aspecto bastante solitario.
La vida debería ser más fácil una vez que border-radius y otras propiedades de CSS3 entren en juego más, pero, lamentablemente, nuestra audiencia principal son trabajadores del gobierno, que todos, TODO LO UTILIZA ESE F @!
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 sobre "¡cómo se ve todo pequeño en la pantalla de este tipo!"
Hacer que un sitio web sea fluido, pero agregar un atributo de ancho mínimo / máximo parece ser lo mejor de ambos mundos, para mí. Es compatible con la fluidez, pero la limita a un cierto ancho (por ejemplo, 800 px y 1200 px).
Depende de usted: aquí hay algunas cosas que debe considerar:
- El texto es difícil de leer cuando las líneas son muy largas.
- 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á.
- Mantener un sitio fluido puede ser, pero no tiene que ser mucho más difícil que su contraparte estática.
Hasta cierto punto, sí.
Hay un cierto ancho, donde el texto comienza a volverse molesto de leer si es demasiado ancho. Fácil de probar si tienes un monitor grande, solo toma el bloc de notas y pega un poco de texto en él sin saltos de línea.
Sin embargo, cuando se reduce 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 restricciones de ancho, y como tales, se benefician si su sitio puede caber en un espacio un poco más pequeño.
Personalmente, también me gusta tener el navegador en mi monitor, pero solo en la mitad del ancho del monitor (24 "). Los sitios que se adaptan muy bien son muy buenos.
Creo que es sobre todo un caso de conveniencia del usuario. No todos los sitios se beneficiarán de ser fluido, pero creo que los sitios que tienen mucho contenido de texto son los que más se beneficiarán, al menos si son fluidos hasta un ancho máximo (por ejemplo, 800 px o lo que sea)
Hay muchos puntos positivos en los comentarios, pero por 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 los pros y contras de cada solución.
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 a "Responsive Web Design" de Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Gran artículo que demuestra el uso de diseños realmente fluidos utilizando consultas de medios. A veces es necesario crear un front-end separado para diferentes agentes de usuario, pero a veces las consultas de medios son la herramienta perfecta para dar servicio a múltiples resoluciones en diferentes agentes de usuario.
Prólogo: No es un artista web profesional.
Descubrí que hay demasiados fragmentos incómodos para hacer que las cosas fluyan solo en los tamaños de teléfono móvil y súper-pantalla ancha, especialmente en cualquier complejidad razonablemente interesante.
Típicamente, diseño alrededor de tener un sitio de ancho fijo de alguna manera; Por lo general limita a [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 .
Por esto no habrá "líneas largas" de texto en pantallas más grandes y la liquidación adecuada de la página web en las más pequeñas (excluyendo 800x *** y versiones inferiores).
He implementado este método en mis nuevos proyectos y está funcionando a la perfección.
atb .. :)
Sí, vale la pena crear sitios web fluidos.
Como dijo, se ve bien y es razonable cuando planifica adecuadamente en la fase de diseño.
Su duda sobre el impacto de Ctrl + Scrollbar no es un gran problema. Esta función 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 correcto ocurre solo cuando se usa "em" para especificar el tamaño. Así que tienes una manera de encenderlo / apagarlo
Sí. El zoom de la 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, el zoom hacia abajo para ajustarlo generalmente lo hará ilegible.
Necesita un diseño líquido si va a hacer que el texto se ajuste a la vista, ya sea que se amplíe o no.
El hecho de que las largas filas sean difíciles de leer suele ser exagerado por los diseñadores que intentan justificar los diseños de ancho fijo (*), pero en realidad no parece tener tanta fuerza en la pantalla como en el papel. Por supuesto, establecer un buen inicio / altura de línea es importante, y el ancho máximo puede usarse para inhibir los peores excesos de las líneas largas. (Establézcalo en unidades em de fuente relativa). No obtiene el ancho máximo en IE6, pero ese no fue el desastre que alguna vez fue. (Puedes arreglarlo con un poco de JavaScript si realmente te importan esos tipos. No lo hago).
(* que son, de hecho, menos trabajo para diseños altamente gráficos. Pero para un diseño más simple como, er, , no hay realmente ninguna razón para no volverse líquido. Tsk @SO, eh!)
Soy un fan de los sitios que tienen un ancho máximo fijo de entre 800px - 1000px, pero también puedo escalar para que pueda leer el contenido sin desplazarme de lado a lado y también sin alejar el zoom porque a menudo el texto se vuelve demasiado extenso. Pequeño para leer y me duele los ojos. Por lo tanto, esto es lo que normalmente quiero, porque quiero construir sitios de los que pueda estar orgulloso.
Soy un gran fan de lo fijo a <800px ... es más fácil leer columnas más estrechas, y funcionará en cualquier lugar. Es decir, si está intentando crear un sitio web que presenta hipertexto ... Los sitios web que presentan aplicaciones frontales son, creo, otra lata de gusanos por completo ...
Voy a ir en contra de la mayoría y decir NO. Razonamiento: los sitios fluidos como Wikipedia son una pesadilla para leer en pantallas grandes debido a su longitud de línea larga (aunque sus citas dificultan la lectura en el mejor de los casos).
El problema realmente ocurre porque no hay ningún mecanismo para ajustar el tamaño del texto en relación con la resolución de la pantalla. Si pudiera agrandar automáticamente el texto en resoluciones más grandes, podría estar más cerca de los 80 caracteres impares por línea que, en general, se consideran los mejores para la legibilidad.
También existe 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.