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:

  • Lenovo Ideapad 330-15ICH: un portátil de 15,6″ FullHD con un Core i5-8330H, 8 GB de RAM, 1 TB de HDD y atentos, una GTX 1050 para jugar. Espectacular aunque no viene con Windows. Está a 499 euros en Amazon.
  • 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.
  • Huawei Mate 20 Pro: telefonazo de 6,39″, Kirin 980, 6 GB de RAM, 128 GB de capacidad, lector de huella bajo pantalla y una triple cámara espectacular de 40+20+8 MP además de batería de 4.000 mAh. Está a 630 euros en GearBest.
  • Asus ZenFone 6: el nuevo telefonazo de Asus con pantalla sin marcos de 6,4 pulgadas, 6 GB de RAM, 64 GB de capacidad y esa cámara desplegable dual que funciona tanto como frontal como trasera. Está a 504 euros en GearBest
  • Xiaomi Redmi Note 7: 6,3» Snapdragon 660, 3 GB de RAM, 32 GB de capacidad (ampliables vía MicroSD), 4.000 mAh, minijack y cámara dual de 48+5 MP realmente estupenda. Todo por 148 euros en AliExpress. La versión con 4 GB de RAM y 64 GB está a 165 euros en Banggood con el cupón BG5RN7.
  • Steep (PC): el juego de esquí extremo de Ubisoft se puede conseguir gratis hasta el 22 de mayo. ¡A por él!
  • Western Digital 4 TB: un disco duro externo con una capacidad brutal de 4 TB a un precio igualmente brutal: 91 euros en Amazon Alemania, envío incluido.
  • The Division 2: la nueva entrega del famoso juego basado en las novelas de Tom Clancy. Está a 36,90 euros en Amazon para PS4, mismo precio para la Xbox One, 36,90 euros en Amazon.
  • Ratón gaming Logitech G602: modelo inalámbrico con tiempo de respuesta de 2 ms, sensor de 2500 DPI, 11 botones programables, estupendo a 36,90 euros en Amazon (baja desde los 50).
  • Tablet Amazon Fire 7: la renovada tableta de Amazon con mejor procesador y sobre todo con el doble de capacidad que el modelo de 2017. La versión de 16 GB (ampliable vía microSD) está a tan solo 69,99 euros en Amazon.
  • Xiaomi Mi 9: atentos a la bajada brutal de precio. 6,39», Snapdragon 855, 6 GB / 64 GB, cámara triple (48+16+12), lector de huella en pantalla, carga rápida e inalámbrica. Está a 366,70 euros en Banggood con el código BGMI964.
  • Samsung Galaxy S10e: el compacto de la familia: 5,8 pulgadas, Exynos 9820, 6 GB de RAM, 128 GB de capacidad, cámara doble (16+12 MP), 3.100 mAh, lector de huellas en el lateral. Está a 474 euros en eBay con el cupón PARATECH. Brutal.
  • Samsung Galaxy S10: si preferís el modelo estándar con pantalla de 6,1″, 8 GB de RAM y 128 GB de capacidad lo tenéis a 578 euros en eBay también con el código PARATECH.
  • Xiaomi Mi 9: el nuevo telefonazo de este fabricante. 6,39», Snapdragon 855, 6 GB / 64 GB, cámara triple (48+16+12), lector de huella en pantalla, carga rápida e inalámbrica. Está a 366,70 euros en Banggood con código BG5M9G. Otra alternativa: está a 449 en Amazon.
  • Xiaomi Mi 9 SE: la versión ‘compacta’ del telefonazo de Xiaomi, 5,97″, Snapdragon 712, 6 GB de RAM, 128 GB de capacidad, cámara triple (48+13+8), 3.070 mAh, lector huella bajo pantalla. Está a 267,24 euros en Banggood con el código 5BGM96SE
  • Disco duro Seagate Barracuda 2 TB: un disco duro SATA de 3,5 pulgadas estupendo por precio y prestaciones: está a 59,69 euros en Amazon.
  • Mando Xbox One The Duke: es el mando original de la Xbox, pero para la Xbox One, mismo diseño, perfecto para manos grandotas, brutal homenaje. Está a 50 euros en Amazon.
  • HP Laser Jet Pro M254nw: impresora láser color (¡color!), hasta 21 ppm, Ethernet, WiFi, imposible encontrarla más barata, diría yo. 129 euros en Amazon, baja desde los 149 que vi la última vez, brutal.
  • Lenovo Legion T530: un PC de sobremesa con un Core i5-8400, 8 GB de RAM, 1TB de HDD, Windows 10 y gráfica GTX 1060. Muy bien por 699,99 euros en Amazon. Pero que muy bien.
  • Memoria RAM G.Skill Aegis 16 GB DDR4: tremendo lo de estos dos módulos de 8 GB a 3000 MHz. Fantástica forma de actualizar el equipo y abrir tooodas las pestañas de Chrome o Firefox que se os antoje. Está a 69,90 euros en Amazon Alemania, envío incluido.
  • Memoria Corsair Vengeance LPX 32 GB DDR4: y si queréis más memoria, tomad más memoria: dos módulos de 16 GB a 3000 MHZ, están a 153 euros en Amazon Alemania envío incluido.
  • Portátil HP 15-da1014ns: un equipo muy simpático para trabajar e incluso jugar. 15,6″, Core i5-8265U (súper nuevo), 8 GB RAM, 256 GB SSD, GeForce MX110, Windows 10, teclado español. Está a 499,99 euros en Amazon, baja desde los 650.
  • FIFA 18 PS4: la edición del año pasado sigue siendo un gran juego, sobre todo a 9,99 euros en Amazon. Para la Xbox One, a 13,99 euros.
  • Assetto Corsa Ultimate Edition (Xbox One): el simulador de conducción con 178 coches, 16 circuitos y 33 configuraciones de pistas contiene 8 DLCs. Está a 20 euros en Amazon.
  • NAS Western Digital My Cloud Home 8 TB: un producto perfecto para crear una nube personal, con una bahía y un disco de 8 TB ocupándola. Perfecto para centralizar servidor de almacenamiento y multimedia. El diseño mola, y está a 196,99 euros en Amazon.
  • Operación Triunfo 2017: incluye dos micrófonos USB y está a 18,50 euros en Amazon en su edición para la PS4, precio estupendísimo para pegar unos gritos a gusto.
  • Chuwi HeroBook: un portátil muy modesto y muy barato: 14,1» (1366×768), Atom X5-E8000 (quad-core), 4 GB de RAM, 64 GB eMMC de capacidad (con M.2), Windows 10, teclado en inglés, salida Micro HDMI, 2xUSB3.0. 165 euros en Banggood con el código BGCH510
  • Tarjeta gráfica NVIDIA GTX 1650: fabricada por PNY, perfecta para jugar a 1080p a 60 FPS. Supera a la 1050 Ti en un 33% de rendimiento y su precio es brutal, 122 euros en AliExpress Plaza con código «plazaoff«, envío desde España, 2 años de garantía.
  • Xiaomi Mi 9 SE: y la versión compacta: 5,97 pulgadas, Snapdragon 712, 6 GB de RAM, 64 GB de capacidad, triple cámara (48+12+16), lector de huella en pantalla, está a 268 euros en Banggood con el cupón 5BGM96SE. Brutal. La versión con 128 GB de capacidad está algo más cara pero esos gigas más son muy chulos. Está a 313 euros en Banggood con el cupón 5BGM9SE
  • 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 11,10 euros en Amazon.
  • SSD SanDisk 480G: y si queréis más capacidad, esta opción es aún más asequible con sus 480 GB de capacidad, un disco SSD SATA III con hasta 535 MB/s de velocidad de lectura. Está a 58 euros en Amazon
  • Tarjeta 6 meses Xbox Live Gold: son en realidad dos tarjetas de 3 meses por el precio de una, y además 1000 Apex Coins si jugáis al Apex Legends. Estupendo precio: 19,99 euros en Amazon. Cuestan el doble normalmente.
  • Xiaomi Airdots Pro: la versión mejorada de estos auriculares, con control táctil, más autonomía, mejor conectividad y más calidad de sonido. El diseño recuerda a otros… 🙂 Están a 45,88 euros en AliExpress con este cupón
  • Auriculares inalámbricos Xiaomi AirDots TWS: los competidores económicos 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 19,58 euros en AliExpress 
  • 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,61 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