Diseñar un sitio web con un diseño web adaptativo

Julio 2017


En la era de la movilidad, el diseño de sitios web llamados adaptativos se abre paso desde hace unos años en las tecnologías a la disposición de los desarrolladores y de los diseñadores web.

El objetivo de un diseño web adaptativo es facilitar la adaptación de las ergonomías de los sitios web a los diferentes tamaños de pantalla, para una navegación web optimizada en diferentes dispositivos: laptops, smartphones y tabletas táctiles. Adaptar sus sitios web al tamaño de las pantallas de los dispositivos móviles es imprescindible para los pure players (empresas o asociaciones que trabajan e invierten sus recursos exclusivamente en internet), y más particularmente las tiendas online, que deberán adaptarse a la evolución de los comportamientos y a los hábitos de la navegación en los dispositivos móviles.

La agencia Nealite, que concibe servicios e interfaces dirigidos a los usuarios de la web, la televisión y el móvil, recientemente realizó la revisión de su sitio Web, escogiendo un desarrollo de su sitio web con un diseño web adaptativo.

Greg Wolf, director general adjunto de Nealite, nos cuenta su experiencia sobre la utilización de esta tecnología y nos da algunos consejos derivados de su experiencia.



CCM - ¿Nos podría presentar Nealite?

Greg Wolf - Nealite es una agencia parisina de diseño creada en 2005. Diseñamos sitios web y aplicaciones móviles. Nos especializamos en el diseño enfocado en la experiencia del usuario.

Intervenimos en diferentes aspectos: análisis del mercado y entrevistas a usuarios y diseño de interfaces. Para la parte de la realización técnica, nos asesoramos con consultores web.



CCM - Recientemente procedió a la revisión del sitio web de Nealite, aplicando una tecnología prometedora para los sitios web en un contexto de movilidad, el "diseño web adaptativo". ¿Nos podría explicar esta tecnología y por qué es importante en la actualidad?

GW - El diseño web adaptativo consiste en concebir un sitio web capaz de adaptarse a terminales de diferentes tipos y tamaños de pantalla. En la actualidad, numerosos sitios web escogen desarrollar sitios móviles completamente aparte del sitio web clásico para adaptarse a esta limitación técnica, relacionada principalmente a la movilidad.

La idea detrás del diseño de sitios web adaptativos es procurar que un solo sitio se adapte a diferentes tamaños de pantalla: PC, Mac, smartphones, tabletas táctiles y cualquiera que sea el modo de visualización, retrato o paisaje.



CCM - ¿Cuáles son las mejores preguntas a plantearse antes de proceder a la revisión de un sitio web con un diseño web adaptativo según su experiencia?

GW - Hay que decir en primer lugar que es bastante desestabilizante para una empresa que desarrolla un sitio web cambiar por completo todo el diseño y adoptar un diseño web adaptativo. La tecnología de diseño web adaptativo es todavía muy reciente, por lo que no es tan simple como crear un sitio web clásico.

Es más complicado, porque la empresa debe tomar en consideración numerosos parámetros y tener una idea muy clara de diferentes aspectos, como los perfiles de usuarios a los que quieren llegar mediante un sitio web adaptativo y los dispositivos a enfocarse prioritariamente.

Según nuestra experiencia, hay un gran trabajo de reflexión previamente. Hay que reflexionar sobre una estrategia, construir escenarios de uso y fijarse objetivos precisos.

La toma en consideración del comportamiento del usuario y del contexto de utilización en los diferentes terminales también es un aspecto importante. La navegación en un sitio web mediante una PC difiere evidentemente de la navegación web en una tableta táctil.

Es juicioso priorizar ciertos servicios y contenidos más que otros. Al evolucionar hacia un diseño web adaptativo, hay que ser consciente de los cambios que esto arrastra y elegir en función a los usuarios objetivos y de los terminales privilegiados.

También puede ser prudente para una empresa conservar su sitio web, su sitio móvil y sus aplicaciones tal cual en lugar de de reunir estos diferentes soportes en un sitio web adaptativo.

Las empresas pueden desarrollar un sitio web adaptativo en interno o ser asesorados por una agencia. Pero hay que tener en cuenta que un diseño web adaptativo se basa en nuevos lenguajes, que no son controlados o dominados por todos los diseñadores web y desarrolladores web.

Técnicamente, los sitios web todavía no se visualizan de manera uniforme en todos los navegadores. Sin embargo, la ventaja de un diseño web adaptativo, es que no hay más que una sola ubicación, esto simplifica su evolución. Las modificaciones efectuadas en una ubicación de un sitio web adaptativo se aplican para la visualización en todos los terminales.



CCM - Las tiendas online se interesan cada vez más por los canales del comercio electrónico ya que los consumidores compran cada vez más desde dispositivos móviles; por lo que adaptar ergonomías de sitios web a la navegación en tabletas táctiles resulta pertinente. ¿Acaso un diseño web adaptativo puede ser utilizado para este fin?

GW - Sí, actualmente, los sitios cuya ergonomía no es adaptada a las tabletas o smartphones pueden perder clientes y clientes potenciales. Por ejemplo cuando un usuario o cliente navega en el catálogo de la tienda online, no accede fácilmente a los productos que busca. Va a tener constantemente que hacer zoom para utilizar el menú por ejemplo, lo que molesta su experiencia de compra.

Adaptándose a las dimensiones de una tableta táctil, un sitio con un diseño web adaptativo permite evitar este defecto que perjudica la experiencia del usuario.



CCM - ¿Cuál es el impacto de la revisión de un sitio con un diseño web adaptativo para el posicionamiento web natural?

GW - Es un punto importante y una de las ventajas de esta tecnología. El hecho de tener un solo sitio facilita el posicionamiento en Google, lo que no es el caso de un sitio web acompañado por una versión móvil por ejemplo. Un sitio web adaptativo está mejor posicionado.



CCM - ¿Cuál método de diseño utilizó?

GW - Durante la concepción y la elección de los elementos a visualizar, empezamos con el dispositivo más pequeño, el smartphone, luego progresivamente fuimos hacia el más grande. Esta manera de proceder nos obligó a presentar lo esencial, lo más elemental, para evitar sobrecargar la experiencia móvil.

Sin embargo, en la parte de diseño, partimos desde las pantallas más grandes porque queríamos un sitio muy visual. Este aspecto puede luego ser adaptado en las tabletas y smartphones.

Aunque un diseño web adaptativo permite ser muy ambicioso, hay que elegir al principio, y no querer que todos los sitios web se adapten a todas las dimensiones de pantallas.

Para nosotros, es importante estar en constante mejoras y hacer evolucionar el sitio poco a poco.



CCM - ¿Cuál es el costo de desarrollo de un sitio web con un diseño adaptativo?

GW - Es más caro que el desarrollo de un sitio web clásico porque hay que hacer una adaptación del sitio web al tamaño de las pantallas de diferentes dispositivos. Sin embargo, es más barato que de lanzar un sitio web, una versión móvil y aplicaciones ya que estos demandan invertir en la evolución de diferentes interfaces.



Consulta también

Publicado por Carlos-vialfa. Última actualización: 24 de octubre de 2012 a las 01:25 por Carlos-vialfa.
El documento «Diseñar un sitio web con un diseño web adaptativo» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.