¿Qué pasaría si los consumidores visitaran tu página web desde sus celulares y se encontrarán con errores de diseño, íconos que no funcionan o texto difícil de leer? Seguramente, no tardarían en salir de ahí e irse a otras páginas web donde sí disfruten navegar.
Y es que desde el 2018, es cada vez mayor la tendencia a que los consumidores visiten los sitios web desde sus smartphones en vez de hacerlo desde sus computadoras. ¿Qué significa eso? Que cada vez es más indispensable para los emprendedores crear una página web con un diseño web que luzca fantástico y funcione en todos los dispositivos y plataformas. Para lograr que esto funcione en los celulares, se desarrollaron dos estrategias: el diseño web responsive y el diseño web adaptable.
El diseño web responsive —también conocido como diseño web responsivo o web responsiva— es una técnica de diseño en el que una página se reorganiza y ajusta al tamaño de la pantalla detectada. Por otro lado, el diseño web adaptable permite que el navegador cargue un diseño específico para la plataforma que corresponda.
Al crear tu página web, quizá te preguntes: “¿Y qué tipo de diseño me conviene usar?”. En Wix pensamos en tus necesidades. Por eso, en este artículo aprenderás las diferencias, ventajas y desventajas de ambos tipos de diseño.
Responderemos las siguientes preguntas:
Para que una página web tenga éxito debes crear un diseño pensando en todos los usuarios. Sin embargo, los tamaños de pantalla pueden variar desde enormes monitores corporativos hasta diminutos relojes inteligentes, por lo que se hace difícil ofrecer a los usuarios la misma calidad de UX design en todos sus dispositivos. Por ello se creó el diseño web responsive y adaptable, que permiten que los diseñadores ofrezcan experiencias agradables a cada usuario que navega por la web. ¿Cuáles son las diferencias entre uno y otro? Veamos:
01. ¿Qué es el diseño web responsive?
El diseño web responsive permite que la distribución de una página web se ajuste automáticamente a cualquier tamaño de pantalla. Esto se logra con un lenguaje de programación conocido como CSS, que usa media queries para examinar las características del dispositivo del usuario. Una vez detectado el dispositivo, la página se ajusta.
La página web de Toyota es un ejemplo de diseño responsive. Gracias al diseño de cuadrícula fluida, el contenido de la página de inicio se puede ajustar sin problemas en pantallas más pequeñas. Si ingresas a la página desde tu celular o computadora y cambias el tamaño de la pestaña lentamente, podrás ver que el diseño se reorganiza en función del tamaño que establezcas. El mismo contenido aparece en el mismo orden. Sin embargo, el contenido se amplía o se reduce a fin de ajustarse de la mejor manera al nuevo tamaño de pantalla. Incluso algunas características han cambiado (como por ejemplo el desplazamiento horizontal) en función de la plataforma que use el visitante.
El diseño web responsive entró en escena en 2010, cuando Ethan Marcotte lo presentó en un evento en Seattle llamado "An Event Apart". A continuación, Ethan explica qué lo llevó a nombrar así este nuevo concepto de diseño:
“En años previos, había estado trabajando en más proyectos de diseño en los que me pedían desarrollar páginas web independientes y exclusivas para celulares. Es más, con frecuencia me pedían una página web solo para iPhones. Algo no me cuadraba con esto y definitivamente no me parecía sostenible. ¿íbamos a estar desarrollando páginas web distintas para cada nuevo dispositivo que apareciera? Por otro lado, siempre me ha interesado crear diseños flexibles y atractivos”.
Desde entonces, esta técnica de diseño web fluido ha permitido que los consumidores hagan más con sus smartphones. También ha permitido a las empresas llegar a más consumidores a través de más dispositivos.
02. ¿Qué es el diseño web adaptable?
El diseño web adaptable permite que una página web cargue un diseño estático y predeterminado en función del dispositivo detectado. Para lograrlo, los diseñadores deben crear diversos modelos para diferentes tamaños de pantalla. Los tamaños más comunes son (en píxeles):
320
480
760
960
1200
1600
La página de Apple es un buen ejemplo de diseño web adaptable, el cual requiere un diseño personalizado para los tamaños de pantalla más comunes. Si usaran un diseño responsive, aparecería el mismo contenido y en el mismo orden en las distintas pantallas de los visitantes; sin embargo, los diseño adaptables no son dinámicos.
Si visitas el sitio web de Apple desde una computadora y un celular, podrás ver que la estructura es más o menos idéntica y contiene el mismo número de secciones. No obstante, el contenido difiere ligeramente, no tanto en el texto, sino en las imágenes.
En términos de la experiencia de usuario no hay nada que perder. De hecho, el diseño adaptable permite usar imágenes personalizadas para cada dispositivo, en vez de tener que ajustar en los celulares todo lo que se ve en las computadoras.
Después del diseño responsive, Aaron Gustafson introdujo el diseño web adaptable. Lo explica en su libro Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. En la reedición de su libro, en 2015, Aaron dijo:
“La filosofía de la mejora progresiva funciona y sigue demostrando su esplendor con cada dispositivo que aparece en el mercado global, que no para de crecer. De hecho, me atrevo a declarar que la mejora progresiva es probablemente aún más relevante hoy de lo que era cuando escribí Adaptive Web Design en 2010”.
El diseño adaptable se instaló de forma permanente en el entorno del diseño web, pues las empresas quieren controlar cada vez más cómo luce su contenido en los dispositivos móviles.
03. ¿Cuál es mejor entre el diseño web responsive y el adaptable?
En lo que respecta al diseño web para dispositivos móviles, no hay un ganador desde el punto de vista técnico. ¿Cuál te conviene más? Dependerá de tus necesidades, deseos y recursos. Algo que te ayudará a disfrutar de un proceso de diseño web completo, desde la concepción hasta la producción, será usar creadores de páginas web —como Wix— que crean diseños adaptables para los dispositivos más usados. Por otro lado, las plataformas de diseño web —como Editor X— funcionan con lenguaje CSS responsive potenciado por la amigable función de arrastrar y soltar.
Veamos las ventajas y desventajas de cada una:
Ventajas y desventajas del diseño web responsive
Ventajas:
Ofrece una experiencia de contenido uniforme en todas las plataformas
Funciona en los nuevos dispositivos, incluso en aquellos con dimensiones de pantalla poco habituales
Desventajas:
Tendrás menor control en cómo luce tu sitio en cada dispositivo
Puede perjudicar la jerarquía visual de tu página si los elementos se muestran en el orden o tamaño incorrectos
Requiere más experiencia en diseño o, se deben hacer pruebas multiplataforma y modificaciones donde sea necesario
Perjudica el web performance de tu página web, ya que el contenido dinámico tarda más en cargarse
Ventajas y desventajas del diseño web adaptable
Ventajas:
Ofrece una experiencia a la medida de cada plataforma y contexto
Alto rendimiento web, ya que el diseño está optimizado para el dispositivo de destino
Facilidad para incorporar perfectamente los anuncios y el contenido de terceros
Desventajas:
Puede repercutir negativamente en el SEO si el contenido no es uniforme en todos los dispositivos
04. ¿Qué es el diseño web Mobile First?
Si quieres obtener los mejores resultados al usar cualquiera de las dos estrategias de diseño que hemos analizado, necesitarás adoptar un enfoque Mobile First o “dispositivos móviles primero”. Es decir, crear primero el diseño web para móviles, así evitarás los problemas de diseño comunes en los dispositivos móviles.
05. ¿Qué debería tener en cuenta al diseñar una página web que sea versátil?
En el diseño web, el truco para crear una página web increíble, sea responsive o adaptable, es enfocarse en los elementos individuales y considerar minuciosamente cómo podrían verse afectados por el cambio de un tamaño de pantalla a otro.
Cuando planifiques tu diseño para celulares, enfócate en incluir u optimizar los siguientes componentes principales. De igual modo te recomedamos leer nuestra guía completa de qué es el diseño web.
Texto del encabezado
A primera vista, el encabezado puede decir mucho de tu página web a quienes lo visitan:
De qué es tu marca
Qué ofreces
Qué acciones deben tomar
Cómo navegar por la página
Un diseño para computadoras tiene suficiente espacio para mostrar toda esta información en el encabezado. No es el caso en un diseño para celulares, por lo que necesitarás tenerlo en cuenta en tu diseño responsive o adaptable.
Pregúntate qué elementos deberían estar visibles al navegar en tu página web para celulares. Por ejemplo, un logotipo debería estar a la vista para promover una identidad de marca sólida y coherente. Otro elemento muy común es el menú de navegación. Y si estás creando una tienda online , será importante incluir el ícono del carrito de compras.
Legibilidad del texto
El texto de una página web puede ser un elemento complejo, ya que querrás que se vea bien, refleje el estilo de tu marca y, a la vez, se pueda leer con facilidad.
A la hora de diseñar para los diferentes dispositivos, debes considerar que el tamaño y estilo del texto podrían no ajustarse al tamaño de la pantalla al aumentarla o disminuirla. Por lo tanto, es crucial probarlo antes de publicar la página.
Ícono de hamburguesa
La forma de navegar desempeña un papel crucial en todas las páginas web, por lo que es vital pensar en cómo los usuarios interactúan en el sitio con sus diferentes dispositivos.
Para comenzar, piensa en usar un menú de hamburguesa. Un menú de hamburguesa es ese ícono de tres líneas que comúnmente vemos en la esquina superior derecha o izquierda de una página web. A estas alturas, la mayoría de la gente sabe que ese ícono les servirá para navegar por la página con facilidad.
Configuración de la navegación
La creciente popularidad de las aplicaciones para celulares ha influido en la manera en que los propietarios de las páginas web estructuran la navegación en los celulares. Cada vez más, vemos diseños con más opciones que el ya recomendado menú de hamburguesa.
Algunas marcas quizá añadan un menú horizontal fijo en el encabezado o en la parte inferior de la pantalla como su sistema de navegación. Otro método popular es crear un menú emergente de pantalla completa mediante una ventana.
Encabezado fijo
En el diseño adaptable, puedes mantener tus páginas para celulares relativamente compactas. Sin embargo, en el diseño responsive todo el contenido para computadoras se trasladará a celulares, a menos que se hagan las modificaciones necesarias.
Si tus diseños para celulares lucen extensos a pesar de tus esfuerzos, piensa en agregar un encabezado fijo. De esta manera, tus visitantes podrán acceder al menú de navegación en cualquier momento.
Jerarquía visual
La jerarquía visual de una página web se refiere al camino que siguen los ojos del visitante en una página. Esto es especialmente relevante en las páginas para celulares. Los diseños desordenados le dificultan a los usuarios fijar su atención en los detalles importantes; incluso, se pueden perder dentro de la página sin saber adonde ir.
Con el objetivo de mantener esta jerarquía, puedes añadir títulos, subtítulos, bloques de imágenes, espacios en blanco, herramientas de navegación y mucho más. Esto te permitirá:
Fragmentar grandes piezas de contenido y desglosar temas complejos
Dar estructura a la información de tu página
Garantizar un diseño equilibrado
Establecer relaciones entre las distintas secciones
En el diseño adaptable, debes tener en cuenta esto al definir los detalles visuales de cada versión. En el diseño responsive, tendrás que tener cuidado, pues los elementos pueden cambiar automáticamente de tamaño o estilo dependiendo del dispositivo que esté usando el visitante.
Una solución a este problema es establecer estilos globales para computadoras, tabletas y celulares, de modo que el proceso de reestructuración responsive no afecte la integridad de tu contenido.
Cantidad de la información
Un último punto concerniente a tu contenido es la cantidad de la información. Con las opciones de navegación disponibles en los celulares, puede ser sencillo recorrer una extensa página. Sin embargo, tener que hacer menos desplazamientos puede ayudar.
Con un diseño adaptable, puedes eliminar secciones de texto o imágenes en los diseños para celulares. Así permitirás que en la versión para computadoras se pueda consumir más información y mantener la versión para celulares más amena.
Imágenes
Las imágenes de una página web pueden ser una herramienta de gran utilidad en el diseño, la creación de marca, la narración de historias y las ventas. Tanto en el diseño responsive como en el adaptable, es importante que pongas atención al impacto que estas imágenes pueden tener en el desempeño de tu página web.
Si bien el peso de las imágenes no suele ser un problema para los diseños adaptables, sigue siendo una buena idea utilizar solo las imágenes que necesitas, para que no resten velocidad a tus páginas.
Contenido integrado
No es raro utilizar contenidos externos como widgets de redes sociales, videos o anuncios publicitarios. En el diseño adaptable, puedes fijar límites para estos elementos externos de manera que no afecte la experiencia de usuario. En el diseño responsive, debes personalizar el código para mantener los elementos externos dentro de los límites deseados.
Interacción
Los elementos de diseño interactivo deben ser:
Fáciles de identificar como interactivos
Localizables en la página
Funcionales y sin errores
Considera hasta la más mínima interacción que los visitantes deseen tener en tu página y la manera en que estas interacciones puedan diferir de una versión a otra. Por ejemplo, imagina que has puesto tu número telefónico en el encabezado de tu página. Quienes la visiten desde una computadora, quizá marquen ese número directamente en sus celulares. Por otro lado, quienes la visiten desde sus celulares y decidan llamar, seguramente querrán hacerlo con tan solo tocar el número en la misma página.
Los movimientos interactivos son diferentes entre plataformas. Un ejemplo más: supongamos que decides agregar a tu página un deslizador de imágenes. Todos los usuarios podrán verlo; sin embargo, la manera de interactuar será diferente. Quienes visiten tu página desde sus celulares podrán ver las imágenes deslizando su dedo a la derecha o a la izquierda. Quienes lo hagan desde una computadora, usarán el mouse.
Por lo tanto, sea que elijas usar el diseño web responsive o el adaptable, no te centres únicamente en reposicionar el contenido, cambiarle el tamaño o en cómo mostrarlo en las diferentes plataformas. Piensa también en cómo el contexto afecta a la interacción de tu página.
En conclusión
¿Cuál es la diferencia entre el diseño web responsive y el adaptable? El diseño responsive tiene un solo diseño que se ajusta automáticamente al tamaño de la pantalla detectada. El diseño adaptable tiene varios diseños prefabricados que se cargarán dependiendo del dispositivo del visitante.
¿Cuál de los dos diseños es mejor? Dependerá de tus necesidades, deseos y recursos. Con el creador de páginas web de Wix y su Editor X, podrás construir fácilmente una espléndida página web utilizando el tipo de diseño que prefieras.
¿Qué es el diseño web Mobile First o “dispositivos móviles primero”? Se trata de pensar primero en el diseño para dispositivos móviles y, a partir de allí, escalar hacia los demás tamaños de pantalla.
¿Qué debería tener en cuenta al diseñar una página web que sea versátil?Esfuérzate por incluir u optimizar los 10 elementos individuales que analizamos en este artículo.
Aplica todas estas buenas prácticas en tus diseños. Si aún no has empezado, en Wix te ahorramos mucho trabajo. Tu página web lucirá fantástica en todos los dispositivos. ¡Empieza hoy a darle vida a tu idea creando una página web que le ofrezca a tus visitantes una experiencia de usuario de otro planeta!