Cómo construimos el Bosun's Locker

Los líderes en protección de superyates reciben el tratamiento de los Harpers.

¿Quién es el armario de Bosun?

Bosun’s Locker es un proveedor de productos de protección de superyates y otros artículos de chandlery similares. Se trata de una empresa familiar con sede en Mallorca que lleva más de veinte años en la industria.

El equipo de Bosun’s Locker son expertos indiscutibles en su campo y cuentan con los principales actores de la industria como sus socios. Tienen una serie de contratos exclusivos con líderes del sector, como Chemco International, para proporcionar protección al casco respetuosa con el medio ambiente.

¿Cuál fue el informe?

Bosun’s Locker tenía un sitio web muy antiguo construido hace muchos años. Querían reinventar completamente su presencia en la web más en línea con su marca actual y filosofía empresarial. Fue especialmente importante enfatizar el compromiso de la compañía con productos amigables con el medio ambiente.

En particular, querían que la opción fuera capaz de vender sus productos en línea, por lo que incluir una funcionalidad de comercio electrónico en el sitio era fundamental, ¡algo en lo que nos especializamos!

¿Cómo lo hicimos?

Reconstruimos todo el sitio web desde cero utilizando un nuevo esquema de color e implementando WooCommerce para la funcionalidad de comercio electrónico. Construimos controles deslizantes personalizados y utilizamos los últimos formatos de imagen para la velocidad del sitio web.

Por último, pero no menos importante, creamos varias animaciones CSS en todo el sitio para dar ese factor sorpresa cuando se abrieron cosas como los menús, los carritos de compras activados o los menús de filtros seleccionados.

El final resulto

Casa en el mar

La página de inicio presenta una imagen de introducción a pantalla completa superpuesta con el menú, el logotipo y el título.

En esta página también se incluyen servicios disponibles y enlaces fáciles a otras partes importantes del sitio web.

Producto prístinas

Hemos desarrollado un control deslizante de CSS ligero para desplazarse por las imágenes del producto y habilitado la funcionalidad del carrito para que se puedan ordenar los productos.

Más abajo en esta página hay una sección de información rápida y enlaces a casos de estudio en PDF, hojas de datos y certificados de la industria.

El carro fresco

La página del carrito se abre como una superposición que vuela cuando se agrega un producto al carrito de compras del usuario.

Hicimos esta función habilitada para AJAX para que el usuario pudiera actualizar las cantidades del producto sobre la marcha dondequiera que estuvieran en el sitio.

Revisa el checkout

El proceso de pago debe ser una diapositiva para el usuario sin barreras. Con esto en mente, hicimos un proceso de pago de una página.

Todas las opciones de envío y la revisión de pedidos son posibles desde esta página, lo que facilita el pago y el pago rápidamente.

Páginas de la tableta

Asegurarse de que el sitio fuera igual de efectivo en dispositivos más pequeños fue, como todos los diseños de sitios web, extremadamente importante.

Usamos JavaScript para reorganizar los diseños de página si fuera necesario, pero en su mayoría solo usamos diferentes reglas de estilo para los tipos de dispositivos.

Inicio móvil

Más del 50% de los visitantes del sitio web ahora usan dispositivos móviles. Hicimos que Bosun’s Locker sea un diseño sensible para brindar esa aplicación fluida, como la interfaz y la experiencia del usuario.

Eliminamos y optimizamos el código para dispositivos móviles y nos aseguramos de que las imágenes estuvieran correctamente optimizadas para los dispositivos de retina, de modo que se vieran muy claras en el iPhone y otros dispositivos HD.

Productos móviles

Las listas de productos pueden ser terribles si se diseñan incorrectamente en dispositivos móviles. Las tasas de abandono del carro siempre son mucho más altas para las personas que usan dispositivos móviles para ver el sitio web.

Hemos reorganizado las páginas para dispositivos móviles para que los productos sean claramente visibles y legibles. También nos aseguramos de que hubiera suficiente espacio en blanco entre las listas para que los usuarios no se confundieran.

También movimos el panel del filtro fuera de la pantalla y lo hicimos visible como un panel deslizante para que el pequeño espacio disponible en un móvil no se desordenara.

El final resulto

Este fue un gran proyecto para que hundiéramos nuestros dientes y usamos algunas técnicas nuevas para asegurarnos de que el sitio funcionara como si tuviera nitro en el tanque. Aquí hay algunas de las cosas técnicas y cómo lo hicimos.

Stats

Funcionalidad de e-commerce

Utilizamos WooCommerce como base para habilitar el comercio electrónico en este sitio web. Sin embargo, eliminamos prácticamente todo el JavaScript y el estilo de WooCommerce, ya que es un complemento bastante abultado.

También eliminamos todas las plantillas predeterminadas de Woocommerce y creamos nuestro propio diseño desde cero.

Animaciones

Usamos animaciones de CSS para cosas tales como menús, entradas, filtros, plantillas de superposición y el control deslizante del producto. Esto aseguró que los efectos funcionaran en todos los navegadores en lugar de depender de plugins o polyfills de terceros.

DevOps

Como el sitio era muy lento en su VPS compartido existente, configuramos Bosun’s Locker en una de nuestras cajas dedicadas de VPS y le dimos amplios recursos para que funcionara rápido. También implementamos el almacenamiento en caché de las páginas del sitio utilizando Varnish para evitar las llamadas innecesarias a la base de datos que el sitio anterior había estado haciendo (y ralentizando).

Scripts

Todo en el sitio está personalizado codificado para la eficiencia. Creamos múltiples funciones para atender llamadas Ajax, desplazamiento suave, carrito de compras y, por supuesto, filtrado de búsqueda.

Optimización

Como el sitio se alojaría en nuestra red, pudimos optimizar completamente la entrega de las páginas, imágenes y contenido del sitio web. Escribimos reglas de configuración personalizadas de Nginx / ngx_PageSpeed ​​para manejar la optimización de la imagen sobre la marcha, así como la minificación y compresión de los activos.

Por último, pero no menos importante, implementamos el sitio en Cloudflare para un rápido acceso global y escribimos algunas reglas de trabajadores de Cloudflare para manejar el almacenamiento en caché de todo el contenido para los usuarios que no han iniciado sesión.