Tecnología

Responsive Web Design, más allá de la moda: un análisis del nuevo Time.com

·

Fondo y forma. Aunque la mayor parte de mi carrera como «periodista técnico» me he dedicado mucho más al fondo (el contenido en sí), desde hace tiempo viene intrigándome tanto o más la forma (el diseño), y si hay una tendencia que me tiene entusiasmado es el diseño adaptable, traducción más bien libre de Responsive Web Design. Esta disciplina, de la que ya he hablado en varias ocasiones, es protagonista en mi blog desde el último rediseño, y día a día no hago más que leer, aprender y documentarme sobre nuevas técnicas y nuevos ejemplos que demuestran la validez de este versátil modelo de desarrollo web.

De hecho, los «responsive themes» para WordPress son ahora mismo legión en tiendas online muy conocidas como ThemeForest, pero esta filosofía va más allá de WordPress y está conquistando a muchos medios tradicionales. The Boston Globe era clara referencia -de hecho, al fantástico rediseño de esa web contribuyó Ethan Marcotte, que acuñó el término Responsive Web Design y que de hecho escribió un libro fantástico sobre él- pero gradualmente están surgiendo ejemplos que demuestran la validez y potencia de este modelo.

Por supuesto, opiniones hay para todos los gustos, y un buen ejemplo lo tenemos en las webs de Weblogs SL -empresa que hace las cosas y muy bien y con la que TPNet compite a nivel profesional, pero siempre desde el buen rollo- cuyo co-fundador, Julio Alonso, comentaba esa inquietud por si el Responsive Web Design podría servir para un ambicioso proyecto de rediseño en webs como Xataka. La respuesta en su caso fue un no, ya que buscan experiencias distintas según el dispositivo. No sería el camino que yo hubiera tomado de redirigir un diseño de nuestras webs -algo que caerá tarde o temprano- y así se lo hice ver en los comentarios, pero sea como fuere, es una opción totalmente respetable.

Pero cada vez más ejemplos me confirman mi seguridad en la apuesta por Responsive Web Design. Los últimos en llegar, el rediseño de ReadWrite (antes ReadWriteWeb), y el de la versión web de la legendaria revista Time. Pasemos a echarles un vistazo.


Para no marear con cientos de capturas, he sacado una conjunta de la Home con una single al lado en la pantalla de mi PC, pero lo importante es que os deis cuenta de que esas capturas mantienen su identidad en pantallas de todo tamaño, incluso en las pequeñas (ya no tanto) pantallas de los modernos smarpthones. La idea es que visitéis cualquiera de las dos y juguéis con el tamaño de ventana del navegador para comprobar como el contenido y los elementos de cada página se adaptan a ese tamaño de ventana.

En el primer caso, el de la conocida ReadWrite, nos encontramos ante un rediseño que para mi gusto -lo comenté en Twitter- está quizás demasiado pensado para tablets (atentos al menú superior y al botón de búsquedas en lugar de la inclusión de un campo propio), pero que aún así es limpio, claro y muy funcional. Aún así, cuenta con elementos muy curiosos, como una velocidad de scroll que es diferente según la columna. Echad un vistazo a su web y juguetead con la rueda del ratón (o con el scroll sobre el trackpad/touchpad de vuestros portátiles) para comprobarlo. Esa columna izquierda con una lista «infinita» de los últimos artículos (no sale bien en la captura)también es un elemento destacable, como también lo es el hecho de usar el scroll infinito en la home para las noticias, con una recarga que se activa al llegar al final de la página y que recuerda mucho al funcionamiento de la web de Twitter.

En el segundo nos encontramos ante una fantástica aplicación de lo mejor del Responsive Web Design (RWD). La nueva web de Time respira aire por los cuatro costados (me encanta) y se adapta perfectamente a cualquier tamaño de pantalla, algo que tiene muchísimo más mérito por la cantidad de secciones y de contenidos diversos que debe servir una revista de este tipo. Las singles (las páginas de los artículos, vaya) son una pequeña obra de arte, porque incluso con la publicidad presente la lectura es cómoda y clara.

