En la actualidad podemos ver como las tablets y los teléfonos inteligentes se convierten en nuestra opción por defecto para la conexión a internet. La gente ha utilizado durante mucho tiempo a la web como una parte esencial de sus vidas, y no están dispuestos a vivir un día más sin estar conectados constantemente.

Este alejamiento del escritorio para el móvil requiere diseñadores web para rediseñar. No necesariamente estos tienen que estar lejos del diseño de escritorio, pero sin duda hacia el diseño móvil. Hay varias maneras de acercarse a una presencia web móvil, como un sitio móvil, o una aplicación móvil. El enfoque más 1popular es el responsive web design. El diseño responsive resuelve un problema muy grande para los diseñadores web.

En este artículo me gustaría hablar de las oportunidades y desafíos que vienen con el diseño responsive. Una forma de pensar para ayudar a tomar una decisión correcta  tu próximo proyecto.

Oportunidades que presenta el diseño responsive.

Este tipo de de diseño trata de mantener las cosas simples. La idea es crear un sitio web para adaptarse a todos los tamaños de pantalla, literalmente, ya sea una pantalla de escritorio o portátil, tablet o teléfono inteligente en modo horizontal o vertical. Lo sitios web eesponsive están diseñados con una rejilla flexible.

Entonces, cuáles serían las ventajas:

1. Bajo mantenimiento

Sólo es necesario mantener un sitio web. Solo los cambios de diseño porque el contenido sigue siendo el mismo a través de diferentes dispositivos. Se puede actualizar de forma simultánea o corregir los errores para todos los dispositivos.

w704

Por ejemplo, para los sitios de noticias como breakingnews.com esto es de gran ventaja. Los sitios con contenidos que cambian rápidamente y actualizaciones frecuentes requieren un mantenimiento muy alto. Un diseño responsive no sólo ahorra tiempo, sino también dinero.

Puedes centrarte en un solo sitio web y poner todos tus recursos en la optimización y el mantenimiento de ese sitio. No hay más necesidad de priorizar o manejar diferentes versiones por separado.

2. Coherencia de la marca

Con un sitio web que funciona tanto en ordenadores como pantallas móviles, te resultará mucho más fácil mantener una identidad de marca coherente. No hay guías de estilo que deban ser comunicadas entre varias partes, como los diferentes grupos de diseño de escritorio y los de versiones móviles.

w704 2

 

La apariencia de un sitio web responsive será consistente en todos los tamaños de pantalla. Por ejemplo spigotdesign.com mantiene una experiencia de marca única en todos los dispositivos. Esto hace que las personas reconozcan las marca, sin importar desde dónde y cómo se visita.

3. Usabilidad

Es muy fácil de usar. No sólo pueden relacionarse mejor con tus visitantesa con la marca si reconocen el sitio web en el móvil, sino que también sabrán cómo usarlo. Un estilo consistente y coherente de contenido es importante porque los usuarios no esperan que sea diferente simplemente porque utilizan un dispositivo diferente.

w704 3

 

Un aspecto importante de la buena usabilidad es satisfacer las expectativas de los usuarios. Si logras hacer eso, ellos tendrán menos dificultades para navegar por tu sitio web. smashingmagazine.com hace que sea muy fácil para sus lectores navegar por el sitio en todos los dispositivos, mantener una experiencia de usuario positiva. Una buena experiencia aumenta la posibilidad de una nueva visita.

4. Sin redirecciones.

El hecho de tener un sitio web para todos los dispositivos también significa que tienes las mismas direcciones URL de la página para entregar el contenido a todos los usuarios. No necesitas preocuparte por las redirecciones o incompatibilidades entre diferentes dispositivos.

Cuando promocionas un enlace, puedes estar seguro que la gente accede a ella directamente, sin importar dónde se encuentren o la forma en que visite el sitio.

Por ejemplo, cuando envías newsletters, hay muchas posibilidades de que un gran número de lectores  abrirá su correo electrónico en un dispositivo móvil.

Cualquier contenido que desees promover también deberá estar disponible en todos los dispositivos.

5. Tiempo de carga

Aquellos visitantes que acceden al sitio web con un wifi estable o una conexión de cable tendrán problemas para la descarga de grandes cantidades de datos, tales como animaciones especiales o grandes imágenes. Los usuarios móviles, por otra parte, que utilizan conexiones 3G o 4G, estarán agradecidos por la menor cantidad de datos como sea posible.

w704 4

Una vez más, los sitios de noticias, como el bostonglobe.com se utilizan a menudo en el camino, durante un viaje diario al trabajo, por ejemplo. El diseño responsive les permite seleccionar un contenido muy específico para cada dispositivo.

Retos que plantea el diseño de sitios web responsive.

Algunas personas dicen que este tipo de diseño es sólo una tendencia, otros dicen que es una nueva forma de pensar. En lo personal, creo que el marco de la web que cambia rápida y constantemente, todo puede ser considerado una tendencia en algún sentido. No voy a profundizar demasiado en este tema. Más bien, vamos a echar un vistazo a los retos que tenemos que superar para construir sitios web responsive con éxito.

1. Tiempo de Desarrollo

Probablemente el punto negativo más obvio sobre la construcción de un sitio web responsive es que se necesita más tiempo. Obviamente, para un sitio de escritorio normal se necesita mucho menos tiempo de preparación, menos recursos para su construcción, así como las pruebas que requieren menos esfuerzo.

