¿Cómo no pensar en diseño adaptable?

El diseño adaptable (o responsive design) es la nueva manera de diseñar para medios digitales.

Verónica Orso, autor AutorVerónica Orso Seguidores: 65

Greta Sánchez, editor EdiciónGreta Sánchez Seguidores: 78

Hoy en día diseñar con criterios de diseño adpatable (responsive design en inglés) ya no es opción, sino nuestra responsabilidad. Estamos en una etapa en la que lo móvil saturó nuestra vida y como diseñadores debemos pensar así.  ¿Darle la opción al cliente?, ¿para qué? Como profesionales sabemos qué es lo mejor para ellos, y dentro del proyecto ya tiene que estar implícito que el sitio web será adaptable para que pueda verse en cualquier dispositivo.

Ahora bien, ¿cómo diseñar únicamente desde una perspectiva adaptable? ¿Cómo adoptar este enfoque? Es simple, solamente debemos tener todo el tiempo presente que nuestros bloques de información se reacomodarán dependiendo dónde se vayan a mostrar. Entonces cuando estemos frente a nuestro lienzo en blanco acomodaremos los elementos y la información en bloques que se puedan ajustar fácilmente y no alteren el orden ni la estética en tableta o en el móvil. Suena fácil, ¡y lo es! Ya estamos tan acostumbrados a navegar sitios de esta manera que nuestra mente comienza a ajustarse por sí sola a este tipo de diseño.

Pero comencemos por el principio. Si aún no sabes qué es una página adaptable, debo decirte que me refiero a una página que se ajusta atomáticamente al tamaño de pantalla del usuario sin alterar la legibilidad del contenido y manteniendo un mismo orden y estética. Es decir que, la misma página html/css se ve diferente en tu pantalla de 21 pulgadas y en tu móvil, y, en base a unas reglas pre-definidas, se adapta para mostrarse de la mejor forma posible en cada formato, tamaño y proporción de pantalla, sea vertical o apaisada.

Algunos consejos:

  1. Antes que nada, habla con tu cliente y coméntale lo importante que es que su sitio sea adaptable, y del alcance que tendrá en cuanto a visitas y rebotes. Tómate el tiempo para explicarle las bondades de estar presente en los dispositivos que hoy lo usuarios manejan a diario y cuidar el contenido en todos los formatos.

  2. Define los puntos principales que tendrá el proyecto para evaluar lo que se requerirá en el armado y cómo acomodarás la información tanto en la página de inicio como en el resto de las secciones.

  3. Establece la prioridad de los contenidos según el contexto de lectura. Recuerda que estamos diseñando no solo para que el sitio se adapte a los formatos pequeños de pantalla sino también para dar al usuario la información que necesita en cada contexto. De todos modos deja siempre abierta la posiblidad de ampliar la información.

  4. Establece prioridades en el diseño:

    • Ajusta a tu lienzo guías que te ayuden a organizar elementos y contenido en forma de bloques. Resulta de ayuda organizar columnas y distribuir imágenes y texto en bloques sabiendo que luego podrán mostrarse unos debajo de otros en los diferentes formatos y proporciones de pantalla.

    • Utiliza elementos simples. Hay elementos que el usuario ya conoce sobre los modos de navegación en la Web (flechas, signos de más y menos, subrayados para los hipervínculos). Recuerda que estás diseñando un sitio que debe ser completamente navegable. Utilizar elementos intuitivos y ya aprendidos por el usuario es lo más eficiente.

    • Ten en cuenta que los elementos puedan ser «clickeables» también con los dedos también. Recuerda que dependiendo donde se vea el sitio, es como utilizará. El tamaño de los iconos y accesos debe ser suficiente, y debe haber buen espaciado entre ellos, para que en el móvil el usuario no necesite hacer malabares para poder tocar el que desee.

    • Optimiza siempre, siempre. Esto vale para cualquier tipo de diseño, sea o no adaptable. Al usuario no le gusta esperar, así que optimiza siempre tus imágenes para que no demoren en descargar. Eso ayudará a que no se vayan de tu sitio antes de tiempo.

    • Al terminar tu diseño debes prever cómo se acomodará cada página a los diferentes tamaños de pantalla, para verificar que todo se vea perfecto.

  5. Finaliza tu diseño con todos los elementos a tener en cuenta y enviálo a desarrollo para que puedan comenzar y optimizar los estilos también a dispositivos móviles.

Pruébalo en cuanto dispositivo tengas a la mano y quedará listo para que tus usuarios lo naveguen. No olvides incluir el código de Google Analitycs y revisarlo cada tanto, para ver qué páginas son las más visitadas, si hay rebote y conocer las preferencias y el comportamiento de tus usuarios.

Si aún no lo has hecho, adopta el diseño adaptable (responsive design) hoy mismo, y te acompañará para siempre, porque tu diseño debe verse perfecto en todos lados.

