How We Built We Are Mallorca

The Mallorca web portal gets a fresh new look

Who Are WeAreMallorca?

We Are Mallorca is a web portal based in Mallorca full of information on things to do, see and take part in on the island.

They offer not only info on what you can do but also the means to book events and tickets for activities through their online system. As a new site they have slowly but steadily been increasing their available activities and also their share of the Mallorca events marketplace.

What was the brief?

The client asked that we create a website from scratch showcasing all the information on the island that they currently had available.

We were asked to build in a searchable filter system so that visitors could quickly and easily find what they were looking for. As an information orientated site it was also important to integrate videos and social media links for each of the places or activities that were featured on the site.

How did we do it?

We set about creating an easy to navigate URL structure so that Google could easily index pages as it visited them. This also would help the user navigate the site.

The filter system would be an AJAX (live) system that would refresh data without the need for a page refresh. We also gave the system live search functionality likewise based on AJAX. We would also build the pages around a slider in the header so that various events and activities could be shown off to the visitors.

The end result

Home on the island

The home page features a nice high impact image keeping the intro simple for maximum effect.

The objective was to very simply impress upon the visitor what the website is and what it does.

The Slider Pages

The listing pages contain featured events, places or areas in the slider depending on the category the user is looking at.

This together with the easy to use filter system allows for controlling the visitor’s journey as they view the site.

Product Pages

On the product pages we integrated a booking functionality so that visitors could book an event or activity without needing to leave and visit the providers website.

Also on these pages is a variety of information, links, location and rich media such as video to better inform the viewer about that product.

Tablet Pages

Like all websites We Are Mallorca needed to adapt well to different resolutions and device types. In particular the impact of the high resolution images needed to be just as good no matter what size device you’re looking at.

Mobile Mallorca

Over 50% of the browser market now views websites on mobile devices. If your site isn’t responsive (adapts to all types of resolutions) you’re losing business.

We moved things such as page menus and search functionality off screen until activated by the user and simplified the layout for smartphones.

We also integrated AMP (Accelerated Mobile Pages) technology so that Google would show the love and speed would be fast even for phones with slow connections.

The Nerdy Stuff

Stats

As we had carte blanche with this site (because it was a new build) we were able to structure everything from the ground up without having to compromise. Here is a sample of some of the things we did…

E-commerce functionality with live filter and search

We integrated WooCommerce’s system into the engine of the site to enable e-commerce functionality then stripped it bare so only the functions we needed were activated. On top of this we built a booking system as this was an event/activity based system that needed tickets. We also created a live filter system so that visitors could drill down into the available products to only show what they were interested in.

DevOps

We host We Are Mallorca so we set it up on it’s own Virtual Private Server located on one of our hardware servers in France. This enabled the site to run multiple database queries to the tune of 10,000 per second if necessary without breaking a sweat.

Scripts

We stripped back WordPress to the core and integrated the GSAP animation library for a few funky effects such as sliding in panels and scrolling down pages. We also disabled a lot of header bloat that comes with WordPress such as API endpoints.

Optimisation

We used very little plugins (as usual) and instead coded our own functionality for the website. This allowed us to keep code bloat down to a minimum and only run routines that the site needed. We also wrote specific web server rules for ngx_pagespeed and distributed the site on Cloudflare so that it loaded instantly no matter where in the world the user was viewing it from.