In this post, I’d like to talk about our SunriseReservations.com site for online reservations. Specifically, I’d like to talk about our dynamic, interactive campground map technology and how we’ve been able to deliver such an advanced guest experience while achieving broad browser support.
First, let’s describe the functionality: We’ve tailored SunriseReservations.com directly to the unique needs of the recreational camping industry, with search criteria specific to RVs, Yurts, Tents, etc. This site selection interface is tied directly to our real-time inventory and site availability engine. (see previous post on dynamic site availability rules) As a guest specifies their criteria, our dynamic resort map is updated to reflect the site availability for the given search parameters. A given site can be selected either by clicking the site on the map itself, or from a corresponding form drop-down box. The guest user can then proceed to booking a confirmed reservation by providing the required information and providing payment or deposit, if necessary.
Early design decisions – open standards over proprietary plugins
Early in development, we determined NOT to build a dynamic map solution on proprietary plugin technologies such as Adobe’s Flash or Microsoft’s Silverlight. Either of these technologies would certainly have afforded us all the tricks to build the map interface we envisioned, but at the expense of the end user, ultimately. Now-ubiquitous modern mobile devices such as smartphones and tablets were a growing rumor when we embarked on this path, and we were not satisfied to require our desktop visitors to install a third-party plugin. (to say nothing of the horrid Flash performance on Macs and laughable of support for Linux users)
This solution allowed us to provide a native SVG solution for supported browsers and fall back to flash support, which Adobe claimed at that time was available on 99% of PCs. (I wonder what that number is now?)
Simple Map: Even greater browser compatibility
The second stage of our compatibility strategy came into play later, when we developed our “Simple Map” option. Because SVG is a well-supported open standard, with many tools and libraries available, we were able to leverage Batik, an open-source Java library for SVG manipulation, to dynamically generate a “static” image of the campground using the same site availability data available in our interactive map. This image generation takes place server-side, in response to the same site search query, only instead of dynamically updating the SVG data present in the DOM, a newly-generated image is created and returned to the browser.
With some additional browser detection, we also present the user with the most appropriate “default” view.
Another win for open source and open standards!
It might have been easier to pick a proprietary technology and run with it, leaving incompatible users (Mac, Linux, mobile) without an option, (or with a sub-standard experience, at least) but in the end, it just didn’t make sense. We set out to build the best online campground reservation system for our customers and it was important to ensure that every one of their guests have the best experience possible. And we continue to feel that the best way to serve the needs of campgrounds is to provide for the needs of their customers.
There’s no doubt we’ll have to continue adjusting to the shifting technology landscape, but I believe we can remain confident in our platform into the foreseeable future.
(We’ll try to expand a little more on this topic in future posts… perhaps dive into the SVG Web plugin and some of our enhancements)