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!

  • Apple iPhone XS 256 GB: pantalla de 5,8 pulgadas, chip A12 Bionic, Face ID, 3 GB de RAM, 64 GB de capacidad, cámara dual de 12 Mpíxeles, está a 760,99 euros en Amazon (baja de 1.209). La versión de 64 GB está a 634 euros (baja de 1.039), a mí incluso me mola más, siempre podéis tirar de iCloud si se os va acabando el espacio.
  • Toshiba 58U2963Dg: una Smart TV de 58 pulgadas con resolución 4K UHD, soporte HDR10 y HLG, WiFi, 3xHDMI, 2xUSB, sonido Onkyo, está a 359 euros en Amazon, espectacular.
  • Samsung Galaxy Fit e: pulsera cuantificadora resistente al agua hasta 5 ATM, batería de 70 mAh, pantalla PMOLED de 0,74?, sensores de ritmo cardíaco, control de actividades físicas y sueño, está a 16,99 euros en Amazon (baja de 39,99). Tirada.
  • ViewSonic VX2457MHD: un monitor de 24 pulgadas Full HD con panel TN, 300 nits, conexiones VGA, HDMI y DP, altavoces, AMD Freesync, está a 89 euros en Amazon (baja de 135).
  • Lenovo IdeaPad 520S-14IKB: un portátil de 14 pulgadas Full HD con un Core i3-7130U, 4 GB de RAM, 128 GB de SSD, Windows 10 y teclado en español, además de lector de huella. Está a 449,99 euros en Amazon (baja de 799,99).
  • ASUS K543UA: un portátil de 15,6 pulgadas con resolución HD (1.366×768) que no obstante está bien armado en lo demás. Core i3-7020U, 8 GB de RAM, 256 GB de capacidad, con Endless OS (tipo Ubuntu) preinstalado, teclado español. Está a 349,99 euros en Amazon (baja de 399).
  • Acer Predator Z271: el modelo reacondicionado garantizado por Amazon (estado «Muy bueno»). Monitor gaming de 27 pulgadas FullHD con 4 ms de tiempo de respuesta, 144 Hz y dos altavoces de 14 W. Está 197 euros en Amazon (nuevo 399).
  • Xiaomi Mi Smart Sensor: kit de seguridad doméstica compuesto de sensores de movimiento, dos sensores de puerta y ventana y un interruptor inalámbrico. Incluye altavoz inteligente compatible con Google y Amazon Alexa, está a 49,98 euros en Amazon (baja de 70).
  • 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 177 euros en AliExpress Plaza (envío desde España) con el código ALIAHORRA30. En Amazon está a 212,48 euros.
  • Juguete Pistola LaserX: con un receptor y una pistola láser, una chulada para los peques. Está a 20 euros pero al tramitar el pedido se queda en 14,20 euros en Amazon. Lo ideal, claro, es comprar al menos dos para competir con otra persona.
  • Philips 323E7QDAB: un monitor de 31,5 pulgadas (la info de Amazon es un poco confusa) con resolución 1080p, contraste 1000:1, tiempo de respuesta de 5ms y altavoces integrados. Para verlo todo (muy) grande. Está a 169 euros en Amazon (baja de 239).
  • 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. A este precio los equipos suelen tener como mucho una GTX 1650 (como el Lenovo Legion Y540 de un poquito más abajo).
  • Apple iPhone XR: el modelo con pantalla Liquid Retina de 6,1 pulgadas, CPU Apple A12 Bionic, Face ID, 3 GB de RAM, 64 GB de capacidad, cámara de 12 Mpíxeles, está a 569 euros en AliExpress Plaza (envío desde España) con el código ALIAHORRA70 (en Amazon sale por 669euros).
  • Cable 3 en 1 Multicarga: de USB a USB-C, Lightning y MicroUSB para poder elegir el extremo que más os guste y tener siempre un cable preparado para cargar todo tipo de móviles. Está a 4,39 euros en Amazon (baja de 7).
  • Lenovo Legion Y540: un portátil gaming fantástico. 15,6? Full HD, Core i7-9750H, 16 GB de RAM, 256 GB SSD, 1 TB HDD, una GTX 1650, teclado retroiluminado en español, sin Windows. Está a 949 euros en Amazon (baja de 1.199).
  • Monitor LG 24GL600F: un monitor gaming de 23,6 pulgadas con resolución FullHD, 1 ms de tiempo de respuesta, soporte de 144 Hz (uauh), FreeSync, 2 x HDMI 1 x DP, salida de audio y formato 16:9. Bastante espectacular a 111 euros en AliExpress Plaza (envío desde España) con el código ALIAHORRA20. (En Amazon está a 149,99 euros).
  • Reacondicionados Amazon con un 20% de descuento adicional: los productos de segunda mano en muy buen estado y garantizados por Amazon. Además ahora hay una selección con un 20% extra de descuento al tramitar la compra. Hay varios chollos estupendos, esta es la selección de Amazon.
  • PS4 Pro + 20 euros tarjeta prepago: la consola más potente de Sony en formato reacondicionado (garantizado por Amazon) con el nuevo chasis G, en estado «Muy bueno» y con esa tarjeta regalo. Está a en Amazon por 291,56 euros.
  • Monitor Philips 223V5LSB2: no esperéis nada especial de este monitor, pero es que atentos, diagonal de 21,5 pulgadas, Full HD (1.920×1080) y conexión VGA, 5 ms de tiempo de respuesta y un precio de risa, está a 59,90 euros en Amazon (baja de 79,90).
  • Trust Gaming GTX 252: un micrófono profesional con soporte de brazo perfecto para adaptarlo a podcasts o emisiones en directo. Patrón de grabación cardioide, conexión USB, está a 64,90 euros en Amazon (baja de 115,86).
  • Huawei P8 Lite: un reacondicionado garantizado por Amazon. 5 pulgadas, Kirin 620, 2 GB de RAM, 16 GB de capacidad, cámara 13 MP, está a 62,88 euros en Amazon. ¡¡Hay mucho más productos reacondicionados aquí!!
  • Chuwi HeroBook: un portátil muy modesto y muy barato: 14,1» (1366×768), Atom X5-E8000 (quad-core), 4 GB de RAM, 64 GB eMMC de capacidad (con M.2), Windows 10, teclado en inglés, salida Micro HDMI, 2xUSB3.0. Está a 161 euros en Banggood con el código BGCWHS1
  • Xiaomi Mi 9T: 6,39? AMOLED, Snapdragon 730, 6 GB de RAM, 64 GB de capacidad, cámara triple (48+8+13), cámara frontal retráctil (20 MP), lector de huella bajo pantalla, 4000 mAh. Está a 271,99 euros en Amazon (baja de 329).
  • SSD Externo Sandisk Portable 1 TB: una unidad SSD de 2,5 pulgadas compacta, resistente al agua y al polvo, con 1 TB de capacidad y transferencias de 550 MB/s. Está a 157,25 euros en Amazon (baja de 294,99).
  • Acer VX5-591G: un portátil gaming curioso con pantalla de 15,6 pulgadas FullHD, un Intel Core i5-7300HQ, 8 GB de RAM, 512 GB de SSD (muy bien!), y una GTX 1050 de 4 GB para jugar, arranque Linux, sin Windows, teclado en español. Está a 599 euros en Amazon.
  • Motorola Moto G7 Play: el modelo básico de 5,7?, Snapdragon 632, 2 GB de RAM, 32 GB de capacidad, Dual SIM, cámara de 13 MP, 3.000 mAh, está a solo 99 euros en Amazon. Chollo como teléfono básico, muy bien para niños.
  • Xiaomi Mijia Walkie-Talkie 1S: modelo profesional de Xiaomi con diseño ligero y delgado, potencia de transmisión de 3 W, hasta 5 km de alcance, incluye radio FM, 5 días de tiempo de espera. integra GPS y Bluetooth. Está a 38,8 euros en Banggood.
  • Hori Split Pad Pro: un mando para la Nintendo Switch que cuenta con la precisión y comodidad del Pro Controller en modo portátil. Botones traseros programables, función turbo con 3 ajustes. Está a 42,95 euros en Amazon (baja de 49,99).
  • MSI Modern 14: un portátil de 14 pulgadas FullHD con un Core i5-10210U, 8 GB de RAM, 512 GB de SSD, una GeForce MX250, sin SO. Teclado en español, está a 749,99 euros en Amazon. El mejor portátil del día y del mes.
  • Apple iPad 10,2 pulgadas (2019): la tableta de Apple con el chip A10 Fusion, cámara trasera de 8 MP, iPadOS, WiFi5, Facetime HD, soporta teclado y lápiz, está a 272,65 euros en eBay con el código PARATODO5.
  • WD MyBook 6 TB: un disco duro externo de 3,5 pulgadas con conexión USB 3.0 y ua capacidad estupenda de 6 TB, está a 116,33 euros en Amazon (baja de 229,99).
  • OnePlus 7 Pro: 6,67? a 90 Hz gloriosos, Snapdragon 855, 6 GB de RAM, 128 GB capacidad, cámara triple 48+16+8 MP, cámara frontal 16 MP retráctil, lector bajo pantalla, 4.000 mAh, espectacular a 478,80 euros en eBay con el código PARATODO5.
  • Xbox One X: la consola más potente de Microsoft con soporte 4K HDR, 1 TB de capacidad, un mando inalámbrico, unidad óptica, está a 304,90 euros en Amazon.
  • Drone Star Wars Propel Speeder Bike: un dron muy gracioso porque parece el speeder de una de las pelis, edición especial incluso con caja perfecta, está a 39,99 euros en Amazon (baja de 80).
  • Asus R521FA-EJ545: un portátil de 15,6 pulgadas FullHD con un Core i7-8565U, 8 GB de RAM, 512 GB de SSD, diseño casi sin marcos, teclado en español, sin sistema operativo, peso de 1,8 kg, está a 549,99 euros en Amazon.
  • ASUS ZenBook 14 UX433FA: un modelo más avanzado de 14 pulgadas Full HD con marcos aún más finos, Core i7-8565U, 8 GB de RAM, 256 GB de SSD, 1,4 kg de peso, touchpad que dobla como teclado numérico, está a 849 euros en Amazon (en PcComp 999).
  • Samsung Galaxy S10: el modelo G9730 Dual SIM con el Exynos 9820, 8 GB de RAM, 128 GB de capacidad ampliables, cámara triple (16+12+12), 3.400 mAh, lector de huella bajo pantalla. Estupendo por 615,20 euros en Amazon (baja de 909).
  • Amazfit Verge Lite Smartwatch: un reloj cuantificador con pantalla AMOLED de 1,3?, monitoriza 7 deportes distintos, GPS/GLONASS, sensor de ritmo cardiaco, IP68, batería de 390 mAh, hasta 20 días de autonomía. Está a 79 euros en Amazon (120 en PcComp).
  • Xiaomi Redmibook Ryzen Edition: atentos a este portátil de 14 pulgadas Full HD con un AMD Ryzen 7 3700U, 16 GB de RAM (uauh), 512 GB de SSD (muy bien), una GPU Radeon Vega 10 (mejor que la MX 250), 18 mm de grosor, 1,5 kg de peso, 2 x USB 3.0, 1 x USB 2.0, HDMI (pero no USB-C, lástima), batería de 46 W, Windows 10 y teclado retroiluminado en inglés. Está a 605 euros en Banggood con el código BGXMR7W.
  • Mini Proyector LED Excelvan: 4500 lúmenes, diagonales de hasta 200 pulgadas, resolución nativa de 1.280 x 768 (pero escala a 1080p), VGA, 2 x USB, AV, HDMI, salida de audio 3,5 mm, mando a distancia, altavoz integrado. Está a 79,99 euros en Amazon (baja de 169,99 euros, descuento al tramitar el pedido).
  • Xiaomi Redmi Note 8T: 6,3?, Snapdragon 665, 4 GB de RAM, 64 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 161,99 euros en Amazon (baja de 200).
  • Volante Hori Apex inalámbrico (PS4, PC): un volante para juegos de conducción, licencia oficial de Sony, se conecta vía Bluetooth, función de vibración, compatible con PS4 y PC. Está a 99,95 euros en Amazon (baja de 129,99).
  • Smartwatch Fossil 4ª gen: con correa de silicona, caja de 43 mm, GPS, resistencia al agua (sumergible, 3 ATM), Wear OS, notificaciones, miniaplicaciones, monitorización del ritmo cardiaco y de diversas actividades físicas. Está a 106 euros en Amazon Francia, envío incluido.
  • Xiaomi Mi Note 10 Pro: 6,47?, Snapdragon 730G, 8 GB RAM, 26 GB de capacidad, cámara penta 108+20+12+5+macro, NFC, lector de huella en pantalla, minijack, 5.260 mAh, está a 496 euros en GearBest con el código GBNT10PRO1.
  • Unidad SSD Sabrent 512 GB: en formato M.2 NVMe 2280, espectacular con esa capacidad de 512 GB y con un precio de 79,98 euros en Amazon (baja de 102).
  • Pendrive Verbatim 64 GB: llave de memoria USB 3.0 con 64 GB por un precio estupendo, 7,99 euros en Amazon.
  • Apple Watch Series 3: el reloj inteligente de Apple de hace un par de años sigue siendo gran opción, integra GPS, caja de 42 mm, color gris espacial, correa deportiva, chip S4 SiP, sensor de frecuencia cardiaca. Está a 259 euros en Amazon.
  • Xiaomi Mi A3: pantalla de 6,01?, Snapdragon 665, 4 GB de RAM, 64 GB de capacidad, cámara triple (48+8+2 MP), Android One (puro), lector de huella bajo pantalla, sin NFC, estupendo a 173 euros en Amazon.
  • MSI GF63 Thin 9SC: un portátil gamer bastante majo de 15,6? Full HD con un Core i7-9750H, 16 GB de RAM (muy bien), 512 GB de SSD (mola), una GeForce GTX 1650 Max-Q de 4 GB, sin sistema operativo, teclado español. Está a 898 euros en Amazon (baja de 1.149).
  • Chuwi UBook Pro: tipo Surface Pro pero en modesto, con un Intel Celeron N4100, 8 GB de RAM, 256 GB de SSD, pantalla de 12,3 pulgadas (1920×1280), lápiz con 4096 niveles de presión, 760 g de peso. Está a 284 euros en Banggood con el código BG33aadd
  • HP Omen X Mindframe: unos auriculares distintos a todo lo que conocíais: tienen refrigeración para vuestras orejitas ? Además de iluminación RGB, sonido envolvente 7.1 virtual y cable con conector USB. Están a 99,99 euros en Amazon (bajan de 199,99).
  • Lenovo Ideapad C340: un portátil convertible con pantalla de 14 pulgadas Full HD, un recién estrenado Core i7-1051U, 8 GB de RAM, 512 GB de SSD (bien), lector de huella, Windows 10 y teclado en español por 899,99 euros en Amazon
  • Xiaomi Redmi Note 8: 6,53 pulgadas, 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. En Amazon a 154 euros.

¿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