El Diseño Responsivo es bueno para el SEO

El diseño responsivo mejora la optimización de los motores de búsqueda. Para aquellos quieran construir un sitio web con marca, ventas, este beneficio es una razón suficiente para considerar el uso de un esquema responsivo.

Debido a que el diseño responsivo habita en un solo lugar con una URL, a diferencia de múltiples páginas apuntando a formatos móviles, su enlace se mantiene simple. Las páginas que redireccionan no quitan el sitio principal y campañas publicitarias (como las que usan Google AdWords) todas apuntan a una ubicación.

Tener un único destino con un conjunto de lenguajes, metadatos, y keywords también es importante. No hay preocupación de que las actualizaciones se han hecho en un solo lugar o que los enlaces redirecciones incorrectamente.

Otra ventaja es que para el análisis y recopilación de datos, no es necesario un seguimiento de diferentes URLs además de la página principal o URL. La única página de respuesta puede hacer el análisis sin importar el dispositivo del usuario.

La tipografía debe ser responsiva

El tipo letra no es igual para todos. Helvetica de 14 puntos es se muestra muy bien en escritorio pero puede ser imposible de leer en un dispositivo móvil. La tipografía debe seguir los mismo lineamientos que el resto de tu diseño.

El concepto clave cuando se trata de tipografía responsiva es la longitud de la línea. Para mantener la legibilidad, la tipografía debe optimizarse basándose en el ancho de la pantalla. Para sitio web, 50 a 70 caracteres por línea se considera ideales, en dispositivos móviles se reduce de 35 a 50 por línea.

Considera el hecho de que los bloques de texto tienen que ser fáciles de leer verticalmente. El espacio entre líneas puede afectar el tiempo que un usuario puede leer sin cansarse. Muchos sitios web utilizan un espacio de una línea que es de 140 por ciento del tamaño. Para las pantallas más pequeñas considere agregar espacio adicional para facilitar la lectura.

Por último, pensar en el tipo de letra a utilizar. Tipografías novedosas, letras exageradas y formularios con serifs extravagantes pueden lucir bellas en pantallas grandes pero son difíciles de leer en tamaños pequeños. En tamaños pequeños las tipografías más fáciles de leer tienden a ser estilos sans serif.

Los Media Queries no tienen que intimidar

Para algunos, la parte más intimidante del diseño responsivo son los media queries. No hay que sentirse atemorizado por los media queries.

Los media queries pueden ayudar a determinar las capacidades de los diferentes dispositivos y brindar diferentes estilos a través de CSS. Los media queries amplían el rol de los atributos y permite que los diseñadores usen el mismo HTML para soportar múltiples formatos basados en la información recopilada acerca de los ajustes de la pantalla del usuario. Puedes aplicar los estilos después de determinar el tamaño correcto de la pantalla o cualquiera de la gran variedad existente.

Al trabajar con media queries y breakpoints definidos, considera construir objetivos basados en límites específicos de píxeles de ancho. Los más comunes son 320, 480, 600, 768, 900 y 1200 píxeles.

Otra ventaja del uso de media queries (por lo general con base en porcentajes para realizar los ajustes de tamaños) es crear un nivel adicional de flexibilidad, haciéndolos más fáciles de usar en una variedad de tamaños y dispositivos.

La clave es la Navegación

La era del dropdown (menú desplegable) puede haber terminado. La navegación es una característica clave pero de muchos sitios web responsivos.

Los menús desplegables no funcionan muy bien con touch. La navegación debe funcionar para los usuarios que hagan clic o tap. Los elementos de la navegación grandes son cada vez más populares. Una vez más, los dispositivos touch (táctiles) están impulsando esta tendencia debido a un tamaño de 44×44 píxeles, el cual es más cómodo para los usuarios al tocar elementos de la interfaz de usuarios de los dispositivos móviles.

Cuando se diseña y piensa acerca de la navegación, esto ayuda para pensar primero en los tamaños más pequeños. Diseña los elementos de navegación más pequeños y posteriormente los tamaños más grandes, recordando que los elementos de navegación adicionales se pueden agregar para tamaños más grandes.

El estilo de navegación Hidden también está ganando popularidad. Se abre un menú completo haciendo clic o tap en un icono que generalmente se encuentra en la parte superior de la pantalla. Esta opción puede ser ideal para menús de navegación más expansivos. Para ver un ejemplo, ve el artículo de Chris Coyier´s titulado Convert a Menu to a Dropdown for Small Screens.

La clave es mantener un diseño simple y fácil de entender a cualquier tamaño. Los usuarios deben ser capaces de comprender rápidamente cómo se utiliza un sitio para que esté sea eficaz.

El Diseño Responsivo va a evolucionar

El diseño responsivo, tal como existe ahora no es una solución perfecta, es sólo parte de un proceso evolutivo. Como la tecnología y los hábitos de los usuarios cambian y los nuevos dispositivos lleguen al mercado, las prácticas de cómo se desarrolla y utiliza la web, se ajustarán.

Los usuarios de Internet ya están utilizando una variedad de dispositivos para ver la mayoría de los sitios web. En este momento hay demasiados dispositivos y demasiadas opciones para crear un sitio que sea perfecto para cada uno. No tener en cuenta el tamaño del navegador, ocho de los dispositivos más populares tienen seis diferentes anchos horizontales:

• iPhone 4S y el iPhone 5 – 640 píxeles

• Primera y Segunda generación iPad – 1024 píxeles

• iPad3 – 2048 píxeles

• Samsung Galaxy Note – 1280 píxeles

• Microsoft Surface-1366 píxeles

• Píxeles de Google Nexus 7-2560

Cuando hagas tu sitio responsivo, será aún más intuitivo y proporcionará una experiencia coherente independientemente del dispositivo, incluso cuando se lancen nuevos dispositivos.

Los diferentes dispositivos todavía pueden proporcionar experiencias muy diferentes, incluso sin diseño (por ejemplo: clicking vs tapping o zooming vs scaling). Incluso la cantidad de tiempo dedicado a un sitios o la razón para visitarlo puede diferir dependiendo de qué tipo de dispositivo tiene el usuario. Considera cómo los usuarios realmente utilizarán un sitio web en diferentes dispositivos. Aunque todavía no es una solución perfecta, el diseño responsivo permite que te muevas en esa dirección.

A pesar de las limitaciones actuales en el diseño responsivo, es importante comenzar ahora. Los datos indican que el número de usuarios que acceden a la web en algo más que una computadora de escritorio seguirá creciendo. Mediante la implementación de un diseño responsivo, puedes colocar tu sitio para ser utilizable en cualquier entorno.

A dónde ir desde aquí

Ahora es tiempo de juntarlo todo y construir un sitio web responsivo.

revisa la Guia de Diseño Web Responsivo para Principiantes del blog de Treehouse, para obtener un mejor entendimiento del porque el diseño responsivo es importante y como continuara la influencia del diseño web en general.

revisa el artículo de Ethan Marcotte en A List Apart.

Si aún necesitar convencerte acerca de que el diseño responsivo es la forma de ir, revisa Como Diseñar un Sitio Web Móvil Responsivo, desde UX Booth y Comenzando con el Diseño Web Responsivo desde el Adobe Inspire Magazine.

Guías de Diseño de IU para Diseños Responsivos por Codrops, es una excelente agrupación de factores para considerar múltiples dispositivos cuando se trabaja en un framework de diseño responsivo.

En Activ puedes aprender las bases de HTML para diseñar tus sitios web con nuestro curso de HTML5

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.