Altitour

Development & Design of a responsive travel blog & bespoke Google Map

A young couple plan to go on a trip around Europe with their 2-year-old son and want to keep their relatives up-to-date with the journey.
The blog needs to be easy to update on-the-go, whether it’s on a laptop with Wifi or a smartphone with mobile network.

Blog

WordPress was chosen as the platform to develop the blog – it is the most used Content Management System on the web, open-source, reliable and easy to customize to fit the needs of any client.
A WordPress plugin needed to be developed in order to handle the different types of posts used on this blog: blog post, map markers & countries. For each of these types, custom fields are available for the travellers to fill: latitude, longitude, whether the map marker has been reached etc.

Several post types & custom fields on WordPress

Several post types & custom fields on WordPress

Design

Simple & fresh, with plain colors.
The featured image of each blog post is graciously displayed, no matter its size.

A blog post, displayed on a laptop

A blog post, displayed on a laptop

Map

Javascript is used to handle the different locations provided via the administration panel. Each location is displayed with a customized marker, topped with a tooltip providing date and info on the location.
When the location is reached, a plain or dotted line helps to follow their journey (depending on the route).

Map & markers on a mobile screen

Map & markers on a mobile screen

Responsive

The website can adapt to any screen resolution. When viewed on a mobile, heavy elements like the background image are not needed and therefore, not loaded.
The green information sidebar is pushed to the bottom but remains accessible due to a new menu link.
Finally, images integrated in the blog posts are easy to browse as there is a full-screen, touch-enabled gallery.

New menu item to reach info at the bottom of the page on mobile screens

New menu item to reach info at the bottom of the page on mobile screens