Majorca's Secrets

Company:	Tekanero	Client	München Süd
Development:	03.2014	-	03.2016
Type	Web Site
Technologies	Joomla, JavaScript, PHP, MySQL, jQuery, Bootstrap, K2Store

Introduction

In 2013 the German publisher München Süd approached our business to develop a website for their new Magazine Mallorca's Schöne Seiten which was soon to be released.

Their initial requirements were relatively straight forward:

It needed to have a built-in online store.
It should be update-able without HTML knowledge.
It should have an interactive preview of the magazine.
Comply with the styling, given by the publisher.
Have SEO in place.

As the magazine continued to grow, so did the website. Being the trusted developer, I custom developed new components, aided in the transition of hosting providers and completed a restyling during a rebranding of the site for its 2015 release. This relationship continued for a couple more years and included the expansion to an English version of the magazine (Majorca's Secrets). The English Version required a new website which I developed as a clone of its German counterpart by adapting resources and providing translations where necessary. However, the German Site remained a priority and received minor updates till early 2017 when I focused my attention to my Role at ResMed. These included additions of user added content and the ability to purchase older editions of the magazine.

2014 - First Site

2015 - Redesign

2016 - English Release

The solution

Responsive Design

Being the sole developer with the freedom of choosing my own methods of implementation certainly has its perks, but also bears its responsibilities. This meant doing a lot of research into the use of most components in order to minimize the risk of issues further down the line.

CMS Selection - Joomla:

As the site required a cost effective solution, the main selection fell between Wordpress, Joomla and Drupal. While all three can be hosted on virtually any webhost and offer a large selection of affordable hig-quality extensions, they do differ significantly.

Wordpress:

Targeted at those who simply want to want to pick a solution and run with it.
This CMS heavily relies on its templates which allows for a fast and simple implementation initially.
However, this would have posed a substantial hurdle with requirements outside the templates scope.

Drupal:

It's more of a PHP framework than a CMS which favors large projects with heavy customisation and custom development.
While it would have allowed the development of a site that 100% adhered to the customers demand, it would have been too complex and expensive when compared to other solutions.

Joomla:

The CMS with the goldielocks effect. It's a CMS that utilises a very modular structure that encourages mixing of extensions in a Lego like fashion.
This design keeps extensions focused which allowed me to mix and match extensions for the exact purpose. Combined with a straight forward code structure of extensions, I was able to modify extentions as needed. The versatility came into further use during the development of custom components which were added over time.

User Features:

As a sales platform, the site had to make a good impression on its visitors. To achieve the following features were implemented:

Responsive layout (works on phone, tablet,...)
Custom design with unique look
Interactive flipping book
Customized online-store checkout
Fast loading times (optimized images and content)
Consistent design across all components (flipping book, online store)
Animated info-boxes
Built in contact form
User added content (German version only)
Publisher exclusive content (German version only)
Newsletter recipients content (German version only)

Challenges and technical details

Using a CMS for this website has posed it's own blend of challenges. Whiel off the shelf components can save time, they're always a compromise when it comes meeting requirements. Luckily the developer community has been doing a good job with rating and documenting available add-ons which has proven helpful during development. The main requirements followed the KISS (Keep It Simple Stupid) but also included:

Fast Loading times
Ease of adaptation/modification
Low likelihood of bugs
High compatibility
Just enough features to also be future proof
Use of most recent APIs (Bootstrap, jQuery) for future proofing

Template :

I chose Black & White 2 by IceTheme which came relatively close to the publishers original drafts. It's simple, yet effective code base ensured fast loading times while it also allowed me to do the necessary modifications to pin down the desired styling.

Modifications:

Custom: colours, menu, buttons, general styling, font.
Modified CSS and JS resource loader (remapped files and enforced reload if changes occurred).
Sticky footer for pages with little content.
Added background code (APIs, Referrer Tracker and others).
Modified blog page style as used on homepage.

It split the home page into small segments (articles).
This reduced the likelihood of coding errors.

Added custom jQuery popups

Administrative Features:

Over time I developed a number of additions which included:

Referrer tracker and partnership program

This is a feature that came in a later stage of the project and had the following requirements:

Allow referrals from newsletters.

Done via a URL parameter for each affiliate (usually their domain).

Track actual paid sales.
Allow simple use by affiliates (even those that forgot special URLs).
Allow affiliates to see their results - live.

The first 2 requirements alone eliminated most existing solutions. This was made more difficult as most rely of an external services. These posed privacy a concern (a sensitive issue in Germany) which was not improved by their use of external URLs which could trigger spam filters.

The solution, 4 custom extensions:

Logs visits on every page against a session ID.

This logged the HTTP referrer domain or the referrer URL parameter if that was detected.

Logs sales against session IDs.
Affiliates dashboard.

An unlisted page that allowed affiliates to monitor their own performance.
It used a unique key in the URL parameter for secure ease of access.

Admin dashboard that lists all affiliates and generates URLs.

Sales Summary

While the built in "order view" worked, it lacked a number of important features which were a genuine issue for the publisher. The remedy came in form of a custom component which read the K2Store filter sales by specific criteria, display all relevant sales at once and export them into Excel. Later additions included the ability to print labels for selected purchases as well as note their shipping date.

Sales Overview

Label Printing

Label print function in sales overview.
Labels are customized to suit the customers label printer.

Referrer Analytics

Analytics tool for affiliates.
This is custom page allows affiliates to see how many clicks and sales they have generated on the site.

Sales Overview and shop extensions

Custom Bank transfer notice to clarify instructions for end customers.

While the selected e-commerce plugin (K2Store) was relatively powerful, the publisher requested a number of extensions. These have proven to be the most technical challenges as they required me to reverse engineer the data structure behind K2Store's database tables and parts of its internal logic. Examples of work on and around the Store included (Hover over underlined items for more info):

Referrer Tracker:

Plugin which adds purchase No, to tracked sessions.
Count of referred orders and magazine purchases.

Customized Checkout layout.
Added order number in subject for bank transfer instructions.
Modified order ID count for English Clone shop.
Date Print function.

Database Query

As sales increased, so did the processing time to retrieve datasets. Eventually a point was reached where the PHP scripts timed out. This was solved by adding setting default filter presets (date range, order status), effectively reducing returned datasets and by adding additional indexes to the K2Store's database tables.