Diseño web

Analizando el nuevo look de The Next Web. Cómo no, responsive.

·

Cambiar de look está de moda, y el boom de los tablets ha hecho que de nuevo el célebre Responsive Web Design sirva para llevar a cabo esos rediseños «adaptables» que hacen que una web pueda mostrarse de forma óptima prácticamente en cualquier resolución de pantalla. Ya he analizado en anteriores ocasiones algunos rediseños (Time.com, Polygon), y ahora le toca el turno a The Next Web, uno de esos sitios web de referencia para frikis como yo y que desde hace tiempo se ha ganado un puesto entre los máximos exponentes de la información tecnológica. Ah. Y usan WordPress.

El rediseño de The Next Web deja clara su intención de ser leída en tablets. En Nieman Journalism titulaban con acierto su artículo sobre ese rediseño «The Next Web redesigns to be more app-like«, y es así: este sitio web ya no parece tanto un sitio web como una aplicación web. El concepto funciona de forma singular en un PC o portátil -supongo que lo hará especialmente bien en tablets, pero no puedo comprobarlo directamente porque no tengo ninguno- y tiene una clara vocación: facilitar la lectura. La simplificación es máxima, como la de muchas aplicaciones web, e incluso la publicidad se muestra con discreción, casi con respeto por el lector.

Vamos a por ese análisis.

En todo momento hay un elemento diferenciador de ese rediseño: el llamado Timeline, una barra lateral izquierda que al igual que las de Gawker -que la impuso en la parte derecha de Gizmodo, Lifehacker, etc- sostiene el contenido principal, tanto en la home como en las singles (artículos). El Timeline no aparece directamente en ciertas resoluciones, pero cuando lo hace resulta una útil herramienta para acceder al contenido. El problema, en mi caso, es que esa barra lateral condiciona la posición del contenido en sí, que está demasiado a la derecha para mi gusto. No cuesta acceder a él y centrar la atención, pero uno esperaría que el contenido estuviese totalmente centrado en la página. Esa disposición, que se ve reforzada por una pequeña columna central invisible, que aprovechan para indicar el autor o la fecha del post, es interesante, pero mi atención a menudo acaba de nuevo en el timeline.

Ese detalle no es tan importante teniendo en cuenta que, como decía, la lectura en el nuevo The Next Web es un pequeño placer. Las tipografías son fantásticas, los interlineados, el aire que se respira entre distintos bloques, el estilo de los diferentes encabezados, todo invita a una lectura clara y sobre todo, limpia. No obstante, esa vocación tablet también les traiciona en algunos escenarios. Cuando trabajo con dos ventanas de Chrome en paralelo -algo que hago casi continuamente- en mi MacBook Air se produce algo extraño.

Mientras que en una ventana a pantalla completa (1.440×900 en mi caso) las tipografías de The Next Web son perfectas para una lectura en el PC o portátil, cuando dejo la ventana a mitad de pantalla (720×900, aunque la anchura útil de navegación es 698px) las tipografías curiosamente aumentan. En The Next Web creen que estoy usando un tablet, y me presentan una letruja tamaño «barco de vapor» que me hace sentir como un abuelete con la vista cansada. Quizá no solo deberían tener en cuenta la resolución de la ventana, sino también el navegador y sistema operativo con el que uno visita su web.

Comparad las tipografías del cuerpo del artículo en una ventana a tamaño completo…

… y al ajustar la ventana a una de las mitades de mi pantalla.

En cuanto a la navegación, nos encontramos de nuevo con la simplicidad como pilar fundamental. El menú superior apenas sí da opciones – News, Events, Magazine y Academy, ahora mismo- además del acceso a las redes sociales en las que TNW está presente un curioso icono de información -que complementa este apartado, normalmente situado en el pie y que ellos duplican también aquí- y un icono de búsqueda que es funcional, aunque quizás menos visible de lo que me gustaría. Casi todos esos elementos desaparecen en formato tablet (en mi caso, al situar la ventana en una de las mitades de la pantalla), y por ejemplo el acceso a los canales de TNW en redes sociales brilla por su ausencia, un aspecto del que hablan también en el análisis de ese rediseño en Zurb, donde dan mucha importancia a un estudio con las zonas calientes en las clican los testers de la web.

