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:

  • 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

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