Y atentos a la publicidad, otro de los retos fundamentales de cualquier proyecto RWD. Google no ofrece soluciones para que AdSense sea «responsive», y lo mismo ocurre para la propia IAB, el organismo que dicta qué formatos publicitarios son adecuados en Internet. Así que las media queries, base de ese redimensionamiento dinámico de bloques de texto e imágenes, no son utilizables en bloques de anuncios. La solución de Time ha sido sencillamente prodigiosa -aunque probablemente compleja y farragosa de llevar a cabo-: adaptan el banner al espacio disponible, lo que obliga -y ahí no hay tu tía- a que las agencias proporcionen al editor de contenidos varios formatos para un mismo banner, que se servirán según el usuario acceda a ese contenido desde su PC, su portátil, su tablet, su smartphone o su «loquesea». Los chicos de appenTo, encargados de ese rediseño, precisamente contaron algunas de las claves, y no puedo más que elogiar un resultado que es, a mi modo de ver, ejemplo de cómo debería ser una revista o un periódico hoy en día en Internet. Me fallan algunos elementos -tipografías, fotos más destacadas en ciertos contenidos- pero la base, el esqueleto, cómo funciona Time.com, es sencillamente espectacular.

Sin duda, dos ejemplos claros de lo que se puede lograr con un Responsive Web Design al que yo veo como una fantásica solución para este mundo multipantalla en el que vivimos. ¿Por cierto, qué tal las dos columnas de Incognitosis? ¿Os vais acostumbrando?


Incognichollos