Por lo general toma más tiempo para convertir un sitio web existente en uno responsive que construir uno desde cero. Si estás pensando en ir hacia el móvil, y  hacer que tu sitio web se responsive adaptable, no hay que subestimar el trabajo que también tendrás en la versión de escritorio existente.

2. Diferentes dispositivos siguen siendo diferentes

La idea de que sólo tienes que construir un sitio web que funciona igual de bien en cualquier dispositivo es un mito. Claro, no es sólo un conjunto de código y tu sitio web sigue siendo el mismo en cuanto al contenido y estructura, pero diferentes dispositivos requieren una forma diferente de pensar. La gente navega en el sitio web de acuerdo a sus necesidades y objetivos muy específicos.

w704 5

 

Los diseñadores de choiceresponse.com han priorizado claramente el contenido para su uso móvil. Mientras que la versión de escritorio puede mostrar una gran cantidad de contenido a la vez, en pantallas más pequeñas se muestra exactamente lo que importa.

Imagina, que eres responsable de un sitio web de medios de transporte públicos. Un usuario podría visitar la versión de escritorio, navegar pacientemente, con la esperanza de encontrar una oferta especial para su viaje de fin de semana. Al mismo tiempo, otra persona podría estar revisando la versión móvil, con la esperanza de averiguar a qué plataforma debe ir antes que su tren salga en menos de un minuto.

Un sitio web, dos situaciones, y dos escenarios de usuarios completamente diferentes. Con el fin de crear una gran experiencia para todos los usuarios, debes tener en cuenta que las personas usan diferentes dispositivos en diferentes circunstancias y con diferentes objetivos.

3. Diferentes dispositivos ofrecen diferentes interacciones.

La versión de escritorio no sólo difiere de la versión móvil, de una manera hipotética sino también de una manera muy práctica. La interacción que funciona bien en un dispositivo puede ser irrelevante en otro. Esto es principalmente debido a la forma en que interactúan con el escritorio y los dispositivos móviles son diferentes.

Mientras que utilizamos atajos de teclado y un puntero de ratón muy definido para navegar a través de una página web en un dispositivo, no tenemos nada más que nuestros dedos en el otro.

w704 6

Mientras que la versión de escritorio de forefathersgroup.com incluye varios enlaces con efectos. El diseñador utiliza estos efectos solamente para el contenido de escritorio y no así en la versión móvil. Una vez más la priorización de contenido es muy importante en el diseño responsivo.

4. Soporte limitado de media queries

El sitio web responsive trabaja con media queries para determinar el tamaño de la pantalla de cada visitante y luego mostrar la disposición correcta.

El problema aquí es que los navegadores antiguos, especialmente Internet Explorer versión 8 o más, no reconocen las media queries.

Esto no quiere decir que no hay manera de exhibir tu sitio web en los navegadores antiguos. Sólo tienes que ser consciente de esto cuando se trabaja con media queries. Hay varias maneras de evitar el problema, como el uso de una hoja de estilo completamente separada para IE, o el diseño de tu sitio web para móviles en primer lugar.

5. La redimensión de imágenes pierden detalles

Otra limitación de diseño del diseño responseive es el escalado de imágenes. Las imágenes a escala pierden rápidamente los detalles y por lo tanto su significado. Básicamente, la verdadera limitación aquí no es la escala en sí, sino el hecho de que la escala sucede estrictamente basada en el tamaño de la pantalla y no en el contexto.

6. Los menús de navegación.

Por último, pero no menos importante, los menús de navegación constituyen una parte importante de cualquier sitio web. Especialmente en los sitios web de escritorio más complejos que estamos acostumbrados, con submenúes desplegables de múltiples capas. En los dispositivos más pequeños siempre te encontrarás un espacio limitado de la pantalla, lo que hace que el diseño de los menús de navegación intuitivos sean un reto.

w704 8

Los diseñadores de starbucks.com han decidido ocultar el menú de navegación en pantallas que no sean de escritorio. En los dispositivos móviles se muestra un pequeño ícono en la esquina superior izquierda.

En cualquier dispositivo, la regla de oro es lograr un equilibrio entre facilitar el acceso a la información y un diseño discreto.

Tips para considerar

La preparación es clave

El diseño web responsive comienza mucho antes de tu primera maqueta de Photoshop. También mucho antes de tu primera estructura. Una buena preparación es la clave para el éxito del diseño.

Partiendo que tu sitio web puede variar en diferentes dispositivos, es necesario tener una idea clara en mente de cómo deseas estructurar su contenido para cada uno de estos dispositivos. Cuanto menor sea el dispositivo más opciones se tienen que tener en cuenta con respecto a la prioridad de su contenido.

Empezar desde el principio

Si ya tienes un diseño de escritorio existente y estás pensando en una presencia móvil por primera vez, debes pensar en esto con cuidado.

Puedes reciclar el diseño de tu sitio de escritorio antiguo, pero modificar el código puede llevar más tiempo que empezar de nuevo desde cero.

No reinventar la rueda

No tratar de reinventar la rueda mediante la creación de un nuevo enfoque. Aprender de los errores de otros acelerará el tiempo de desarrollo considerablemente.

Prueba, prueba y prueba de nuevo

Esto no es nuevo, y no debería ser una sorpresa. las pruebas repetitivas son esenciales para cualquier diseño exitoso, responsive o no.

El diferente comportamiento y el desafío del diseño táctil y pantallas regulares al mismo tiempo, requerirán pruebas excesivas. Comenzarás a probar en todos los dispositivos de tu propiedad. Si todo funciona, pide prestados dispositivos de amigos y familiares y prueba allí.

Lo más leído de nuestro Blog