Las oportunidades y desafíos del diseño receptivo
En agosto de 2011, el 7,12% de todas las visitas a sitios web en todo el mundo procedían de un dispositivo móvil portátil. Para agosto de 2012, esa cifra había aumentado al 11,78%.
Literalmente, podemos ver cómo las tabletas y los teléfonos inteligentes se convierten en nuestra opción predeterminada para conectarnos a Internet. Las personas se han acostumbrado durante mucho tiempo a la web como parte esencial de sus vidas, no están dispuestas a vivir otro día, ni siquiera otro momento sin estar constantemente conectadas.
Este cambio del escritorio al móvil requiere que los diseñadores web se reorienten. No necesariamente lejos del diseño de escritorio, pero ciertamente hacia el diseño móvil. Hay varias formas de abordar una presencia web móvil, como un sitio móvil independiente o una aplicación móvil. El enfoque más reciente y cada vez más popular es el diseño web receptivo.
El diseño receptivo resuelve un problema tan grande para los diseñadores web que es fácil perder de vista el hecho de que presenta sus propios problemas.
En este artículo, me gustaría discutir tanto las oportunidades como los desafíos que conlleva el diseño receptivo. Arrojaré algo de luz sobre esta nueva forma de pensar y lo ayudaré a tomar una decisión informada para su próximo proyecto.
Oportunidades que presenta el diseño web receptivo
El diseño web receptivo se trata de mantenerlo simple. La idea es crear un sitio web que se ajuste literalmente a todos los tamaños de pantalla, ya sea una pantalla de computadora de escritorio o portátil, tableta o teléfono inteligente en modo horizontal o vertical. Los sitios web receptivos están diseñados con una cuadrícula flexible. Utilizan consultas de medios para determinar el tamaño de la pantalla para cada visita individual al sitio y cambiar la escala del contenido en consecuencia.
Echemos un vistazo a las ventajas que conlleva un enfoque de diseño receptivo.
1. Bajo mantenimiento
Con un diseño receptivo, solo necesita mantener un sitio web. Si bien el diseño cambia, el contenido permanece igual en diferentes dispositivos. Puede actualizar el contenido o corregir errores simultáneamente para todos los dispositivos.
Por ejemplo, para sitios de noticias como breakingnews.com esto es una gran ventaja. El contenido que cambia rápidamente y las actualizaciones frecuentes requieren un mantenimiento muy alto. Un diseño receptivo no solo ahorra tiempo, sino también dinero.
Puede concentrarse en un solo sitio web y poner todos sus recursos en la optimización y el mantenimiento de ese sitio. Ya no es necesario priorizar o manejar diferentes versiones de su sitio por separado.
2. Consistencia de la marca
Con un sitio web que funciona tanto en pantallas de escritorio como móviles, le resultará mucho más fácil mantener una identidad de marca coherente. No más guías de estilo que deban comunicarse entre múltiples partes, como diferentes agencias para las versiones de escritorio y móviles de su sitio.
La apariencia de un sitio web receptivo será consistente en todos los tamaños de pantalla. spigotdesign.com mantiene una experiencia de marca única en todos los dispositivos. Esto hace que sea muy fácil para las personas reconocer el sitio web, sin importar dónde y cómo lo visiten.
3. Usabilidad
El diseño web receptivo es muy fácil de usar. Sus visitantes no solo pueden relacionarse mejor con su marca si reconocen su sitio web en el móvil, sino que también saben mejor cómo usarlo. Un estilo coherente y un contenido coherente son importantes porque los usuarios no esperan que sea diferente solo porque usan un dispositivo diferente.
Un aspecto importante de una buena usabilidad es cumplir con las expectativas de su usuario. Si logra hacer eso, tendrán menos problemas para navegar por su sitio web. smashingmagazine.com hace que sea muy fácil para sus lectores navegar por el sitio en todos los dispositivos, manteniendo una experiencia de usuario positiva. Una buena experiencia aumenta las posibilidades de repetir la visita.
4. Sin redireccionamientos
El hecho de que solo tenga un sitio web para todos los dispositivos también significa que tiene las mismas URL de página para entregar contenido a todos sus usuarios. No necesita preocuparse por redireccionamientos o incompatibilidades entre diferentes dispositivos.
Al promocionar un enlace, puede estar seguro de que las personas pueden acceder a él directamente, sin importar dónde se encuentren o cómo visiten su sitio.
Por ejemplo, al enviar boletines informativos, es muy probable que sus lectores abran su correo electrónico en un dispositivo móvil. No desea que tengan que cambiar a una computadora de escritorio o portátil antes de que puedan abrir sus enlaces.
Cualquier contenido que promocione también debe estar disponible, ya sea en dispositivos móviles o no.
5. Tiempo de carga
Aquellos visitantes que accedan a su sitio web con una conexión wifi o por cable estable tendrán pocos problemas para descargar cantidades relativamente grandes de datos, como animaciones especiales o imágenes grandes. Los usuarios móviles, por otro lado, que utilizan conexiones 3G o 4G, estarán agradecidos por la menor cantidad de datos posible.
Una vez más, los sitios de noticias, como el bostonglobe.com se utilizan a menudo sobre la marcha, durante un viaje diario, por ejemplo. El diseño receptivo les permite seleccionar contenido muy específico para cada dispositivo o precomprimir imágenes.
Desafíos presentados por el diseño web receptivo
El diseño web receptivo es un enfoque relativamente nuevo para el diseño web móvil. Algunos dicen que es solo una tendencia, otros dicen que es una nueva forma de pensar. Personalmente, creo que en el marco de la web en constante cambio y rápida evolución, todo puede considerarse una tendencia en algún sentido. No profundicemos demasiado en esto. Más bien, echemos un vistazo a los desafíos que debemos superar para crear sitios web receptivos exitosos.
1. Tiempo de desarrollo
Probablemente el punto negativo más obvio sobre la construcción de un sitio web receptivo es que lleva más tiempo. Obviamente, para un sitio de escritorio normal, necesita menos tiempo de preparación, menos recursos para construirlo y, además, probarlo requiere menos esfuerzo.
Por lo general, lleva más tiempo convertir un sitio web existente en uno receptivo que construir uno desde cero. Si está pensando en convertirse en un dispositivo móvil y hacerlo haciendo que su sitio web sea receptivo, no subestime el trabajo que también tendrá que realizar en su versión de escritorio existente.
2. Los diferentes dispositivos siguen siendo diferentes
La idea de que puede simplemente crear un sitio web que funcione igualmente bien en cualquier dispositivo es un mito. Claro, solo hay un conjunto de código y su sitio web sigue siendo el mismo con respecto al contenido y la estructura, pero los diferentes dispositivos requieren una forma diferente de pensar.
Las personas navegarán por su sitio web de acuerdo con sus necesidades y objetivos muy específicos, sin mencionar su contexto único de uso.
Diseñadores de choiceresponse.com han priorizado claramente su contenido para uso móvil. Si bien la versión de escritorio puede mostrar una gran cantidad de contenido a la vez, para pantallas más pequeñas, debe saber exactamente qué es lo que importa.
Imagínese, usted es responsable de un sitio web de transporte público. Un usuario puede visitar la versión de escritorio, navegando pacientemente, esperando encontrar una ganga especial para su viaje de fin de semana. Al mismo tiempo, alguien más podría estar revisando la versión móvil, con la esperanza de saber a qué plataforma debería correr antes de que su tren salga en menos de un minuto.
Un sitio web, dos situaciones y dos escenarios de usuario completamente diferentes. Para crear una gran experiencia de usuario para todos sus usuarios, debe tener en cuenta que las personas usarán diferentes dispositivos en diferentes circunstancias y con diferentes objetivos.
3. Los diferentes dispositivos ofrecen diferentes interacciones
Tu versión de escritorio no solo se diferencia 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 se debe principalmente a que la forma en que interactuamos con los dispositivos móviles y de escritorio es diferente.
Si bien usamos atajos de teclado y un puntero de mouse muy definido para navegar a través de un sitio web en un dispositivo, no tenemos nada más que nuestros dedos en el otro.
Mientras que la versión de escritorio de forefathersgroup.com incluye varios enlaces con un efecto de desplazamiento, el diseñador usó estos efectos solo para el contenido que no llegó a la versión móvil. Una vez más, la priorización del contenido es muy importante en el diseño receptivo.
4. Soporte limitado de consultas de medios
Los sitios web receptivos trabajan con consultas de medios para determinar el tamaño de pantalla de cada visitante y luego mostrar el diseño correcto.
El problema aquí es que los navegadores antiguos, especialmente Internet Explorer versión 8 y anteriores, no reconocen las consultas de medios. Actualmente, alrededor del 14% de los usuarios web en todo el mundo todavía usan IE8. El 14% es una parte sustancial de su audiencia y, dependiendo de su grupo demográfico objetivo, la cifra podría ser mayor.
Esto no significa que no haya forma de mostrar su sitio web en estos navegadores más antiguos. Solo debe tener esto en cuenta cuando trabaje con consultas de medios. Hay varias formas de evitar el problema, como usar una hoja de estilo completamente separada para IE o diseñar su sitio web para dispositivos móviles.
Adoptar un enfoque centrado en los dispositivos móviles significa que solo los estilos que deberían aplicarse a versiones más amplias del diseño están dentro de una consulta de medios, no los de la versión móvil. De esta forma, los navegadores que no admitan consultas de medios solo verán la versión móvil.
5. Las imágenes escalables pierden detalles
Otra limitación del diseño receptivo es la escala de imágenes. Las imágenes escaladas rápidamente pierden 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 ocurre estrictamente en función del tamaño de la pantalla y no del contexto.
En oliverrussell.com este problema se resuelve muy bien. Las imágenes se reorganizan para que puedan extenderse por toda la pantalla si es necesario. Esto crea suficiente espacio para evitar que la mayoría de las imágenes se vuelvan a escalar.
Una alternativa a escalar imágenes podría ser recortarlas. Aún así, su significado y la experiencia que viene con él finalmente se verán alterados.
6. 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 sitios web de escritorio más complejos, estamos acostumbrados a menús desplegables de varias capas. En dispositivos más pequeños, siempre encontrará un espacio de pantalla limitado, lo que hace que diseñar menús de navegación intuitivos sea un desafío.
Los diseñadores de starbucks.com han decidido ocultar el menú de navegación en pantallas pequeñas de forma predeterminada. Solo al presionar un pequeño ícono en la esquina superior izquierda, las diferentes categorías de contenido aparecen como botones fáciles de usar.
En cualquier dispositivo, la regla general es lograr un equilibrio entre el fácil acceso a la información y un diseño discreto. No reinvente la rueda si no es necesario.
Cosas para considerar
En última instancia, depende de usted o no ser receptivo, pero si decide intentarlo, aquí hay un par de cosas que debe considerar antes de comenzar.
La preparación es clave
El diseño web receptivo completo comienza mucho antes de su primera maqueta de Photoshop. También mucho antes de su primera estructura alámbrica. Una buena preparación es la clave para un diseño exitoso. Cuanto mejor esté preparado, más tiempo y dinero ahorrará al final.
Dado que su sitio web variará en diferentes dispositivos, debe tener una idea clara de cómo desea estructurar su contenido para cada uno de estos dispositivos. Cuanto más pequeño sea el dispositivo, más opciones tendrá que tomar con respecto a la prioridad de su contenido.
Empezar desde el principio
Si ya tiene un diseño de escritorio existente y está considerando una presencia móvil por primera vez, piense en esto detenidamente.
Puede reciclar el diseño de su antiguo sitio de escritorio, pero modificar el código puede llevar más tiempo que empezar desde cero.
No reinventes la rueda
Hay muchas herramientas y recursos en línea para ayudarlo a desarrollar un sitio receptivo.
No intente reinventar la rueda creando un nuevo enfoque. Aprender de los errores de los demás acelerará considerablemente el tiempo de desarrollo.
Prueba, prueba y prueba de nuevo
Esto no es nada nuevo y no debería ser una sorpresa. Las pruebas de usuario tempranas y repetitivas son esenciales para cualquier diseño exitoso, receptivo o no.
El comportamiento diferente y el desafío de diseñar para pantallas táctiles y normales al mismo tiempo requerirán algunas pruebas excesivas. Comience a probar en todos los dispositivos que posee. Si todo funciona, pida prestados dispositivos a amigos y familiares y pruébelos. Por último, pero no menos importante, visite una tienda de electricidad y pruebe su sitio en sus dispositivos.
¿Produce diseños receptivos para sus clientes? ¿Ha resuelto estos problemas? Háznoslo saber en los comentarios.
Imagen destacada / miniatura, Internet móvil imagen a través de Shutterstock.
