¿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.

Vero Orso Córdoba
Followers:
65
Comments:
40
Votes:
75
Compartir:

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.

Editor: Greta Sánchez Ciudad de México
Followers:
65
Comments:
40
Votes:
75
Compartir:

40 Comments

Comment

This article does not express the opinion of the editors and managers of FOROALFA, who assume no responsibility for its authorship and nature. To republish, except as specifically indicated, please request permission to author. Given the gratuity of this site and the hyper textual condition of the Web, we will be grateful if you avoid reproducing this article on other websites. Published on 11/06/2014.

Vero Orso

More articles by Vero Orso in Spanish

Idioma:
ES
Title:

Neuromarketing: el nuevo proceso de compra

Synopsis:

¿Realmente eres tú el que decide? Tu cerebro ya decidió si leer este artículo o no.

Share:
Idioma:
ES
Title:

Una metodología creativa para creativos

Synopsis:

Lego© Serious Play una metodología que sorprende en el mundo y que pone a altos ejecutivos junto con sus empleados a encontrar soluciones para sus empresas. Y todo esto, jugando...

Share:
Idioma:
ES
Title:

¿Eres el líder de tu empresa?

Synopsis:

Dos preguntas clave que debes hacerte si deseas encaminar el entusiasmo por el trabajo en tu empresa.

Share:

You may be interested

Lluïsa Díaz
Idioma:
ES
Author:

Lluïsa Díaz

Title:

Personalización de objetos en los juegos de Facebook

Share:
Interactions:
Votes:
14
Comments:
10
Followers:
19
Juan Carlos Mata
Idioma:
ES
Author:

Juan Carlos Mata

Title:

De tecnologías, virus y zombis

Share:
Interactions:
Votes:
4
Comments:
2
Followers:
1
Jorge Montaña
Idioma:
ES
Author:

Jorge Montaña

Title:

Los Makers y la producción ubicua

Share:
Interactions:
Votes:
43
Comments:
9
Followers:
164
Pablo Álvarez
Idioma:
ES
Author:

Pablo Álvarez

Title:

El diseñador gráfico en el Game Design

Share:
Interactions:
Votes:
132
Comments:
61
Followers:
176
Oscar Armando Carballido
Idioma:
ES
Author:

Oscar Armando Carballido

Title:

Concepto de diseño de smartwatch

Share:
Interactions:
Votes:
25
Comments:
12
Followers:
3
David Espinosa
Idioma:
ES
Author:

David Espinosa

Title:

Diseñar con el móvil

Share:
Interactions:
Votes:
87
Comments:
64
Followers:
46
My opinion:

Login with your account to comment on this article. If you do not have it, create your free account now.

0
Bryan Millas
Apr 2016

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

0
Reply
5
Alfredo Texis Michicol
Oct 2014

gracias esta muy interesante el tema felicidades

0
Reply
0
Karen Cortes
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
Reply
1
Andres Suarez Gomez
Jul 2014

hace una gran referencia para que un diseñador siga paso a paso el proceso para satisfacer el gusto y las necesidades del clienete (responsive design en inglés)

1
Reply
1
Fran Silva
Jun 2014

Primorosa concepção Verônica! Observação de que o Design dos Sites e Blogs deve sim dialogar com os aparelhos e suas novas tecnologias. Bem sabia da importância dessa intervenção o que percebi de muito rico foi essa terminologia de Design Adaptável. Isso mostra a importância e coerência visual do trabalho do Design em suas extensões da Web, ou seja, esses aparelhos: Smartphones etc... Como um complemento a sua ideia evidencio os textos de Vilém Flusser o filósofo das novas tecnologias. É bem legal!

Obrigada Verônica!

1
Reply
15
Joan Betancur Ibagón
Jun 2014

Mas que responsive design hoy en dia se debe tomar como un "responsible design".

Gracias Verónica

1
Reply
0
Christian Portuguez Cuzque
Jun 2014

vale siempre tenerlo en cuenta... aunque a veces los costos de los clientes no lo justifiquen

