The company


South African Travellers is a French tour operator with a focus on niche tours around South Africa. We redeveloped their website from the ground up.

The challenge


To build the site we used SAGE, Bootstrap and HTML 5 Boilerplate.

We used the default styles from Bootstrap, which means buttons, tables typogyaphy, and general CSS styles were applied. 

The client provided a wireframe built with Wix which we used as a reference point when creating our own designs. They provided a style guide too which helped to keep overall costs down due to fewer revisions being needed. 

We used the Modernizr module on the site which was included by using Bower. Modernizer detects the technology the browser is using, so that the site is able to dynamically serve the best content that the user can experience in the browser they use. 

Functionality

Masonry was used for the team page and the grid of tours – basically wherever there’s content in a grid.

Browsing the site is made simple thanks to the use of breadcrumbs and search pagination.

We provided the client with training on static pages, customizing slugs and so on. We created pages for them in English and they translated them, as well as the slugs. 

Forms

For forms we used our favourite form plugin, Caldera Forms. As with page content, we provided the forms to them configured in English, and the client just needed to translated them.

We also created a page for capturing reviews. Although the client initially wanted 50 fields we suggested one bigger text field with suggested questions to answer. The completed form creates a review in a “pending” state which the client then approves for display on the site.

Search

In terms of onsite search functionality, we created three filters for search using FacetWP and SearchWP: a price slider, a travel style selector and a trip duration slider.

Images

The upgrade to the WordPress core of v4.4 brought native responsive images which we used for the first time on this website to great effect.

The Icons for the tour categories/styles were taken from Smashing Magazine

Content

We created 5 custom post types for the South African Travellers website:

1 – Tours

2 – Accommodation

3 – Destinations

4 – Team members

5 – Reviews

Blog templates

With a blog being added to the site in the most recent changes to it, we’ve had to do some custom styling for various page templates associated with blogs. We styled author archives, category pages, categories with thumbnails, single posts, and of course the blog page itself, which you can view here.

The solution


SAT now has a WordPress site that is easy for them to update and maintain, and is also a breeze to navigate and search by French visitors looking to travel around South Africa in style. The use of Bower ensures that the site displays at its best for users on all browsers, while the image optimization in the new WordPress core ensures that only the necessary amount of bandwidth is used when the site is loaded on various viewports.

The result