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.

  • Xiaomi Mi A3: el nuevo cholloteléfono de Xiaomi. 6,01″, Snapdragon 665, 4 GB de RAM, 64 GB de capacidad, cámara triple (48+8+2 MP), Android One (puro, sin MIUI), lector de huella bajo pantalla, sin NFC, brutal: 203 euros en GeekBuying con el código 3FUYCD7F
  • 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. Brutal por 271 euros en GearBest con el código MI9T128BLACK
  • Xiaomi Mi 9: atentos, chicos. AMOLED 6,39» , Snapdragon 855, 6 GB de RAM, GB de capacidad, huella dactilar en pantalla, carga inalámbrica y rápida, cámara triple (48+12+16 MP). Brutal por 316 euros en GearBest con el código GBM964BLACK
  • Monitor AOC: atentos a este chollazo, 21,5 pulgadas y resolución 1080p a un precio escandaloso, 69,99 euros en Amazon. Absolutamente brutal, con HDMI y VGA.
  • Raspberry Pi 3 B+ Starter Kit: acaba de salir la 4, pero eso abarata este kit. Incluye la RPi 3 B+, adaptador de corriente con interruptor, 3 radiadores, caja, cable HDMI, micro SD con NOOBs. Está a 51 euros en Amazon con el código JF8I4CDN
  • Auriculares Xiaomi AirDots Pro: los competidores de los AirPods de Apple, con controles de reproducción, llamadas y asistente de voz, compatibles con iOS y Android, hasta 10 horas de uso, están a 40 euros en Banggood con el código BGAirTWSES
  • SSD Samsung 860 QVO 2 TB: la unidad SSD de 2 TB de Samsung sigue estando de ofertón. Con tecnología QVO, mejores tasas y eficiencia, hasta 560 MB/s en lectura, está a 187 euros en Amazon Francia, envío incluido
  • Huawei MateBook D: un portátil ultradelgado de 15,6″ Fulll HD con un Core i3-8130U, 8 GB de RAM, 256 GB de capacidad, Windows 10 y teclado en español. Buen precio para un buen equipo, 499 euros en Amazon
  • Lenovo IdeaPad 330-15ICH: el 15,6″ Full HD con ambición gaming. Core i5-8300H, 8 GB de RAM, 1 TB de HDD, y una GTX 1050 para jugar con cierta alegría. Sin sistema operativo, está a 499 euros en Amazon
  • Xiaomi Mi Band 4: la nueva versión de la pulsera cuantificadora con pantalla AMOLED a color, 5 ATM de resistencia (a nadar sin fin) sensor de ritmo cardiaco, notificaciones, monitor de sueño, está a 27 euros en Banggood con el código BGMiband4es01
  • Smart TV LG 55UM7100ALEXA: una tele inteligente de 55 pulgadas 4K HDR10 y HLG con WebOS 4.5, conectividad ThinQ, soporte Alexa, sonido Ultra Surround. Está a tan solo 538,99 euros en Amazon.
  • NAS WD My Cloud EX2 Ultra: un NAS de nada menos que 8 TB de capacidad con dos bahías, RAID, sincronización de archivos, servidor multimedia, está a 268,99 euros en Amazon.
  • Chuwi Aerobook: 13,3″ con un Intel Core m3-6Y30, 8 GB de RAM y 256 GB de SSD, Windows 10 (teclado en inglés, touchpad gigante, ). Compacto, ligero y con bastantes más puertos que el de Apple 🙂 Está a 337 euros en Banggood con el código BGOPCOUPON001
  • Portátil Jumper EZBook 3 PRO: uno parecido estoy usando para escribir esto. Ultradelgado, 13,3″ Full HD, Intel Celeron N3450, 6 GB de RAM, 64 GB eMMC, ranura MicroSD, puerto M.2, BT 4.0, HDMI, 4.500 mAh, está a 192 euros en Banggood con el código BGJU4679
  • Lenovo Legion T530: un PC de sobremesa con un Core i7-8700, 8 GB de RAM; 1 TB de HDD, 128 GB de SSD y una GTX 1050 Ti para jugar. Yo luego añadiría aparte un SSD y quizás mejor gráfica, pero a este precio está muy bien, 679,18 euros en Amazon. No incluye Windows 10, que tendréis que comprar aparte. En eBay las tenéis por 3 euros, no hay problema
  • Tableta Chuwi Hi9 Plus: 10,8″ con un MediaTek Helio X27, 4 GB de RAM, 64 GB de capacidad (ampliables), soporte stylus , webcam 8 MP, WiFi ac, BT 4.1, minijack, USB-C, 7.000 mAh, GPS, radio FM, dual SIM. Está a 142 euros en Banggood con el código BG924355. La versión con 128 GB de capacidad está muy poco por encima, solo 211 euros en Banggoodcon el código BGJU4679
  • Volante para Nintendo Switch: dos volantes AmazonBasics en rojo y azul para la Nintendo Switch para insertar el mando joy-con. Perfectos para Super Mario Cars, por supuesto. Está a 8,95 euros en Amazon.
  • Xiaomi Mi 9 SE: 5,97 pulgadas, Snapdragon 712, 6 GB de RAM, 128 GB de capacidad (uauh), triple cámara (48+12+16), lector de huella en pantalla, está a tan solo 270 euros en GearBest
  • Cinta de andar Xiaomi Youpin A1: velocidad máxima de 6 km/h, soporta 90 kg y es además plegable para su fácil almacenamiento. Está a 348,16 euros en GearBest.
  • Xiaomi Redmi Note 7: 6,3» Snapdragon 660, 4 GB de RAM, 64 GB de capacidad (ampliables vía MicroSD), 4.000 mAh, minijack y cámara dual de 48+5 MP realmente estupendo por 147 euros en Banggood con el código BGEMN764. La versión de 3/32 GB está a 132,46 euros en GearBest.
  • Portátil Jumper X4 Pro: un 14″ Full HD con un Core i3-5005U, 8 GB de RAM, 256 GB de SSD, webcam, WiFi ac, BT 4.2, jack de audio, HDMI, lector microSD, puerto USB-C, 4 altavoces. Tremendo por 352 euros en Banggood con el código BGJL3D10
  • Xiaomi AMAZFIT Bip: el reloj cuantificador tipo Pebble. 45 días de autonomía (y no es broma, análisis aquí chulo), GPS, monitor de sueño y pulsaciones, notificaciones, está a 45,9 euros en Banggood con el código BGSALEBIP
  • Tableta Teclast T20: más ambiciosa. 10,1″, pantalla Sharp 2,5K, Helio X27, 4 GB RAM, 64 GB capacidad, 8100 mAh, webcam 13 MP, lector de huella, WiFi, 4G, está a 142 euros en Banggood con el código BG88b402
  • OnePlus 7: la evolución del 6T con 6,41?, Snapdragon 855, 8 GB de RAM, mininotch, 256 GB de capacidad (uauh), cámara dual 48+5, 3700 mAh de batería, huella en pantalla. Está a 401,66 euros en AliExpress.
  • Samsung Galaxy A60: curioso este móvil de 6,3″ con un Snapdragon 675, 6 GB de RAM, 64 GB de capacidad, cámara triple (32+5+8) y frontal de 16 MP, 3500 mAh, está a 205,85 euros en GearBest.
  • Chuwi Aerobook: una especie de ‘MacBook’ de 13,3″ con un Intel Core m3-6Y30, 8 GB de RAM y 256 GB de SSD, Windows 10 (teclado en inglés, touchpad gigante, ). Compacto, ligero y con bastantes más puertos que el de Apple 🙂 Está a 384 euros en GearBest.
  • Lenovo IdeaPad 330-15IKBR: atentos a la configuración. 15,6″ HD (es la única pega, no FullHD), Core i7-8550U, 8 GB de RAM, 256 GB SSD. Teclado español, sin sistema operativo. Brutal por 479 euros en Amazon
  • SSD Samsung 860 QVO 2 TB: una unidad SSD SATA brutal de 2 TB de capacidad y con tecnología QVO, superior en eficiencia y rendimiento, hasta 550 MB/s. Está a 187 euros en Amazon Francia, envío incluido.
  • AMD Ryzen 5 2600X: desbloqueado para overclocking, esta CPU con 8 núcleos y 16 hilos de ejecución funciona a 4,25 GHz con Turbo. Incluye ventilador Wraith Spire. Está a 178,45 euros en Amazon
  • Xbox One S 1 TB All-digital: es la nueva edición sin lector Blu-ray, pero llega con un mando y un disco de 1 TB de capacidad. Regalan el juego Sea of Thieves y el Forza Horizon 3. Súper barata, 180 euros en Aliexpress Plaza
  • Xiaomi Mi Air 13: vuelve a estar insteresante. 13,3″ Full HD con Core i7-8550U, 8/256GB, GeForce MX150, lector de huella, buena opción en Banggood, está a 679 euros con el código BGXM2972.
  • Pack teclado y ratón Logitech MK120: las críticas son fantásticas, y a este precio no me extraña. Teclado de perfil plano, eespañol (la foto está mal) silencioso, con cable USB, ratón con cable USB. Está a 13,95 euros en Amazon.
  • OnePlus 7 Pro: 6,67 pulgadas a 90 Hz (dicen que son la pera), 8 GB de RAM, 256 GB capacidad, cámara triple (48+16+8), cámara frontal retráctil 16 MP, lector de huella en apntalla, 4.000 mAh. Está a 599 euros en Banggood con el código BGOP7PRO
  • Xiaomi Mi A2: está de oferta. Pantalla de 5,99 pulgadas, Snapdragon 660, 4 GB de RAM, 64 GB de capacidad (no ampliables), cámara dual (12+20), está a 145 euros en Amazon. Jamás había estado tan barato allí.
  • MiniPC: atentos a este equipo en formato NUC con un Core i3-7100U, 8 GB de RAM, 120 GB de SSD, WiFi 300 Mbps, 6 x USB, RJ-45, Ethernet, VGA, HDMI, toma auriculares. Por 205,94 euros, nada mal en AliExpress. Te regalan montura VESA.
  • Amazfit Verge Lite: sin NFC, pero con una autonomía de hasta 20 días. Pantalla AMOLED de 1,3″ 360×360 Corning Gorilla Glass. Frecuencia cardíaca, gran variedad de modos deportivos. GPS + GLONASS. Está a 89,18 euros en AliExpress

¿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