it-swarm-es.com

Ancho fijo vs ancho dinámico

He notado que cada vez más sitios han ido a un diseño de ancho fijo, donde cambiar el tamaño de la ventana del navegador solo hace que aparezcan barras de desplazamiento, a diferencia de un diseño flexible, donde cambiar el tamaño del navegador hace que los componentes de la página se "desplacen" juntos .
Los sitios de StackExchange como este son un ejemplo del diseño fijo. GMail e iGoogle son ejemplos del diseño flexible. ¿Cuáles son las razones para elegir uno sobre el otro?

15
BenV

Los diseños más complejos pueden ser muy difíciles de realizar con un diseño de ancho variable. Así que me imagino que eso juega un papel.

También existe el hecho de que no es cómodo leer un texto que es muy amplio. El tamaño de la columna en los sitios de StackExchange es bastante manejable y fácil de leer. Con un diseño de ancho variable, no solo puede extender el cuerpo del texto principal sin que sea ilegible. Incluso Google limita el ancho de sus resultados de búsqueda.

Por supuesto, si tiene un sitio donde el espacio es escaso (como Google Docs y Google Maps), realmente desea utilizar un esquema de ancho variable para utilizar todo el espacio disponible.

11
Kris

Solucionado es mucho más fácil de desarrollar para sitios complejos. Además, la mayoría de los sitios de ancho fijo tendrán alrededor de 1000 píxeles de ancho. La razón es que solo el 1% de los navegadores usan 800x640 y el 0% usa 640x480. Echa un vistazo a las estadísticas más actuales aquí . Sin embargo, esto no incluye dispositivos móviles. Que es un juego de pelota completamente diferente.

El valor del diseño de ancho variable es que permite a las personas usar el sitio web fácilmente en una ventana que no está maximizada.

Debes mirar a tu audiencia y decidir en función de la experiencia que creas que quieren y si el ancho variable es más importante que otras características que no podrás desarrollar si tienes que hacer un ancho variable.

8
Ben Hoffman

También hay un compromiso entre los dos donde establece un ancho mínimo y un ancho máximo (usando CSS) y luego usa porcentajes de ancho para hacer que el resto fluya entre los dos extremos. Por ejemplo, es posible que desee que una columna del menú de la izquierda no sea más estrecha que 200 px, sino que fluya el contenido principal. Esta técnica permite que su sitio se adapte a la resolución de los visitantes, sin parecer tonto con resoluciones extremadamente altas o resoluciones extremadamente bajas. HTML, después de todo, fue diseñado para fluir: es un lenguaje de marcado y no es lo mismo que imprimir.

Este enfoque funciona bien para diseños relativamente simples, como blogs o que presentan mucha información textual. De hecho, lo uso por mi cuenta sitio web personal . Después de que muchas personas ahora tienen monitores de pantalla ancha o de alta resolución, mi monitor de trabajo tiene 1680 píxeles de ancho, entonces, ¿por qué deberían perder una gran cantidad de bienes raíces y tener que desplazarse horizontalmente simplemente porque un diseñador decidió un ancho fijo que se adaptara a su ¿pantalla? Al final, un buen diseño se trata de ofrecer a los usuarios la mejor experiencia posible, no se trata solo de lo que se ve "bonito" en el monitor del diseñador.

3
Dan Diplo

De acuerdo con Jakob Nielsen 's 113 Pautas de diseño para la usabilidad de la página de inicio :

67 Use un diseño líquido para que el tamaño de la página de inicio se ajuste a diferentes resoluciones de pantalla.

También es uno de los Las diez pautas de diseño de página principal más violadas :

Combatir diseños congelados parece una batalla perdida, pero vale la pena repetirlo: diferentes usuarios tienen diferentes tamaños de monitor. Las personas con grandes monitores quieren poder cambiar el tamaño de sus navegadores para ver varias ventanas simultáneamente. No puede suponer que el ancho de la ventana de todos es de 800 píxeles: es demasiado para algunos usuarios y muy poco para otros.

1
melhosseiny

Es posible que no tenga que tomar esa decisión. A List Apart tiene un excelente artículo sobre diseño receptivo . La idea principal es que puede usar consultas de medios para detectar cambios en la ventana del navegador o el tamaño de la ventana gráfica y reasignar CSS según sea necesario. Hay mucho para leer allí, así que echa un vistazo a el artículo para todos los detalles jugosos. Pero a largo y corto (¿o debería ser eso "ancho y estrecho"?) Mire las páginas antes y después de su ejemplo. La página antes escala bien hasta cierto punto, pero si la haces lo suficientemente estrecha, se vuelve un poco torpe. La página después también se escala, pero también cambia el diseño cuando lo hace demasiado estrecho para que la escala funcione bien.

1
Alan

¿Qué pasa con una confusión? Esto muestra la sección de contenido # en un ancho fijo (70em) si hay suficiente espacio; de lo contrario, la sección se reduce al 80% de la ventana del puerto de visualización/navegador.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

La ventaja de un diseño dinámico es que funciona en todos los tamaños de pantalla, incluidos los dispositivos móviles. Sin embargo, es más difícil hacer que las cosas se vean bien en todos esos tamaños. La pregunta que debe hacerse es: ¿utilizarán sus visitantes dispositivos móviles?

0
paulmorriss