Nociones básicas de Diseño Web (II)

En nuestro post sobre Nociones básicas de Diseño Web (I) comentamos las diferencias entre un diseño orientado a un medio impreso respecto al que se realiza para la Web y los factores más importantes que afectaban al modo en que el usuario visualiza nuestras páginas. Presentado el problema, hablemos de las posibles soluciones.

¿Hay alguna receta infalible que resuelva el diseño de layouts de páginas web?

No exactamente. Hay técnicas pero ninguna puede cubrir todos los aspectos, ya que como vimos, la combinación de factores es múltiple y genera configuraciones muy variadas, algunas casi incompatibles.

Por ejemplo, ¿qué pasa en el caso de un dispositivo móvil de pequeñas dimensiones? Podríamos crear hojas de estilos personalizadas aprovechando que existe el atributo media que nos permite definir un valor (handheld) específico para estos dispositivos, pero no todos dan soporte (o hacen caso) a dicho parámetro. De hecho ¿puede un diseño adaptarse a 3” (pulgadas) y a 22” o es mejor crear páginas diferentes para casos tan dispares?. Hay quien opta por esta segunda opción, como el conocido servicio Safari books online, que tiene un sitio específico para usuarios que navegan con dispositivos móviles

Como comentan muchos diseñadores, aún dejando fuera casos tan extremos, el diseño de una web de cierta complejidad, tiene tanto de ciencia como de arte, con cierta (o bastante) dosis de prueba-error.

No obstante, no partimos de cero. Contamos con guías o técnicas utilizando HTML y CSS que nos permiten abordar el diseño del layout dentro de unos ciertos esquemas. Estos, se mueven entre dos filosofías de diseño: rígido o flexible. La primera trata de preservar la apariencia diseñada en papel y la segunda trata de de adaptarse a las condiciones en que visualiza la página el visitante. Entre medias, es frecuente el empleo de métodos mixtos que combinan características de ambos enfoques.

Vamos a describirlas brevemente:

• Diseño Web de ancho fijo:

  Especifica la anchura de la página y los contenedores en pixels(o ‘similares’ como puntos,…) pensando en las resolución de pantalla más común que pueden tener los que nos visitan. Posiblemente la técnica más extendida ya que intenta preservar el diseño original (proporción de las diversas áreas, longitud de las líneas) y la más fácil de realizar en cuanto a cálculos de tamaños.

  Según la resolución que tenga el usuario, la página puede quedar muy estrecha o por el contrario, ser necesario un scroll horizontal. Si el usuario aumenta tamaño de texto, las líneas pueden quedar muy cortas o perderse parte del diseño. Por ejemplo, un título en una línea, puede pasar a ocupar dos, trastocando la apariencia original.Puede haber variantes según utilicemos posicionamiento absoluto, (diseño aún más rígido), o hagamos que los contenedores floten.

• Diseño Web Fluido o Líquido:

  la página y sus áreas se redimensionan de acuerdo al tamaño de la ventana del navegador del usuario.Utiliza como unidades de medida el porcentaje (%). Si el diseño implica 2 ó más columnas, al menos uno de los contenedores se posiciona flotando a uno u otro lado de la pantalla.

  Este diseño se adapta muy bien a la variabilidad de este medio pero pueden darse efectos perjudiciales para la accesibilidad del sitio, como por ejemplo, líneas muy largas en pantallas grandes que dificultan su lectura.

• Diseño Web Elástico:

  cambia el tamaño de las áreas de la página en función del tamaño del texto que elige el usuario, tratando de mantener el número de caracteres por línea igual al diseño ‘original’. Los contenedores los dimensionamos con medidas en ‘em‘, unidad proporcional al tamaño de texto definido (o redimensionado por el usuario) en cada área.

  El tamaño de las imágenes no varía al modificarse el tamaño de texto por el usuario, con lo que se romperían las proporciones (aunque hay formas más elaboradas para evitarlo)

• Diseño Web híbridos o mixtos:utilizan combinaciones de unidades sobre estas técnicas. Por ejemplo, definir en un diseño fluido un ancho fijo para alguna columna-contenedor o fijar tamaños mínimos o máximos de página para evitar tamaños no deseables.
• Otras técnicas: aunque no correponda con esta clasificación, existen también técnicas para detectar ciertas configuraciones del equipo en que se visualiza nuestra página (tipo de navegador, resolución, plugins instalados,….), empleando por ejemplo JavaScript. Se pueden servir páginas ‘optimizadas’ a esos parámetros, aunque no se recomienda, salvo quizás para evitar algunos bugs conocidos en determinados navegadores.

¿Estas técnicas son recomendaciones genéricas o detallan como diseñar las páginas?

Por supuesto, al profundizar en estos temas vas a encontrar numerosa documentación en Internet en forma de cursos, tutoriales, páginas web o blogs (aquí tienes un ejemplo), que te detallarán como definir esos diseños. Incluso, hay numerosas herramientas on-line que automatizan la creación de estructuras de página y hojas de estilo asociadas, según distintas técnicas y el diseño que se quiera obtener, aunque recomendamos su uso si es como apoyo y complemento al aprendizaje del propio alumno.

En cuanto a libros, hay muchos y muy buenos que tratan este tema dentro del contexto HTML y CSS, pero podemos recomendar uno que se centra específicamente en estas cuestiones:

• «Flexible Web Design: Creating Liquid and Elastic Layouts with CSS» (Zoe Gillenwater )

¿Y si utilizo hojas de estilos ya creadas?

En Internet hay numerosos sitios que recopilan ejemplos de múltiples tipos de layouts y hojas de estilo, de los que podemos aprender las mejores prácticas. Además, muchas están bajo una licencia que permite su libre copia y uso, aunque conviene comprobar si bajo alguna condición. Te mencionamos dos de los más conocidos:

• Open Source Web Design
• Open Design Community

Nuestra recomendación, no obstante, es que esto no sustituya al aprendizaje práctico que nos permite idear y experimentar con los resultados de las distintas reglas de estilo que creemos. Aunque podamos copiar o enlazar a la hoja de estilo creada por otro autor, el contar con suficientes conocimientos nos permitirá comprender su funcionamiento, editarla y personalizarla y en definitiva, tener un mayor control sobre nuestras páginas.

En esta línea, es muy recomendable para aquellos que empiezan en este campo y no la conozcan, instalar una herramienta como Firebug, extensión de Firefox, que permite analizar y experimentar (a nivel de su código HTML, CSS y JavaScript) tanto con las páginas que creemos como con aquellas que nos parezcan de interés, mientras navegamos. Si preferimos otro navegador, los más populares traen incorporadas utilidades en este sentido, que conviene que exploremos y aprendamos a utilizar.