Cuando alguien se enfrenta a un diseño responsive una de las preguntas que debe plantearse es de qué puede o quiere prescindir al ir introduciendo break points, esos puntos de ruptura que definen el comportamiento de la web según la resolución de la ventana. En el caso de TNW, sus responsables han querido prescindir de muchos elementos que potenciarían la navegación y la interacción con la web, y que en mi opinión perjudican a la experiencia en tablets -si es que funciona como parece que funciona, repito, no puedo confirmarlo en la práctica-. En esa búsqueda por facilitar la lectura el compromiso ha sido algo exagerado, algo curioso sobre todo teniendo en cuenta que The Next Web precisamente tiene una de las herramientas más potentes para compartir en redes sociales. Pablo Román, un desarrollador español que trabaja con ellos, es el responsable del llamado Social-Count, que publicó en GitHub en una versión anterior -lástima que no la actualicen- y que funciona de forma excelente. Esa herramienta sigue disponible al reducir el tamaño de ventana para compartir las noticias, pero el acceso a las páginas de TNW en Twitter, Facebook y otras desaparece. ¿Por qué?

El citado complemento ha sido aprovechado también en el Timeline, donde supongo que han aprovechado el concepto y el diseño para que los usuarios puedan acceder a los canales, que no son más que las categorías destacadas de cualquier WordPress. Extraña un poco que ofrezcan canales por continentes o países concretos (supongo que tendrán argumentos suficientes por la procedencia de las visitas) y es otro de esos elementos que puede mejorar el acceso a artículos con una misma temática. La navegación con el teclado (ir a la noticia anterior y siguiente con las flechas de cursor izquierda y derecha) es otra de las ayudas que nos ofrece web que también hace el uso de noticias relacionadas para invitar a que nos quedemos un poquito más en ella. Son argumentos válidos, pero ante todo lo que destaca de ese rediseño es su claridad y limpieza. Me rechina un poco que sea un diseño tan tablet, tan webapp como decían en Nieman -me gustaría saber qué porcentaje de lectores de TNW tiran de tablets-, pero hay que admitir que el resultado es destacable. Y para una web de este tipo es una apuesta probablemente acertada, aunque quizás estén apostando demasiado por un futuro dominado por tablets. El tiempo les dará la razón… o no.


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

6 comentarios en “Analizando el nuevo look de The Next Web. Cómo no, responsive.

  1. zamuro57 dice:

    sin duda tnw tiene una de las mejores experiencias móviles posibles , utilizando el boostrap de zurb fundation , en mi nexus 7 fluye como mantequilla , si noto que al tener el tablet en vertical hay un menú que se pierde en el nav del header , que aparece repentinamente al colocarla en landscape , habría que ver como se comporta en un smartphone de 4 pulgadas , pero del resto va estupendamente bien , la experiencia de usuario es excelente , muy intuitiva 🙂

  2. Gracias por la review! Como responsable del rediseño, me alegra leer que se mencionen los puntos dónde más esfuerzo hemos puesto – legibilidad, interfaz móvil y navegación. Gracias también por reportar todos esos pequeños bugs, los iremos solucionandolos poco a poco, todavía hay trabajo por hacer 🙂

    Una puntualización a zamuro57, no usamos el framework de Zurb ni ningún otro, aunque obviamente sí aplicamos muchas técnicas que también se pueden encontrar en dichos frameworks.

  3. Pingback: Mashable presume de diseño Responsive y muy, muy social | Incognitosis

  4. Pingback: Web Performance Optimization. ¿Qué es mucho más importante que el diseño? La velocidad | Incognitosis

Comentarios cerrados