Esta es una selección con las mejores ofertas tecnológicas actualizadas casi diariamente, como expliqué aquí. Aunque estés en un post «antiguo» las ofertas son de última hora, los Incognichollos los actualizo aparte. También puedes seguir los Incognichollos en Twitter o en el nuevo canal de Telegram 🙂 . ¡Aprovecha, que no suelen durar mucho tiempo!

  • LG 65UM7610PLB: una smart TV de 65? con resolución 4K UHD, soporte HDR, palnel IPS, sistema webOS 4.5, asistente de Google y Alexa, sonido DTS Virtual:X. Está a 642,45 euros en Amazon (baja de 999).
  • Huawei P40 Lite: el nuevo modelo de 6,4? con un Kirin 810, 6 GB de RAM, 128 GB de capacidad, cámara quad (48+8+2+2), 4.200 mAh y con Android pero sin apps o servicios de Google, aunque hay formas de saltarse ese tema. Está a 202,99 euros en AliExpress Plaza con el código ALIVERSARIO27. En Amazon está a 299 euros aunque te incluye unos Freebuds 3.
  • Realme X2 Pro: 6,5 pulgadas 90 Hz, 12 GB de RAM, 256 GB capacidad, Snapdragon 855+, cámara cuádruple (64+13+8+2 MP), 4.000 mAh, lector bajo pantalla, está a 361 euros en AliExpress Plaza con el código ALIVERSARIO37. En Amazon está a 439 euros.
  • Xiaomi Redmi Note 8: 6,53?, Snapdragon 665, 4 GB de RAM, 64 GB de capacidad, cámara cuádruple (48+8+2+2) y 4.000 mAh de batería. Estupendo por 135,20 euros en AliExpress Plaza con el código 328TT11ANIVERSARIO. En Amazon está a 155,42 euros.
  • Smart TV Stream System 32?: una Smart TV modesta de 32 pulgadas HD Ready (1.366×768) que puede hacer el apaño. Tiene soporte de Netflix, HBO o YouTube, puerto HDMI, USB y WiFi. Está a 120 euros en AliExpress Plaza con el código ALIVERSARIO17.
  • Xiaomi Amazfit Pace: un reloj deportivo de Xiaomi que tiene GPS, frecuencia cardíaca, notificaciones, 4 GB de capacidad para música, batería de hasta 5 días en uso normal, está a 58,15 euros en AliExpress Plaza con el código ANS7.
  • Xiaomi Mi TV Box S: el set top box de Xiaomi con soporte de streaming en 4K, procesador Amlogic S905L (S905X), 2 GB de RAM, 8 GB eMMC, WiFi ac, BT 4.2, HDMI 2.0, mini TOSLINK, control remoto. Está a 49 euros en Amazon.
  • Apple iPhone 11 64 GB: 6,1 pulgadas de pantalla Retina, Apple A13 Bionic, Face ID, cámara dual de 12 +12 Mpíxeles, carga inalámbrica, resistencia IP68, carga rápida, Dolby Atmos, está a 749 euros en AliExpress Plaza con el código ALIVERSARIO60 (envío desde España). En Amazon está a 789 euros.
  • Amazon Kindle: el lector de libros electrónicos de Amazon ya cuenta en su versión básica con luz frontal integrada, así que puedes leer en la cama sin lámparas. 6 pulgadas 167 ppp, 4 GB de capacidad, está a 64,99 euros en Amazon (baja de 89,99). El Paperwhite resistente al agua está a 99,99 euros (baja de 129,99).
  • Monument Valley 2: un juego visualmente precioso con una mecánica de puzzles espectacular. Está gratis para Android en Google Play y también gratis para iOS en la App Store.
  • Apple Watch Series 5: el reloj inteligente de Apple baja un poco de precio. Pantalla siempre activa, 44 mm, tiene GPS pero no eSIM, correa de slicona, chip Apple S5, sensor de frecuencia cardáica, digital crown. Está a 315,43 euros en AliExpress con el código ALIVERSARIO37.
  • TD Systems K50DLJ10US: una Smart TV de 50 pulgadas con resolución 4K UHD, soporte HDR10, sonido Dolby Digital Plus, Android TV, está a 247,05 euros en AliExpress con el código ALIVERSARIO37. En Amazon 379 euros.
  • XIaomi Mi Band 4: la versión global enviada desde España de esta pulsera cuantificadora con pantalla AMOLED de 0,95?, monitorización de sueño, actividad física, GPS, todo por 22 euros en AliExpress. En Amazon está a 29,78 euros.
  • Xiaomi Redmi Note 9S: preventa (disponible el 7 de abril), 6,67?, Snapdragon 720G, 6 GB de RAM, 128 GB de capacidad, cámara quad (48+8+5+2 MP), 5.020 mAh de batería (uauh), está a 229 euros en AliExpress Plaza con el código NOTE9S40S.
  • TCL 50DP602: una Smart TV de 50? con resolución 4K UHD, soporte HDR, sonido Dolby Digital Plus, está a 326,22 euros en Amazon. Brutal.
  • Oppo Reno 2: 6,55?, Snapdragon 730G, 8 GB de RAM, 256 GB de capacidad, cámara cuádruple (48+13+8+2), lector de huella bajo pantalla, 4.000 mAh, cámara frontal «aleta tiburón». Muy curioso , está a 459 euros en Amazon (baja de 499).
  • Huawei P30 Lite: 6,15?, Kirin 710, 4 GB de RAM, 128 GB de capacidad, cámara triple (48+8+2), 3340 mAh, lector de huella trasero, NFC, minijack. Está a 172 euros en AliExpress Plaza (envío desde España) con el código ALIVERSARIO27.
  • Adaptador Bluetooth Philips AEA2000: un dispositivo que transforma en Bluetooth tus altavoces y equipo de sonido de siempre . Se conecta por minijack y ya lo puedes usar enviando música desde el móvil. Está a 19,97 euros en Amazon (baja de 34,99).
  • Mochila Under Armour Scrimmage 2.0: una mochila unisex para adulto con tejido que repele el agua y transpira, correas acolchadas para los hombros, funda para ordenador de 15,6?, bolsillo de malla para botella. Está a 19,98 euros en Amazon (baja de 40).
  • Micrófono Nacon PCST-200MIC: un estupendo micrófono de streaming profesional con conexión USB, patrón cardioide, incluye trípode ajustable, salida para monitor/auriculares con conector de 3,5 mm. Está a 44,95 euros en Amazon (baja de 70).
  • LG 49UM7100ALEXA: una Smart TV de 49? 4K, soporte HDR10 Pro y HLG, altavoces de 20 W Dolby Digital, webOS, AI ThinQ, Bluetooth, WiFi, Miracast, y soporte integrado de Alexa. Está a 364 euros en Amazon.
  • OnePlus 7T: 6,55?, soporte 90 Hz, Snapdragon 855+, 8 GB de RAM, 128 GB capacidad, cámara triple (48+12+16 MP), 3.800 mAh, lector bajo pantalla, excepcional por 453 euros en Banggood con el código BG7T128320. En Amazon cuesta 608 euros.
  • ASUS ZenBook 14: un portátil de 14? FullHD con un Ryzen 7 3700U, 16 GB de RAM (muy bien), 512 GB de SSD, una Radeon RX Vega 10, sistema operativo Endless OS, teclado español, lector de huella. Está a 649 euros en Amazon.
  • WD Black P10 5TB: una unidad de 5 TB de capacidad perfecta para consola o PC, capacidad estupenda, conexión USB 3.0, tasas de transferencia notables, está a 119,99 euros en Amazon (baja de 140,49).
  • Dos Sonos One (2ª Gen): un pack de dos altavoces Sonos One con control táctil y calidad excepcional de sonido, soporta Alexa y AirPlay, al agregar dos a la cesta y tramitar se aplica el descuento, están a 295 euros en Amazon. (bajan de 380).
  • Seagate Expansion 8 TB: otra unidad aún con mayor capacidad, 8 TB (uauh!) con interfaz USB 3.0 (compatible USB 2.0), 3,5 pulgadas y un precio muy bueno (no tanto como el anterior), 139,99 euros en Amazon.
  • HiSense H50AEE6400: una Smart TV de 50? con resolución 4K UHD, soporte HDR, plataforma VIDAA U, modo deporte, está a 349,99 euros en Amazon.
  • ‘World War Z’, ‘Figment’ y ‘Tormentor x Punisher’: Epic Games vuelve a regalar juegos. Tres más con muy buenas críticas, que os podéis descargar desde ya mismo. A por ellos!
  • Altavoces Edifier Studio R1280T: equipo de dos altavoces para sonido estéreo, hasta 42 W de potencia, conectores RCA y minikack, sensibilidad de 85 dB, mando a distancia. Son estupendos, de hecho los tengo en casa. Están a 73,99 euros en Amazon (bajan de 99,99).
  • Apple iPhone 8 256 GB (rojo, reacondicionado): atentos a este modelo, que según Amazon está como nuevo y «funciona como tal», nada menos que 256 GB de capacidad, 4,7 pulgadas, cámara de 12 Mpíxeles, TouchID, resistencia al agua IP67. Está a 399 euros en Amazon.
  • Sharp LC-55UI8762ES: una Smart TV de 55 pulgadas con resolución 4K UHD, soporte HDR+, Smart Aquos Net+, 3 x HDMI, 2 x USB, altavoces Harman Kardon, está a 399,99 euros en Amazon (baja de 799,99).
  • Philips 32PFS5823: una Smart TV modesta de 32 pulgadas y resolución Full HD para quienes no necesitan lo más de lo más. Tiene tecnología Pixel Plus HD, Dolby Audio, y puertos HDMI y USB. Está a 209,99 euros en Amazon (baja de 269).
  • Lenovo IdeaPad C340-14API: un portátil convertible en tablet muy majo de 14? Full HD con un Ryzen 5 3500U, 8 GB de RAM, 256 GB de SSD, Windows 10 y teclado en español por 599,99 euros en Amazon.
  • ASUS ZenBook UM431DA-AM003: un portátil de 14? Full HD con un Ryzen 5 3500U, 8 GB de RAM, 512 GB de SSD, sin sistema operativo, teclado en español, está a 549 euros en Amazon.
  • Humble Bundle Just Drive: un pack de juegos de conducción para quienes quieran disfrutar al volante «virtual». Asetto Corsa, Dirt 4 y Project Cars 2 entre otros por 12 euros en Humble Bundle. Brutal
  • Humble Bundle Stardock: esta empresa lleva años haciendo programas fantásticos de personalización y productividad de Windows 10. Por 13,50 euros tendrás el pack completo, incluidos Windows Blinds, Fences (escritorios virtuales) o Multiplicity (KVM software).
  • ASUS ROG Swift PG248Q: un monitor gaming de 24? FullHD, hasta 180 Hz, contraste 1000:1, 1 ms de tiempo de respuesta, están a 232,24 euros en Amazon reacondicionados (casi como nuevos, precio normal 425 euros).
  • Garmin Fenix 5: un reloj cuantificador y deportivo espectacular con GPS, medidor de frecuencia cardíaca, caja de 47 mm, un montón de indicadores, muy usado por triatletas, está a 382 euros en Amazon (baja de 499,99).
  • Acer Aspire 3: un portátil muy modesto pero curioso, 15,6? FullHD, Core i3-6006U, 4 GB de RAM, 128 GB de SSD, Linux preinstalado, teclado español, está a 239 euros en Amazon, buena opción como portátil de batalla o para niños.
  • Kllisre X79: curiosísimo esta combinación de placa base + CPU 8 GB RAM. Integra un Xeon E5 2620 y dos módulos DDR3 de 4 GB. Todo un poco antiguo pero curioso para montar un equipito de salón o trabajo majo. Está a 66,77 euros en AliExpress.
  • Honor Magic Watch 2: el reloj inteligente de Honor, la submarca de Huawei, con caja de 42 mm, Bluetooth 5.0, resistencia al agua (natación), ritmo cardiaco, monitor de sueño, diversas actividades, notificaciones, hasta 14 días de autonomía, está a 119 euros en AliExpress. El de 46 mm está a 130 euros en AliExpress.
  • AMD Ryzen 2600X: si estáis actualizando vuestro PC o vais a montaros uno nuevo atentos a este micro de 8 núcleos y 16 hilos de ejecución, preparado para overclocking, 95W de TDP, hasta 4,25 GHz. Está a 129 euros en Amazon (baja de 215).
  • Xiaomi Mi 9T: 6,39? AMOLED, Snapdragon 730, 6 GB de RAM, 128 GB de capacidad, cámara triple (48+8+13), cámara frontal retráctil (20 MP), lector de huella bajo pantalla, 4000 mAh. La versión de 64 GB está a 259,99 euros en Amazon (baja de 329).
  • Aspiradora Philips Speedpro: formato escoba, se puede usar como aspiradora vertical o aspiradora de mano, en ambos casos sin cable. Cepillo con succión de 180º, tecnología PowerCyclone 7, hasta 800 l/min de velocidad del aire, está a 149,99 euros en Amazon (baja de 289).
  • Amazon Prime Estudiantes: la suscripción a Amazon Prime está a solo 18 euros al año (60 para usuarios normales) con un periodo gratuito de 90 días de prueba. Ya sabéis, con ella tenéis entrega rápida gratis, prime video y prime music.
  • Xiaomi Redmi Note 8T: 6,3?, Snapdragon 665, 3 GB de RAM, 32 GB de capacidad, cámara cuádruple (48+8+2+2), 4.000 mAh, lector trasero, buena opción recién salida del horno. Está a 179 euros en Amazon.
  • Huawei P40 Lite + Freebuds 3: 6,4?, Kirin 810, 6 GB de RAM, 128 GB de capacidad, cámara cuádruple de 48+8+2+2 MP, 4.200 mAh de batería, regalo de los auriculares valorados en 179 euros. Está a 299 euros en Amazon, espectacular. Una sola pega: lleva Android 10, pero sin servicios y apps de Google.
  • HiSense H65A6500: una Smart TV enorme de 65 pulgadas con resolución 4K UHD, soporte HDR, con la plataforma VIDAA U, modo deportes, WiFi, Precision Color, está a 579,99 euros en Amazon.
  • Intel NUC: un miniPC potente y curiosón. Con un Core i5-7260U, 8 GB de RAM, 240 GB de SSD2, Windows 10, está a 525 euros en Amazon. Buen equipo de trabajo o incluso de salón.
  • Acer Aspire 3 A315-54K: un portátil de 15,6? Full HD con un Core i5-10210U, 8 GB de RAM, 512 GB de SSD, sin sistema operativo, con salida HDMI, RJ45, USB 3.1, lector de tarjetas, está a 499 euros en PcComponentes (en Amazon 708 euros).
  • Disco duro externo Maxtor 4 TB: una unidad ya reconocida, compacta, conexión USB 3.0/3.1 Gen 1, 4 TB de capacidad, está a 99,90 euros en Amazon.
  • Smartwatch Huawei GT Fashion: un reloj inteligente con monitor de sueño, ritmo cardíaco, sistema LiteOS, GPS, Bluetooth, y pantalla estupenda. Está a 99 euros en Amazon (en PcComp 147).
  • ASUS TUF Gaming FX505DV: un portátil gaming con pantalla de 15,6? Full HD a 120 Hz, Ryzen 7 3750H, 16 GB de RAM, 512 GB SSD, GeForce RTX 2060 (uauh), sin SO, teclado retroiluminado en español. En eBay está a 999 euros, rebaja brutal.

