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:

  • Kindle Paperwhite: el lector de libros electrónicos de referencia baja de precio. Con pantalla de 6″ retroiluminada, 8 GB de capacidad, y esa resistencia al agua para llevártelo a la pisci/playa sin miedo. Está a 109,99 euros en Amazon.
  • Portátil Chuwi Lapbook Air: 14,1″ FullHD, Intel Celeron N3450, 8 GB de RAM, 128 GB SSD (ranura M.2), Windows 10, teclado inglés, WiFi, está a 281,04 euros en Banggood con el cupón BGair44
  • Repetidor WiFi dodocool: para mejorar la cobertura de tu red WiFi, soporte de redes 802.11b/g/n, antena integrada, enchufe europeo. Está a 16,99 euros en Amazon.
  • Lenovo Ideacentre 510A: un PC para trabajar y jugar con un AMD Ryzen 5 2400G, 8 GB de RAM, 1 TB HDD, una gráfica AMD Radeon RX 560 (4 GB GDDR5), y Windows 10 Home. Está a 599,99 euros en Amazon.
  • 48 cápsulas Nescafé Dolce Gusto: el sabor espresso intenso está de rebajas, un pack de 3×16 cápsulas está a 10 euros en Amazon
  • Patinete Xiaomi Pro: el modelo con batería ampliada (474 Wh, 18.650 mAh) que pasa de 30 a 45 km, sistema de frenos dual, ruedas de 8,5 pulgadas, más avanzado y seguro por 485 euros en Banggood con el cupón MIFANPRO
  • Ratón gaming Corsair M65 Elite: con cable, sensor óptico, hasta 18.000 PPP, retroiluminación RGB, sistema de pesos ajustables. Un ratón gaming muy llamativo y capaz, está a 49,99 euros en Amazon.
  • Lenovo Legion T530: un PC de sobremesa con un Core i5-8400, 8 GB de RAM, 128 GB de SSD, 1TB de HDD y gráfica GTX 1050. Sin sistema operativo, pero bien por 599 euros en Amazon. Pero que muy bien.
  • Zapatillas Lacoste Carnaby Evo: en color azul marino, disponibles en varias tallas, están a 59,99 euros en AliExpress Plaza.
  • Grand Theft Auto V: la edición para la Xbox One está de rebajas, solo 16,99 euros en Amazon.
  • Memoria USB SanDisk Cruzer 64 GB: conexión USB 2.0, buen diseño y capacidad estupenda sobre todo a este precio: 8,99 euros en Amazon.
  • Disco duro externo WD My Book 10 TB: vamos a por todas con esta unidad externa de nada menos que 10 TB con conexión USB 3.0 y un precio estupendo, 188,99 euros en Amazon. Brutal
  • Samsung Galaxy S10e: el telefonazo compacto con 5,8”, Exynos 9 Octa 9820, 6 GB de RAM, 128 GB de capacidad (ampliables), cámara dual 12+16 MP, 3.100 mAh lector de huella en el lateral. Está a 559 euros en eBay.
  • Windows 10 Pro: una licencia para el sistema operativo de Microsoft a 2,99 euros. Te la mandan por correo junto a algunas instrucciones. Está a 2,99 euros en eBay, perfecta para esos equipos que se venden sin sistema operativo.
  • Xiaomi Mi 9: atentos, chicos. AMOLED 6,39” , Snapdragon 855, 6 GB de RAM, 64 GB de capacidad, huella dactilar en pantalla, carga inalámbrica y rápida, cámara triple (48+12+16 MP). Está a 401 euros en Banggood con el cupón 4BGM964. Otra alternativa: está a 449 en Amazon.
  • Xiaomi Redmi Note 7: 6,3” (mininotch), Snapdragon 660, 4 GB de RAM, 128 GB de capacidad (ampliables), 4.000 mAh de batería, minijack y cámara dual de 48+5 MP realmente estupenda. Está a 201,63 euros en Banggood con el cupón 4BGN7128. La versión de 3 GB de RAM y 32 GB de capacidad del Redmi Note 7 está lógicamente más barata, tan solo 146 euros en AliExpress con el cupón “aliexpress19068. Y otra opción más, 4 GB de RAM, 64 GB de capacidad por 165 euros en AliExpress con el cupón AliExpress19215
  • Suscripción EA Access 12 meses: un año entero para disfrutar un catálogo estupendo de juegos para la Xbox One como si fueran tuyos. Los instalas y a disfrutar. Está a 18,89 euros en CDKeys.
  • Auriculares inalámbricos Xiaomi AirDots TWS: los competidores de los AirPods de Apple con Bluetooth 5.0, 4 horas de autonomía y 12 más en el estuche, control táctil. Están a 22,74 euros en GearBest con el código 321U9GID
  • PocoPhone F1: telefonazo de 6,1”, Snapdragon 845, 6 GB de RAM, 128 GB de capacidad, cámara dual (12+5 MP), 4.000 mAh. Nunca lo había visto a este precio en esa versión de 128GB. Está a 279 euros en GearBest envío desde España, garantía 2 años.
  • Unidad SSD SanDisk 2 TB: una estupenda opción para quienes necesitéis mucha capacidad y mucha velocidad. 2 TB en SSD es una pasada, creedme. Está a 207 euros en Amazon Alemania, envío incluido.
  • Módulo Ballistix Sport RAM DDR4 16 GB: sigue bajando la memoria, y este módulo de 16 GB lo demuestra: DDR4, PC4-2400, color gris, está a 81 euros en Amazon Alemania envío incluido. Póngame dos (por aquello de aprovechar las memorias dual-channel).
  • Impresora multifunción Canon Pixma TS3150: imprime, escanea y copia, con WiFi, Pixma Cloud Link, inyección, impresionane por 33 euros en AliExpress con el cupón plazaoff. En Amazon muy barata también, 39 euros.
  • Patinete eléctrico Xiaomi Mijia M365: el referente. Plegable, 30 km de batería, 25 km/h, doble freno, en color negro, está a 303 euros en Banggod con el código plrosku, en Amazon sale por 412 euros.
  • Auriculares gaming Logitech G432: unos cascos de diadema con micrófono, sonido envolvente 7.1 perfecto para detectar a tus enemigos en FPS solo con el audio. Está a 55 euros en Aliexpress con el código plazaoff.
  • Tarjeta gráfica Zotac RTX 2060: estupenda opción para jugar a toda potencia. Una GeForce RTX 2060 con 6 GB de memoria GDDR6, y todas las mejoras de la arquitectura Turing (Ray-tracing, DLSS). Está a 339,99 euros en Amazon.
  • Xbox Game Pass 6 meses: en un pack de dos códigos digitales de 3 meses cada uno. Rebaja del 50% para este servicio que te permite jugar a cerca de 200 juegos de la Xbox One como si fueran tuyos. Mola, y está a 29,99 euros en Amazon.
  • Xiaomi Mi A2: la versión global de este móvil de 5,99″ con un Snapdragon 660, 4 GB de RAM, 32 GB de capacidad (no ampliables), cámara dual 12+20. Está a 131,60 euros en AliExpress con el código aliexpress19084. El modelo con 4/64 GB está en Amazon a 152 euros
  • Auriculares i12 TWS: unos auriculares inalámbricos BT 5.0 con control táctil, diseño “inspirado” (ja) en los AirPods. Están a 15,15 euros en GeekBuying con el cupón JJVWTEUK
  • Office 2019 Professional Plus: licencia para un PC, solo para Windows 10, licencia perpetua, envío del código de licencia por correo. Se dan instrucciones para descarga, instalación y aplicación. Está a 10,60 euros en Amazon.
  • Portátil Chuwi HeroBook: un 14,1″ HD con un Intel E800 quad-core, 4 GB de RAM, 64 GB de capacidad (ampliable con SSD M.2), Windows 10, 38 Wh batería. Modesto pero simpático sobre todo por su precio, 191 euros en Aliexpress con cupones.
  • Portátil gaming Asus R570ZD: un 15’6” FullHD con un AMD Ryzen 5 2500U, 8 GB de RAM, 256 GB SSD, GTX 1050 (2GB), teclado en español, puerto RJ-45, USB-C, peso de 2,3 kg (no es una pluma). Sin Windows, ojo. El precio es estupendo, 554 euros en Amazon
  • Xiaomi Mi A2 Lite: versión global, 5,84” Snapdragon 625, 3 GB de RAM, 32 GB capacidad (ampliable), cámara dual 12+5 MP, 4.000 mAh batería, Android One puro. Increíble que cueste 126,89 euros en Banggood con el cupón 4BGA2L3
  • Bolígrafo Xiaomi Mijia Pen + 3 recambios: el boli de 0,5 mm con tecnología suiza (o eso dicen) que enamora. Yo ya he comprado varios, y la verdad es que molan, y por este precio, más. El boli + tres recambios sale por 3,57 en AliExpress.
  • Huawei Honor 10 Lite: 6,21”, CPU Kirin 710, 3 GB de RAM, 64 GB de capacidad (ampliables), cámara dual trasera (13+13 MP), frontal de 24 MP, 3.400 mAh, lector de huellas y hasta NFC para pagos móviles. Está a 194 euros en AliExpress con el cupón “plaza1
  • Portátil Xiaomi Mi Notebook Pro: 15,6 pulgadas FullHD, Core i5-8250U, 8 GB de RAM, 256 GB PCIe SSD, expansión M.2, GeForce MX150, lector de huella, teclado en inglés (te regalan pegatinas). Está a 765 euros en AliExpress. Envío desde España en 5 días.
  • Portátil Jumper EzBook 3 Pro: modesto pero perfecto para viajes o niños: 13,3 pulgadas FullHD (!!), Intel Celeron N3450, 6 GB de RAM, 64 GB eMMC (slot M.2), salida HDMI, peso 1,39 kg, Windows 10, teclado EEUU. Está a 199,78 euros en AliExpress

¿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