Contenido

¿Fijo, fluido o elástico? ¿Que estructura elegir para nuestra web?

14 Ago

+ 7

Siempre que nos sentamos delante del ordenador para empezar un proyecto, suelen pasarnos por la cabeza unas cuantas premisas que condicionarán nuestra aplicación. Para empezar, deberíamos haber definido las necesidades y los requerimientos, y de ahi obtendríamos los puntos para partir en el viaje de la creación de cualquier aplicación web.

Despues de cosas, como la base de datos, la navegación por el sitio y las funcionalidades que el usuario podrá utilizar, debemos plantearnos el diseño de nuestra aplicación. Y para ello no solamente tendremos que tener en cuenta colores, y/o tipografias, sinó que tambien debemos elegir que tipo de estructura queremos para nuestra criatura.

Podemos optar por un diseño fluido, que se ajuste al navegador, o un diseño fijo para mantener una estética definida, en este punto tan subjetivo debemos tener presente que estructura nos conviene para cada proyecto. Pero para ello debemos conocer los pros y los contras de cada uno estos layouts (estructuras).

Diseño fijo (Fixed Width)

El diseño fijo, es aquel que como su nombre indica nos aporta el tamaño de nuestra estructura en unas medidas inalterables por nuestro navegador.

Pros

  • El areal de lectura está rigurosamente controlada, sin necesidad de controlar tamaños mínimos ni máximos.
  • Al ser un ancho fijo, hace más fácil el diseñar sobre él.
  • 760px (ancho típico para resoluciones 800×600) son los más óptimos para la lectura.

Contras

  • Al amplicar el tamaño de la fuente, el diseño no varía, rompiendo la estética de la línea.
  • Gente con monitores más pequeños que el ancho definido tienen problemas con la página.
  • Gente con monitores más grandes ven los diseños fijos muy pequeños.

Consejos de uso

  • Posiciona el contenido a la izquierda, de esa manera los monitores 640×480 podrán ver el contenido principal sin hacer demasiado scroll.
  • Asegurate de tener una CSS para otros dispositivos (handheld, projection,…)

Diseños Fluidos o Líquidos (Fluid or Liquid Layout)

Estos diseños fueron creados para no tener un tamaño definido, y permitir que los monitores pueden condicionar el tamaño de salida. Usando porcentajes (%) podremos definir el tamaños de los elementos de nuestra aplicación web para definir un diseño fluido que se adapte a cualquier monitor.

Ejemplo

Pros

  • Si lo has hecho bien, tu diseño se podrá adaptar a cualquier monitor y/o dispositivo.
  • El diseño fluido es considerado el más purista.
  • Más contenido puede ser mostrado sin necesidad de scroll.

Contras

  • Demasiado contenido disponible y un fuerte deseo de llenar los espacios en blanco pueden afectar a la usabilidad. Demasiado contenido, puede confundir al usuario y dar una sensación de congestión.
  • Problemas con Internet Explorer (6 o inferiores) para controlar los tamaños máximos (max-width).

Consejos de uso

  • Usa esta estructura intensionadamente. No lo uses para aparentar o por que esté de moda.
  • Si estás creando un diseño fluido con areas de contenido fijo, en esencia estás haciendo un hibrido. Ten cuidado con la mezcla de medidas.
  • Si así y todo piensas en crear un híbrido,asegurate que se vea en monitores 800×600.

Más Info

Diseños Elásticos (Elastic Layouts)

Son aquellos que usan medidas relativas basadas en (em), una medida muy usada para el tamaño proporcional de nuestros textos. Permitiendonos que nuestro textos crezcan condicionados con el tamaño de los elementos padres.

Ejemplos

Pros

  • Si lo haces bien, se trata de una estructura muy estable, ya que todo se redimenciona al mismo ratio.
  • Un diseño elástico es un reto.

Contras

  • Aparte de ser el diseño de moda, no hay muchas más ventajas por usarlo.
  • A menos que esté limitado este diseño puede ser un desastre para la usabilidad.

Consejos de uso

  • Si haces un diseño elástico, asegurate de que funcione en monitores pequeños.
  • Limita la máximo del ancho con medidas fluidas, haciendo un theme híbrido, pero más seguro. {width:60em; max-width:98%;}
  • Recuerda que IE 6 no soporta max-width, intenta que la línea de texto no haga la necesidad de usar el scroll horizontal en monitores a 1024×768.
  • Desde que conocí el concepto de diseño elástico me pareció muy interesante y prometedor, pero al mismo tiempo «defectuoso por diseño», ya que al calcular las medidas en base a las medidas de las fuentes utilizadas, tratar de mantener el control sobre las mismas es un verdadero quebradero de cabeza, y mientras MSIE 6 siga teniendo una cuota importante de mercado, su falta de soporte para max-width lo hace aun mucho más complicado.

    Quizás cuando exista un soporte más masivo para imágenes escalables (como con SVG) podría pasar a ser una opción preferencial.

  • felipe: La idea detrás de usar «em» es, aunque parezca extraño, escapar del control de las fuentes.

    Un «em» es el ancho estándar de una «eme» en cualesquiera que sea la tipografía presentada. Es una forma de establecer una relación entre la tipografía (uno de los factores sobre los que menos control se tiene) y el resto de la página.

    Al usar «em» no tienes porqué controlar el tamaño de tu tipografía. El punto de un layout elástico es precisamente que ni sabes ni te importa de qué tamaño es la tipografía, sólo su relación con el resto del diseño. Si tu tienes el tamaño por defecto en 12px y yo lo tengo en 16px no debería haber diferencia en la distribución en la página.

    El problema del layout elástico es otro y queda claro aquí: Es dificil de imaginar y de realizar porque es totalmente abstracto. Maneja relaciones relativas al 100% y como tal es dificil completarlo y que nos guste como funcione, porque nuestra tendencia nos dice que usemos tamaños absolutos, que nos satisfacen en la necesidad de control.

    El problema realmente es max-width (no es un problema realmente, es un inconveniente estético) pero lidiar con IE es algo que ya es el pan de cada día para los que nos dedicamos a esto. Es la cruz que tenemos que pagar por no haber sabido preveer el futuro hace una década o por pensar que «no es importante» en ese momento y el recordatorio constante de porqué es importante intentar mantenerse dentro de los estándares (los pedantes al respecto hoy en día suele ser gente que se quemó hace cinco años por esto mismo).

    IE por ejemplo puede al menos comportarse dentro de lo normal cuando se tiene max-width si se incluye una de sus no-estándar «expressions»:

    max-width: 520px;
    width: expression(this.width > 520 ? 520: true);

  • Excelente artículo. También hay que comentar que IE no acepta los tamaños minimos.

  • eduo: justamente, el problema al que me refería (al parecer no se entendió lo que quería decir) es en cuanto al tamaño de los restantes elementos, por ejemplo, la columna lateral o el área de contenidos en un diseño típico de un blog. Al establecer la medida de estos en ems (para crear un diseño auténticamente elástico) se hace más complicado tratar de calcular las dimensiones que tendrán estos bloques, y si bien podríamos confiar en que la mayoría de los usuarios mantendrán las opciones predeterminadas de los tamaños de fuentes, aquellos que la aumenten (como en lo personal hago con Firefox en Ubuntu) podrían tener que hacer scrolling horizontal… y a nadie le gusta el scrolling horizontal, ¿no? Al menos eso es lo que me ha pasado en mi experiencia

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.