Qué es responsive web design. Lo básico.

01/02/2013 por lostium en Lost & Found

Lostiums,

Como parece que os enrolláis con esto del consultorio os quería preguntar: Eso del “responsive design”, ¿eso qué es lo que es?. Porque no paro de oir hablar de ello, pero no lo tengo nada claro.

Leo, Madrid.

Leer respuesta

Estimado Leo (mal comienzo, suena a “Querido Capricornio…”):

Hoy sabrás por fin qué es responsive web design, o como dice la R.A.E. «diseño web adaptable» recomienda Fundeu «diseño web adaptativo»:

(@RAEinforma había propuesto anteriormente «adaptable», pero no era muy acertado. Ahora la duda que nos queda es: ¿Cómo se va a acabar traduciendo “adaptive web design?”)

×Lo de @Fundeu en Twitter mola mucho: puedes lanzarles consultas a través de Twitter sobre el uso del idioma español (o castellano, es lo mismo) a cualquier hora del día, cualquier día de la semana. Un gran ejemplo de servicio que sabe aprovechar Twitter como un canal rápido y eficaz para comunicarse con sus usuarios. Nos gusta.

Volviendo al responsive design, y hablando de aplicaciones web, se trata de un planteamiento de diseño que permite crear apps que se “adaptan” al navegador en el que se ejecutan, mostrando una versión optimizada, ya se trate de un ordenador de sobremesa, una tableta, un móvil o cualquier otro dispositivo con pantalla. Conviene aquí no confundir el término “fluido” con “adaptatativo”. Adaptatativo quiere decir que no sólo el texto e imágenes crecen y decrecen en función del tamaño de la pantalla (fluídos), si no que el contenido se reagrupa y la disposición de elementos en la app cambia para mostrar de forma óptima su interfaz y contenidos, todo ello en función del tamaño y disposición de la pantalla del dispositivo del usuario. Esto se consigue gracias al uso de media queries, pero hablaremos de ello en otro artículo algo más técnico.

Pero como lo mejor es demostrar las cosas en la práctica, pon el cursor del ratón en la esquina inferior derecha de tu navegador, y arrastra haciendo la ventana más pequeña. Más pequeña… ¿Qué es lo que pasa? Que la web se reconfigura en función del dispositivo para optimizar su lectura y visualización.
Como intuimos que estás usando un móvil o tableta, será más difícil demostrártelo, pero si giras tu dispositivo, es más que probable que observes que algunas cosas cambian de sitio para facilitar su lectura.

Ejemplo de web responsive

×Si has conseguido retornar a la lectura después de la demo, entonces ya debes hacerte a la idea de en qué consiste el responsive design. Comentar también que existen servicios web donde puedes ver de un simple vistazo cómo se vería tu web responsive en distintos dispositivos móviles. Nuestras preferidas son Am I Responsive? y Responsinator.

¿Y esto es importante? Te preguntarás en tu fuero interno. Nosotros creemos que mucho: A la hora de abordar cómo mostrar tus productos o servicios en internet, ya sea a través de una web presencial o de aplicaciones complejas que ofrecen servicios diversos, el rango de potenciales dispositivos con los que los usuarios pueden ahora acceder va de smartphones con pantallas de 2 pulgadas a SmartTVs de 50″. En un mundo perfecto, si el cacharro tiene internet, tu servicio debería ser accesible y usable. Y gracias a técnicas como estas, puedes estar ofreciendo una experiencia óptima con acceso a las funcionalidades de tu app a todo ese rango de potenciales usuarios, y manteniendo un único acceso web. Si a esto le sumamos un área de administración con un WordPress personalizado como gestor de los contenidos, tenemos la herramienta perfecta para crear una aplicación multidispositivo y con una sóla entrada de datos.

Y todo lo anterior sin mencionar aún que el acceso vía móvil se ha generalizado tanto en los últimos años, que es de locos no prestarle atención: en el caso de Tuitrafico, ha pasado de un 14% de accesos móviles en 2011 a un 30% este último año y un 35% en el último mes (seguro que algo tiene que ver la compra compulsiva de tabletas durante las pasadas navidades). Si se mantiene ese ritmo de crecimiento, ¿qué hacemos todos que no estamos ya optimizando y construyendo plataformas que funcionen en móviles y tabletas?

Opciones existen, pero parecen mucho menos apetecibles: una versión optimizada para ordenadores de sobremesa, y las correspondientes versiones de apps para móvil y/o tableta, bien en HTML5 como hizo The Guardian a finales del año pasado, o nativas (una para cada sistema operativo móvil: iOS, Android, Windows8…). Sólo de pensarlo, me entran escalofríos… Menuda sangría.

El coste de desarrollar esta última opción es probablemente el doble o incluso el triple frente al coste de implementar diseño adaptatativo en una nueva web app. No sabemos si, como se ha publicado recientemente, será la tecnología del 2013 pero, en nuestro caso, tenemos la sensación de que se quedará un buen rato con nosotros.

×Nuestros últimos proyectos para clientes, Club de escritura Fuentetaja y Nik Mashup, también usan diseño responsive por si quieres “cacharrear” un rato con ellos.

Etiquetas:

Necesito una Web… ¿Qué debo saber para que no me la cuelen?

24/01/2013 por lostium en Lost & Found

