Travelsphere

Image is not available
Image is not available
Travelsphere for mobile

Creating a mobile view of a complex website is always a challenge. Using media queries I was able to tailor the site to suit the portrait layout, as well as changing up the way the user interacts with the content.

Image is not available
Image is not available
Travelsphere for tablets
Tablet view can either be landscape or portrait, the portrait view requires more re-positioning of content to make sure that everything is readable and accessible to the user.

In this example, the menu goes from being along the top, to a mobile view menu in portrait view.
Image is not available
Travelsphere for desktop
Although the desktop design has a fixed width content area, there are still some areas which stretch full-width and thus need to respond to screen sizes.

I built the site based on limited designs, replicating elements throughout the site to keep continuity and building Data Types in Umbraco to make it easier for our content team to update.
Arrow
Arrow
Slider

Travelsphere re-branded website: Sept 2017

I built the website using Bootstrap and plugged it into Umbraco CMS.

I styled it with HTML 5 & CSS with some Javascript (Jquery). This was part of a collaborative project involving the developer on my team and some parts taken on by an agency, namely the search feature.

View the website here >


Complex elements for different viewports

This element proved a challenge as it was designed by a print designer, which basically means I had to build something by considering the fact that the content editors would be unable to change the font sizes to make the content ‘fit’, as you are able to do with print. It also had to be responsive to various screen sizes and viewports.

It is a complex  mark up which I build using the grid system and data types within Umbraco, allowing the content editors to select the basic elements of text, images and links.

As the viewport reduces to portrait tablets & mobiles, the boxes are stacked differently and various elements are hidden to give more space to the design, removing clutter on the smaller screen.

Inspiration for Desktop
Inspiration for tablet
Inspiration for mobile view