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?
Respuestas:
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.
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.
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.
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.
De acuerdo con las 113 Pautas de diseño de Jakob Nielsen para la usabilidad de la página de inicio :
67 Utilice 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 una de las diez pautas de diseño de página de inicio 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.
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?