1
Reply
0
Magdalena García Pintos
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
65
Vero Orso
Jun 2014

¡Muchas gracias Magdalena! :) Me alegro que te sirva. Saludos

0
0
Cesar Leigh
Apr 2015

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

0
Reply
0
Candelaria Argüello Pitt
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
65
Vero Orso
Jun 2014

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

0
Reply
2
Luis Daniel Canales Parrilla
Jun 2014

Buen aporte, pero bastante viejo. Esto ya es un estándar desde hace bastante tiempo, pero igual gracias.

1
Reply
4
Roberto Ortiz
Jun 2014

Este tipo de diseño no sólo le gusta a los clientes o a los usuarios, le gusta a Google y mucho.

1
Reply
3
David Colacilli
Jun 2014

Algunas buenas prácticas para mobile: Enlace

2
65
Vero Orso
Jun 2014

¡Muchas gracias por el aporte David! Muy útil el link :)

0
3
David Colacilli
Jun 2014

Gracias Verónca, saludos.

0
Reply
0
Luis Beltran
Jun 2014

Es un artículo interesante ya que nos habla accerca de como el diseño se involucra con las nuevas tecnologías, al hablar de que las páginas estén adaptadas a los nuevos dispositivos mobiles es un requerimiento fundamental hoy en dia, creando páginas adaptables y funcionales en donde el usuario se sienta comodo al navegar por el mismo

Es una nueva perspectiva del diseño para promocionar productos y servicios.

1
Reply
0
Sebastián Trapolini
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
65
Vero Orso
Jun 2014

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

0
Reply
8
Gustavo Becker
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
65
Vero Orso
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
Reply
1
Daniel Llach
Jun 2014

Este articulo parece del 2011 a lo menos

2
65
Vero Orso
Jun 2014

Hola Daniel, la idea de este artículo es involucrar a los diseñadores que todavía contemplan que un proyecto no tenga su aplicación a móviles, muchos no nos manejamos así, para aquellos que todavía diseñan sitios sin pensarlo de esta manera mostrarles que es fácil y es necesario ya pensar TODOS los proyectos responsive :)

0
0
Fabián Baeza
Jun 2014

El que no esté haciendo diseño responsivo a estas alturas es porque anda bastante desactualizado. Su implentación lleva ya varios años.

1
65
Vero Orso
Jun 2014

Aunque no lo crean hay diseñadores que no lo tienen en cuenta, hay que educar :) ¡Gracias Fabián por leer el artículo!

0
1
Daniel Llach
Jun 2014

Como quieran pero este es un tema muy viejo ... responsive? de que sirve pensar un sitio o app adaptable si no se tiene dominio de la estructura que lo sostiene... yo creo que el tema es que el diseñador ya debe empoderarse del código y generar estructura eficiente y efectiva tanto a nivel visual como funcional, entremos más en github (aprendamos a trabajar a la par en ambientes de desarrollo informatico), usemos la consola (o terminal), utilicemos compiladores de css, dominemos json, adentremonos en lenguajes poderosos/utiles (ej: node.js) y hagamos un trabajo frontend verdadero... del 2014.

0
1
Emmanuel Navarro
Jun 2014

concuerdo con Daniel, al menos en mi experiencia responsive ya es un termino de cajón y como lo mencionas un diseñador ya no se puede quedar solo en crear un buen frontend, hay que meterle a la programación y desarrollo de buenas estructuras para nuestros proyectos web, la gran variedad de frameworks que hay en la actualidad hacen que la maquetación y diseño de una web se hagan en cuestión de minutos, lo importante es una buena estructura y funcionamiento, mas allá de solo ver si es responsive y crear sitios o páginas web, creo lo importante es generar plataformas interactivas y funcionales.

0
1
Daniel Llach
Jun 2014

