Responsivo × Versión Mobile

Layout

Responsivo

Sea del computador, smartphone, tablet o notebook, el design es el mismo. Lo que cambia es cómo el design se presenta. El layout entero se ajusta automáticamente de acuerdo a la resolución del dispositivo.

Versión Mobile

El design de la versión mobile y toda su programación se hace pensando solamente en el mobile, siendo una segunda aplicación, o sea, una para navegadores comunes y otra para navegadores mobile. Al acceder a la tienda, se identifica el dispositivo y se dirige a programación específica.

${"base64":" ","img":{"width":562,"height":501,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":23058,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/responsivo-x-version-mobile_1.jpg"}}$

Principales pantallas mobile utilizadas (puede haber variaciones según el dispositivo utilizado):

320 x 480
480 x 320
768 x 1024
1024 x 768
1680 x 1050

Algunos puntos fuertes del RESPONSIVO deben ser considerados:

Mejor indexación de SEO (a pesar de que el sitio dedicado no se quede atrás).
Fácil actualización y mantenimiento operacional.
Favorece la carga y mejora la conversión de códigos de redireccionamiento externos e internos.
Mismo look & feel favorece la identidad visual y branding.
URLs únicas permiten trabajar fácilmente en campañas.

Características tanto en RESPONSIVO como en la VERSIÓN MOBILE:

No existe mouse over.
Scripts pesan. Disminuir la cantidad ayuda el desempeño del sitio.
Imágenes grandes pesan al cargarlas, y no se abren (zoom) con frecuencia.
Posts resumidos y llamadas directas tienen mejor adherencia.
Visión 100% vertical.
Elementos visuales (imágenes excepto la foto del producto) deben ser sencillos.
Diferenciación de tamaño y color es mucho más acentuada que en la tienda tradicional.
Tiempo medio de navegación es mucho más bajo, o sea, debe ser objetivo, principalmente en la búsqueda de los productos.
Visibilidad de la vitrina es mucho menor, luego, buena categorización hace toda la diferencia.

Principales elementos visuales reconocidos en los dispositivos móviles

${"base64":" ","img":{"width":702,"height":367,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":81410,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/responsivo-x-version-mobile_2.png"}}$

¡La calidad es indiferente al tamaño!

Como toda creación de diseño, no existen puntos totalmente correctos, tampoco totalmente equivocados - La fórmula secreta es incorporar la mayor muestra de clientes finales y comprender los principales trueques comerciales que tenemos, aliadas a buenas prácticas de usabilidad.