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. También puedes seguir los Incognichollos en Twitter o en el nuevo canal de Telegram 🙂 . ¡Aprovecha, que no suelen durar mucho tiempo!

  • TCL Plex: un smartphone de 6,53?, Snapdragon 675, 6 GB de RAM, 12 8 GB de capacidad (ampliables), cámara triple de 48+16+2 MP, 3.820 mAh, conector auriculares (!). Está a 219 euros en Amazon (baja de 279).
  • Realme 6: súper nuevo, 6,5?, Helio G90T, 4 GB de RAM, 64 GB de capacidad, cámara cuádruple (48+8+2+2 MP), 4.300 mAh de batería, lector de huella en el lateral, está a 192 euros en AliExpress Plaza con el código ALIVERSARIO27
  • Cargador AUKEY USB-C: con Power Delivery 3.0, potencia de 36W, dos puertos USB-C para cargar móviles o tabletas a toda pastilla. Está a 25,99 euros en Amazon (baja de 38,99).
  • Televisor TD Systems K58DLK10US: una Smart TV de 58 pulgadas con resolución 4K UHD, soporte HDR10, sonido Dolby Digital+, WiFi, sistema operativo Android 9.0. Está a 319 euros en AliExpress (baja de 359).
  • Tocadiscos Victrola Pro: no solo podrás reproducir tus vinilos, sino convertirlos a MP3 si así lo quieres. Incluye software para Mac y PC y cable USB, está a 47,55 euros en Amazon (baja de 58).
  • Kit de elaboración de cerveza: qué mejor que hacer tu propia cerveza ahora que está más difícil comprarla fuera. Elabora 5 litros de cerveza Weissbier trigo, estilo alemán. El kit está a 38,50 euros en Amazon (baja de 59,90).
  • TCL 55DP602: una Smart TV de 50? con resolución 4K UHD, soporte HDR, sonido Dolby Digital Plus, está a 399,85 euros en Amazon. Brutal.
  • Altavoces Edifier Studio R1280T: equipo de dos altavoces para sonido estéreo, hasta 42 W de potencia, conectores RCA y minikack, sensibilidad de 85 dB, mando a distancia. Son estupendos, de hecho los tengo en casa. Están a 70,90 euros en Amazon (bajan de 99,99).
  • LG 65UM7610PLB: una smart TV de 65? con resolución 4K UHD, soporte HDR, palnel IPS, sistema webOS 4.5, asistente de Google y Alexa, sonido DTS Virtual:X. Está a 673,90 euros en Amazon (baja de 999).
  • Realme X2 Pro: 6,5 pulgadas 90 Hz, 12 GB de RAM, 256 GB capacidad, Snapdragon 855+, cámara cuádruple (64+13+8+2 MP), 4.000 mAh, lector bajo pantalla, está a 361 euros en AliExpress Plaza con el código ALIVERSARIO37. En Amazon está a 439 euros.
  • Xiaomi Redmi Note 8: 6,53?, Snapdragon 665, 4 GB de RAM, 64 GB de capacidad, cámara cuádruple (48+8+2+2) y 4.000 mAh de batería. Está a 155,42 euros en Amazon
  • Xiaomi Mi TV Box S: el set top box de Xiaomi con soporte de streaming en 4K, procesador Amlogic S905L (S905X), 2 GB de RAM, 8 GB eMMC, WiFi ac, BT 4.2, HDMI 2.0, mini TOSLINK, control remoto. Está a 49 euros en Amazon.
  • Apple iPhone 11 64 GB: 6,1 pulgadas de pantalla Retina, Apple A13 Bionic, Face ID, cámara dual de 12 +12 Mpíxeles, carga inalámbrica, resistencia IP68, carga rápida, Dolby Atmos. Está a 789 euros en Amazon.
  • Amazon Kindle: el lector de libros electrónicos de Amazon ya cuenta en su versión básica con luz frontal integrada, así que puedes leer en la cama sin lámparas. 6 pulgadas 167 ppp, 4 GB de capacidad, está a 64,99 euros en Amazon (baja de 89,99). El Paperwhite resistente al agua está a 99,99 euros (baja de 129,99).
  • Monument Valley 2: un juego visualmente precioso con una mecánica de puzzles espectacular. Está gratis para Android en Google Play y también gratis para iOS en la App Store.
  • Oppo Reno 2: 6,55?, Snapdragon 730G, 8 GB de RAM, 256 GB de capacidad, cámara cuádruple (48+13+8+2), lector de huella bajo pantalla, 4.000 mAh, cámara frontal «aleta tiburón». Muy curioso , está a 449 euros en Amazon (baja de 499).
  • ASUS ZenBook 14: un portátil de 14? FullHD con un Ryzen 7 3700U, 16 GB de RAM (muy bien), 512 GB de SSD, una Radeon RX Vega 10, sistema operativo Endless OS, teclado español, lector de huella. Está a 649 euros en Amazon.
  • WD Black P10 5TB: una unidad de 5 TB de capacidad perfecta para consola o PC, capacidad estupenda, conexión USB 3.0, tasas de transferencia notables, está a 119,99 euros en Amazon (baja de 140,49).
  • Seagate Expansion 8 TB: otra unidad aún con mayor capacidad, 8 TB (uauh!) con interfaz USB 3.0 (compatible USB 2.0), 3,5 pulgadas y un precio muy bueno (no tanto como el anterior), 139,99 euros en Amazon.
  • HiSense H50AEE6400: una Smart TV de 50? con resolución 4K UHD, soporte HDR, plataforma VIDAA U, modo deporte, está a 349,99 euros en Amazon.
  • ‘World War Z’, ‘Figment’ y ‘Tormentor x Punisher’: Epic Games vuelve a regalar juegos. Tres más con muy buenas críticas, que os podéis descargar desde ya mismo. A por ellos!
  • Apple iPhone 8 256 GB (rojo, reacondicionado): atentos a este modelo, que según Amazon está como nuevo y «funciona como tal», nada menos que 256 GB de capacidad, 4,7 pulgadas, cámara de 12 Mpíxeles, TouchID, resistencia al agua IP67. Está a 399 euros en Amazon.
  • Sharp LC-55UI8762ES: una Smart TV de 55 pulgadas con resolución 4K UHD, soporte HDR+, Smart Aquos Net+, 3 x HDMI, 2 x USB, altavoces Harman Kardon, está a 389,99 euros en Amazon (baja de 799,99).
  • Philips 32PFS5823: una Smart TV modesta de 32 pulgadas y resolución Full HD para quienes no necesitan lo más de lo más. Tiene tecnología Pixel Plus HD, Dolby Audio, y puertos HDMI y USB. Está a 209,99 euros en Amazon (baja de 269).
  • Lenovo IdeaPad C340-14API: un portátil convertible en tablet muy majo de 14? Full HD con un Ryzen 5 3500U, 8 GB de RAM, 256 GB de SSD, Windows 10 y teclado en español por 599,99 euros en Amazon.
  • ASUS ZenBook UM431DA-AM003: un portátil de 14? Full HD con un Ryzen 5 3500U, 8 GB de RAM, 512 GB de SSD, sin sistema operativo, teclado en español, está a 549 euros en Amazon.
  • Humble Bundle Just Drive: un pack de juegos de conducción para quienes quieran disfrutar al volante «virtual». Asetto Corsa, Dirt 4 y Project Cars 2 entre otros por 12 euros en Humble Bundle. Brutal
  • Humble Bundle Stardock: esta empresa lleva años haciendo programas fantásticos de personalización y productividad de Windows 10. Por 13,50 euros tendrás el pack completo, incluidos Windows Blinds, Fences (escritorios virtuales) o Multiplicity (KVM software).
  • Acer Aspire 3: un portátil muy modesto pero curioso, 15,6? FullHD, Core i3-6006U, 4 GB de RAM, 128 GB de SSD, Linux preinstalado, teclado español, está a 239 euros en Amazon, buena opción como portátil de batalla o para niños.
  • AMD Ryzen 2600X: si estáis actualizando vuestro PC o vais a montaros uno nuevo atentos a este micro de 8 núcleos y 16 hilos de ejecución, preparado para overclocking, 95W de TDP, hasta 4,25 GHz. Está a 129 euros en Amazon (baja de 215).
  • 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. La versión de 64 GB está a 259,99 euros en Amazon (baja de 329).
  • Aspiradora Philips Speedpro: formato escoba, se puede usar como aspiradora vertical o aspiradora de mano, en ambos casos sin cable. Cepillo con succión de 180º, tecnología PowerCyclone 7, hasta 800 l/min de velocidad del aire, está a 149,99 euros en Amazon (baja de 289).
  • Amazon Prime Estudiantes: la suscripción a Amazon Prime está a solo 18 euros al año (60 para usuarios normales) con un periodo gratuito de 90 días de prueba. Ya sabéis, con ella tenéis entrega rápida gratis, prime video y prime music.
  • Xiaomi Redmi Note 8T: 6,3?, Snapdragon 665, 3 GB de RAM, 32 GB de capacidad, cámara cuádruple (48+8+2+2), 4.000 mAh, lector trasero, buena opción recién salida del horno. Está a 179 euros en Amazon.
  • Huawei P40 Lite + Freebuds 3: 6,4?, Kirin 810, 6 GB de RAM, 128 GB de capacidad, cámara cuádruple de 48+8+2+2 MP, 4.200 mAh de batería, regalo de los auriculares valorados en 179 euros. Está a 299 euros en Amazon, espectacular. Una sola pega: lleva Android 10, pero sin servicios y apps de Google.
  • HiSense H65A6500: una Smart TV enorme de 65 pulgadas con resolución 4K UHD, soporte HDR, con la plataforma VIDAA U, modo deportes, WiFi, Precision Color, está a 579,99 euros en Amazon.
  • Intel NUC: un miniPC potente y curiosón. Con un Core i5-7260U, 8 GB de RAM, 240 GB de SSD2, Windows 10, está a 525 euros en Amazon. Buen equipo de trabajo o incluso de salón.
  • Acer Aspire 3 A315-54K: un portátil de 15,6? Full HD con un Core i5-10210U, 8 GB de RAM, 512 GB de SSD, sin sistema operativo, con salida HDMI, RJ45, USB 3.1, lector de tarjetas, está a 499 euros en PcComponentes (en Amazon 708 euros).
  • Smartwatch Huawei GT Fashion: un reloj inteligente con monitor de sueño, ritmo cardíaco, sistema LiteOS, GPS, Bluetooth, y pantalla estupenda. Está a 99 euros en Amazon (en PcComp 147).
  • ASUS TUF Gaming FX505DV: un portátil gaming con pantalla de 15,6? Full HD a 120 Hz, Ryzen 7 3750H, 16 GB de RAM, 512 GB SSD, GeForce RTX 2060 (uauh), sin SO, teclado retroiluminado en español. En eBay está a 999 euros, rebaja brutal.

¿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