Hola Lostiums, llevo tiempo queriendo tener una web para mi negocio de palomas mensajeras. Mi problema es que de palomas sé mucho, pero de Internet nada. Varias empresas me han ofrecido presupuestos pero no tengo claros los criterios para elegir la mejor oferta… ¿Podéis echarme una mano para saber por dónde empezar?

– Manuel –

Leer respuesta

Inauguramos esta sección con las preguntas más habituales que nos suelen hacer amigos y conocidos. Estamos seguros de que, en el futuro, esto nos ahorrará mucho tiempo: será una especie de LostiumFAQ al que remitiremos de buen grado a todo el que nos repita una pregunta ya contestada. Si tienes alguna duda técnica o crees que podemos echarte una mano, contacta con nosotros y estaremos encantados de intentar responderte a través de esta sección.

Una cosa que nos gusta advertir a la gente que no tiene perfil técnico es que al menos debe tener las nociones básicas para saber lo que está contratando. Es algo parecido a comprar un coche: no somos mécanicos, pero conocemos el modelo, la potencia y los extras que queremos en nuestro flamante vehículo.

Mensajería El Palomar

Es mucha la gente conocida que nos cuentan autenticos ‘dramas’ con sus proveedores de tecnología. Suelen ser víctimas de empresas ‘buitre’ con sistemas propietarios, facturados a doblón y que difícilmente permiten actualizar contenidos, ampliar secciones o llevarse la web a otra empresa sin pasar por caja.

El remedio está en los gestores de contenidos (aka CMS) open source. Lo del open source lo veremos otro día tranquilamente; hasta entonces, repite conmigo: “open source no significa gratis, open source no significa gratis…”. Un CMS open source es una herramienta soportada por grandes comunidades de desarrolladores y que cualquier programador puede personalizar o extender fácilmente.

La ventajas de utilizarlos son muchas. Puedes tener acceso a los contenidos y modificarlos sin tener conocimientos avanzados. La presentación suele estar separada del contenido, es decir, si en un futuro te cansas del diseño de tu web, será mucho más fácil rediseñar el formato ya que el contenido no es necesario cambiarlo.

Si vas a contratar el desarrollo de una web presencial, de esas de: ¿quiénes somos?, ¿dónde estamos? ¿a dónde vamos?… Al menos deberás hacer tres preguntas a la empresa que te va a ofrecer el presupuesto.

  1. ¿Qué gestor de contenidos utilizará la web que os estamos encargando?

  2. Si un día ocurre lo peor y vuestra empresa desaparece o decidimos cambiar de proveedor, ¿Podremos migrar fácilmente la aplicacion y su contenido a otro servidor?

  3. ¿Se verá bien la web en tabletas y móviles?

La primera pregunta se responde fácil. Si el comercial te dice que ellos han desarrollado una herramienta con nombre esotérico y que permite hacer toda clase de virguerías, sólo tienes una salida: ¡corre!

Nuestro consejo es que lo evites si puedes, a esta altura de la película no merece la pena utilizar software propietario, cerrado y, posiblemente, con coste por licencia.

Si en cambio se sorprende de que sepas lo que es un CMS y te dice que la web está basada en alguno de los gestores más conocidos como:

Logos de WordPress, Joomla y Drupal

Los gestores de contenidos más comunes del mercado: WordPressJoomla y Drupal

Sin duda, el panorama mejora. Utilizar cualquiera de estas herramientas facilitará el mantenimiento de la web y además, si en algún momento necesitas hacer cambios o migrar a otro servidor, te será mucho más fácil y económico encontrar desarrolladores para estas plataformas.

Con la segunda pregunta te aseguras un plan B. Estás haciendo una inversión para tu negocio y lo último que quieres es quedarte tirado. Lo suyo, es que puedas disponer de una copia de seguridad o un mecanismo de exportación para que, en caso de necesidad, no tengas que depender de terceros.

La tercera pregunta es relevante porque el porcentaje de dispositivos que se conectan a Internet aumenta día a día, las tablets se están adueñando de muchos sofás y realmente todo indica que la tendencia seguirá creciendo.

La primera recomendación en el apartado de movilidad es que tu web no debería utilizar Flash. Esta tecnología ha permitido durante muchos años a los diseñadores y programadores dotar a las webs de animaciones con interacciones impresionantes. De hecho, sigue siendo una de las herramientas más utilizadas para los llamados ‘casual games’. Pero en la actualidad está perdiendo terreno, el motivo: no funciona en tabletas y móviles. Steve Jobs se negó a integrarlo en sus dispositivos y eso ha hecho que la alternativa sea HTML5.

Si quieres ir más lejos, y tienes presupuesto para hacerlo, invierte en una web con diseño ‘responsive‘ o adaptable. Aunque profundizaremos en otros artículos, significa que tu web se verá de manera óptima y ajustada a cualquier tamaño de dispositivo.

Ejemplo de una de nuestras aplicaciones web con diseño responsive o adaptable

Nuestra opinión es que es mucho más fácil y económico hacer una web desde cero pensando que se visualice correctamente en todos los dispositivos, que lanzar primero una ‘estandar’ y luego en un futuro tener que adaptarla a dispositivos móviles.

Y por último, asegúrate de que te den por escrito y bien detalladas todas estas cuestiones. Todos sabemos que las palabras se las lleva el viento.

Si sigues interesado en conocer más sobre el tema o tienes alguna cuestión más específica, escríbenos y te aclaramos tus dudas.

Etiquetas: