SunriseReservations.com
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)
Instead, we decided to build our solution around the SVG open graphics standard, coupled with Javascript for scripting functionality. Native SVG support was already available in the latest versions of Firefox, Safari (Webkit) and Opera. IE was, as usual, behind the times, and Chrome had just been released, inheriting SVG support from Webkit. Once again, however, IE remained a challenge — the perpetual thorn in our sides. In the end, we settled on SVG Web, a Google-sponsored project to help bridge this compatibility divide. It (magically) allowed us to develop our plugin using SVG and Javascript alone, while the SVG Web goodness served up Flash/SWF/Actionscript equivalents to those browsers possessing Flash support while lacking native SVG support. It seamlessly allowed native SVG browsers to view the content directly. (Well, perhaps not as seamlessly at first… more on that in a future post, perhaps)
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.
While this approach still requires Javascript, as we are doing these operations asynchronously, this “Simple Map” option now achieves an even greater compatibility profile, no longer requiring either native SVG support or Flash plugin support. While iOS devices (iPhone/iPads/iPods) were already supported using native SVG, many Android devices are now well-supported using this simple-map functionality.
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.
By selecting and supporting SVG, Javascript, etc., we haven’t had to regroup to provide mobile support like those having invested in Flash. And we haven’t had to scramble because Microsoft abandoned Silverlight. This is yet another case where open standards and open source software (OSS) win out over other solutions.
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)
Recent Comments