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
- Layouts Líquidos – metal.ize
- El problema de los layouts líquidos – UnLugar
- Liquid Layouts – Max Design
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.
4 comentarios, 3 referencias
+
#