Cómo construimos We Are Mallorca

El portal web de Mallorca consigue una nueva apariencia.

¿Quien es WeAreMallorca?

We Are Mallorca es un portal web con sede en Mallorca que contiene información sobre cosas que hacer, ver y participar en la isla. No solo ofrecen información sobre lo que puede hacer, sino también los medios para reservar eventos y entradas para actividades a través de su sistema en línea.

Como nuevo sitio, poco a poco han ido aumentando sus actividades disponibles y también su participación en el mercado de eventos de Mallorca.

¿Qué fue lo breve?

El cliente nos solicitó que creamos un sitio web desde cero mostrando toda la información sobre la isla que actualmente tienen disponible. Nos pidieron que construyéramos un sistema de filtro de búsqueda para que los visitantes pudieran encontrar rápida y fácilmente lo que estaban buscando.

Como sitio orientado a la información, también fue importante integrar videos y enlaces de redes sociales para cada uno de los lugares o actividades que se presentaron en el sitio.

¿Cómo lo hicimos?

Nos propusimos crear una estructura de URL fácil de navegar para que Google pudiera indexar fácilmente las páginas a medida que las visitaba. Esto también ayudaría al usuario a navegar por el sitio.

El sistema de filtro sería un sistema AJAX (en vivo) que actualizaría los datos sin la necesidad de una actualización de la página. También le dimos al sistema una funcionalidad de búsqueda en vivo también basada en AJAX.

También construiríamos las páginas alrededor de un control deslizante en el encabezado para que los visitantes puedan mostrar diversos eventos y actividades.

El final resulto

Casa en la isla

La página de inicio presenta una imagen agradable y de alto impacto que mantiene la introducción simple para un efecto máximo.

El objetivo era simplemente impresionar al visitante sobre qué es el sitio web y qué hace.

Las páginas del control deslizante

Las páginas de la lista contienen eventos, lugares o áreas destacados en el control deslizante, según la categoría que el usuario esté viendo.

Esto, junto con el sistema de filtro fácil de usar, permite controlar el viaje del visitante al ver el sitio.

Páginas de producto

En las páginas del producto, integramos una funcionalidad de reserva para que los visitantes puedan reservar un evento o actividad sin tener que irse y visitar el sitio web de los proveedores.

También en estas páginas hay una variedad de información, enlaces, ubicación y medios enriquecidos, como videos para informar mejor al espectador acerca de ese producto.

Páginas de tableta

Como todos los sitios web, We Are Mallorca necesitaba adaptarse bien a las diferentes resoluciones y tipos de dispositivos. En particular, el impacto de las imágenes de alta resolución debía ser igual de bueno sin importar el tamaño del dispositivo que esté viendo.

Mobile Mallorca

Más del 50% del mercado de navegadores ahora ve sitios web en dispositivos móviles. Si su sitio no responde (se adapta a todos los tipos de resoluciones) está perdiendo negocios.

Movimos cosas como los menús de página y la funcionalidad de búsqueda fuera de la pantalla hasta que el usuario las activó y simplificamos el diseño para teléfonos inteligentes.

También integramos la tecnología AMP (Páginas móviles aceleradas) para que Google muestre que el amor y la velocidad serían rápidos incluso para teléfonos con conexiones lentas.

Las cosas técnicas

Estadísticas

Como teníamos carta blanca con este sitio (porque era una construcción nueva) pudimos estructurar todo desde cero sin tener que comprometernos. Aquí hay una muestra de algunas de las cosas que hicimos…

Funcionalidad de comercio electrónico con filtro y búsqueda en vivo

Integramos el sistema de WooCommerce en el motor del sitio para habilitar la funcionalidad de comercio electrónico y luego lo excluimos, por lo que solo se activaron las funciones que necesitábamos. Además de esto, creamos un sistema de reserva ya que era un sistema basado en eventos / actividades que necesitaba boletos. También creamos un sistema de filtro en vivo para que los visitantes puedan profundizar en los productos disponibles para mostrar solo lo que les interesa.

DevOps

Albergamos We Are Mallorca, por lo que lo configuramos en su propio Servidor Virtual Privado ubicado en uno de nuestros servidores de hardware en Francia. Esto permitió que el sitio ejecutara múltiples consultas de base de datos por un valor de 10,000 por segundo, si fuera necesario, sin sudar.

Scripts

Eliminamos WordPress al núcleo e integramos la biblioteca de animación GSAP para algunos efectos extravagantes, como deslizar paneles y desplazar páginas hacia abajo. También inhabilitamos una gran cantidad de engrosamiento de encabezados que viene con WordPress, como los puntos finales de API.

Optimización

Utilizamos muy pocos complementos (como es habitual) y, en cambio, codificamos nuestra propia funcionalidad para el sitio web. Esto nos permitió mantener el código al mínimo y solo ejecutar las rutinas que el sitio necesitaba. También escribimos reglas de servidor web específicas para ngx_pagespeed y distribuimos el sitio en Cloudflare para que se cargue instantáneamente, sin importar desde qué lugar del mundo lo esté viendo el usuario.