Ingeniería – Nuevas tendencias en Diseño Web

Para encauzar a mi compañero (como buen diseñador gráfico, siempre necesita un buen encarrilamiento) afrontaré algunas de las cuestiones técnicas que nos encontramos en el ‘nuevo diseno web’ del que nos hablaba en su anterior entrada.

Web a pantalla completa o… diseno líquido, diseno elástico, diseno móvil, diseno adaptable…

Ahí está la madre del cordero. La web nace como una publicación estática, trabajada como si se tratara de papel: El ancho del contenedor mide 980 píxeles ahora y medirá esos 980 puntitos siempre. Así es como a medida que las pantallas crecían (o se abarataban, según se mire), las webs se iban quedando más y más enanas.

La forma más rápida de enfrentarse a este problema fue dejar de medir los contenedores en píxeles y usar medidas relativas. Ahora el contenedor no medía 980 píxeles, sino el 100% de la pantalla. Vale, ya no hay ese feo espacio de fondo, se aprovecha toda la pantalla, pero… ¿Realmente es útil? ¿Es cómodo leer un texto de esquina a esquina de tu flamante pantalla panorámica de 24 pulgadas, o es más bien una lectura infernal? Rapidamente se comprobó que corrigiendo un problema, como suele suceder, se crea otro.

Luego, tras la proliferación de la web en el móvil, la gente se sintió defraudada de la experiencia que obtenía al navegar por la web en su estrecha pantalla de 300 píxeles (¿qué se esperarían?) y todo el mundo se puso a correr en círculos realizando versiones de sus webs adaptadas para móviles, esto es, con botones gigantes, fotos pequeñas, nada de Flash y mucho, mucho scroll. Pero claro, esto era trabajar doble: una vez para la web normal y otra para la versión móvil.

¿Existía entonces la manera de que una página web se viera perfecta bajo cualquier condición sin tener que programarla infinitas veces? Bueno, pues parece ser que si, que algo hay.

Diseño web adaptable (responsible design)

La solución realmente pasa por adaptarse a cada resolución, o a rangos de resoluciones en realidad. El problema no es tan sencillo como poner un ancho fijo o uno relativo, el diseno ha de ser inteligente, tiene que ser adaptable.

Aunque crear algo ‘inteligente’, como cabe suponer, no es nada fácil, cada vez hay más y mejores recursos para enfrentarse a lo que nuestros amigos anglosajones llaman responsive design, y los nuevos avances en el CSS3, en especial las media queries, vienen en nuestro rescate trayéndonos virgerías como estas (click en la esquina inferior derecha y reducir la ventana, sino os perdereis la fiesta):

Se ha ido formando un gran revuelo desde que nuestro buen amigo y mejor crack Ethan Marcotte publico su famoso artículo sobre el responsive design, pero si hablas la lengua de cervantes y te interesa cocinar una de estas maravillas seguro que te interesará más esto

Tipografías no estándar

Amantes del arte digital aterrizados en el mundillo web a menudo se han encontrado pensando algo como:

Que bonitas son las tipografias… hay tantas… ¿Qué? ¿Qué ponga Times New Roman…? De helvética entonces ni hablamos…

En realidad la tecnología web nos ofrece una vía para importar tipografías que no estén en la máquina del usuario: font face, gracias a CSS3. Hay un pequeño lio con los distintos formatos de fuentes y los acabados de la tipografía pueden dejar que desear si la visualizamos en nuestro amigo internet explorer (¿a que es raro?), pero es un método estándar y, que duda cabe, será lo que usemos en el futuro. Si quieres empezar a saborear este estándar sin miedo a liarla por el camino, te recomiendo que uses alguna de las tipografías adaptadas para la web de google o el generador de código de la gente de fontsquirrel.

Otra forma de asegurarse que nuestro texto se va a ver bien (si, incluso en el endiablado explorer) es usando Cufón, que sustituye nuestro texto por ‘dibujos’ hechos con canvas gracias a nuestro buen amigo javascript. El texto no se podrá copiar, evidentemente, pero es mejor alternativa que usar imágenes o Flash y que nuestros textos ni siquiera sean ‘leidos’ por los buscadores.

En todo caso, como buenos ingenieros, no debemos olvidar que la inclusión de una tipografía, sea por el método que sea, hará nuestra web más pesada, ya que, si queremos verla, el navegador estará obligado a descargar la tipografía o el archivo javascript que va a dibujarla. No va salir de la nada, ¿verdad?

Integración con redes sociales

twitter

Una vez leí en algún lugar perdido de internet algo como esto:

El social media es como el sexo adolescente: todo el mundo quiere hacerlo, nadie sabe como y al final resulta que no era para tanto

Sin embargo, como buen sexo adolescente, el que no lo practica es un pardillo, y ninguna empresa que se precie quiere ser uno. Por eso todo el mundo quiere tener presencia en las redes sociales.

Integrarse con redes sociales puede ser tan complicado como quieras hacerlo: usar la api de facebook, incluir botones +1 y me gusta o incluso contratar a un community manager, el que será el perfil más demandado por las empresas en 2012 y que ni siquiera existía hace pocos años (¡ahí es nada!). De todas formas, si lo que quieres es escribir en un canal y que se distribuya automáticamente por todos los demás, tal vez el servicio de ping.fm o el de twitterfeed.com satisfaga tus necesidades.

Y ya estais preparados para empezar a aprender… Porque con esta breve introducción supongo que no esperaríais controlar todo acerca de las nuevas tendencias en el diseno web, en todo caso daros cuenta de que sí, cada vez podemos hacer más cosas, pero también se va volviendo todo mucho más complejo en el diseno web.

En cualquier caso muchas de las cosas aquí comentadas merecen que se diga mucho más sobre ellas, y se dirá, en otros artículos.

¡No programeis mucho y Dios salve a HTML5!