¿Qué te pareció? ¡Comparte tu opinión ahora!


Opiniones:
40
Votos:
75

Este video podría interesarte👇👇👇

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
Código QR de acceso al artículo ¿Cómo no pensar en diseño adaptable?

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web. Publicado el 11/06/2014

Descargar PDF

Debate

Logotipo de
Tu opinión

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Daniel Llach
1
Jun. 2014

Este articulo parece del 2011 a lo menos

2
Retrato de Pablo Siciliano
0
Sept. 2014

Estimados, como programador les digo: Esta buenisimo que opinen que todo eso es una tarea de diseño, o que al menos el diseñador debe estar adaptado en ese sentido a los tiempos que corren. Pero tiene mucha razon Verónica al plantear que primero un buen 50% de sus colegas debiera empezar a ver que una web no es un monton de dibujos que solo se ven bien en 1200px o mas. Y ni hablar de lo que puede accederse clickeando con los dedos.

0
Responder
Retrato de Carlos Enrique Cisneros Medina
1
Jun. 2014

Comparto totalmente en que el diseño responsivo ya es una responsabilidad no una opción. Saludos

1
Retrato de Jorge Hernan Vargas
0
Jun. 2014

Me gustó tu artículo, interesante, conciso y al punto.

1
Responder
Retrato de Magdalena García Pintos
0
Jun. 2014

No importa si es viejo, sigue siendo muy útil este artículo. En mi caso, me enteré hace muy poco sobre responsive web design.

1
Retrato de Cesar Leigh
0
Abr. 2015

Veronica una pregunta como hago para publicar artículos en este foroalfa? gracias por tu respuesta :)

0
Responder
Retrato de David Colacilli
3
Jun. 2014

Algunas buenas prácticas para mobile: Enlace

2
Retrato de David Colacilli
3
Jun. 2014

Gracias Verónca, saludos.

0
Responder
Retrato de Candelaria Argüello Pitt
0
Jun. 2014

Gracias Verónica por tu aporte, aunque dicen que es viejo, muchos no lo tenemos en cuenta ni tenemos experiencia y conocimiento a la hora de diseñar.

1
Retrato de Verónica Orso
65
Jun. 2014

Hola Candelaria, muchas gracias por su comentario, un placer poder aportar :)

0
Responder
Retrato de Sebastián Trapolini
0
Jun. 2014

Me parece bueno empujar a aquellos que todavía están fuera del diseño responsivo dado que como bien decís, ya no es opción. Creo que cabe la aclaración de lo que es diseño adaptativo o adaptable vs diseño responsivo. El primero significa que se realiza una nueva web para dispositivos específicos que se quiera atender, mientras que el segundo lo que hace es lo que tu muy bien describiste. Este no es un detalle menor ya que uno involucra cambios de estructura por CSS, y en el otro, el código identifica el dispositivo y según eso es el sitio que levanta para visualizar. Gracias por tu aporte.

2
Retrato de Verónica Orso
65
Jun. 2014

Gracias Sebastián por leer el artículo y tu aporte :)

0
Responder
Retrato de Gustavo Becker
8
Jun. 2014

Buen artículo Verónica, muy bien fundamentado el real sentido del diseño web "responsivo". Aún que no se crea, muchos diseñadores desconocen su desarrollo y contenido. Felicitaciones!!

2
Retrato de Verónica Orso
65
Jun. 2014

Muchas gracias Gustavo. El artículo tiene la intenión de introducir a los que todavia no lo han hecho en esta característica que ya debe ser un "obligatorio" en cada desarrollo de proyecto web. ¡Saludos!

0
Responder
Retrato de Robin Libertario
0
Robin Libertario
Abr. 2016

Gracias, personalmente estoy utilizando un framework excelente para esto, se llama bootstrap. Tiene un sitio muy explicativo. Lo recomiendo!

0
Retrato de Alfredo Texis Michicol
6
Oct. 2014

gracias esta muy interesante el tema felicidades

0
Retrato de Karen Cortes
0
Oct. 2014

Gracias Verónica, tu artículo es claro y conciso, tal vez muchos veníamos practicando el diseño "responsive" sin ser conscientes que hoy en día ya es una necesidad para el usuario y no una opción.

Saludos.

1

Te podrían interesar

Próximos seminarios online

Seminarios de actualización para especializarte junto a los que más saben

Estrategia de Marca

Estrategia de Marca

Claves para programar el diseño de símbolos y logotipos de alto rendimiento

20 horas (aprox.)
1 agosto

Tipología de Marcas

Tipología de Marcas

Criterios y herramientas para seleccionar el tipo adecuado al diseñar marcas

15 horas (aprox.)
1 agosto

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

20 horas (aprox.)
1 septiembre