Cavalletti is an equestrian classifieds website that was first established in 2000. The main focus of the site is the trade of horses, property and services between online users, as well as the advertising of equestrian events, training courses and centres and the submission of "looking to buy" requests. Esentially Cavaletti is eBay for horses. AB Web Developers have been involved in the development of the website since 2003.
The main Cavalletti website features a suite of advertiser-facing features such as full advertisement management, premium services such as advert packages or increased advert exposure, a messaging system and an advert "watch" system that alerts interested buyers to ads that match given filters.
As the original website was built in 2000, the current website was not mobile friendly or responsive. Due to its age, the current look was dated and had not kept up with design and usability trends, which had potentially alienated new visitors from participating with the website.
The client tasked us with creating a mobile version of the website that works on all current popular mobile devices (such as iPhones, iPads, Samsung Galaxy's, Sony Xperias, etc.). The mobile version needed to present the same amount of information on the adverts and listings as the main website, so the size of elements and spacing had to be carefully and thoughtfully designed.
To ensure user friendly speeds and loading time, the mobile version of the site was scaled down to just browsing, searching and filtering of ads, meaning that no user functions are available. The mobile version shares the same database as the main website to ensure that when an ad is placed on the main website, it will still appear on the mobile website.
We used the following frameworks to develop the mobile platform for Cavalletti:
- CakePHP 3.0 for the functionality behind the scenes
- Twitter Bootstrap 3 for the layout and responsive design of the website
- AngularJS 1.6 for the front-end functionality that provides seamless viewing of pages and scrolling lists, as well as swiping functionality
We cut out the clutter of the main website to focus purely on presenting the most important screens of Cavaletti - the advert listings and advert views themselves. We stuck closely to the look and feel of a mobile app to give the mobile users a familiar environment. Menus can slide out from the side of the screens, lists can be scrolled and content scales are seamlessly based on size and orientation of the mobile device. Buttons are then provided on the adverts which can initiate calls or SMS messages to the advertisers, if the advertiser has enabled these functions.
The functionality of the website runs on its own platform and simply interacts with the database to read required data. This results in a much faster performance while viewing on the mobile device, which in turn meets the expectations of mobile users who are used to data being quickly accessible.
We implemented a quick filtering system to allow users to get almost immediate results on a wide range of filters such as name, horse type, advert type, size and a variety of other filters. The filtering system also adjusts based on the advert category - ie. events will allow for a date filter or type of event, while an ad for a horse allows for size, colour, etc.
By creating this separate mobile website, the desktop version of Cavaletti endured no downtime and a mobile solution was reached quickly and efficiently, with a significantly smaller cost than rebuilding the original to be mobile responsive.