Antes de poner en práctica una maqueta, hay que aclarar algunas cosas básicas. En primer lugar, hay que decidir el tipo de maqueta. En principio, hay tres opciones.
- Fijo
- Flexible
- Elástica
CSS permite maquetaciones con dimensiones fijas o flexibles. Los diseños fijos suelen trabajar con dimensiones en píxeles. Los diseños flexibles, en cambio, se basan en valores porcentuales. Ambas variantes tienen sus ventajas e inconvenientes.
Las maquetas fijas suelen utilizarse cuando hay que utilizar gráficos para crear una maqueta. (Aunque aquí también hay excepciones debido al uso de gráficos de fondo CSS). Si las maquetaciones requieren un posicionamiento pixel-perfect de los elementos, también se suele utilizar el posicionamiento fijo. Con este tipo de maquetación, al menos la anchura de la maquetación suele establecerse en un número fijo de píxeles. Esta anchura suele estar orientada a resoluciones de pantalla específicas.
La situación es diferente con los diseños flexibles. Aquí no se especifica una anchura fija. La maquetación se basa en la anchura de la ventana del navegador.
En este caso, por ejemplo, la anchura se expresa en porcentaje. Si un usuario ajusta el tamaño de la ventana del navegador, el tamaño del diseño también cambia.
Gracias a las modernas propiedades CSS, ahora también existe otra variante de diseño, el llamado diseño responsivo. En este caso, el diseño cambia para que se vea completamente diferente en un smartphone que en un ordenador de sobremesa, por ejemplo. Aquí en PSD-Tutorials.de, por ejemplo, hemos trabajado con un diseño de este tipo. Si abre la página en el escritorio con una ventana de navegador de tamaño "normal", obtendrá la siguiente imagen.
Sin embargo, si ahora contraes la ventana, la disposición de los elementos en el sitio web cambia realmente.
El esfuerzo necesario para crear un diseño adaptable es comparativamente alto. Después de todo, hay que determinar el tamaño de la pantalla del visitante y presentarle un diseño adecuado. Y hay que desarrollar este diseño adecuado para los distintos tamaños de pantalla. Por ejemplo, a un visitante que acceda a su sitio web en un monitor grande se le presentará un diseño de tres columnas. Si, por el contrario, otro visitante accede a su sitio web utilizando un smartphone, se le mostrará un diseño de una sola columna.
Ventajas y desventajas de las variantes
Antes de implementar una maquetación, tienes que pensar cuál de los tipos de maquetación quieres utilizar. Me gustaría mostrarte brevemente las ventajas y desventajas de los diseños fijos.
- Las plantillas de diseño son sin duda las más fáciles de implementar.
- Si te ciñes a las resoluciones estándar, apenas hay problemas a la hora de mostrar el sitio web.
- Los diseños son fáciles de entender. (Esto es, por supuesto, una ventaja si usted, como desarrollador web, quiere explicar un diseño a un cliente).
Sin embargo, los diseños fijos también tienen desventajas.
- Debido a sus dimensiones fijas, son inflexibles y no se adaptan a pantallas muy pequeñas o muy grandes, por ejemplo. A menudo se desperdicia mucho espacio.
- Están sujetos a ciertas restricciones de accesibilidad.
Los diseños flexibles también tienen puntos fuertes y débiles. En primer lugar, las ventajas.
- Las maquetas se adaptan automáticamente al tamaño de la ventana del navegador.
- De este modo, el visitante puede influir en gran medida en la presentación del sitio web.
Sin embargo, también hay desventajas.
- Como desarrollador, es difícil controlar los resultados. Las especificaciones de diseño sólo pueden aplicarse de forma limitada.
- El contenido de la página tendría que personalizarse en gran medida.
- En pantallas grandes, la visualización de textos cortos puede ser "desordenada", ya que a menudo sólo se muestran en una línea. (CSS ofrece las propiedades correspondientes, como min-width).
Otra forma de maquetación representa un término medio entre las maquetaciones fijas y las flexibles. Son las llamadas maquetaciones elásticas. Su principal característica es la unidad de medida em. (Recientemente, rem también se ha puesto cada vez más de moda. A diferencia de em, rem se orienta siempre hacia el elemento raíz, no hacia el elemento padre como em).
La anchura y la altura de estos diseños son flexibles. El diseño de la página se adapta proporcionalmente al tamaño de la ventana del navegador. Por un lado, esta forma de diseño es sin duda la más compleja a la hora de su aplicación práctica. Esto se debe simplemente a que es necesario saber de antemano cómo se comportarán exactamente los elementos en una ventana de navegador cambiante. Los diseños elásticos se utilizan sobre todo en sitios web con muchas fotos y vídeos.
Ventajas de los diseños elásticos:
- El espacio disponible se aprovecha al máximo.
- El contenido siempre se muestra proporcionalmente lo más grande posible.
Pero, por supuesto, los diseños elásticos también tienen sus desventajas.
- Su diseño es muy complejo.
- Y su puesta en práctica no es nada sencilla.
Mucho donde elegir
Así que tiene que decidir cuál de las variantes mencionadas quiere utilizar. Si todavía estás empezando a desarrollar HTML/CSS, te aconsejo que empieces con un diseño fijo. Si ya tienes conocimientos avanzados en el campo del desarrollo web, en cambio, deberías trabajar directamente con maquetaciones responsive. Aquí estás en el lado correcto, independientemente del dispositivo final que se utilice en última instancia para acceder a tu sitio web.
