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

  • Xiaomi Mi Notebook Ruby: un portátil curioso. 15,6 pulgadas 1920×1200, Core i3-8130U, 4 GB de RAM, 128 GB de SSD (ampliables), USB 3.0, HDMI, Gigabit Ethernet, lector de tarjetas. Está a 477 euros en Banggood con el cupón B12G304
  • Pala pádel Royal Padel EFE Carbon Amarilla: offtopic, como juego al pádel se me ha ocurrido poner esta oferta que me tienta hasta a mí. Hablan muy bien de esta pala que cuesta 109 euros en Amazon en lugar de los 329 de otras tiendas (comprobado). Chollazo.
  • iPad 9,7 pulgadas (2018): el modelo más reciente con soporte para el Apple Pencil. Color gris espacial, 32 GB de capacidad y con WiFi. Está a 269,99 euros en eBay, el precio más bajo que he visto. En Amazon está a 309 euros.
  • 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,24 en AliExpress.
  • PC Medion Akoya PCC722: atentos que aquí tenéis un equipo sobre el que luego crecer mucho (un SSD y gráfica modesta por ej) y bien: Core i3-8100, 8 GB de RAM, 1 TB de disco HDD, sin sistema operativo. Está a 319 euros en Amazon.
  • Monitor LG 34UM69G: a ver, es reacondicionado pero de Amazon y estado “Muy bueno”. Ultraapnorámico 34” 21:9 con resolución 2560×1080 con AMD FreeSync, HDMI 1.4, DP 1.2 y USB-C. Está a 297,59 euros en Amazon. Nuevo cuesta 373,15.
  • Monitor Lenovo L24i-10: ¿Quién quiere un monitor de 23,8 pulgadas Full HD con entradas VGA y HDMI por menos de 100 euros? Pues aquí lo tenéis. De hecho, por algo menos: está a 99 euros en Amazon.
  • Samsung Galaxy Tab A: buena tableta Android con pantalla de 10,1 pulgadas FullHD, procesador octa-core, 2 GB de RAM, 32 GB de capacidad, ANdroid 7.0 actualizable, color blanco. Está a 168,40 euros en Amazon.
  • Hub USB-C 7 en 1: para los que solo tenéis puertos USB-C en el portátil, este es un súper-dongle. Salida HDMI, 3xUSB 3.0, USB-C, lector SD y micro SD. Todo por 20,99 euros en Amazon con el cupón LGUZWW3D.
  • iPad Pro (2017): el de segunda generación, no el más reciente, pero atentos, CPU Apple A10X Fusion, 12,9 pulgadas, 256 GB de capacidad, WiFi y un precio estupendo, 881,39 euros en Amazon
  • iPhone XR: el telefonazo “económico” de Apple baja un poco de precio. Pantalla de 6,1 pulgadas (LCD), cámara de 12 MP, Face ID, CPU APple A12 Bionic, carga inalámbrica, resistencia al agua. Está a 749 euros en Amazon en color azul.
  • SmartTV Panasonic 65”: el modelo TX-65EX730E de 65 pulgadas, gigante, con resolución UHD/4K y 3xHDR, frecuencia de hasta 800 Hz, tecnología Black Motion Rate y un precio estupendo: 681,89 euros en Amazon
  • Intel NUC: un miniPC que solo incluye placa y procesador: tienes que comprar aparte RAM y SSD. Aún así curioso por formato y puertos. LLega con un Celeron J3455 y con HDMI, VGA, USB3, Ethernet y puertos M.2 y DDR3. Está a 119 euros en Amazon
  • Xiaomi PocoPhone F1: el móvil súper chollo de los últimos meses baja también en Amazon. 6,18 pulgadas, Snapdragon 845, 6GB de RAM y 128 GB de capacidad (ole) además de cámara dual 12+5 MP. Está a 294 euros en Amazon.
  • Xiaomi Mi Mix 3: el súper teléfono sin marcos baja de precio: con pantalla de 6,39” deslizable para la cámara selfie y Snapdragon 845, 6 GB de RAM 128 GB de ROM y cámara dual 12+12. Estupenda opción por 427 euros en AliExpress (aplicad cupón de 7 euros en la página).
  • PC Lenovo IdeaCentre AIO 330-20AST: un Todo-en-uno modesto pero estupendo para ahorrar espacio en el escritorio. 19,5”, CPPU AMD A6-9200, 4 GB de RAM; 1 TB de HDD, gráfica AMD Radeon R4, Windows 10, ratón y teclado. Todo por 259,99 euros en Amazon.
  • Móvil ProTruly D7: pantalla 5,5 pulgadas, Helio P20, 3 GB de RAM, 32 GB de capacidad (ampliables) pero atentos a la cámara VR de 26 MP que permite grabar vídeos en modo “panorama 360”, o eso promete. Está a 92,53 euros en Banggood. Curioso es, desde luego.
  • Ratón vertical inalámbrico ergonómico: curioso este ratón para quienes sufren con ratones normales. Cuenta con 6 botones, incluye el receptor USB, hasta 1600 DPI. Está a 10,99 euros en Amazon.
  • Nokia 8: pantalla de 5,3 pulgadas, Snapdragon 835, 6 GB de RAM, 128 GB de capacidad (y ampliables, uauh) y cámara dual 13+13. Curioso lo de su pantalla con 700 nits de brillo máximo. Está a 240 euros en Banggood. En Amazon esta versión está a 410 euros.
  • Acer RT280KABMIIPX: monitor de 28 pulgadas con panel TN, resolución UHD (3840×2160), 1 ms de respuesta, 2 x HDMI (2.0), 1 x HDMI (1.2), altavoces integrados. Está a 262 euros en Amazon Italia envío incluido.
  • Móvil ProTruly D7: pantalla 5,5 pulgadas, Helio P20, 3 GB de RAM, 32 GB de capacidad (ampliables) pero atentos a la cámara VR de 26 MP que permite grabar vídeos en modo “panorama 360”, o eso promete. Está a 92,53 euros en Banggood. Curioso es, desde luego.
  • Báscula Xiaomi: construcción de acero inoxidable, precisión de 100g, hasta 150 kg de peso máximo, y puedes pesarte en kg, libras o catties (unidad de masa usada en china, curioso). Estáa a 26,24 euros en Amazon.
  • Xiaomi Notebook Air 13,3”: el portátil con una CPU algo más antigua, el Core i5-7200U. Por lo demás, impresionante por sus 8 GB de RAM, 256 GB de capacidad y GeForce MX150 además de lector de huella. Brutal por 602 euros en Banggood con el cupón 12CRI01.
  • Reloj inteligente Huawei Watch GT: pantalla AMOLED 1,39” (454×454), GPS/Galileo, sensor de frec. cardiaca, notificaciones, sumergible. Está a 150 euros en AliExpress por 150 euros con el cupón HuaweiGT (en Amazon 199).
  • Mando Bluetooth para juegos móviles IPega PG-9076: con su soporte para el móvil, pero que también sirve para la tableta o el portátil, por ejemplo. Está a 15,93 euros en GearBest con el cupón GBPG9076
  • Xiaomi Notebook Air 13,3 pulgadas: precio/prestaciones casi sin parangón. 13,3 pulgadas FullHD, Core i7-8550U, 8 GB de RAM, 256 GB SSD, GeForce MX150, HDMI. Está a 762,03 euros en Banggood con el cupón 19BGA729.
  • Portátil Lenovo Ideapad 330-15IKB: 15,6 pulgadas HD (1366×768), Core i3-6006U, 4 GB de RAM, 500 GB de HDD y sin sistema operativo, así que perfecto para #Linux. Tiene Ethernet lector SD, USB, USB-C, HDMI ¡y grabadora de DVD! Está a 299 euros en Amazon.
  • ‘Resident Evil 7: Biohazard’ para la PS4 (compatible PSVR) está a 16,99 euros en Amazon. Para la Xbox One más caro, 26,90 eurosNintendo Switch: en rojo-azul neón por 268 euros desde Amazon Francia, envío incluido. Yo nunca la he visto tan barata. Tenéis que aplicar el cupón de 40 euros que aparece en la página de compra.
  • Colorful iGame RTX 2060: esta marca es algo así como la Gigabyte china: toda una RTX 2060 con 6 GB de GDDR6 a un precio brutal, 351,77 euros en Banggood con el cupón fee6c3.
  • Xiaomi MiBand 3: con pantalla de 0,78 pulgadas (128×80 píxeles), batería de 110 mAh con autonomía de 20 días, sumergible hasta 50 metros y con Bluetooth 4.2. Envío desde España, está a 22,49 euros en Amazon.
  • Monitor gaming Aopen 24HC1QRPbidpx: atentos a su diseño curvo, diagonal de pantalla de 23,6 pulgadas, Full HD pero sobre todo soporte 144 Hz. Tiene entradas HDMI, DVI y DisplayPort y soporte para FreeSync. A jugar chicos. Está en Amazon a 179,99 euros.
  • Impresora Epson EcoTank ET-2650: no usa cartuchos de tinta, sino depósitos recargables que salen (teóricamente) mucho más baratos. Es una multifunción de inyección con WiFi. Está a 159 euros en Amazon  En PCComponentes cuesta 205 euros, por ej.
  • Micrófono Aukey: con conexión USB, una buena opción para ir un poco más allá si quieres ganar enteros en tus transmisiones en Twitch/YouTube o en #podcasts. Incluye mini trípode. Está a 20,15 euros en Amazon con el cupón SVZFGA6H.
  • 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: 150 euros en GearBest. Pero es que atención: en Amazon está a 162 euros ahora mismo.
  • Pendrive USB Kingston DataTraveler 128 GB: atentos a esta llave USB con nada menos que 128 GB de almacenamiento por un precio absurdo: 18,32 euros en Amazon. El modelo de 64 GB está a 9,62 euros en Amazon, también muy interesante. Si no os gusta ese diseño, el pendrive SanDisk Ultra de 128 GB está a 19,99 euros en Amazon.
  • Disco duro externo Maxtor 4 TB: yo me compré hace tiempo uno igual por 130 euros. COn conexión USB 3.0-3.1 y sin necesidad de alimentación externa. La rebaja en precio es bastante importante, así que ahí lo dejo: ahora está a 97,98 euros en Amazon.
  • Samsung Galaxy S9 Plus: a punto de renovar gama ahora, pero atentos al precio del telefonazo del año pasado: pantalla curva de 6,2 pulgadas, Exynos 8890 (equivalente al Snapdragon 845) 6 GB de RAM, 64 GB de capacidad doble cámara 12+12 MP, versión española. Todo por 619 euros en Amazon.
  • Lenovo Yoga 910-13IKB: a ver, no es un chollo tan increíble como el del otro día, pero este Lenovo Yoga 910 es también una pequeña maravilla con esta configuración. Pantalla táctil convertible de 13,9 pulgadas Full HD, Intel Core i7-7500U, 8 GB de RAM, 512 GB de SSD y Windows 10 Home. Fantástica opción si buscáis ultraportátil convertible: Está a 899 euros en Amazon. El Yoga 920/8GB/256GB por 999 euros en Amazon.
  • Fire TV Stick: el dongle HDMI de Amazon compatible con todo tipo de servicios de streaming mola por el mandito a distancia. Está  a 39,99 euros en Amazon.
  • Monitor HP 32s: si necesitáis un monitor grande, atentos al modelo de HP de 32 pulgadas con resolución FullHD, conectores VGA y HDMI por 251 euros en Amazon.
  • Huawei Mate 20 Pro: el súper teléfono de Huawei, incluso por encima del P20 Pro. Pantalla de 6,39 pulgadas, Kirin 980, 8 GB de RAM, 128 GB de capacidad, 4.200 mAh y una cámara triple que está entre las tres mejores del mercado. Está a 739,99 euros en eBay.
  • Portátil Xiaomi Notebook Air 13: con un Core i5-8250U, 8 GB de RAM, 256 GB de capacidad y lector de huella dactilar. Está a 604,88 euros en Banggood con el cupón 12BGCRI1. El modelo con un procesador algo peor (Core i5-7200U) pero con una NVIDIA MX150 está a 613,65 euros en Banggood con el cupón 12BGCRI12.
  • Impresora portátil de fotos HP Sprocket: una opción chula para imprimir fotos de pequeño formato (5×7,6 cm) directamente desde el móvil. Está a 119 euros en Amazon.
  • Logitech Craft: el curioso teclado inalámbrico retroiluminado con el dial de la esquina que permite acceder a funciones multimedia o de edición gráfica es una pequeña chulada. Está de rebajas en Amazon: 135 euros.
  • Portátil Huawei Matebook 13: atentos a este maquinón, versión “lite” del Mateboox X. Con pantalla de 13 pulgadas 2K (1440p), un Core i5-8265U, 8 GB de RAM, 256 GB de capacidad, una GeForce MX150 y lector de huella dactilar. Lo tenéis a 741,96 euros en AliExpress. La batería de 41,7 Whr es algo limitada quizás, pero es que claro, es súper delgado (14,9 mm) y ligero (1,28 kg).
  • SSD SanDisk 1 TB: una unidad de estado sólido SATA de 1 TB a 135,90 euros en Amazon. No hay mucho más que decir. Otra opción: la unidad Crucial MX500 también de 1 TB por 121,92 euros en Amazon.
  • Monitor gaming BenQ XL2411P ZOWIE: un monitor estupendo para jugones con diagonal de 24 pulgadas, resolución 1080p, conectores HDMI y DisplayPort y sobre todo soporte de tasa de refresco de hasta 144 Hz. Fantástico por 247 euros en Amazon, el precio más bajo que he visto nunca.
  • Smart TVTelevisión Sharp 65 pulgadas 4K: si tenéis otras necesidades atentos, porque aquí tenemos un pedazo televisor con todo lo que se le puede pedir a un cacharro de este tipo. 65 pulgadas, 4K, HDR, 3 puertos HDMI, 2 USB, y sonido Harman Kardon. Todo por 799,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 negro a 358 euros en Banggood con el cupón 1BGM8G2En Amazon está a 413 euros, por si preferís esta opción.
  • Smartwatch Huawei Watch 2: un reloj inteligente con Android Wear 2.0 y con pantalla de 1,2 pulgadas. Tiene GPS, es resistente al agua y tiene batería de 420 mAh. Está a 164 euros en Amazon Italia, envío incluido.
  • 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 250,36 euros en Banggood con el cupón 2F1BG4CL.
  • Portátil Huawei Matebook D: con un potente Ryzen R5-2500U (supera a un Core i5-8250U), pantalla de 14 pulgadas Full HD, 8 GB de RAM, 256 GB de SSD y una gráfica AMD Vega 8 también maja para jugar de forma modesta. Con Windows 10, su precio es de 599,99 euros en Amazon. Mucho mejor portátil de lo que probablemente penséis algunos por ese papel de segundón de AMD.
  • Forza Horizon 4: el juegazo de coches está de rebajas: 31,89 euros en CDKeys. Por poner otro buen chollo, el Grand Theft Auto V para PC está a 11,19 euros en CDKeys.
  • Monitor Acer V6 V226HQL: monitor de 21,5 pulgadas Full HD (1920 x 1080) con entradas VGA, DVI y HDMI. Atentos al precio: 83,48 euros en AliExpress Plaza, envío desde España y garantía de dos años.
  • 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, 288,51 euros en GearBest con dos años de garantía en España. Desactivad el seguro de envío, eso sí.

¿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