Tecnología

Responsive Design y el futuro (o presente) del diseño web

·

Es imposible estar a la última en todo. Para alquien como yo, dedicado a tratar de comunicar más y mejor en Internet, el tema del diseño web siempre ha sido súper interesante. Siempre he tenido una venilla artística -dibujaba a los diecimuchos, y no hacía mal del todo, creo- que supongo que ahora ha salido un poco de nuevo a la luz para orientarme a otra clase de arte. Porque el diseño web debería ser considerado como tal.

Y como en todo arte, hay de todo. Del blanco al negro, pasando por toda la gama de colores. O para entendernos, de diseños bien y mal realizados. Aunque aquí los gustos mandan, como en todo arte. Lo que a ti te gusta a mi puede parecerme horrible, pero lo que sí es evidente es que un buen diseño destaca por sí solo, como una buena obra de arte. Muchas han sido las tendencias en este campo, pero hay una especialmente importante hoy en día. El llamado Responsive Design (Diseño Flexible, Diseño Adaptable), que es una disciplina que tiene un único objetivo: que un mismo diseño pueda ser aplicable a distintos formatos de pantalla.

La idea es genial porque a través de las hojas de estilo y de ciertos pedacitos de código uno puede construirse una web que se verá igual de bien en un monitor de 27 pulgadas que en un tablet de 10 pulgadas o un smartphone de 3,5 pulgadas. De ahí que tengamos ejemplos como el fantástico Jot Down -una verdadera joya del diseño, y en español- que no es “responsive” (ays), y otros como The Great Discontent que me parece una absoluta preciosidad y que es “responsive”. Probad. Abrid uno y otro en una gran ventana del navegador en vuestro PC o portátil. A pantalla completa. Luego coged la ventana e id haciéndola más pequeña, hasta que tenga la resolución de un móvil de gama media. ¿Entendéis lo que quiero decir?

Esta disciplina no es precisamente nueva. Al menos, no en términos de la “edad de Internet”, porque el concepto fue creado en mayo de 2010 -de ahí el comienzo del post, yo me enteré de esto más de un año después- por Ethan Marcotte, un diseñador web que escribió primero un artículo genial y luego un libro no menos genial (súper-recomendado) en el que explicaba de qué va el tema, y cómo lograr este tipo de diseños flexibles y adaptables.

La magia del Diseño Adaptable está en esa versatilidad que hace que no necesitemos el típico subdominio mobile.midominio.com, porque tu contenido se va a ver igual de bien sea cual sea tu dispositivo móvil. El diseño no se pierde, y por tanto esa faceta crucial en cualquier sitio web mantiene toda su potencia y su valor. Si estáis en esto de los medios seguramente hayáis oído hablar de ello, pero si no lo estáis, es probable que poco a poco vayáis oyendo hablar del concepto. Y si no oís hablar de él, da igual: lo veréis en acción, porque cada vez más y más blogs y sitios web lo aplican.

Porque el Diseño Adaptable no es el futuro de la web. Es su presente.


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 “Responsive Design y el futuro (o presente) del diseño web

  1. Me parece una autentica maravilla, he buscado durante mucho tiempo la forma de que se pueda ver el mismo estilo pero eliminando elementos en una página, y es una maravilla cómo funciona, no he probado en una página mayor de 15,4 pulgadas porque estoy en el portátil, mañana lo pondré en la televisión a ver si cambia más, a ver cómo se adapta.

    ¿ Hay alguna plantilla de éste estilo para gente que no sabe demasiado de programación web ?

  2. 100% de acuerdo con el post, el responsive design es el presente, sobre todo teniendo en cuenta las resoluciones actuales de los moviles que igualan o superan las de los monitores, abrir una versión para móviles en un tablet es un auténtico suplicio.

    Mi web la he montado teniendo en mente el diseño “adaptativo” y la verdad es que queda práctico y bastante chulo.

    @Allove Existen varios frameworks que facilitan la tarea como Skeleton, Less Framework, bootstrap…

  3. nahiko dice:

    Me parece muy buena la técnica, muy curradas las webs, el diseño y el que no haga falta hacer páginas diferentes para distintos tipos de dispositivos.

    PERO, dicho eso

    me parece vergonzoso, que esta tarea deba recaer sobre el programador / diseñador web.
    De hecho me parece vergonzoso, que sea necesario hacer esto.

    Hace cuánto existen las páginas web? Hace cuánto existe el HTML? Vamos por la versión 5 de HTML, existe un estándar, sin embargo nadie, repito NADIE lo cumple.

    El estándar html debería tener una mínima: Si tu navegador no lo cumple al 100%, lo siento mucho, pero tu navegador no muestra las páginas. Y PUNTO. Cuando digo el estandar html me refiero a html, javascript y css.
    Hace poco ha salido la versión 5 de html, y este punto que nos comenta javipas en el blog, para mi es uno de los más importantes que puede haber a día de hoy en el diseño web. Debería estar resuelto de base, y no debería ser necesario andar con triquiñuelas para que se adapte a las diferentes resoluciones. Repito, es vergonzoso.

    Qué es eso de que cada navegador entiende el javascript como le da la gana? Qué es eso de que los estilos de iexplore 6 no le sirven al 7 ni los de este al 8 ni al 9, etc…?
    Por qué el arbol DOM de js en firefox se recorre o accede a sus nodos de diferente forma que en iexplore?
    Y ya el colmo es que desde javascript es poco menos que imposible saber con certeza qué modelo y versión de navegador se está empleando!!

  4. Completamente de acuerdo.
    Nos estamos topando todos con este “problema”, y ahora mismo o la dejas en 960 y no te complicas la vida o te toca improvisar… Yo de momento y a falta de haber estudiado mas este tema me he limitado a porcentajes y anchos minimos y maximos. Quizas no sea la forma mas elegante pero al menos es un standart que funciona en todos los navegadores por igual y no me ha complicado mucho la vida….

  5. Pingback: Responsive Design y el futuro (o presente) del diseño web | Ymanta – Marketing Digital

Comentarios cerrados