¿Quieres recibir un correo de aviso cuando publique nuevas entradas?

Standard

5 comentarios en “Responsive Web Design, más allá de la moda: un análisis del nuevo Time.com

  1. Kevin dice:

    Es un poco coñazo tener que bajar y subir, pero uno se acostumbra a todo y, en mi opinión, queda bien (ahí ya eres tú el que valora).
    No dejes de escribir sobre este tema, por favor; muy actual y con el que nos topamos cada día ; )

  2. Totalmente de acuerdo con el artículo.

    Respecto al tema Xataka, no puedo estar mas de acuerdo con la necesidad de añadirle responsive design, ya que para mi, es uno de los sitios con peor experiencia móvil.

    Personalmente, cuando accedo desde un móvil quiero tener disponible la misma información que desde un sobremesa/portátil, y no una página capada, que se ve medianamente en un smart-phone, pero que queda ridícula en un tablet…

  3. David dice:

    Con respecto a las dos columnas de Incognitosis, un pequeño problema es la foto al principio de la columna de la izquierda que hace que el comienzo del texto esté más abajo que en la columna de la derecha. Esto hace que se tienda a pensar que el artículo empieza a a derecha (por unos instantes), especialmente si se accede con una resolución baja, ya que entonces solo se ve el título, el subtítulo, la foto de la izquierda y el texto de la derecha 🙂 La solución sería mover la foto a la derecha o más abajo o incluso aumentar el tamaño de la primera letra de la primera palabra del artículo (un recurso ampliamente utilizado en la prensa tradicional y que es bastante efectivo). Saludos.

  4. Pingback: Analizando el nuevo look de The Next Web. Cómo no, responsive. | Incognitosis

Comentarios cerrados