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.

  • Xiaomi Mi A3: el nuevo cholloteléfono de Xiaomi. 6,01″, Snapdragon 665, 4 GB de RAM, 64 GB de capacidad, cámara triple (48+8+2 MP), Android One (puro, sin MIUI), lector de huella bajo pantalla, sin NFC, brutal: 203 euros en GeekBuying con el código 3FUYCD7F
  • 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. Brutal por 271 euros en GearBest con el código MI9T128BLACK
  • Xiaomi Mi 9: atentos, chicos. AMOLED 6,39» , Snapdragon 855, 6 GB de RAM, GB de capacidad, huella dactilar en pantalla, carga inalámbrica y rápida, cámara triple (48+12+16 MP). Brutal por 316 euros en GearBest con el código GBM964BLACK
  • Monitor AOC: atentos a este chollazo, 21,5 pulgadas y resolución 1080p a un precio escandaloso, 69,99 euros en Amazon. Absolutamente brutal, con HDMI y VGA.
  • Raspberry Pi 3 B+ Starter Kit: acaba de salir la 4, pero eso abarata este kit. Incluye la RPi 3 B+, adaptador de corriente con interruptor, 3 radiadores, caja, cable HDMI, micro SD con NOOBs. Está a 51 euros en Amazon con el código JF8I4CDN
  • Auriculares Xiaomi AirDots Pro: los competidores de los AirPods de Apple, con controles de reproducción, llamadas y asistente de voz, compatibles con iOS y Android, hasta 10 horas de uso, están a 40 euros en Banggood con el código BGAirTWSES
  • SSD Samsung 860 QVO 2 TB: la unidad SSD de 2 TB de Samsung sigue estando de ofertón. Con tecnología QVO, mejores tasas y eficiencia, hasta 560 MB/s en lectura, está a 187 euros en Amazon Francia, envío incluido
  • Huawei MateBook D: un portátil ultradelgado de 15,6″ Fulll HD con un Core i3-8130U, 8 GB de RAM, 256 GB de capacidad, Windows 10 y teclado en español. Buen precio para un buen equipo, 499 euros en Amazon
  • Lenovo IdeaPad 330-15ICH: el 15,6″ Full HD con ambición gaming. Core i5-8300H, 8 GB de RAM, 1 TB de HDD, y una GTX 1050 para jugar con cierta alegría. Sin sistema operativo, está a 499 euros en Amazon
  • Xiaomi Mi Band 4: la nueva versión de la pulsera cuantificadora con pantalla AMOLED a color, 5 ATM de resistencia (a nadar sin fin) sensor de ritmo cardiaco, notificaciones, monitor de sueño, está a 27 euros en Banggood con el código BGMiband4es01
  • Smart TV LG 55UM7100ALEXA: una tele inteligente de 55 pulgadas 4K HDR10 y HLG con WebOS 4.5, conectividad ThinQ, soporte Alexa, sonido Ultra Surround. Está a tan solo 538,99 euros en Amazon.
  • NAS WD My Cloud EX2 Ultra: un NAS de nada menos que 8 TB de capacidad con dos bahías, RAID, sincronización de archivos, servidor multimedia, está a 268,99 euros en Amazon.
  • Chuwi Aerobook: 13,3″ con un Intel Core m3-6Y30, 8 GB de RAM y 256 GB de SSD, Windows 10 (teclado en inglés, touchpad gigante, ). Compacto, ligero y con bastantes más puertos que el de Apple 🙂 Está a 337 euros en Banggood con el código BGOPCOUPON001
  • Portátil Jumper EZBook 3 PRO: uno parecido estoy usando para escribir esto. Ultradelgado, 13,3″ Full HD, Intel Celeron N3450, 6 GB de RAM, 64 GB eMMC, ranura MicroSD, puerto M.2, BT 4.0, HDMI, 4.500 mAh, está a 192 euros en Banggood con el código BGJU4679
  • Lenovo Legion T530: un PC de sobremesa con un Core i7-8700, 8 GB de RAM; 1 TB de HDD, 128 GB de SSD y una GTX 1050 Ti para jugar. Yo luego añadiría aparte un SSD y quizás mejor gráfica, pero a este precio está muy bien, 679,18 euros en Amazon. No incluye Windows 10, que tendréis que comprar aparte. En eBay las tenéis por 3 euros, no hay problema
  • Tableta Chuwi Hi9 Plus: 10,8″ con un MediaTek Helio X27, 4 GB de RAM, 64 GB de capacidad (ampliables), soporte stylus , webcam 8 MP, WiFi ac, BT 4.1, minijack, USB-C, 7.000 mAh, GPS, radio FM, dual SIM. Está a 142 euros en Banggood con el código BG924355. La versión con 128 GB de capacidad está muy poco por encima, solo 211 euros en Banggoodcon el código BGJU4679
  • Volante para Nintendo Switch: dos volantes AmazonBasics en rojo y azul para la Nintendo Switch para insertar el mando joy-con. Perfectos para Super Mario Cars, por supuesto. Está a 8,95 euros en Amazon.
  • Xiaomi Mi 9 SE: 5,97 pulgadas, Snapdragon 712, 6 GB de RAM, 128 GB de capacidad (uauh), triple cámara (48+12+16), lector de huella en pantalla, está a tan solo 270 euros en GearBest
  • Cinta de andar Xiaomi Youpin A1: velocidad máxima de 6 km/h, soporta 90 kg y es además plegable para su fácil almacenamiento. Está a 348,16 euros en GearBest.
  • Xiaomi Redmi Note 7: 6,3» Snapdragon 660, 4 GB de RAM, 64 GB de capacidad (ampliables vía MicroSD), 4.000 mAh, minijack y cámara dual de 48+5 MP realmente estupendo por 147 euros en Banggood con el código BGEMN764. La versión de 3/32 GB está a 132,46 euros en GearBest.
  • Portátil Jumper X4 Pro: un 14″ Full HD con un Core i3-5005U, 8 GB de RAM, 256 GB de SSD, webcam, WiFi ac, BT 4.2, jack de audio, HDMI, lector microSD, puerto USB-C, 4 altavoces. Tremendo por 352 euros en Banggood con el código BGJL3D10
  • Xiaomi AMAZFIT Bip: el reloj cuantificador tipo Pebble. 45 días de autonomía (y no es broma, análisis aquí chulo), GPS, monitor de sueño y pulsaciones, notificaciones, está a 45,9 euros en Banggood con el código BGSALEBIP
  • Tableta Teclast T20: más ambiciosa. 10,1″, pantalla Sharp 2,5K, Helio X27, 4 GB RAM, 64 GB capacidad, 8100 mAh, webcam 13 MP, lector de huella, WiFi, 4G, está a 142 euros en Banggood con el código BG88b402
  • OnePlus 7: la evolución del 6T con 6,41?, Snapdragon 855, 8 GB de RAM, mininotch, 256 GB de capacidad (uauh), cámara dual 48+5, 3700 mAh de batería, huella en pantalla. Está a 401,66 euros en AliExpress.
  • Samsung Galaxy A60: curioso este móvil de 6,3″ con un Snapdragon 675, 6 GB de RAM, 64 GB de capacidad, cámara triple (32+5+8) y frontal de 16 MP, 3500 mAh, está a 205,85 euros en GearBest.
  • Chuwi Aerobook: una especie de ‘MacBook’ de 13,3″ con un Intel Core m3-6Y30, 8 GB de RAM y 256 GB de SSD, Windows 10 (teclado en inglés, touchpad gigante, ). Compacto, ligero y con bastantes más puertos que el de Apple 🙂 Está a 384 euros en GearBest.
  • Lenovo IdeaPad 330-15IKBR: atentos a la configuración. 15,6″ HD (es la única pega, no FullHD), Core i7-8550U, 8 GB de RAM, 256 GB SSD. Teclado español, sin sistema operativo. Brutal por 479 euros en Amazon
  • SSD Samsung 860 QVO 2 TB: una unidad SSD SATA brutal de 2 TB de capacidad y con tecnología QVO, superior en eficiencia y rendimiento, hasta 550 MB/s. Está a 187 euros en Amazon Francia, envío incluido.
  • AMD Ryzen 5 2600X: desbloqueado para overclocking, esta CPU con 8 núcleos y 16 hilos de ejecución funciona a 4,25 GHz con Turbo. Incluye ventilador Wraith Spire. Está a 178,45 euros en Amazon
  • Xbox One S 1 TB All-digital: es la nueva edición sin lector Blu-ray, pero llega con un mando y un disco de 1 TB de capacidad. Regalan el juego Sea of Thieves y el Forza Horizon 3. Súper barata, 180 euros en Aliexpress Plaza
  • Xiaomi Mi Air 13: vuelve a estar insteresante. 13,3″ Full HD con Core i7-8550U, 8/256GB, GeForce MX150, lector de huella, buena opción en Banggood, está a 679 euros con el código BGXM2972.
  • Pack teclado y ratón Logitech MK120: las críticas son fantásticas, y a este precio no me extraña. Teclado de perfil plano, eespañol (la foto está mal) silencioso, con cable USB, ratón con cable USB. Está a 13,95 euros en Amazon.
  • OnePlus 7 Pro: 6,67 pulgadas a 90 Hz (dicen que son la pera), 8 GB de RAM, 256 GB capacidad, cámara triple (48+16+8), cámara frontal retráctil 16 MP, lector de huella en apntalla, 4.000 mAh. Está a 599 euros en Banggood con el código BGOP7PRO
  • Xiaomi Mi A2: está de oferta. Pantalla de 5,99 pulgadas, Snapdragon 660, 4 GB de RAM, 64 GB de capacidad (no ampliables), cámara dual (12+20), está a 145 euros en Amazon. Jamás había estado tan barato allí.
  • MiniPC: atentos a este equipo en formato NUC con un Core i3-7100U, 8 GB de RAM, 120 GB de SSD, WiFi 300 Mbps, 6 x USB, RJ-45, Ethernet, VGA, HDMI, toma auriculares. Por 205,94 euros, nada mal en AliExpress. Te regalan montura VESA.
  • Amazfit Verge Lite: sin NFC, pero con una autonomía de hasta 20 días. Pantalla AMOLED de 1,3″ 360×360 Corning Gorilla Glass. Frecuencia cardíaca, gran variedad de modos deportivos. GPS + GLONASS. Está a 89,18 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