January 31, 2007

Two New Sites and Engine Upgrade for ListingsTech

Filed under: ListingsTech,Programming — pj @ 11:32 pm

Did you know there are 76 homes for sale in the Arizona ARMLS MLS with:

  • 3 Car Garage
  • Horses Allowed
  • Kitchen Island
  • Private Pool
  • and RV Parking

I can run searches like this all day long on ListingsTech web sites. Not only can I run searches like this, but, as a potential buyer, I can register to have the web site notify me via email when new houses are added to the database that match this search criteria.

We just finished a major upgrade to the ListingsTech engine. In conjunction with the upgrade, we added support for Arizona’s ARMLS MLS and Vermont’s VREIN MLS along with two new customer web sites:

The ListingsTech engine upgrade includes several enhancements to the ListingsTech engine:

First, we’ve made extensive performance and browser compatibility enhancements to the default search results template. Here are some examples: http://www.billmagnus.com/searches/singlefamily.html and  http://www.flagrealtygroup.com/searches/singlefamily.html. Try viewing 50 or 100 results per page to watch the photos load incrementally – this takes some carefully crafted HTML on IE. Try resizing your browser window to see how many thumbnails you can fit. Getting this effect to work correctly on both IE and FireFox requires a small bit of browser specific JavaScript, but I think the end result is worth it. Most people won’t notice, but on IE I had to slightly degrade the drop shadow effect. On IE, I was using a CSS filter to create the drop shadow (see http://www.alistapart.com/articles/cssdrop2/). The effect was very nice, but it was killing page rendering times. Moving z-index calculations (see http://www.aplus.co.yu/css/z-pos/) from JavaScript into the engine also gave a small boost to the IE rendering performance. Finally, I added some carefully crafted database indexes to keep search results coming up fast for the most common searches.

For most MLSs, we have to download the listing images along with the listing data. We typically only get “full size” photos for each listing. We generate the listing thumbnails on the fly on the web server. I experimented with several different algorithms to get the ideal combination of image quality, web server CPU usage and image size. You see the results in the default search results template.

Next, click on a listing thumbnail to see an individual listing page (say, for example, http://www.billmagnus.com/listings/9936125-158557.html or http://www.flagrealtygroup.com/listings/2690439-170865.html). Here you can see the next group of enhancements. First and most obvious for those with monitors bigger than 1024×768, the default listing template has been enhanced with a new flow layout that allows the thumbnails to go into more than one column. Again, careful attention to the HTML allows IE to show the main page, then incrementally download the listing photos. By popular request, maps have been enhanced with the addition of a pushpin that indicates the listing’s location on the map. Finally, towards the bottom of the page, you’ll see the first part of our extensive support for listing “features”. Each MLS has a unique set of features that are allowed for a listing. We import all this detail and (subject to the customer’s preferences) show it on both listing pages and print listing pages.

If you click on Search All Listings (http://www.flagrealtygroup.com/searches/ARMLSSearch.aspx), you will see our enhanced search page. On the Quick Search tab, you’ll see a bit of AJAX at work in the City and Zip code fields. On the Power Search tab, you will see more JavaScript and AJAX. I’ve tried really hard to come up with a nice search interface that lets buyers find what they want quickly and easily.

Short list boxes are OK for short lists (see the State and County lists on the Quick Search tab of http://www.billmagnus.com/searches/VREINSearch.aspx), but I don’t like long list boxes that only allow you to jump down based on the first letter of the selection. This can be really frustrating for long lists like City and/or lists with lots of entries with the same first letter like Zip Code. Instead of a simple drop down list, for long lists like City, Zip Code, Subdivision and School Name, I’ve used an AJAX based “auto-complete” field that narrows the list of choices down based on all the characters entered. On the Power Search page, users can enter multiple values separated by semicolons.

Does anybody really like “Ctrl+Click” lists to select multiple items at once? I can’t think of any situation where this UI element is ideal or appropriate. First, the list almost always has to be scrolled - the user can never see all their selections at once. Next, this list shares the problem with drop lists where you can only jump down based on the first letter of the selection. Finally, the “Ctrl+Click” technique is tough to master and merciless if you make a mistake – all your selections will be reset in a blink of of an eye without any way to get them back. To get around these problems, some sites use the old “two list boxes separated by two buttons” setup. This idiom solves some of the problems of the “Ctrl+Click” list, but it’s still not easy to understand. So, on the Power Search tab, I’ve used lists of checkboxes that can be shown or hidden by clicking on the list’s title. The checkbox list offers all the functionality of the “Ctrl+Click” list in a much more user friendly manner – it’s hard to get simpler than a good old checkbox. Normally, I would prefer that all the checkboxes be visible from the start. Having to click on the list’s title adds a step to the search process. But, in this case, I’m hiding most of the choices by default. Most users will only be interested in a few of the search options and hiding everything but the list titles by default lets users quickly choose which lists they need. Once you drop a list down, the search page remembers the “list open” state when you return.

If you go to the Power Search tab and set the Search Type to “Single Family”, you’ll see the relevant feature selections at the bottom that let me search for features like “3 Car Garage” and “Kitchen Island”. This list of features varies by MLS. We map all MLS features into a common set (so we can run cross-MLS searches), but the MLS specific search page only shows features that are valid for the MLS and listing type.

Integrating maps with searching is old news at ListingsTech, but is is worth mentioning that the format used on our search pages makes it straightforward to add support for map based searches. Here is an example: http://www.georgiamountainhigh.com/searches/NEGCTIMLSSearch.aspx (click View County Map). The hard part is getting the actual map graphics and accompanying image maps created. We have some ideas for automating the creation of maps and, as we continue to enhance the core engine, map based searching is an area you can expect to see us to improve.

As always, there is a lot of additional functionality “under the hood”. For example, on the Flag Realty Group site, we added a custom database search features and lead management and tracking system. In fact, for Flag Realty Group, the back-end system is more important than the public facing web site.

Leave a Reply

Powered by Teztech