Ever since returning from a vacation a couple of weeks ago, I’ve had little time to blog. During that time, I’ve been crunching on a couple of time-consuming projects. One of those is the new Aldis Distributor’s Map. Here are the highlights:
Project Specifications
My client needed a web page featuring a world map and contact information for their various regional distributors. Starting with a clickable graphic of the six major world continents, we added a “tab” system underneath. Each tab represents one of the continents, and inside each tab are tables listing various regions covered by Aldis distributors.
In addition to the above, my client wanted to be able to add/edit/remove data for each of the tabs.
Implementation
I created the map using HTML, CSS and JavaScript (i.e. jQuery Tools Tabs). Sticking with those technologies means that it will work across all modern web browsers and mobile devices.
For the backend, I used WordPress Pages for the tab content. In addition, I used the WordPress Boilerplate plugin to allow for easy management of repetitive data used throughout the tabs (e.g. one company featured in several regions can be added as a “boilerplate” shortcode which can be added to multiple places while allowing editing in only one place).
Conclusion
The previous iteration of the Aldis Distributor’s Map was an Adobe Flash based app. My client couldn’t edit it, and it didn’t play on iOS devices. This new version is completely editable by my client, and “plays everywhere.” Now, rather than coming to me for updates, they are able to do those themselves. Given their rapidly growing distributor base, this is an ideal solution as they can quickly update their website to reflect their new alliances.
