Diseño responsive, diseño adaptable

Nunca nadie pide permiso para entrar a un sitio.
Utiliza el dispositivo que tiene o elige. Y el universo de dispositivos se ha convertido en un mapa de lo más diverso.
Y para quiénes diseñamos, ¿para tabletas, para celulares, para anteojos o heladeras inteligentes?
La respuesta, ahora y siempre: para la gente, que como ahora tiene más opciones nos obliga a nosotros a cambiar y a adaptarnos.

Si la web provocaba cierta resistencia a los diseñadores que provienen del papel, ahora el vértigo aumenta.
Pero todo depende del punto de vista. Si bien perdemos cierto control, también podemos cambiar nuestra mirada; la web siempre fue flexible, pero hasta ahora lo veníamos resistiendo.

En el nuevo paradigma web los sistemas que diseñamos ya no son rígidos. Controlaremos la fluidez, los cambios y ofreceremos diferentes opciones ante diferentes escenarios y necesidades.

Responsive web design

El diseño adaptable nos abre las puertas para una nueva manera de ver la estructura, la grilla y también algunos componentes como la navegación.
Ejemplo Responsive Diario Time

El Responsive design (RWD) o diseño adaptable es una sumatoria de técnicas. Para cada “problema” hay más de una técnica que lo resuelve y constantemente surgen nuevas soluciones.

Por supuesto, además de la variedad de dispositivos, sistemas operativos y nuevos navegadores, no debemos perder de vista los navegadores más antiguos.

¿Cómo empezar a diseñar? Hernán Beati nos sugería en su curso diseñar primero el tamaño más grande y luego ir reduciendo. Al maquetar, al revés, comenzar por la versión móvil e ir subiendo.

Las ventajas de diseñar sitios adaptablesinfografia responsive design

  • Diseñamos pensando en todos los dispositivos (móvil, tablet, notebook, desktop, TV inteligente)
  • No se necesita hacer zoom para leer el contenido en dispositivos pequeños. Ni agrandar para verlo en pantallas grandes.
  • Menos gastos de mantenimiento
  • Mejora el SEO
  • Mejor performance, ahorra tiempo y dinero

El cliente

Convencerlos de la necesidad no es difícil. El problema suele aparecer al momento de negociar los límites de cada técnica. Cada cambio implica una pérdida respecto al diseño clásico, pero tenemos que enfocarnos en que el lector ya no está solo en las computadoras.
Es imprescindible llevar algún dispositvo y mostrar algunos ejemplos positivos y negativos.

SEO: a Google le gusta RWD

infografia diseno movil nativo vs responsive

Frente a otras opciones como hacer una versión separada para los dispositivos móviles, el tener solo una única versión nos da muchas ventajas:

  • mejor indexación
  • evitamos contenido duplicado
  • los enlaces entrantes son hacia la misma página
  • el tiempo de permanencia en una página se suma en lugar de atomizarse.

Además, para mostrar una versión separada tenemos que usar algún sistema de detección, los cuales tienen fallas. Y tomar la decisión de qué versión entregar en cada caso no es tan sencilla. Cada móvil y cada tableta puede ser una excepción. Si eligen esta solución al menos den la opción de pasar a la versión full.

Aplicaciones móviles

¿Por qué no usar una aplicación móvil?
Además de perder todas las ventajas SEO que mencionaba antes, bajarse una app implica cierto esfuerzo y ocupar memoria en nuestro dispositivo. Las apps son útiles para casos específicos, donde es necesario guardar datos, aprovechar capacidades como el GPS o la cámara y sobre todo, es una funcionalidad que utilizaremos a menudo y más de una vez.
Si creamos una aplicación móvil en lugar de una web adaptable o una versión mobile, estaremos creando una barrera de acceso a nuestro sitio.

Más enlaces

Recursos

WordPress

3 comentarios

  • Mariela Bagnato says:

    Hola Inés! Te sigo hace varios años en este blog (lectora silenciosa, jaja). Hice el curso de responsive en la FADU, y no sabía que eras la misma Irene 😉

    Muy bueno tu artículo; en lo personal, todavía no pude iniciar un proyecto responsive, los clientes están “a la espectativa”, o mirando ejemplos actuales no del todo armoniosos (Infobae, TN).

    Será nuestra tarea como diseñadores seguir abriendo el camino para lo nuevo que “ya está aquí”.

    Un beso!
    Mariela.

  • Irene says:

    ¿Cómo Inés? Irene! jajajajaja.
    Soy la misma, qué gracioso.
    Hay que arrancar, me encanta que ahora esto sea tendencia.
    La web cada vez me gusta más 🙂

  • Mariela Bagnato says:

    Jajaja, perdón!!!
    Lo peor es que te atribuí doble personalidad, empecé con Inés y luego seguí con Irene 😉

    Vamos por el RWD!
    Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *