Diseño adaptativo

Pro y contras del Responsive Web Design (Más algunos consejos)

El Responsive Web Design aspira a convertirse en un estándar de la industria por la masificación de dispositivos móviles, como smartphones y tablets, que permiten el acceso a sitios web en cualquier lugar.

En entradas anteriores hemos tratado la revolución que están protagonizando los aparatos móviles, la importancia del Responsive Web Design y contamos un caso de estudio en Revista Capital. El diseño adaptativo, como forma de responder con un mismo sitio web a distintos dispositivos, se ha convertido en la solución más promocionada para resolver el problema de los multidispositivos, lo que asegura estar en todo lugar, con el mismo código HTML y contenido.

¿Qué hace al Responsive Web Design tan recomendado?

A grandes rasgos, su fama se basa en la capacidad de detectar las propiedades del navegador y el dispositivo, reconociendo el tamaño de pantalla, ancho del dispositivo y su orientación. Esto es posible al utilizar las propiedades incluidas por CSS3, que literalmente “leen” la información del dispositivo y las aplicaciones que utiliza el usuario para conectarse a internet en su móvil, tablet, computador de escritorio o incluso un televisor.

One Web significa hacer disponible, en la medida de lo razonable, la misma información y servicios a los usuarios, independiente del dispositivo que estén usando. Sin embargo, esto no significa que la misma información está disponible con la misma representación en todos los dispositivos

La posibilidad abierta con estas nuevas tecnologías de desarrollo está a la par con la recomendación que realiza la W3C respecto al concepto One Web donde una misma web y contenido es presentada al usuario, adaptando la experiencia dependiendo el dispositivo y navegador utilizado.

Aquí es donde reside el desafío mayor del Diseño Responsive: se hace esencial optimizar la experiencia del usuario para cada dispositivo. Es lógico pensar que la interacción que logra una persona con su teléfono, tablet o computador es distinta y complementaria, ya sea relacionada con el consumo del contenido (lectura, navegación) o con el entorno (constante movimiento, luminosidad, tiempo para consumo).  Por ejemplo, el uso del dedo en las pantallas táctiles hace más cercana la interacción -todo se puede tocar-, pero genera un problema de precisión que el mouse y teclado simplifica. Para superar esta diferencia se adaptan conceptos del diseño ergonómico a los sitios web responsive, para así optimizar la experiencia de usuario en móviles.

¿Cuáles son sus ventajas?

El Responsive Web Design se promociona como la solución que resuelve todos los problemas respecto a la proliferación de dispositivos con acceso a internet. Como práctica nueva -al igual que los dispositivos a la cual va dirigida- aún está en desarrollo. Sin embargo, ya ha demostrado poseer ventajas comparativas respecto a otras opciones de diseño y desarrollo de sitios web.

• Ofrece una experiencia consistente entre los dispositivos: el contenido siempre será el mismo, solo cambia la experiencia que se tendrá al acceder a él.
• Optimización SEO: Elimina el contenido duplicado, unifica la estrategia de linkbuilding y la administración de Google Analytics.
• No requiere ningún tipo de redirección: es un solo código HTML y una sola URL siempre.
• Economiza la mantención: ahorra horas-hombre porque se trabaja en un sitio y diseño.
• Implementación rápida: Se libera un solo sitio, lo que implica una instalación única y simplificada.
• Simplifica el contenido: Obliga a identificar el contenido prioritario y accesorio, a través de la Arquitectura de la Información, para así optimizar la experiencia de usuario en dispositivos móviles..

¿Y sus dificultades?

Siempre habrá dificultades. El responsive Web Design implica diseñar una web única que se adapte a cada pantalla y dispositivo. Por esto, cada dificultad encontrada en el desarrollo debe resolverse en la estrategia digital planteada en el comienzo del proyecto. En esta etapa se podrá decidir cómo lidiar con los desafíos inherentes al diseño responsive.

• El Responsive Web Design es la adaptación de una web única (un solo código HTML) a distintos dispositivos, a través de la tecnología CSS3 y el uso de Media Queries. Por esto, puede solucionar el problema de la segmentación de públicos con la correcta manipulación del código del sitio.
• La carga de imágenes también es un hecho que debe resolverse. Aquí también es posible manipular la carga de imágenes con menos pixeles y resolución en dispositivos con menos capacidad.
• El Diseño Responsive requiere un tiempo de diseño y desarrollo más extenso, adaptado a cada experiencia que se quiere crear. Por esto en la estrategia digital formulada deben transparentarse los tiempos de producción y dejar presente que estos son compensados por el ahorro en la mantención del sitio.

Como vemos, las dificultades del Responsive Web Design son más bien circunstanciales y pueden ser resueltas de manera creativa, aprovechando el desarrollo de nuevas tecnologías asociadas a la web y los dispositivos que la soportan.

Entonces, ¿recomendamos el Responsive Web Design?

Sí, sobre todo cuando desarrollamos desde cero. Cada día el diseño adaptativo se convierte en el estándar de la industria, es recomendado por organizaciones internacionales prestigiosas y presenta ventajas comparativas evidentes al lanzar un sitio web. Además, los navegadores (de escritorio y móviles) más usados ya incluyen las tecnologías que permiten su visualización sin errores. Claro, ahora puede ser más costoso  y toma más tiempo en su desarrollo, pero es un monto que se compensa en la mantención más económica y los valores deben tender a normalizarse.

La decisión se vuelve más compleja al hablar de un rediseño. Aquí entra a pesar el tiempo de implementación, junto al costo de rehacer todo desde cero. La solución que encontramos en El Quinto Poder fue desarrollar una versión responsive para móviles y tablets, dejando el sitio de escritorio sin modificaciones en esta etapa. Para efectos prácticos, el cambio se realiza a nivel de plantillas en WordPress, ahorrando la duplicación de contenidos y URL que perjudica al SEO del sitio.

[destacado]

Consejos para el desarrollo de tu web responsive:

• Realiza alineamientos estructurales con grillas dinámicas, estas ayudan al desarrollo ágil y ahorran tiempo al manipular tamaños y posiciones del contenido.
• Piensa en los elementos de navegación de la forma más intuitiva, directa y fácil de entender. En sitios con menús extensos estos se convierten en una lista al trasladarse a otros tamaños de pantalla, lo que facilita el uso de la interfaz nativa de cada OS.
• Planifica, diseña y produce siempre con el sitio móvil al comienzo (Mobile First). El usuario más complejo es el de smartphone, por sus modos de uso y el entorno donde consumen el contenido.
• Concéntrate en el contenido, así podrás sacar todo lo que no es esencial a él y a los objetivos que buscas con tu sitio web.

Recursos: