He notado que cada vez más sitios se 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?
website-design
BenV
fuente
fuente
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. Mira 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.
Tienes que 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.
fuente
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. Después de todo, HTML 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 en mi propio sitio web personal . Después de todo, 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 sus necesidades? ¿pantalla? Al final, un buen diseño se trata de brindar a los usuarios la mejor experiencia posible, no se trata solo de lo que se ve "bonito" en el monitor del diseñador.
fuente
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 mira el artículo para conocer todos los detalles jugosos. Pero por lo largo y corto de esto (¿o debería ser eso "ancho y estrecho"?) Mire las páginas de antes y después de su ejemplo. La página anterior se escala muy bien hasta cierto punto, pero si la haces lo suficientemente estrecha, se vuelve un poco torpe. El despues la página también se escala pero también cambia el diseño cuando lo hace demasiado estrecho para que la escala funcione bien.
fuente
De acuerdo con las 113 Pautas de diseño de Jakob Nielsen para la usabilidad de la página de inicio :
También es una de las diez pautas de diseño de página de inicio más violadas :
fuente
¿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.
fuente
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?
fuente