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. Aprovecha, que no suelen durar mucho tiempo:

  • Xiaomi Mi A2 Lite: el telefonazo chollo por excelencia, 5,84 pulgadas, Snapdragon 625, 4 GB de RAM, 64 GB de capacidad, cámara dual 12+5 MP, batería de 4.000 mAh, sin NFC eso sí pero aún así triunfada. Atentos porque el modelo de 3 GB y 32 GB es impresionante en precio: 133,63 euros en Banggood con Banggood.
  • Consola PS4 Slim reacondicionada: la consola de 500 GB con un mando reacondicionada con la garantía de Amazon, está a 164,74 euros en Amazon Alemania gastos de envío incluidos, alucinante. Corred. Si queréis ir a más, la PS4 Pro de 1 TB nueva está a 316 euros en Amazon Francia gastos de envío incluidos.
  • iPhone Xr: el telefonazo de Apple en su modelo de 64 GB con el A12 Bionic y su pantalla de 6,1 pulgadas está a 749 euros en eBay.
  • Reloj Casio F-91W: un súper clásico de Casio con cronómetro, alarma, calendario y duración de batería de, atención, 7 años. AÑOS. Básico y maravilloso por 8,88 euros en Amazon. Ríete tú de los relojes inteligentes.
  • Monitor Gaming Acer Predator 27 pulgadas: una maravilla de monitor que en PC Componentes está por 699 euros. Atentos: 27 pulgadas resolución 2560×1440, LED IPS, contraste 1000:1, formato 16:9, soporta frecuencias de hasta 144 Hz. Una pasada que está a 499 euros en Amazon. A darse el capricho tocan.
  • Samsung Galaxy Note 9: el telefonazo con S-Pen está de rebajas. Pantalla de 6,4 pulgadas, Exynos 9810 Octa, 6 GB de RAM, 128 GB de capacidad (ampliables), cámara dual 12+12 Mpíxeles y una batería de 4.000 mAh. Difícil pedir más, y está a 609 euros en eBay.
  • Nokia X6: un smartphone curioso con pantalla de 5,8 pulgadas, Snapdragon 636, 6 GB de RAM, 64 GB de ROM, cámara dual 16+5 y un precio estupendo, 174 euros en GearBest con el cupón QY1LR09729.
  • Portátil Xiaomi Mi Air: el equipo que rivaliza con los grandes fabricantes del mercado a menor precio vuelve a ponerse interesante. Pantalla de 13,3 pulgadas, Core i5-8250U, 8 GB de RAM, 256 GB de SSD, lector de huellas, está a 626 euros en Banggood con el cupón 1B2G11710.
  • LG G7 ThinQ: un señor telefonazo con una cámara que impresiona. Pantalla de 6,1 pulgadas 2K, Snapdragon 845, 4 GB de RAM, 64 GB de capacidad, cámara dual 16+16 MP, está a 412 euros en Amazon.
  • Monitor BenQ GW2270H 21,5 pulgadas: un monitor 1080p de 21,5 pulgadas con conexión dual HDMI por 118 euros en Amazon. Y si queréis ir a un monitor gaming, el BenQ XL2411P ZOWIE con soporte de 144 HZ está a 246 euros en Amazon.
  • Tablet Amazon Fire HD 10: una tableta de 10 pulgadas 1080p con 32 GB de capacidad y un precio estupendo: 113 euros en Amazon Alemania, envío incluido.
  • Monitor LG 29 pulgadas: un monitor panorámico 21:9 con resolución 2560×1080, conectores HDMI, Display Port y USB-C y soporte AMD FreeSync, está a 219 euros en Amazon.
  • Ratón Logitech G402: para jugones, con 8 botones programables, está a 28,99 euros en Amazon.
  • Monitor LG 38 pulgadas: esta maravilla ultrawide con formato 21:9, diagonal de 38 pulgadas y resolución de 3.840 x 1.600 píxeles es una pasada si necesitáis área horizontal a lo bestia. Tiene dos altavoces estéreo de 10W y 2 HDMI, 1 DisplayPort, 1 USB-C y 2 USB 3.0. Está a 859,99 euros en Amazon.
  • Altavoz Bluetooth Sony SRSXB31B: un modelo que además de contar con extra Bass, y modo fiesta cuenta con resistencia al agua y al polvo, hasta 24 horas de autonomía y un sistema de iluminación simpático. Está a 89,91 euros en Amazon, casi la mitad de su precio normal.
  • Zotac NVIDIA GeForce RTX 2070: una de las gráficas más potentes del momento y con ese plus de la arquitectura Turing de NVIDIA que puede ser interesante (más en el futuro que ahora). Está a 499,99 euros en Amazon Alemania.
  • Linksys Velop Intelligent Mesh: para garantizarte cobertura WiFi en casa, este conjunto de tres nodos AC3600 con banda dual es una chulada, está a 179 euros en Amazon.
  • PlayStation PSVR: las gafas de realidad virtual de la PS4 con la cámara y el juego VR Worlds están a 186 euros en Amazon Italia, envío incluido.
  • Portátil gaming Medion Erazer P6705: con pantalla de 15,6 pulgadas 1080p, un Core i5-8300H, 8 GB de RAM, 1 TB de disco, 128 GB de SSD, una GTX 1050 Ti para darle vida a los juegos y Windows 10. Teclado en español, por cierto. Está a  749 euros en Amazon.
  • Samsung Galaxy S9: el telefonazo de Samsung con un Exynos 9810 Octa (equivalente al Snapdragon 845), 4 GB de RAM, 64 GB de capacidad, y cámara estupenda, aunque sea una sola, de 12 MP. Está a 509,99 euros en Amazon.
  • Xiaomi Mi 8 (Global): con dos años de garantía en España, envío inmediato. Pantalla AMOLED de 6,21 pulgadas FHD+, Snapdragon 845, 6 GB de RAM, 64 GB de capacidad, cámara trasera 12+12 MP, cámara frontal de 20 MP, lector de huellas trasero, batería de 3.400 mAh. Está en color azul a 328,52 euros en GearBest y en color negro a 328,52 euros en GearBest. Desactivad el seguro de envío, ya sabéis. En Amazon está a 379 euros, por si preferís esta opción.
  • OnePlus 6T: el telefonazo de este fabricante (análisis) está a precio más que interesante. Con pantalla de 6,44 pulgadas con “mini-notch”, Snapdragon 845, 6 GB de memoria, 128 GB de capacidad, batería de 3,700 mAh, cámara trasera dual de 20+16 MP, cámara frontal de 20 MP, lector de huella integrado en pantalla. Está a 506,10 euros en GearBest, impresionante. Mola además que tienen 2 años de garantía en España.
  • Unidad SSD Crucial BX300: una unidad de 120 GB con prestaciones estupendas y que sale por un precio ridículo: 25,99 euros en Amazon.
  • Unidad SSD Samsung 970 EVO: genial con 250 GB y velocidades de transferencia brutales: está a 72,99 euros en Amazon, nunca la vi tan barata. Es la que tengo en mi PC, y me salió a 95 euros como súper ganga, así que imaginad. La versión de 500 GB está a 119,98 euros, gran precio también.
  • Motorola One: un smartphone basado en Android One con pantalla de 5,9 pulgadas, un Snapdragon 625, 4 GB de RAM, 64 GB de capacidad, cámara dual 13+13 MP. Está a 269 euros en Amazon.
  • Patinete Eléctrico Ninebot ES1 No. 9: otro patinete similar al anterior pero algo menos potente. Hasta 20 km/h y hasta 25 km de autonomía, muy bien también por su precio, 277,92 euros en GearBest con el cupón GB12ES1 con dos años de garantía en España. Desactivad el seguro de envío, eso sí.
  • Tarjeta gráfica Zotac GeForce GTX 1060 6 GB: una gráfica estupenda para animar vuestras sesiones de gaming. Está a 230 euros en Amazon Alemania, gastos de envío incluidos.
  • Smartwatch Huawei Watch 2: con WiFi y 4G nada menos, este reloj tiene también GPS, Wear OS 2.0 para gobernarlo y un precio fantástico de 199,99 euros en Amazon. Brutal por lo que ofrece, os lo aseguro que lo sé de buena tinta: lo analicé hace tiempo.
  • Televisión Haier 4K 55 pulgadas: vale que no es una marca top, pero tener una Smart TV de 55 pulgadas con resolución  4K/UHD (sin HDR, parece por lo que he visto) por este precio es de locos. Cuenta con Netflix preinstalado, WiFi y TDT2, además de altavoces con soporte Dolby Digital+. Se envía desde UK con garantía de Haier, y está a 365,32 euros en Banggood EU con el cupón e2bcea.
  • PocoPhone F1: telefonazo que Xiaomi se acaba de sacar de la manga. Un Snapdragon 845, 6 GB de RAM, 64 GB de capacidad
    (ampliables), pantallón de 6,18 pulgadas y dos cámaras de 12+5 Mpíxeles, además de batería de 4.000 mAh y conector de auriculares. Si no os importa que no tenga NFC, compra estrella de la temporada, sobre todo a este precio. La edición de 6 GB y 64 GB de capacidad está a 259,05 euros en AliExpress, uauh.
  • Xiaomi Mi 8 Pro: la versión más brutal del telefonazo de Xiaomi: 6,21 pulgadas, el célebre diseño con la carcasa semitransparente (de pega, pero es curiosa), Snapdragon 845, 8 GB de RAM, 128 GB de capacidad, cámara dual de 12+12 MP, cámara frontal de 20 MP, sensor de huella bajo la pantalla, en fin, de todo. Está a 452,83 euros en GearBest.
  • Unidad SSD Netac 480 GB: mucho más barata que las que os pongo al final, casi medio terabyte a precio de 200 GB en unidades de marcas reputadas. Difícil no sentirse tentado porque cuesta 48,961 euros en JoyBuy. Para que veáis la diferencia, la Samsung 860 Evo de 250 GB (casi la mitad de capacidad) cuesta más: está a 56,90 euros en Amazon… y este último no es mal precio. El otro es ya la locura, aunque la marca, claro, no es muy conocida.

¿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