() translation by (you can also view the original English article)
Si todavía no has oído hablar de Shopify, quizá es que estás viviendo bajo una piedra. Shopify es uno de los servicios más populares para crear una solución de e-commerce online, y recientemente han rediseñado el aspecto de su sitio.
Hoy, vamos a ver algunos de los detalles más finos de ese rediseño, y hablaremos un poco sobre cómo lo consiguieron. ¡Vamos a por ello!
Todo Va Sobre El Diseño Responsivo
El cambio hacia un diseño responsivo es el primer cambio que Shopify ha realizado, y el nivel de detalle en cada punto de interrupción (les llamaremos ahora "breakpoint") no deja al usuario atrás.
Shopify es un gran ejemplo en la toma de decisiones en lo que respecta al diseño basado en el tamaño de de las pantallas. Echemos un vistazo a algunos de esos ejemplos, empezando por la página de inicio.
Para abreviar en el artículo, usaremos el término "móvil" para hacer referencia al breakpoint más pequeño, "tableta" para referirnos al siguiente tamaño de breakpoint, y "sobremesa" para referirnos a las pantallas más grandes. Existen más de tres breakpoints básicos en este diseño, pero estos términos nos proporcionan un marco suficiente para hablar sobre los dispositivos principales.
Página de Inicio, Cabecera
Móvil
En el tamaño móvil, vemos una clara llamada a la acción o CTA (call to action, en inglés), Get Started, el cual se repite dos veces. También vemos una versión simplificada del logo de Shopify, una línea con un lema, y un bloque fijo verde sobre el que se muestra un cliente de Shopify. Un menú hamburguesa a modo de botón ubicado en la zona superior izquierda de la cabecera.
Tabletas
Tan pronto pasamos al tamaño para tabletas, observamos que las preferencias cambian del apilamiento vertical, y en su lugar el contenido se organiza en sentido horizontal. El nivel de detalle, o "resolución del contenido", aumenta; vemos un logo más detallado (todavía centrado), texto más grande, y la imagen del cliente de Shopify muestra más detalle.
Quizá lo más interesante sea el cambio del bloque verde, de su posición vertical pasa a una alineación horizontal, alineado a la derecha de la cabecera. También vemos un botón Log In junto a la llamada a la acción principal en la parte superior de la cabecera. En el tamaño para tableta, todavía vemos un menú con estilo de hamburguesa.
Sobremesa
El nivel más alto de detalle en la cabecera se puede encontrar en las versiones para sobremesa. El logo ser alinea a la izquierda, y el menú hamburguesa es sustituido con un menú explícito. Las alineaciones mostradas en el breakpoint para tableta se mantienen. En el lado izquierdo, la llamada a la acción Get Started se convierte en un botón de envío, con un campo de texto para que el usuario introduzca su dirección de correo electrónico. Abajo, vemos una pieza de nuevo contenido sobre la marca, "Trusted by over 100,000 store owners." (Con la confianza de alrededor de 100,000 propietarios de tiendas).
Debate
La cabecera constituye un caso de estudio sobre la toma de decisiones respecto al diseño móvil. ¿Cuáles son los elementos más importantes que nunca deberían eliminarse? ¿Qué elementos son apropiados para cada breakpoint y dispositivo que habitualmente se adecuan a ese breakpoint? Shopify ha elegido, por ejemplo, usar la imagen de un único cliente de Shopify en todos los breakpoints, pero sólo muestra el mensaje cuantitativo “Trusted by over 100,000* store owners” para el diseño de sobremesa. Este tipo de decisiones son de alto nivel y tienen un impacto más amplio que en el aspecto estrictamente estético.
*Nota: desde que empezamos a escribir este artículo, Shopify ha actualizado esta cifra a 120,000.
Puntos Extra: El uso del Elemento <picture> e imágenes Data-URI
Debemos destacar que Shopify usa muchas técnicas responsivas que son un estándar del diseño web responsivo, como el uso de el elemento <picture>. Aquí tienes el código para la imagen de Corrine Anestopoulos:
1 |
<picture class="merchant-header__photo js-window-loading"> |
2 |
<!--[if IE 9]><video style="display: none;"><![endif]-->
|
3 |
<source srcset="/assets2/homepage/homepage-person@desktop-4f0656677d8cda087a8df30e0d18c41a.png, /assets2/homepage/homepage-person@desktop-2x-452c196f174ecb74a2ec50f660e36af0.png 2x" media="(min-width: 990px)"> |
4 |
<source srcset="/assets2/homepage/homepage-person@tablet-bb9c6db8102779be1709b489c8e46208.png, /assets2/homepage/homepage-person@tablet-2x-cd42bc0f6914581344be9bbc13f76e05.png 2x" media="(min-width: 750px)"> |
5 |
<!--[if IE 9]></video><![endif]-->
|
6 |
<img srcset="/assets2/homepage/homepage-person@mobile-0bd643463b033a47b989120d96348c0f.png, /assets2/homepage/homepage-person@mobile-2x-c4ea79e2203797bff7c24cf823c271f4.png 2x" alt="Shopify Merchant, Corrine Anestopoulos"> |
7 |
</picture>
|
El elemento <picture> carga fotos de diferente resolución basándose en la resolución del dispositivo, evitando problemas como la doble descarga, el abuso de la propiedad CSS background-image, y cargas de JavaScript no semánticas. Esto permite alos dispositivos con pantallas de alta resolución solicitar imágenes de mayor resolución; advierte como que no encontrarás imágenes pixeladas a través de ninguna de las páginas rediseñadas de Shopify.
Shopify usa además información para las uri's codificada con base-64 para definir imágenes en el diseño, incluyendo la ligera textura del bloque verde en la cabecera. Esto evita una petición HTTP extra e innecesaria, y es particularmente efectivo para imágenes detalladas de la interfaz de usuario que no pueden convertirse en SVG, y también para patrones repetitivos.
Ya que hablamos de SVG, el logo de Shopify también usa codificación base-64 en la información de la uri para definir una imagen SVG. Esto también funciona como en las anteriores imágenes codificadas a través de la uri.
Navegación
La navegación principal está basada en una columna lateral o sidebar oculta que aparece cuando el menú de hamburguesa es tocado o pulsado.
La animación se consigue usando transform y translateX, en combinación con la siguiente regla de transición.
1 |
transition: transform 0.6s cubic-bezier(0.66, 0, 0.41, 1); |
El cajetín en sí mismo está ajustado con position: fixed, con una regla overflow-y establecida a scroll. Cuando el cajetín se abre, el elemento body recibe una clase js-drawer-open, la cual establece la altura a 100% y el overflow (desborde) a hidden (oculto).
Una navegación secundaria está presente en algunas de las páginas internas, ese trata simplemente de un estilizado elemento <select>. Aquí tienes el CSS empleado para estilizar el elemento <select>:
1 |
.nav__mobile__select { |
2 |
width: 100%; |
3 |
background: transparent url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3…wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat right center; |
4 |
border: none; |
5 |
-webkit-appearance: none; |
6 |
-moz-appearance: none; |
7 |
-ms-appearance: none; |
8 |
-o-appearance: none; |
9 |
appearance: none; |
10 |
color: #767676; |
11 |
}
|
Nuevamente vemos la técnica de la data-uri usada para la flecha hacia abajo del lado derecho del área de selección, así como la regla appearance, la cual define unos estilos basados en los de nivel de navegador.
El mismo menú primario ser usa abajo tanto para los breakpoints de tableta como para el de móvil, pero el menú secundario sólo se usa a partir del breakpoint para móvil. Para el breakpoint de sobremesa, los menús son mostrados de forma explícita, con el menú a nivel de páginas secundarias apareciendo en la parte superior de la página. La barra de navegación misma usa Headroom, un plugin JavaScript para controlar como se muestra la navegación fija basándose en diferentes acciones. Por ejemplo, en las páginas internas, la navegación principal se oculta conforme el usuario desliza hacia abajo la página dejando visible sólo la navegación secundaria, pero en el momento en que el usuario vuelve arriba, la navegación primaria reaparece.
Hablando de menús deslizantes, Shopify ha elegido una estrategia interesante para responder a los clics sobre los botones de llamada a la acción: un cajetín deslizante que aparece desde la derecha de la pantalla con un menú. Este cajetín muestra tanto en tabletas como en móviles; en sobremesa, los inputs se ubican sobre un fondo negro semi-transparente a pantalla completa, modal-style.
Página "Sell Online"
La página "Sell Online" proporciona un par de interesantes consideraciones para las consideraciones responsivas.
Llamada a la Acción de la Cabecera
La imagen de la cabecera es la primera obvia consideración desde el punto de vista del diseño responsivo, ya que cambia de tamaño con cada breakpoint. Pero un sutil cambio ocurre en el breakpoint para sobremesa. En lugar de proporcionar únicamente un botón Crea tu tienda, un formulario con tres campos aparece, invitando a los usuarios a suscribirse y crear una tienda todo ello en un mismo formulario de envio. Esto sigue el mismo patrón de la llamada a la acción situada en la página de inicio.
Sección del Slider de Contenido
Otro módulo de contenido que se repite en varios lugares muestra una página Vende Online. En el breakpoint móvil, el módulo es esencialmente un acordeón formado por las secciones del contenido, cada una con una cabecera y un botón + que revela la sección. Cuando ésta es revelada, el usuario podría pulsar o tocar un botón - para ocultar la sección.
Para los breakpoints de tabletas y de sobremesa, en cambio, el módulo cambia a un botón de navegación horizontal más detallado.
Cada botón en la navegación está asociado con un bloque de contenido. El botón copia los cambios desde encabezados más largos y descriptivos hacia palabras solas acompañadas por un icono. Las propias secciones de contenido muestran imágenes más grandes asociadas con el título de cada sección.
Este mismo patrón se muestra dos veces en la página "Vende Online". El acordeón también se reutiliza en cualquier lugar, incluído el breakpoint móvil para la página de Funciones. Una diferencia interesante, de todas formas, es que el módulo de acordeón no siempre va acompañado por mismo botón de secciones descrito más arriba. En el caso de la página de Funciones, vemos un contenido de navegación fija al lado izquierdo, con secciones de contenido deslizables y siempre visibles a la derecha.
Resolución de la Información: Selección de las Imágenes
En dos secciones, "Lleva tu tienda allá donde vayas", y al final bajo "estamos aquí para ayudar, 24 horas al día, 7 días a la semana", las elecciones de las imágenes se realizan según los diferentes breakpoints. En la sección "Lleva tu tienda allá donde vayas", la imagen de un iPhone aparece sólo en el beakpoint para tableta o superior. En la sección "24/7", una imagen de representantes del servicio al cliente muestra a siete individuos tanto para móvil como para tableta, pero crece hasta treinta individuos para el breakpoint de sobremesa. Esto se consigue usando el elemento <picture>:
1 |
<picture>
|
2 |
<!--[if IE 9]><video style="display: none;"><![endif]-->
|
3 |
<source srcset="/assets2/support/gurus-white@desktop-76b9f1d671a43c72cb51ea40597e126c.jpg, /assets2/support/gurus-white@desktop-2x-70a9f83d819f8a4217d3afe2c7f01caf.jpg 2x" media="(min-width: 990px)"> |
4 |
|
5 |
<!--[if IE 9]></video><![endif]-->
|
6 |
<img srcset="/assets2/support/gurus-white@mobile-b020f30373b7452fd36452bc19616936.jpg, /assets2/support/gurus-white@mobile-2x-9aea44236e0c4c2440a32940caaae200.jpg 2x" alt="Shopify support gurus"> |
7 |
</picture>
|
Advierte el elemento <video> específico para IE9; esto permite a IE9 usar el <source>. Shopify también utiliza Picturefill de Scott Jehl, un polyfill para el elemento picture que soportan la mayoría de los navegadores. (Lee la información sobre el soporte en los navegadores aquí.)
Carrusel de Testimonios
En el breakpoint móvil, los testimonios muestran un solo elemento en el carrusel.
En el tamaño para tableta y superiores, estos slides se muestran en paralelo uno junto a otro.
No está completamente claro el por que Shopify ha elegido usar un carrusel en lugar de una composición vertical de los elementos, pero algunas intuiciones informadas se podrían realizar. Por ejemplo, Shopify podría no haber querido sacrificar el espacio vertical necesario para colocar los testimonios de forma que el usuario pudiese llegar a la última llamada a la acción más rápidamente. O podría tratarse simplemente de un elección estética.
Página de Precios
La página para los precios podría verse como una de las páginas más importantes de cualquier página de servicios de marketing. Por este motivo, es casi seguro que las decisiones de Shopify en esta página fueron hechas meticulosamente. Veamos los cambios en el contenido conforme varían los breakpoints.
Móvil
Al usuario se le solicita la elección de un plan que se adapte a su presupuesto, y se le presentan tres opciones: vender online, vender en una tienda, o ambas.
La elección de una de estas opciones cambia los módulos de los precios para corresponder con la situación que hayas elegido. Este cambio se acompaña también de un cambio en el color. Una sutil decisión hecha por Shopify fue usar el amarillo para "online", "azul" para "in store", y verde para la combinación de ambos; esto es particularmente inteligente porque combinando el azul y amarillo efectivamente se obtiene el verde.
Una vez el usuario haya elegido su punto de venta, se les presentan unos bloques ordenados verticalmente que muestran el precio y el nombre del plan con muy claramente. Cada bloque también proporciona un desplegable "Detalle de los Planes" para ver la información detallada de los planes, como tasa y funciones.
Las FAQs se muestran al final del módulo de acordeón que hemos visto antes. Los encabezados del acordeón hacen referencia a tipos de preguntas, y cada sección contiene múltiples preguntas. Esto difiere respecto a los enfoques habituales de crear un acordeón para cada pregunta.
Tableta
El breakpoint para tableta, ambos el selector del punto de venta y los bloques de los precios cambian a un diseño horizontal.
Los detalles se muestran sin requerir un clic o un desplegable dentro de cada bloque de contenido. El selector de punto de venta también cambia de solo-texto a texto acompañado por un icono. El plan "Profesional" está ligeramente desplazado respecto a los otros dos planes, y está marcado como el plan "más popular". En los breakpoints para tableta y para móvil, un plan "Básico" está diseñado para atraer mucho más la atención, y no incluye la llamada a la acción Prueba Shopify Gratis. Curiosamente, la misma falta de énfasis se aplica al plan Shopify Plus, pensado para planes de gran volumen a nivel empresarial.
Las FAQs ya no se sitúan en un acordeón, y en su lugar se muestran en un diseño a dos columnas.
Sobremesa
El único cambio relativo al diseño del contenido en el tamaño de sobremesa es que los planes con menor énfasis se muestran en cuatro columnas junto a los planes principales.
Lightbox "Ejemplos"
Los ejemplos de temas para Shopify son la mejor forma de comunicar la flexibilidad y el empleo de Shopify dentro de un contexto. Estas páginas han usado algunos buenos ejemplos de interactividad resposiva que me gustaría subrayar.
Experiencia de Lightbox para Móvil
Con frecuencia, las ventanas modales en los móviles sufren de una falta de consideración deliberada en su diseño hacia los usuarios de dispositivos móviles. Este no es el caso de los "ejemplos" modales de Shopify. Pensados para las imágenes a pantalla completa, el modal proporciona unos botones de navegación a modo de flecha y debajo metadatos.
Cambiando al diseño para tabletas, las flechas y los metadatos flotan hacia la derecha de la imagen. La transición entre cada modal usa un atributo scale y fade. La transición sugiere un efecto zoom hacia el interior y hacia afuera del índice de la imágenes. En cualquier momento en que el modal es abierto, ambos, una llamada a la acción y un botón x están presentes, proporcionando una ruta de salida apropiada al usuario.
La retícula misma proporciona filtros contextuales para permitir al usuario navegar a través de diferentes temas en la página. El efecto de aumento de escala y opacidad se repite aquí también.
Pie
La estrategia de Shopify para la navegación del pie revela otra situación en la que se ha empleado la resolución del contenido. En el breakpoint para móvil, se muestran dos columnas:
para las tabletas y breakpoints mayores, se introducen dos secciones completamente nuevas, proporcionando un acceso más directo a los detalles internos y a páginas con "autoridad" (páginas basadas en contenido que poseen autoridad sobre un tema específico).
Finalmente, esto muestra que Shopify está decidido a llevar una estrategia basada en los contenidos: ¿qué contenido debe estar disponible en todos los los breakpoints, para todos los dispositivos?, y ¿qué contenido debe estar disponible sólo si la pantalla es la de un ordenador de sobremesa o una tableta? Este tipo de preguntas generan una mejor estrategia de contenidos a nivel global, y debería en consecuencia ser parte de todos los esfuerzos del diseño responsivo.
Conclusiones
Shopify ha conseguido llevar acabo un asombroso diseño, con gran integridad tanto en lo relativo al desarrollo de contenido como en los aspectos del diseño responsivo.
Y aún más, han empleado algunas de las mejores técnicas que los navegadores modernos ofrecen. Aunque todavía existen páginas dentro del ecosistema de Shopify que todavía no se han movido hacia las nuevas técnicas y sistema de diseño, la parte principal del sitio y las páginas referentes al marketing proporcionan un modelo de diseño responsivo consistente y único del que pueden aprender diseñadores web y desarrolladores front-end.
