How to make your booking calendar work on smartphones

More and more customers make bookings using their smartphone. We can tell from the website traffic hitting the WebReserv system. The number of visitors using a smartphone or tablet is rapidly increasing.

This is true in particular for businesses offering tours and recreational rentals, such as bike rentals, boat rentals, city tours, segway tours and so on. In fact, we expect that smartphone bookings will outnumber desktop/laptop/tablet bookings for recreational rentals and activities within the next 18-24 months. If you offer recreational rentals or tours, it’s paramount that your website and booking system supports smartphones – otherwise you’re likely to lose business.

Fortunately, the new Booking Calendar 2.0 already supports smartphones/mobilephones. This article explains how you easily can modify your booking calendar to look great on smartphones. It does require some HTML/CSS knowledge, so if you’re not the person developing your website, pass this article on to your website designer.

A little background: Responsive Web Design (RWD).

Responsive Web Design, sometimes called RWD, is a relatively new approach used for website design. The idea behind RWD is to structure a website so it automatically changes the layout to match the device it’s being used on – taking advantage of a larger screen where applicable and realigning the content to to avoid side-scrolling on a smaller screen..

Here’s an example of the Booking Calendar 2.0, shown on a tablet:

Now here’s the same Booking Calendar, shown on a smartphone. Notice how it is the same information, but re-aligned to view correctly on the smaller screen:

As you can see in the two images above, the customer sees the same content on both devices, but when viewing the booking calendar on a smartphone, the rentals and tours align vertically to avoid side scrolling.

How to make it work on your website.

As I mentioned earlier, it’s very easy to make the Booking Calendar 2.0 work on smartphones. Go to the page that contains the Booking Calendar and look for the IFRAME code. The IFRAME code will look something like the code below. Depending on your editor, it may all be on a single line.

Look for the width setting. The default value is width: 800px. Change it to width: 100%; max-width: 800px;

After the change, the style should look like this:

Save the page and preview it on a smartphone – or you can emulate it on a regular desktop browser by resizing the browser window to make it approximately 300-400 pixels wide.

If you have content on either side of the Booking Calendar (side bar,  menus etc.) you will need to move that content away so the Booking Calendar can take up 100% of the width on smartphones. This may require more work, depending on the structure of your website.

Linking to the Booking Calendar on smartphones.

An alternative solution is to link to the Booking Calendar when your website is viewed on a smartphone while embedding the Booking Calendar when shown on a regular browser.

While this solution isn’t nearly as ideal as having the Booking Calendar embedded, it can be implemented in just a few minutes.  Best of all, you don’t have to get your website redesigned. It is the best choice to have your website redesigned for smartphones, but in the meantime the link option will offer your customers a convenient way to make bookings on a smartphone.

Implementing the automatic switching between the IFRAME and Booking Calendar link is fairly straightforward. First, you’ll need to add the styles in your stylesheet:

Next, add the two CSS classes, class=”bookingcalendar” to the IFRAME and class=”bookingcalendar-link” to the link:

That’s it. Your website will now show the embedded booking calendar when viewed on a full-size browser and a link to the Booking Calendar when viewed on a smartphone.

To read more about the new Booking Calendar, please click here.

To sign up for a free WebReserv Booking System account, please click here.

Follow me on Twitter @martinisraelsen.