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. Aprovecha, que no suelen durar mucho tiempo:

  • Portátil Huawei Matebook 13: atentos a este maquinón, versión “lite” del Mateboox X. Con pantalla de 13 pulgadas 2K (1440p), un Core i5-8265U, 8 GB de RAM, 256 GB de capacidad, una GeForce MX150 y lector de huella dactilar. Lo tenéis a 745 euros en AliExpress. La batería de 41,7 Whr es algo limitada quizás, pero es que claro, es súper delgado (14,9 mm) y ligero (1,28 kg).
  • Portátil gaming Lenovo Legio Y530 + Monitor Lenovo L24q: un pack llamativo: el portátil de 15,6”, Core i5-8300H, 8 GB/1 TB (HDD), GTX 1050, Windows 10. Monitor 24 pulgadas 2560×1440 pixels. Muy bien todo por 793,50 euros en Amazon, y cambio SSD asumible
  • Tarjeta gráfica XFX Radeon RX-580: una gráfica seria, tipo GTX 1060, pero que se beneficia de esos 8 GB de memoria gráfica. Está a 199 euros en Amazon, nada mal.
  • Monitor Acer K192HQL: como pantalla auxiliar modesta es curiosa: 18,5 pulgadas con resolución 1366×768, entrada VGA. Muy, muy modesto, pero está en versión reacondicionada en Amazon por 50,5 euros
  • Apple Watch 4: el reloj inteligente de Apple en su versión Sport de 44 mm en color gris espacial (sin conectividad LTE). Hasta 2 días de autonomía, GPS integrado, sensor de frec cardiaca. Está a 399,99 euros en eBay
  • Convertible Lenovo Miix 700: curioso este portátil 2-en-1 reacondicionado (garantía Amazon). 12 pulgadas, Core M7-6Y75, 8 GB de RAM, 256 GB de SSD, Windows 10 pero teclado alemán QWERTZ. Si no os importa, brutal a 398,63 € (insisto, reacondicionado).
  • Xiaomi Mi Notebook Ruby: un portátil curioso. 15,6 pulgadas 1920×1200, Core i3-8130U, 4 GB de RAM, 128 GB de SSD (ampliables), USB 3.0, HDMI, Gigabit Ethernet, lector de tarjetas. Está a 477 euros en Banggood con el cupón B12G304
  • Pala pádel Royal Padel EFE Carbon Amarilla: offtopic, como juego al pádel se me ha ocurrido poner esta oferta que me tienta hasta a mí. Hablan muy bien de esta pala que cuesta 109 euros en Amazon en lugar de los 329 de otras tiendas (comprobado). Chollazo.
  • iPad 9,7 pulgadas (2018): el modelo más reciente con soporte para el Apple Pencil. Color gris espacial, 32 GB de capacidad y con WiFi. Está a 269,99 euros en eBay, el precio más bajo que he visto. En Amazon está a 309 euros.
  • 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,24 en AliExpress.
  • PC Medion Akoya PCC722: atentos que aquí tenéis un equipo sobre el que luego crecer mucho (un SSD y gráfica modesta por ej) y bien: Core i3-8100, 8 GB de RAM, 1 TB de disco HDD, sin sistema operativo. Está a 319 euros en Amazon.
  • Samsung Galaxy Tab A: buena tableta Android con pantalla de 10,1 pulgadas FullHD, procesador octa-core, 2 GB de RAM, 32 GB de capacidad, ANdroid 7.0 actualizable, color blanco. Está a 167,50 euros en Amazon.
  • Hub USB-C 7 en 1: para los que solo tenéis puertos USB-C en el portátil, este es un súper-dongle. Salida HDMI, 3xUSB 3.0, USB-C, lector SD y micro SD. Todo por 20,99 euros en Amazon con el cupón LGUZWW3D.
  • iPad Pro (2017): el de segunda generación, no el más reciente, pero atentos, CPU Apple A10X Fusion, 12,9 pulgadas, 256 GB de capacidad, WiFi y un precio estupendo, 881,39 euros en Amazon
  • iPhone XR: el telefonazo “económico” de Apple baja un poco de precio. Pantalla de 6,1 pulgadas (LCD), cámara de 12 MP, Face ID, CPU APple A12 Bionic, carga inalámbrica, resistencia al agua. Está a 749 euros en Amazon en color azul.
  • Intel NUC: un miniPC que solo incluye placa y procesador: tienes que comprar aparte RAM y SSD. Aún así curioso por formato y puertos. LLega con un Celeron J3455 y con HDMI, VGA, USB3, Ethernet y puertos M.2 y DDR3. Está a 119 euros en Amazon
  • Xiaomi PocoPhone F1: el móvil súper chollo de los últimos meses baja también en Amazon. 6,18 pulgadas, Snapdragon 845, 6GB de RAM y 128 GB de capacidad (ole) además de cámara dual 12+5 MP. Está a 305 euros en Amazon.
  • Xiaomi Mi Mix 3: el súper teléfono sin marcos baja de precio: con pantalla de 6,39” deslizable para la cámara selfie y Snapdragon 845, 6 GB de RAM 128 GB de ROM y cámara dual 12+12. Estupenda opción por 436,86 euros en AliExpress (aplicad cupón de 7 euros en la página).
  • PC Lenovo IdeaCentre AIO 330-20AST: un Todo-en-uno modesto pero estupendo para ahorrar espacio en el escritorio. 19,5”, CPPU AMD A6-9200, 4 GB de RAM; 1 TB de HDD, gráfica AMD Radeon R4, Windows 10, ratón y teclado. Todo por 259,99 euros en Amazon.
  • Móvil ProTruly D7: pantalla 5,5 pulgadas, Helio P20, 3 GB de RAM, 32 GB de capacidad (ampliables) pero atentos a la cámara VR de 26 MP que permite grabar vídeos en modo “panorama 360”, o eso promete. Está a 92,53 euros en Banggood. Curioso es, desde luego.
  • Nokia 8: pantalla de 5,3 pulgadas, Snapdragon 835, 6 GB de RAM, 128 GB de capacidad (y ampliables, uauh) y cámara dual 13+13. Curioso lo de su pantalla con 700 nits de brillo máximo. Está a 240 euros en Banggood. En Amazon esta versión está a 410 euros.
  • Acer RT280KABMIIPX: monitor de 28 pulgadas con panel TN, resolución UHD (3840×2160), 1 ms de respuesta, 2 x HDMI (2.0), 1 x HDMI (1.2), altavoces integrados. Está a 262 euros en Amazon Italia envío incluido.
  • Xiaomi Notebook Air 13,3”: el portátil con una CPU algo más antigua, el Core i5-7200U. Por lo demás, impresionante por sus 8 GB de RAM, 256 GB de capacidad y GeForce MX150 además de lector de huella. Brutal por 603,90 euros en Banggood con el cupón 12CRI01.
  • Reloj inteligente Huawei Watch GT: pantalla AMOLED 1,39” (454×454), GPS/Galileo, sensor de frec. cardiaca, notificaciones, sumergible. Está a 150 euros en AliExpress por 150 euros con el cupón HuaweiGT (en Amazon 199).
  • Mando Bluetooth para juegos móviles IPega PG-9076: con su soporte para el móvil, pero que también sirve para la tableta o el portátil, por ejemplo. Está a 16,98 euros en GearBest.
  • Xiaomi Notebook Air 13,3 pulgadas: precio/prestaciones casi sin parangón. 13,3 pulgadas FullHD, Core i7-8550U, 8 GB de RAM, 256 GB SSD, GeForce MX150, HDMI. Está a 763,76 euros en Banggood con el cupón 19BGA729.
  • Portátil Lenovo Ideapad 330-15IKB: 15,6 pulgadas HD (1366×768), Core i3-6006U, 4 GB de RAM, 500 GB de HDD y sin sistema operativo, así que perfecto para #Linux. Tiene Ethernet lector SD, USB, USB-C, HDMI ¡y grabadora de DVD! Está a 299 euros en Amazon.
  • Colorful iGame RTX 2060: esta marca es algo así como la Gigabyte china: toda una RTX 2060 con 6 GB de GDDR6 a un precio brutal, 352,56 euros en Banggood con el cupón fee6c3.
  • Xiaomi MiBand 3: con pantalla de 0,78 pulgadas (128×80 píxeles), batería de 110 mAh con autonomía de 20 días, sumergible hasta 50 metros y con Bluetooth 4.2. Envío desde España, está a 22,49 euros en Amazon.
  • Monitor gaming Aopen 24HC1QRPbidpx: atentos a su diseño curvo, diagonal de pantalla de 23,6 pulgadas, Full HD pero sobre todo soporte 144 Hz. Tiene entradas HDMI, DVI y DisplayPort y soporte para FreeSync. A jugar chicos. Está en Amazon a 179,99 euros.
  • Impresora Epson EcoTank ET-2650: no usa cartuchos de tinta, sino depósitos recargables que salen (teóricamente) mucho más baratos. Es una multifunción de inyección con WiFi. Está a 159 euros en Amazon  En PCComponentes cuesta 205 euros, por ej.
  • 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: 150 euros en GearBest. Pero es que atención: en Amazon está a 162 euros ahora mismo.
  • Pendrive USB Kingston DataTraveler 128 GB: atentos a esta llave USB con nada menos que 128 GB de almacenamiento por un precio absurdo: 18,32 euros en Amazon. El modelo de 64 GB está a 9,62 euros en Amazon, también muy interesante. Si no os gusta ese diseño, el pendrive SanDisk Ultra de 128 GB está a 19,99 euros en Amazon.
  • Disco duro externo Maxtor 4 TB: yo me compré hace tiempo uno igual por 130 euros. COn conexión USB 3.0-3.1 y sin necesidad de alimentación externa. La rebaja en precio es bastante importante, así que ahí lo dejo: ahora está a 96,89 euros en Amazon.
  • Fire TV Stick: el dongle HDMI de Amazon compatible con todo tipo de servicios de streaming mola por el mandito a distancia. Está  a 39,99 euros en Amazon.
  • Monitor HP 32s: si necesitáis un monitor grande, atentos al modelo de HP de 32 pulgadas con resolución FullHD, conectores VGA y HDMI por 251 euros en Amazon.
  • Huawei Mate 20 Pro: el súper teléfono de Huawei, incluso por encima del P20 Pro. Pantalla de 6,39 pulgadas, Kirin 980, 8 GB de RAM, 128 GB de capacidad, 4.200 mAh y una cámara triple que está entre las tres mejores del mercado. Está a 739,99 euros en eBay.
  • SSD SanDisk 1 TB: una unidad de estado sólido SATA de 1 TB a 131,43 euros en Amazon. No hay mucho más que decir. Otra opción: la unidad Crucial MX500 también de 1 TB por 121,92 euros en Amazon.
  • Monitor gaming BenQ XL2411P ZOWIE: un monitor estupendo para jugones con diagonal de 24 pulgadas, resolución 1080p, conectores HDMI y DisplayPort y sobre todo soporte de tasa de refresco de hasta 144 Hz. Fantástico por 247 euros en Amazon, el precio más bajo que he visto nunca.
  • Smart TVTelevisión Sharp 65 pulgadas 4K: si tenéis otras necesidades atentos, porque aquí tenemos un pedazo televisor con todo lo que se le puede pedir a un cacharro de este tipo. 65 pulgadas, 4K, HDR, 3 puertos HDMI, 2 USB, y sonido Harman Kardon. Todo por 799,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 negro a 363,22 euros en Banggood.
  • Smartwatch Huawei Watch 2: un reloj inteligente con Android Wear 2.0 y con pantalla de 1,2 pulgadas. Tiene GPS, es resistente al agua y tiene batería de 420 mAh. Está a 164 euros en Amazon Italia, envío incluido.
  • Forza Horizon 4: el juegazo de coches está de rebajas: 31,89 euros en CDKeys. Por poner otro buen chollo, el Grand Theft Auto V para PC está a 10,79 euros en CDKeys.
  • Monitor Acer V6 V226HQL: monitor de 21,5 pulgadas Full HD (1920 x 1080) con entradas VGA, DVI y HDMI. Atentos al precio: 83,48 euros en AliExpress Plaza, envío desde España y garantía de dos años.
  • 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, 288,51 euros en GearBest con dos años de garantía en España. Desactivad el seguro de envío, eso sí.

¿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