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:

  • Lenovo Ideapad 330-15ICH: un portátil de 15,6″ FullHD con un Core i5-8330H, 8 GB de RAM, 1 TB de HDD y atentos, una GTX 1050 para jugar. Espectacular aunque no viene con Windows. Está a 499 euros en Amazon.
  • 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.
  • Huawei Mate 20 Pro: telefonazo de 6,39″, Kirin 980, 6 GB de RAM, 128 GB de capacidad, lector de huella bajo pantalla y una triple cámara espectacular de 40+20+8 MP además de batería de 4.000 mAh. Está a 630 euros en GearBest.
  • Asus ZenFone 6: el nuevo telefonazo de Asus con pantalla sin marcos de 6,4 pulgadas, 6 GB de RAM, 64 GB de capacidad y esa cámara desplegable dual que funciona tanto como frontal como trasera. Está a 504 euros en GearBest
  • Xiaomi Redmi Note 7: 6,3» Snapdragon 660, 3 GB de RAM, 32 GB de capacidad (ampliables vía MicroSD), 4.000 mAh, minijack y cámara dual de 48+5 MP realmente estupenda. Todo por 148 euros en AliExpress. La versión con 4 GB de RAM y 64 GB está a 165 euros en Banggood con el cupón BG5RN7.
  • Steep (PC): el juego de esquí extremo de Ubisoft se puede conseguir gratis hasta el 22 de mayo. ¡A por él!
  • Western Digital 4 TB: un disco duro externo con una capacidad brutal de 4 TB a un precio igualmente brutal: 91 euros en Amazon Alemania, envío incluido.
  • The Division 2: la nueva entrega del famoso juego basado en las novelas de Tom Clancy. Está a 36,90 euros en Amazon para PS4, mismo precio para la Xbox One, 36,90 euros en Amazon.
  • Ratón gaming Logitech G602: modelo inalámbrico con tiempo de respuesta de 2 ms, sensor de 2500 DPI, 11 botones programables, estupendo a 36,90 euros en Amazon (baja desde los 50).
  • Tablet Amazon Fire 7: la renovada tableta de Amazon con mejor procesador y sobre todo con el doble de capacidad que el modelo de 2017. La versión de 16 GB (ampliable vía microSD) está a tan solo 69,99 euros en Amazon.
  • Xiaomi Mi 9: atentos a la bajada brutal de precio. 6,39», Snapdragon 855, 6 GB / 64 GB, cámara triple (48+16+12), lector de huella en pantalla, carga rápida e inalámbrica. Está a 366,70 euros en Banggood con el código BGMI964.
  • Samsung Galaxy S10e: el compacto de la familia: 5,8 pulgadas, Exynos 9820, 6 GB de RAM, 128 GB de capacidad, cámara doble (16+12 MP), 3.100 mAh, lector de huellas en el lateral. Está a 474 euros en eBay con el cupón PARATECH. Brutal.
  • Samsung Galaxy S10: si preferís el modelo estándar con pantalla de 6,1″, 8 GB de RAM y 128 GB de capacidad lo tenéis a 578 euros en eBay también con el código PARATECH.
  • Xiaomi Mi 9: el nuevo telefonazo de este fabricante. 6,39», Snapdragon 855, 6 GB / 64 GB, cámara triple (48+16+12), lector de huella en pantalla, carga rápida e inalámbrica. Está a 366,70 euros en Banggood con código BG5M9G. Otra alternativa: está a 449 en Amazon.
  • Xiaomi Mi 9 SE: la versión ‘compacta’ del telefonazo de Xiaomi, 5,97″, Snapdragon 712, 6 GB de RAM, 128 GB de capacidad, cámara triple (48+13+8), 3.070 mAh, lector huella bajo pantalla. Está a 267,24 euros en Banggood con el código 5BGM96SE
  • Disco duro Seagate Barracuda 2 TB: un disco duro SATA de 3,5 pulgadas estupendo por precio y prestaciones: está a 59,69 euros en Amazon.
  • Mando Xbox One The Duke: es el mando original de la Xbox, pero para la Xbox One, mismo diseño, perfecto para manos grandotas, brutal homenaje. Está a 50 euros en Amazon.
  • HP Laser Jet Pro M254nw: impresora láser color (¡color!), hasta 21 ppm, Ethernet, WiFi, imposible encontrarla más barata, diría yo. 129 euros en Amazon, baja desde los 149 que vi la última vez, brutal.
  • Lenovo Legion T530: un PC de sobremesa con un Core i5-8400, 8 GB de RAM, 1TB de HDD, Windows 10 y gráfica GTX 1060. Muy bien por 699,99 euros en Amazon. Pero que muy bien.
  • Memoria RAM G.Skill Aegis 16 GB DDR4: tremendo lo de estos dos módulos de 8 GB a 3000 MHz. Fantástica forma de actualizar el equipo y abrir tooodas las pestañas de Chrome o Firefox que se os antoje. Está a 69,90 euros en Amazon Alemania, envío incluido.
  • Memoria Corsair Vengeance LPX 32 GB DDR4: y si queréis más memoria, tomad más memoria: dos módulos de 16 GB a 3000 MHZ, están a 153 euros en Amazon Alemania envío incluido.
  • Portátil HP 15-da1014ns: un equipo muy simpático para trabajar e incluso jugar. 15,6″, Core i5-8265U (súper nuevo), 8 GB RAM, 256 GB SSD, GeForce MX110, Windows 10, teclado español. Está a 499,99 euros en Amazon, baja desde los 650.
  • FIFA 18 PS4: la edición del año pasado sigue siendo un gran juego, sobre todo a 9,99 euros en Amazon. Para la Xbox One, a 13,99 euros.
  • Assetto Corsa Ultimate Edition (Xbox One): el simulador de conducción con 178 coches, 16 circuitos y 33 configuraciones de pistas contiene 8 DLCs. Está a 20 euros en Amazon.
  • NAS Western Digital My Cloud Home 8 TB: un producto perfecto para crear una nube personal, con una bahía y un disco de 8 TB ocupándola. Perfecto para centralizar servidor de almacenamiento y multimedia. El diseño mola, y está a 196,99 euros en Amazon.
  • Operación Triunfo 2017: incluye dos micrófonos USB y está a 18,50 euros en Amazon en su edición para la PS4, precio estupendísimo para pegar unos gritos a gusto.
  • 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. 165 euros en Banggood con el código BGCH510
  • Tarjeta gráfica NVIDIA GTX 1650: fabricada por PNY, perfecta para jugar a 1080p a 60 FPS. Supera a la 1050 Ti en un 33% de rendimiento y su precio es brutal, 122 euros en AliExpress Plaza con código «plazaoff«, envío desde España, 2 años de garantía.
  • Xiaomi Mi 9 SE: y la versión compacta: 5,97 pulgadas, Snapdragon 712, 6 GB de RAM, 64 GB de capacidad, triple cámara (48+12+16), lector de huella en pantalla, está a 268 euros en Banggood con el cupón 5BGM96SE. Brutal. La versión con 128 GB de capacidad está algo más cara pero esos gigas más son muy chulos. Está a 313 euros en Banggood con el cupón 5BGM9SE
  • 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 11,10 euros en Amazon.
  • SSD SanDisk 480G: y si queréis más capacidad, esta opción es aún más asequible con sus 480 GB de capacidad, un disco SSD SATA III con hasta 535 MB/s de velocidad de lectura. Está a 58 euros en Amazon
  • Tarjeta 6 meses Xbox Live Gold: son en realidad dos tarjetas de 3 meses por el precio de una, y además 1000 Apex Coins si jugáis al Apex Legends. Estupendo precio: 19,99 euros en Amazon. Cuestan el doble normalmente.
  • Xiaomi Airdots Pro: la versión mejorada de estos auriculares, con control táctil, más autonomía, mejor conectividad y más calidad de sonido. El diseño recuerda a otros… 🙂 Están a 45,88 euros en AliExpress con este cupón
  • Auriculares inalámbricos Xiaomi AirDots TWS: los competidores económicos 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 19,58 euros en AliExpress 
  • 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,61 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