me parece delicado el tema de que la maquetación y diseño web sea en cuestion de minutos, ya que yo no he dicho eso ... para mi caer en eso es un error: el diseño ES lo más importante pero no se puede pensar descontextualizado del codigo y tecnología que lo sustenta... date cuenta que nunca mencione framework.. ya que puedes hacerlo mucho más eficiente y efectivo sabiendo qué es lo que necesitas y programas sólo eso, es mucho mejor un par de lineas de jquery genérico (o d3, mootool, javascript, etc) que instalar un framework complejo sólo para realizar un efecto o utilizar una parte...

0
0
Fabián Baeza
Jun 2014

Cada quién puede utilizar lo que le plazca y se sienta más cómodo: frameworks, librerías, muse, lo importante es el resultado: usable, compatible, adaptable y esencialmente eficiente para cubrir los requerimientos del cliente. Lo demás es pura carreta tecnicista.

0
1
Daniel Llach
Jun 2014

bueno responsive es en sí una carreta tecnicista supeditado a una interfaz gráfica... y no creo que sea el centro del problema, reitero creo que el tema es educar a los diseñadores, en especial a los nuevos, sin la temida barrera de diseño / programación ... que desliga responsabilidades y genera brechas comunicacionales a la hora de desarrollar un proyecto (sea web/app) en un grupo de trabajo interdisciplinario ... el diseñador debe liderar la interfaz, pero con la consistencia técnica necesaria para sustentar su visión proyectual.

0
0
Pablo Siciliano
Sep 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
Reply
1
Carlos Enrique Cisneros Medina
Jun 2014

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

1
65
Vero Orso
Jun 2014

Hola Carlos ¡Gracias por tu comentario! Hay que educar al cliente y las opciones las tenemos que ofrecer nosotros, es nuestra obligación como profesionales.

0
0
Alberto Carrera
Jun 2014

Hola, te felicito por que existen temas atemporales y yo no desarrollo páginas web pero tu artículo le agrega visión a mis ideas como diseñador y nunca está demás tomar en cuenta ciertos factores en el momento pleno de generar conceptos visuales... Un saludo y gracias nuevamente... (a veces no valoramos el tiempo invertido de personas como tú para abordar, redactar y brindar una opinión en medios como foroalfa)

1
0
Susana Carbone
Jun 2014

Hola Verónica!!!! Este año comencé a entender y a capacitarme para desarrollar diseño adaptables para los diferentes dispositivos, aunque el diseñador gráfico no desarrolle sitios web, debe comenzar a preocuparse como entregar el material gráfico al programador o diseñador web para facilitarle la tarea y lograr que nuestros diseños se vean perfectos en todos lados.

1
0
Alberto Carrera
Jun 2014

Hola Susana, precisamente a eso me refería, he diseñado interfaces y transmito las necesidades de la misma, pero al tomar en cuenta el diseño adaptable y desde el desarrollo del concepto mismo ahorramos tiempo, y mi interés no es adentrarme a los temas web, por que mi especialidad no es esa y no me cierro a convivir y disfrutar de ella pero aprendí a integrar a amigos diseñadores dependiendo de las necesidades de cada proyecto con sus especialidades, lo interesante es no complicarle la vida a mi prójimo (amigo diseñador) y optimizar procesos. Un saludo y un abrazo desde Puebla, México.

0
0
Susana Carbone
Jun 2014

Estoy totalmente de acuerdo!!! Saludos y gracias por tu comentario desde Bs. As. Argentina

0
65
Vero Orso
Jun 2014

¡Gracias Alberto y Susana! Me alegra que les haya servido. Elartículo resume e introduce en el tema. Si desean pueden ingresar a mi blog allí trato más temas como estos. ¡Saludos!

0
0
Jorge Hernan Vargas
Jun 2014

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

1
Reply

Upcoming online courses

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 weeks
6 Agosto

Branding Corporativo

Branding Corporativo

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

4 weeks
17 Septiembre

Estrategia de Marca

Estrategia de Marca

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

4 weeks
29 Octubre

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

4 weeks
28 Enero 2019

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 weeks
22 Junio 2019