Villa Secrets JQuery Mobile Website

By Nick Ray Ball 3rd March 2016

VS Mobile is a stunning mobile website, that looks and functions like an App, created on the words most stable mobile platform JQuery Mobile.

This project is 75% complete.

When complete, the cost for adding VS Mobile to Cape Town Luxury Villas is $8,700.

Welcome to ‘VS Mobile’

The mobile website that looks and functions like an App.

The best way to see VS Mobile is to look at www.VillaSecrets.com on a mobile, you cannot see it by making the browser on a laptop smaller, as it uses code to recognise and only shows to mobile devices.

VS Mobile was first sketched out in 2013, we wanted a complete different website for mobile that ran from our existing database, which was simple, easy to navigate and did not use much bandwidth.

We started work on the engineering proper in June 2015 after establishing that the best framework by a county mile was JQuery Mobile, which was tested and works on dozens of devices and had a gallery presenting many examples from which to seek inspiration.

Below we see our current mobile homepage on the left and on the right (and in the graphic above) is the next update. Currently the top image changes every few seconds, but we will be making this into a top 10 villas display and staring with the logo. Then sliding in the other text elements and then photos. Working on the 8 second rule (On average one had only 8 seconds to impress the client, before they move on to another website).

In addition, we see a link to the ‘Villa Secrets Magazine,’ which will be similar to http://blog.villasecrets.com. A WordPress blog which works well on mobile, this blog/magazine is the common denominator between the desktop website and the mobile site.

Navigation

In the graphic above we see the options: Top 10 villas, Search, Locations, Collections & VS Magazine as the perfect launch pad for the client, whichever direction the client takes, it delivers them to our product pages. The homepage is in effect 6 different ways to navigate to our products plus 2 contacts. Whatever button is pressed or picture clicked leads to a product or contact.

In making this navigation for VS Mobile, we lined its simplicity so much that realised we needed to change the navigation on the main Villa Secrets website. Which when updated will only offers ‘Search, Locations, Collections or Blog/Magazine. Due to thin, in a way one could say that Villa Secrets is a ‘mobile first’ website, as it was completely redesigned after we completed VS Mobile V1, following the simplicity of the mobile version.

Below we see a graphic that shows the current options from the homepage, the Search Locations and Collections.

In the second picture we see the advanced search, that askes for dates and delivers villas that can be booked on line.

It the third picture we see the results of clicking ‘Locations’ which offers collections of locations and individual suburbs. Only showing the popular options. Displaying both ‘online’ and ‘bespoke’ (not on line/call or email owner) villas.

In ‘Collections’ we see groups of villas such as ‘on the beach’ and ‘family villas’. Both Locations and Collections are simple one click navigation pages to the product pages.

In addition to the navigation options from the big buttons on the homepage one can use the navigations from the static (always there) top right menu button. Which mirrors the homepage options and then offers Contact, Enquiry and more options. See picture 3 and 4 below.

In addition to the many ways to search for product pages there is always a ‘Call Us’ and ‘Enquire’ buttons at the bottom of the page.

Importantly please note the button at the top left, which either says ‘Back’ or ‘Home’ this is the primary navigation past the home page. As we use simple ‘Forward <|> Back’ navigation

In the graphic below we see this in practice, from the home page the first button leads to the search page. Then once the client has searched he/she arrives at the product page. Once at the search results page to view individual villas, and details we use a simple back and forward option to see the villas and return to the search results page. Click a picture to go forwards and arrive at the product page, which gives the option to swipe and look at all the pictures. Or scroll down for descriptions and details.

If the client likes the villa they can enquire, but if they wish to look for more villas they just click the ‘back’ button and they are on the search results page again. Then one goes forward and back through the portfolio until the client wishes to enquire. All the time having the back-up of the menu at the top right.

Each picture that is seen has been resized to 300px wide and optiomised to use minimal bandwidth. There are also some advanced options for agaents to use.

Currently (as of 2nd March 2016) we are 75% complete, all the functionality we see above is done, the connection to the PMS is complete and we are looking and behaving more like and App than a Mobile Website.

In the immediate developemnt que we will be working on the product pages, adding the Magazine button, which takes us to our WordPress blog and most significalt we will we adding a top 10 countdown on the homepage. Which will start with our logo.