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:

  • Kindle Paperwhite: el lector de libros electrónicos de referencia baja de precio. Con pantalla de 6″ retroiluminada, 8 GB de capacidad, y esa resistencia al agua para llevártelo a la pisci/playa sin miedo. Está a 109,99 euros en Amazon.
  • Portátil Chuwi Lapbook Air: 14,1″ FullHD, Intel Celeron N3450, 8 GB de RAM, 128 GB SSD (ranura M.2), Windows 10, teclado inglés, WiFi, está a 281,04 euros en Banggood con el cupón BGair44
  • Repetidor WiFi dodocool: para mejorar la cobertura de tu red WiFi, soporte de redes 802.11b/g/n, antena integrada, enchufe europeo. Está a 16,99 euros en Amazon.
  • Lenovo Ideacentre 510A: un PC para trabajar y jugar con un AMD Ryzen 5 2400G, 8 GB de RAM, 1 TB HDD, una gráfica AMD Radeon RX 560 (4 GB GDDR5), y Windows 10 Home. Está a 599,99 euros en Amazon.
  • 48 cápsulas Nescafé Dolce Gusto: el sabor espresso intenso está de rebajas, un pack de 3×16 cápsulas está a 10 euros en Amazon
  • Patinete Xiaomi Pro: el modelo con batería ampliada (474 Wh, 18.650 mAh) que pasa de 30 a 45 km, sistema de frenos dual, ruedas de 8,5 pulgadas, más avanzado y seguro por 485 euros en Banggood con el cupón MIFANPRO
  • Ratón gaming Corsair M65 Elite: con cable, sensor óptico, hasta 18.000 PPP, retroiluminación RGB, sistema de pesos ajustables. Un ratón gaming muy llamativo y capaz, está a 49,99 euros en Amazon.
  • Lenovo Legion T530: un PC de sobremesa con un Core i5-8400, 8 GB de RAM, 128 GB de SSD, 1TB de HDD y gráfica GTX 1050. Sin sistema operativo, pero bien por 599 euros en Amazon. Pero que muy bien.
  • Zapatillas Lacoste Carnaby Evo: en color azul marino, disponibles en varias tallas, están a 59,99 euros en AliExpress Plaza.
  • Grand Theft Auto V: la edición para la Xbox One está de rebajas, solo 16,99 euros en Amazon.
  • Memoria USB SanDisk Cruzer 64 GB: conexión USB 2.0, buen diseño y capacidad estupenda sobre todo a este precio: 8,99 euros en Amazon.
  • Disco duro externo WD My Book 10 TB: vamos a por todas con esta unidad externa de nada menos que 10 TB con conexión USB 3.0 y un precio estupendo, 188,99 euros en Amazon. Brutal
  • Samsung Galaxy S10e: el telefonazo compacto con 5,8”, Exynos 9 Octa 9820, 6 GB de RAM, 128 GB de capacidad (ampliables), cámara dual 12+16 MP, 3.100 mAh lector de huella en el lateral. Está a 559 euros en eBay.
  • 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.
  • Xiaomi Mi 9: atentos, chicos. AMOLED 6,39” , Snapdragon 855, 6 GB de RAM, 64 GB de capacidad, huella dactilar en pantalla, carga inalámbrica y rápida, cámara triple (48+12+16 MP). Está a 401 euros en Banggood con el cupón 4BGM964. Otra alternativa: está a 449 en Amazon.
  • Xiaomi Redmi Note 7: 6,3” (mininotch), Snapdragon 660, 4 GB de RAM, 128 GB de capacidad (ampliables), 4.000 mAh de batería, minijack y cámara dual de 48+5 MP realmente estupenda. Está a 201,63 euros en Banggood con el cupón 4BGN7128. La versión de 3 GB de RAM y 32 GB de capacidad del Redmi Note 7 está lógicamente más barata, tan solo 146 euros en AliExpress con el cupón “aliexpress19068. Y otra opción más, 4 GB de RAM, 64 GB de capacidad por 165 euros en AliExpress con el cupón AliExpress19215
  • Suscripción EA Access 12 meses: un año entero para disfrutar un catálogo estupendo de juegos para la Xbox One como si fueran tuyos. Los instalas y a disfrutar. Está a 18,89 euros en CDKeys.
  • Auriculares inalámbricos Xiaomi AirDots TWS: los competidores 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 22,74 euros en GearBest con el código 321U9GID
  • PocoPhone F1: telefonazo de 6,1”, Snapdragon 845, 6 GB de RAM, 128 GB de capacidad, cámara dual (12+5 MP), 4.000 mAh. Nunca lo había visto a este precio en esa versión de 128GB. Está a 279 euros en GearBest envío desde España, garantía 2 años.
  • Unidad SSD SanDisk 2 TB: una estupenda opción para quienes necesitéis mucha capacidad y mucha velocidad. 2 TB en SSD es una pasada, creedme. Está a 207 euros en Amazon Alemania, envío incluido.
  • Módulo Ballistix Sport RAM DDR4 16 GB: sigue bajando la memoria, y este módulo de 16 GB lo demuestra: DDR4, PC4-2400, color gris, está a 81 euros en Amazon Alemania envío incluido. Póngame dos (por aquello de aprovechar las memorias dual-channel).
  • Impresora multifunción Canon Pixma TS3150: imprime, escanea y copia, con WiFi, Pixma Cloud Link, inyección, impresionane por 33 euros en AliExpress con el cupón plazaoff. En Amazon muy barata también, 39 euros.
  • Patinete eléctrico Xiaomi Mijia M365: el referente. Plegable, 30 km de batería, 25 km/h, doble freno, en color negro, está a 303 euros en Banggod con el código plrosku, en Amazon sale por 412 euros.
  • Auriculares gaming Logitech G432: unos cascos de diadema con micrófono, sonido envolvente 7.1 perfecto para detectar a tus enemigos en FPS solo con el audio. Está a 55 euros en Aliexpress con el código plazaoff.
  • Tarjeta gráfica Zotac RTX 2060: estupenda opción para jugar a toda potencia. Una GeForce RTX 2060 con 6 GB de memoria GDDR6, y todas las mejoras de la arquitectura Turing (Ray-tracing, DLSS). Está a 339,99 euros en Amazon.
  • Xbox Game Pass 6 meses: en un pack de dos códigos digitales de 3 meses cada uno. Rebaja del 50% para este servicio que te permite jugar a cerca de 200 juegos de la Xbox One como si fueran tuyos. Mola, y está a 29,99 euros en Amazon.
  • Xiaomi Mi A2: la versión global de este móvil de 5,99″ con un Snapdragon 660, 4 GB de RAM, 32 GB de capacidad (no ampliables), cámara dual 12+20. Está a 131,60 euros en AliExpress con el código aliexpress19084. El modelo con 4/64 GB está en Amazon a 152 euros
  • Auriculares i12 TWS: unos auriculares inalámbricos BT 5.0 con control táctil, diseño “inspirado” (ja) en los AirPods. Están a 15,15 euros en GeekBuying con el cupón JJVWTEUK
  • 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 10,60 euros en Amazon.
  • Portátil Chuwi HeroBook: un 14,1″ HD con un Intel E800 quad-core, 4 GB de RAM, 64 GB de capacidad (ampliable con SSD M.2), Windows 10, 38 Wh batería. Modesto pero simpático sobre todo por su precio, 191 euros en Aliexpress con cupones.
  • Portátil gaming Asus R570ZD: un 15’6” FullHD con un AMD Ryzen 5 2500U, 8 GB de RAM, 256 GB SSD, GTX 1050 (2GB), teclado en español, puerto RJ-45, USB-C, peso de 2,3 kg (no es una pluma). Sin Windows, ojo. El precio es estupendo, 554 euros en Amazon
  • Xiaomi Mi A2 Lite: versión global, 5,84” Snapdragon 625, 3 GB de RAM, 32 GB capacidad (ampliable), cámara dual 12+5 MP, 4.000 mAh batería, Android One puro. Increíble que cueste 126,89 euros en Banggood con el cupón 4BGA2L3
  • 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,57 en AliExpress.
  • Huawei Honor 10 Lite: 6,21”, CPU Kirin 710, 3 GB de RAM, 64 GB de capacidad (ampliables), cámara dual trasera (13+13 MP), frontal de 24 MP, 3.400 mAh, lector de huellas y hasta NFC para pagos móviles. Está a 194 euros en AliExpress con el cupón “plaza1
  • Portátil Xiaomi Mi Notebook Pro: 15,6 pulgadas FullHD, Core i5-8250U, 8 GB de RAM, 256 GB PCIe SSD, expansión M.2, GeForce MX150, lector de huella, teclado en inglés (te regalan pegatinas). Está a 765 euros en AliExpress. Envío desde España en 5 días.
  • Portátil Jumper EzBook 3 Pro: modesto pero perfecto para viajes o niños: 13,3 pulgadas FullHD (!!), Intel Celeron N3450, 6 GB de RAM, 64 GB eMMC (slot M.2), salida HDMI, peso 1,39 kg, Windows 10, teclado EEUU. Está a 199,78 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