Este año ha sido muy significativo para el diseño responsive, al anunciarse en abril la nueva actualización del motor de búsqueda Google, en la cual le darían prioridad a los sitios que pueden ser visualizados sin problemas en diferentes dispositivos. Por supuesto, Google no mencionó ningún tipo de preferencia al respecto, lo único que importa es que los sitios estén aptos para dispositivos móviles. Ante este anuncio por parte de Google, la solución de muchos webmasters fue utilizar el diseño responsive. Por esta razón, es esencial que, como diseñador, sepas cómo hacer un diseño responsive. Es probable que muchos clientes te lo pidan de ahora en adelante.
En este artículo te mencionamos algunas pautas para poder diseñar teniendo en cuenta los diferentes dispositivos y lograr un gran diseño responsive.
Dividir el sitio en secciones de contenido flexibles
Cuando se trabaja con diseño responsive la layout se debe ver como un grupo de secciones, cada sección tiene contenido específico. El contenido no sólo debe ser texto, pueden ser imágenes, barras laterales, banners, etc. Obviamente, estas secciones se ven afectadas cuando la página se ve en diferentes dispositivos.
El cambio fluido en cada una de estas secciones es esencial para el diseño responsive y deben tomarse en cuenta desde el primer momento que realizas un boceto o wireframe. Las columnas en las que divides tu contenido también te ayudan mejorar tu diseño. Mientras más pequeña sea la pantalla del dispositivo, menos columnas se emplean. Esto implica no sólo que algunos elementos cambian de tamaño, sino que algunos elementos como barras laterales o banners desaparecen cuando hay cierto tamaño de pantalla. Por supuesto, todo esto depende de tu criterio.
La clave para lograr la fluidez en tu diseño es planificarlo con anticipación. Es por ello que desde la fase inicial, debes ir pensando en los diferentes tamaños de dispositivos y cómo el contenido se adaptará en ese pantalla. De hecho, actualmente, hay una técnica llamada Mobile First que consiste en definir primero el diseño para dispositivos móviles, empezando por los teléfonos inteligentes cuya pantalla es más pequeña.
Tener como objetivo una navegación fluida
La navegación es realmente esencial en un sitio web pues es la única manera en la que el usuario puede moverse por todo el sitio. En estos casos, es obvio que en una pantalla más pequeña, los iconos y el texto de la navegación sea más pequeño, sin embargo, si es demasiado pequeños podría ser no apto para pantallas táctiles. Es importante comprender que estos enlaces deben ser de un tamaño adecuado para ser legibles, pero también para que el usuario pueda seleccionar con su dedo cada uno de los elementos del menú.
La solución más popular para hacer el menú de navegación más pequeño es el menú hamburguesa, donde el menú se mantiene minimizado en un icono, pero está a la vista y se mantiene al alcance del usuario.
Dar soluciones para un diseño coherente en los diferentes dispositivos
Cuando alguien navega por tu sitio web, es probable que lo haga desde un solo dispositivo. Es decir, si se encuentra navegando en tu sitio utilizando una tableta, es probable que siga en la tableta hasta que termine de navegar tu sitio. Es realmente poco probable que decida utilizar su ordenador para terminar de navegar en tu sitio en esa oportunidad específica. Sin embargo, puede que en otra ocasión acceda desde otro dispositivo y en ese caso el diseño debería ser familiar para el usuario.
Diseñar con coherencia ayuda a fortalecer tu marca por eso debes escoger sabiamente qué elementos minimizas y qué elementos eliminas o escondes en dispositivos más pequeños. De esta manera, en la segunda visita el usuario sabrá que efectivamente está en el mismo sitio web.
Los puntos principales a tener en mente es mantener la misma paleta de colores, tipografía y alineación general de ciertos elementos. Por ejemplo, si tu pantalla de inicio muestra el menú en la parte superior, una gran fotografía que ocupa todo el ancho de la pantalla y un texto en el centro, entonces en otros dispositivos se debería mantener esta misma disposición de los elementos.
Tener en cuenta la usabilidad y funcionamiento de los formularios
Los formularios no son un elemento que se encuentre en todos los sitios web, pero se encuentran en un gran porcentaje de ello. El formulario más común que se puede ver en los sitios web es aquel que sirve para enviar correos electrónicos. Si en el diseño de tu sitio has contemplado la creación de un formulario de contacto o cualquier otro tipo de formulario, debes tener en cuenta cómo lucirá en otros dispositivos. En este caso es importante que el campo se vea en la pantalla sin ocupar un mayor espacio horizontal que el límite de la pantalla. Pero también es importante que este campo sea apto para que los usuarios puedan interactuar con éste de manera táctil. Asimismo, el tamaño de fuente debe ser legible.
La apuesta más segura, como siempre, es probar tu formulario, verificar tanto la usabilidad como su funcionamiento. Por supuesto, te recomendamos probar todo el sitio en las diferentes fases del proceso. Pero ahora ya sabes que es importante tener ciertos puntos en mente en la fase inicial, cuando se están desarrollando los primeros bocetos.
