Bueno, para empezar, ¿qué quiere decir responsive? Esta palabra en inglés se traduce como adaptable, alguien o algo que se adapta a lo que sea, a la situación que sea. Cuando surgió el responsive design, el diseño adaptable, hubo mucha gente que lo tradujo como diseño responsivo, como si no existiera la palabra adaptable en castellano, pero también, como ocurre muchas veces, la mayoría optó por decir diseño responsivo. ¿Y qué es el diseño responsive?
Pongamos un poquito de historia. Este concepto surgió aproximadamente en el año 2010-2009, en torno al diseño de páginas web. Hasta ese momento, la mayoría de las personas que se dedicaban al diseño de páginas web estructuraban los sitios de esta forma: había un encabezado y un pie, que, bueno, esto se mantiene hoy —no siempre existe el pie, pero el encabezado siempre existe—, y una zona de contenido. Esta zona de contenido se estructuraba básicamente en tres columnas: una de contenido principal, que generalmente era la del medio, y después había contenido secundario que estaba en las columnas laterales. También, en algún momento, se utilizaron dos columnas solamente: una de contenido principal y otra de contenido secundario. Pero, básicamente, así es como se estructuraban todas las páginas. De hecho, los blogs que surgieron más o menos en esa época tenían y siguen teniendo esta estructura, no de tres columnas, pero sí de dos columnas. Como en esa época el uso de dispositivos móviles ya era algo bastante regular, había mucha gente que tenía dispositivos móviles, aparecieron las tabletas, lo primero que sucedió es que se hacían sitios especiales para teléfonos. Pero, obviamente, era ridículo porque era un esfuerzo terrible, porque había que mantener no uno, sino dos sitios. Esto es un trabajo muy difícil para cualquier persona que tuviera que tener un sitio web. El concepto básico del diseño consiste en que, más allá del ancho de la pantalla, se puedan mostrar todos los contenidos. Por ejemplo, si en la pantalla grande el contenido va en dos columnas, obviamente en la pantalla más chica va a ir en una sola columna, y así se va a adaptar, se va a ir moviendo. Aquí tenemos un ejemplo para mostrar el problema de esa estructura. Esta era la primera página con la que en 2005 comenzó Foro Alfa. Aquí tenemos las dos columnas que estructuraban todo el contenido. Si el ancho de la pantalla se achicaba, se achicaba todo proporcionalmente. Ahora, si quisiéramos convertir en responsive esta página, la pregunta a hacer sería: ¿y qué hacemos con esta columna? ¿La ponemos primera o al final? El problema de estructurar toda la zona de contenidos en columnas que ocuparan toda la altura de la página era que, al momento de redistribuirla, no sabemos qué columna poner primero. Mucho más problemático todavía si la estructura era de tres columnas. Para esto, cambió la forma de estructurar el contenido: se abandonaron las dos o tres columnas y se pasó a un esquema de secciones horizontales que uno las va pasando, y estas secciones se muestran diferentes según el tamaño del ancho de la pantalla. Por ejemplo, acá estamos viendo el sitio de un evento que organizamos en el año 2012 en Bogotá y se ve cómo funciona cada una de estas secciones en los distintos anchos de dispositivo. Bueno, para los que no sabían, ahora ya saben qué es el diseño responsivo y, antes de que pasemos al tema de los logos o marcas responsive, es probable que alguno esté pensando en armar un sitio web. Bueno, hoy las cosas se han hecho muchísimo más fáciles, ya no hay que programar absolutamente nada y tener una página es algo bastante sencillo y bastante barato. Hoy lo único que se necesita es un buen servicio para alojar el sitio y herramientas que te permitan construir el sitio rápidamente, seas o no seas diseñador. Este sitio es de Hostinger de Argentina, el precio está en pesos argentinos, pero también se puede ver, por ejemplo, el de España, que tiene los precios en euros, o así, según donde uno contrate. Aquí tenemos tres opciones. La recomendada es la que está marcada aquí en el medio, que tiene: puedes armar 100 sitios web, tenés 100 GB de espacio de discos de estado sólido, así que son mucho más rápidos. El hosting es muy rápido, te regalan un dominio gratis por un año y un montón de características más. Tengo un código de descuento para quienes quieran aplicarlo. Les voy a mostrar cómo se hace. Por ejemplo, podemos agregar al carrito, se elige una de las opciones y, aquí abajo, vamos a marcar donde dice: «Tenés un código de descuento». Y yo tengo un código de descuento que es FOROALFA. Aplicar.
Bueno, hicimos un descuento. Una vez que hiciste el pago, cuando entrás a la página de Hostinger, ya te da las opciones. Uno es reclamar el dominio gratis y ahora vamos to configurar el sitio. [Música] Aquí te pregunta si estás creando el sitio para vos, para otra persona o si ya tenés un sitio web. Te da las tres opciones. Supongamos: «Estoy creando un sitio para mí». «Lo estoy construyendo yo mismo». ¿Qué va a ser? Una tienda online. Supongamos, una tienda online. «Sí, por favor, necesito crear el sitio web». «Crear un sitio web» o «Migrar mi sitio». No, no tengo nada, voy a empezar de cero. Listo. ¿Y con qué lo voy a hacer? Bueno, aquí me da opciones de muchas herramientas que ya están listas para utilizar. Así como WordPress, hay un montón de herramientas para distintas cosas y yo voy a elegir WordPress. Y aquí me da distintas opciones de plantillas. Puedo hacer una vista previa para ver si me gusta la plantilla. Sí, esta la verdad que está... está bastante buena. Así es como se vería en una tableta y así es como se vería en un teléfono. Aquí vemos el tema de lo responsivo. Aquí se ven, por ejemplo, dos por renglón, aquí se ven tres y aquí se ven cuatro. Aquí puedo reclamar el dominio gratis que me habían ofrecido. Le vamos a poner un nombre, supongamos: mitiendafeliz.com. [Música] Continuar y finalizar configuración. Ahí se está registrando el dominio.
Bueno, si escribo en el navegador la dirección mitiendafeliz.com, ya existe el sitio. Es exactamente la misma plantilla que habíamos elegido. Lo único que tengo que hacer es cambiar las imágenes, cambiar los textos y ya tengo el sitio armado. Les voy a dejar aquí abajo en la descripción un link especial de Foro Alfa con el cual les van a aplicar este descuento. Bueno, y ahora que sabemos bien qué es un sitio responsive, vamos a ver qué es una marca o un logo responsive. Lo primero que necesitamos saber es de dónde salió este concepto. Esto que estamos viendo aquí es la página responsivelogos.co.uk, que pertenece a un tal Joe Harrison, que es el creador del concepto «responsive logos». Si nos vamos al pie de la página, aquí dice que esto es de 2014. Y aquí lo que dice es que agrande o achique el ancho de la página para ver lo que pasa. Bueno, como pueden ver, la marca se va achicando y van apareciendo versiones más complejas a medida que tengo más espacio de ancho, lo que me permite ver versiones más complejas. Por ejemplo, acá dice Nike Air, MTV Music Television, pero ahí desaparece el Air y desaparece Music Television y, bueno, hasta llegar a una versión mínima de la marca. Yo me tomé el trabajo de entrar a todas las páginas de estas empresas y confirmar que todas estas versiones que se muestran aquí no son reales. Algunas sí, pero no todas son reales. Por ejemplo, Coca-Cola. Esto de «Drink Coca-Cola», «Coke», pero hace mucho que no se utiliza esta versión de la marca de Coca-Cola. Esta tampoco. Esta tampoco es la marca de Coca-Cola. La marca de Coca-Cola es esta. Esta es la que utiliza Coca-Cola siempre. Y si vamos al sitio de Coca-Cola, vamos a ver que la marca siempre es la misma. Si vemos el sitio en diferentes tamaños, podemos ver que la marca es siempre la misma, aunque se va modificando el lugar en el que aparece. En el sitio global, que es este, todavía es mucho más alevoso. Fíjense, no se cambia ni una vez la marca, se queda siempre en el mismo lugar, adecuada al tamaño de ancho de la pantalla. Porque no hace falta. En el tamaño de un teléfono, este ancho es una barbaridad para que se vea la marca perfectamente. Aunque la página sea chiquita, yo no necesito ponerla así de chiquita, la puedo poner así de grande, incluso la puedo poner mucho más grande. Y lo mismo pasa si nos vamos al sitio de Nike: la marca no necesita modificarse porque se ve siempre bien. O al sitio de Chanel.
Ni se modifica, la marca es siempre la misma. También hay que explicarle a Joe Harrison que Chanel nunca utiliza su símbolo junto con su logotipo, como hacen muchas marcas de moda. El caso de Heinz es el más absurdo, porque lo que está poniendo es la etiqueta entera. ¿Desde cuándo Heinz necesita usar la etiqueta entera para identificarse en un tamaño de pantalla grande? Esto es ridículo. El caso de Lacoste, exactamente igual. Todos igual. Es decir, el concepto inventado por Joe Harrison de logos responsive es absurdo, ridículo y absolutamente innecesario. Esa idea que se le ocurrió, que podía llegar a ser necesaria en el año 2014... Y, además, se puede ver en cualquier sitio: nadie hace eso que dice Joe Harrison. El tamaño de ancho de la pantalla de un teléfono es enorme, son como 6 centímetros, 5 en el peor de los casos, y en 5 centímetros tengo mucho espacio para poner un logotipo. Con tres centímetros de ancho me alcanza para poner la marca más compleja que haya y se va a ver perfectamente en la pantalla.
A pesar de que esto es totalmente absurdo, como tantas cosas que discutimos y debatimos en este canal, claro, muchos están pensando: «No, sí, sí, a mí también me parece absurdo, siempre me pareció una ridiculez, seguro». Pero es cierto que, hay que decir, a la mayoría de los diseñadores esto les suena bastante razonable. Esta idea apareció en Foro Alfa en un artículo de Anita Chalú, también en 2014, porque me pareció bastante ridícula toda la propuesta. Ella la presentaba como totalmente de acuerdo con esta idea y que esto iba a funcionar y que esto era un concepto muy importante para considerar cómo se diseñan marcas. Y, bueno, yo le dije: «Mirá, presentémoslo como un debate, porque no sabemos cómo va a funcionar esto, si esto es real». Para mí era una ridiculez total. Por más que el responsable de lo que dice un artículo es su autor, a mí me dio vergüenza publicar eso como artículo. Así que lo presentamos como: «Bueno, ¿logos adaptables? ¿Podría haber dicho marcas responsive? ¿Tendencia o recurso forzado?». Y el artículo está modificado para que todo esto se presente como una posibilidad, no como algo que ya está, que es una tendencia. Debajo del artículo se produjo un debate que produjo 107 opiniones. Aquí, hasta 2020, seguían apareciendo opiniones, y la mayoría, si uno se pone a leerlos, están más o menos de acuerdo con que esto es algo viable, que es posible: «Me parece interesante el tema», «Es más que interesante», «Muy interesante el tema», «Muy buen aporte», «Especialmente para diseñadores», «Excelente aporte», «El tema de actualidad en diseño es importante considerarlo parte del manual». Es un tema que desde el principio a todo el mundo le pareció razonable. Aquí tenemos una nota de la revista Gràffica que se llama «Logos responsive: la nueva tendencia en branding», que es del año 2021, donde básicamente lo que hace es contar que todo esto existe y, además, dice que es una tendencia: «El logo responsive es la nueva tendencia en las grandes marcas. El uso de diferentes dispositivos con tamaños de pantalla variables crea la necesidad de diseñarlos para que se adapten a escenarios diversos». Muestra los mismos ejemplos que Joe Harrison, aquí están, y evidentemente no se tomaron el trabajo de ver qué pasó con esas marcas después de siete años y lo presenta como una tendencia y como algo posible, viable. Un delirio completo. ¿Por qué es un delirio? Porque en identificación, cuantas menos versiones tengas de tu marca, mejor. Más versiones tenés, más difícil es que te reconozcan. No tiene sentido tener muchas versiones. En todo caso, a algunas marcas les puede servir tener una versión apocopada, en el caso de que vea que le rinde más y que su público la reconoce. Porque si el público la reconoce, no hay ningún problema. Pero dos versiones, no tener tres, cuatro, cinco como propone Joe Harrison. Una ridiculez completa. Pero bueno, así es el mundo del diseño. La racionalidad no es lo que predomina, lamentablemente. Ideas como estas predominan y gobiernan el pensamiento de los diseñadores. Pues claro, el parecido simpático de que: «Ah, mirá, se va agrandando, se van desapareciendo elementos, achicando. Qué simpático, qué útil». Pero esto no tiene uso en la práctica. Es solo una fantasía de una persona que deliró y fantaseó con que eso podía ser una necesidad, inventó versiones complejas de las marcas para poder demostrar su fantasía, y nunca existió. Esto no existió en la vida real, nunca. Esto es un invento, un invento de Joe Harrison. No existe. Si te gustó el video, compartilo, porque esta idea sigue circulando a pesar de que pasó un montón de tiempo. Dale un me gusta, suscribite si todavía no lo hiciste. Nos vemos en el próximo video. [Música]