La definición de diseños en el diseño web y cuándo usarlos
Hay bastantes diseños en el diseño web. Los más comunes incluyen diseños fijos, líquidos y elásticos. Este artículo describe las principales diferencias en términos utilizados para describir diseños en diseño weby cuando cada diseño en particular requiere un diseño específico. Entonces, si este problema lo ha confundido o frustrado en el pasado, siga leyendo …
Layouts en Diseño Web
Disposición fija
En el diseño web, los diseños fijos son aquellos que utilizan una unidad de medida específica para definir el ancho de la página web, independientemente de todos los demás factores, incluidas las dimensiones de la ventana del navegador y los tamaños de fuente. En otras palabras, la página web / sitio tendrá el mismo tamaño fijo independientemente del tamaño de la ventana del navegador o del tamaño de fuente en el que esté escrita la página.
Por ejemplo, la columna principal de una página web / sitio se puede fijar en 740 píxeles. Si un espectador accede a esa página web en una ventana del navegador minimizada, la columna principal aún tendría 740 píxeles de ancho, y esto no cambiaría independientemente de cuán grande o pequeña sea la ventana del navegador. Esto implica que si la ventana del navegador es más pequeña que el ancho fijo de la página, un espectador no podrá ver todo en la página a la vez.
Por lo tanto, el diseño se llama así porque la página se fija en un ancho de píxel constante. Varias columnas dentro de la página web generalmente se definen usando una unidad de medida elegida, más comúnmente el píxel.
Diseños relativos
Un diseño relativo se refiere a un diseño que define el ancho de una página web utilizando alguna unidad de medida relativa. En este caso, el contenido de la página cambiará de tamaño de acuerdo con el tamaño de la ventana del navegador en la que acceden los usuarios.
Con diseños relativos, los anchos de columna se definen para llenar una cierta fracción de la ventana del navegador, independientemente del tamaño real de la ventana en la que se ve la página. Si un espectador expande o contrae el sitio web para que sea más grande o más pequeño, las columnas cambiarán de tamaño automáticamente para que su tamaño, en relación con el tamaño de la ventana del navegador, siga siendo el mismo.
Dentro de límites específicos, no tendrá que desplazarse horizontalmente para acceder a todo el contenido con diseños relativos. Los diseños relativos en el diseño web también se denominan ‘líquido’ o ‘líquido’ diseños, porque la página se estira o se contrae para llenar todo el espacio del contenedor disponible, en este caso la ventana del navegador. El diseño relativo también se conoce como ‘elástico’ o ‘flexible’ diseño.
Entonces, ¿por qué se le da tantos nombres al mismo diseño?
La breve explicación es que los nombres surgieron porque diferentes webmasters de diferentes ubicaciones estaban tratando de describir un fenómeno que no tenía una descripción técnica en ese momento. El diseño web en sí mismo es relativamente nuevo; habiendo comenzado en la década de 1990, no existía un vocabulario definido para cada fenómeno encontrado. Por lo tanto, los webmasters simplemente dieron un nombre que pensaban que se ajustaba a lo que estaban tratando de hacer.
Los elementos en diseños relativos se definen en unidades relativas, como porcentajes o ‘ems’. Un ‘em’ se refiere a las alturas de fuente de los tipos de letra que se encuentran en la página. Se toma como una medida relativa ya que los tamaños de fuente también tienen diferentes alturas. Los porcentajes funcionan de la misma manera que en cualquier otro lugar, es decir, si una columna está configurada para ser el 60% de la página, ocupará el 60% del espacio disponible, por ejemplo, la ventana del navegador.
Dreamweaver: líquido, elástico e híbrido
La forma en que se utilizaron los términos durante las implementaciones iniciales de Dreamweaver puede generar cierta confusión en la comprensión de los diseños, como se explicó anteriormente. Dreamweaver es un editor web WYSIWYG (lo que ve es lo que obtiene) que permite a los webmasters crear sitios web utilizando interfaces visuales similares en funcionamiento a los programas de procesamiento de texto.
Este editor web también proporciona algunas plantillas en blanco que se pueden utilizar para el diseño web. Para satisfacer las diversas necesidades de diferentes webmasters, también incluye plantillas para manejar diseños tanto fijos como relativos.
En Dreamweaver (solo antes de CS4 e incluido), los diseños se definen como «fijos», «elásticos», «líquidos» o «híbridos». Los diseños fijos en Dreamweaver se definen utilizando píxeles como unidad de medida. Esta es la misma definición que se dio anteriormente.
Los diseños líquidos y elásticos en Dreamweaver son esencialmente diseños relativos. Probablemente, los desarrolladores de Dreamweaver solo querían permitir a los webmasters la libertad de definir el ancho de sus páginas mediante porcentajes o ems, que se utilizan para diseños fluidos. Aquí, el diseño elástico usa el em como unidad de medida, mientras que el diseño líquido usa ‘porcentaje’.
El diseño híbrido utiliza una combinación de ‘porcentaje’ y ‘em’ para definir los anchos de página. Entonces, ¿cómo sabe qué unidad de medida debe usarse para qué diseño de página?
Cuando usar diseños fijos
Los diseños fijos son útiles para diseños que incluyen múltiples elementos que deben tener una alineación perfecta en la página. Por ejemplo, puede tener una imagen en una columna que necesita una alineación perfecta con el texto u otra imagen en una columna diferente. Los diseños fijos ofrecen una mayor medida de control, lo que garantiza que todos los elementos se mostrarán de la manera exacta que pretendía en el momento del diseño.
Cuando se deben usar diseños relativos que usan Em
Es lo mismo que los diseños elásticos si se usa Dreamweaver CS3 y CS4 y ajusta el tamaño de las columnas de acuerdo con los tamaños de fuente utilizados en la página. Ahora, esto todavía se considera relativo, aunque teóricamente un diseñador puede definir tamaños de fuente, por lo tanto, fija de manera efectiva el ancho de las columnas. Esto se debe a que los espectadores pueden reemplazar su configuración en sus navegadores. Por lo general, esto lo hacen aquellos que deben usar fuentes más grandes, por ejemplo, si les falla la vista.
Por lo tanto, si un usuario especifica fuentes más grandes, esto hará que las columnas de la página sean más anchas. Lo contrario también es cierto: las fuentes más pequeñas reducirán el ancho de las columnas. El diseño elástico es ideal si solo muestra texto, ya que el texto aparecerá exactamente en la misma posición cuando la columna cambie de tamaño según los cambios de fuente.
Sin embargo, está limitado en el sentido de que un usuario puede especificar un tamaño de fuente mayor que el que puede permitir el ancho de la ventana de su navegador sin necesidad de desplazarse. Esto creará automáticamente una barra de desplazamiento horizontal que resultará molesta para los usuarios. Sin embargo, con un diseño adecuado, debería poder satisfacer las necesidades de la mayoría de sus usuarios.
Cuando se deben usar diseños relativos que usan porcentaje
Especificar el ancho de la página como porcentaje lo vincula al ancho de la ventana del navegador del espectador. Siempre que se asegure de que el ancho total de todas las columnas juntas no exceda el 100%, la mayoría de los usuarios nunca encontrarán la barra de desplazamiento horizontal. Sin embargo, las imágenes aún presentan un desafío ya que tienen anchos fijos, definidos en píxeles. Puede crear un diseño que no muestre barras de desplazamiento horizontales para la mayoría de los usuarios en circunstancias normales.
Conclusión
Con esta información, ahora está lo suficientemente armado para tomar una decisión informada sobre la mejor opción de diseño, dados los objetivos finales de su sitio web o el de su cliente.