Para los sitios web, ¿es mejor tener un diseño de ancho variable o un diseño de ancho fijo?
Debido a las diferentes resoluciones de pantalla, la experiencia del usuario al navegar por un sitio web puede ser diferente. ¿Es mejor diseñar el sitio web con un ancho fijo? (y si es así, ¿debería haber diferentes anchuras estáticas para las resoluciones estándar?) ¿O debería un sitio web siempre estar diseñado en ancho variable?
No creo que haya una respuesta fácil aquí, porque, en última instancia, depende de lo que está construyendo y para quién lo está construyendo. Tanto los sitios de ancho fijo como los sitios de ancho variable tienen sus ventajas y desventajas.
Una cosa que debo señalar aquí es que no hablaré sobre experiencias móviles para sitios fijos/fluidos, porque los sitios móviles son mejores cuando el diseño es específico para dispositivos móviles, no un puerto de un sitio de escritorio a una plataforma móvil.
Ancho fijo - Ventajas
Un sitio de ancho fijo es una experiencia más consistente y es más rápido de desarrollar que un sitio de ancho variable. También permite que el diseñador tenga más control sobre la presentación porque puede establecer valores duros para anchos, longitudes de línea, tamaños de tipografía, etc. En última instancia, también es más fácil de mantener que un sitio de ancho variable.
Ancho fijo - Desventajas
Por otro lado, los diseños de ancho fijo comienzan a fallar cuando aparecen los casos Edge. En este momento, es muy común que las personas diseñen sitios para un monitor de resolución de 1024 px de ancho, pero todavía hay personas con máquinas de menor resolución. En este momento, estoy trabajando en una aplicación diseñada con una cuadrícula de 960 px; Eché un vistazo a los análisis de hoy y noté que el 3% de los usuarios estaban en monitores de 800 x 600, y aproximadamente el 5% en total tenían resoluciones inferiores a 1024 x 768. Esos usuarios probablemente estén teniendo una experiencia bastante mala porque el sitio tiene un ancho fijo .
Ancho del fluido: ventajas
El ancho de fluido permite que el diseño se expanda según la configuración del usuario; el diseño se adapta a ellos, lo cual es bueno. Esto permite que el sitio mantenga un espacio negativo proporcional, por lo que el sitio nunca se siente demasiado abarrotado o demasiado abierto (a menos que se haya diseñado específicamente de esa manera).
Ancho del fluido: desventajas
Desafortunadamente, los diseños de ancho de fluido tampoco son impermeables a los casos Edge. Cuando los anchos se vuelven demasiado delgados o demasiado anchos, pueden ocurrir cosas malas, especialmente con el texto. Las longitudes de línea que son demasiado cortas o demasiado largas son esencialmente ilegibles. Además, muchas formas de medios, como imágenes u objetos Flash, son difíciles de escalar en diseños de ancho fluido; IE requiere javascript para cambiar el tamaño de las imágenes, de lo contrario se pixelan.
Diseño web adaptable
Algunas personas han mostrado ejemplos, pero todavía no se han referido a esta técnica por su nombre. Ethan Marcotte recientemente acuñó el término para describir diseños fluidos que pueden cambiar completamente según la resolución de pantalla de un usuario (ver detalles aquí ). Este es un híbrido de ancho fijo y ancho de fluido: le permite establecer mínimos y máximos para que los medios o las longitudes de línea no se salgan de control, y también permite que el diseño se ajuste a la configuración del usuario. Por supuesto, esta técnica también tiene sus propias ventajas y desventajas. Si bien se proporciona un diseño específicamente elegido para la configuración de un usuario, este tipo de sitio es difícil de desarrollar. No todos los navegadores admiten las consultas de medios necesarias para hacer esto. Además, básicamente está desarrollando múltiples diseños, extendiendo la cantidad de tiempo que lleva construir y mantener.
Creo que es imposible simplemente colocar una manta "Siempre use esto" o "Nunca use esto"; Diría que siempre debe evaluar sus necesidades antes de tomar una decisión. En la mayoría de los casos, creo que un diseño de ancho fijo servirá para sus propósitos, pero que un diseño fluido o receptivo puede proporcionar una experiencia de usuario mucho mejor, solo a costa de una dificultad adicional.
El problema con el uso del 100% de ancho variable es que realmente no se visualiza bien para los usuarios con las pantallas más pequeñas y más grandes. Generalmente diseñaré mi sección de contenido principal para la norma estableciendo un ancho mínimo/máximo y luego centraré el contenido importante (fijo). Luego puede tener elementos de diseño de ancho variable (ya que no son tan importantes) que se estiran/encogen para llenar la pantalla.
De esta manera, la información importante siempre (con suerte) se muestra correctamente mientras se ve bien en muchas resoluciones.
No soy diseñador web, pero creo que idealmente deberías hacer un diseño fluido. Es decir, un diseño que cambiará automáticamente (y dinámicamente) de acuerdo con el ancho actual. De esa manera, los dispositivos estrechos como los teléfonos son muy compatibles, así como todos los diversos anchos de pantalla.
La publicación del blog Finalmente, un diseño Hicks fluido explica y domina la técnica. Tiene diseños de 3 columnas, 2 columnas y una columna, que se seleccionan de acuerdo con el ancho de la ventana del navegador.
El texto es difícil de leer una vez que la longitud de la línea es demasiado larga. Por lo tanto, para cualquier sitio de ancho variable, debe haber al menos un ancho máximo para cualquier área de texto para mantener la legibilidad.
Es mucho más difícil hacer que un sitio de ancho variable se vea bien.
Depende de lo que estoy trabajando, pero todavía tiendo a inclinarme hacia sitios de ancho fijo. La razón es porque le permite controlar mejor la interfaz de usuario y mantenerla constante en todos los tamaños de pantalla. Muchos sitios de ancho de fluido se ven terribles en monitores más grandes/más pequeños (dependiendo de para qué fueron diseñados).
Regla general para mí:
- Si la usabilidad del sitio depende en gran medida de la interfaz y/o el contenido es principalmente texto: ancho fijo
- Si el sitio tiene una interfaz mínima, pero el contenido es en gran parte visual (sitios de fotos o una aplicación de mapas, por ejemplo), entonces voy por el fluido.
Aquí hay un gran desglose de algunos pros/contras: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- for-you /
Siempre que puedo, trato de no establecer la altura y el ancho específicos de un objeto en px sino en %
Sugeriría tener en cuenta el ancho variable o proporcionar un diseño alternativo para pantallas más anchas.
Si elige un ancho fijo, ¡asegúrese de que no sea pequeño! He visto algunos sitios con un ancho de 500 o 600 píxeles que hace que leer el sitio sea como escanear las páginas amarillas.
Hace tiempo que soy fanático del enfoque de The Man In Blue de proporcionar diseños alternativos basados en el ancho disponible: vea la demostración en vivo aquí
Es posible que desee diseñar el diseño de su sitio web en horizontal orientación. Se utilizan cada vez más monitores de pantalla panorámica, con grandes resoluciones de 1920x1080 (este es el más común). ¿Alguna vez ha intentado maximizar una ventana del navegador que muestre un diseño fijo vertical en eso? Es como la mitad o dos tercios de la pantalla llena de su color/imagen de fondo.
Es bueno que Windows 7 le permita cambiar rápidamente el tamaño de una ventana a la mitad de la pantalla y pegarla a un lado: WindowsKey + Left/Right
El ancho variable es probablemente el camino a seguir, porque con un ancho fijo, algunas personas pueden pensar que su sitio web es demasiado pequeño para su monitor y algunas personas pueden pensar que es demasiado grande para su monitor.
Depende del contenido del sitio web. Si tiene mucho texto, el ancho variable tiene más sentido ya que el texto puede extenderse y los usuarios pueden leerlo de manera más eficiente. Si se parece más a un sitio web de marketing donde la apariencia es más importante, entonces elija un ancho fijo, ya que es mucho más difícil hacer que un sitio web de ancho fijo se vea genial.
Cualquier suposición que haga al diseñar un diseño de tamaño fijo es incorrecta para algunos de sus usuarios. La única forma de proporcionar una experiencia satisfactoria para todos es utilizar un diseño flexible y receptivo.
Dos problemas (tratando de evitar la duplicación):
No puede suponer que el navegador es de pantalla completa; Los análisis que informan la resolución de pantalla solo cuentan una parte de la historia.
No puede asumir que los usuarios están usando los mismos tamaños de fuente que usted. Las líneas que son demasiado anchas para leer en el tamaño de fuente pueden no ser demasiado anchas para alguien que tuvo que aumentar el tamaño de la fuente unas pocas muescas; a la inversa, la columna para la que establece un ancho fijo en función de la configuración de su fuente puede significar que el usuario ve cinco palabras por línea o algo así.
Para que todos los usuarios puedan usarlo, su diseño web necesita usar todo y solo el espacio que le brinda el navegador. Confíe en que el usuario ha dimensionado su navegador para optimizar su propia experiencia; entonces deberías trabajar dentro de esos límites. Este enfoque funciona en monitores de 30 "y tabletas de 7" (e incluso en teléfonos, si no realizó una versión específica para dispositivos móviles).