Home » Featured, General, Headline, Technical

A Better Way to Showcase Listings

20 April 2012 No Comment

Looking for a better way to let users filter through large amounts of information on your website? At 352 Media Group, we often need to take large amounts of information and find a way to present it that is not only visually appealing, but also easy for users to understand.

One of our clients needed to let his site visitors sift through dozens of apartment complexes according to different search variables. 407apartments.com, which lets users search through apartments in Orlando, needed an easy way to let visitors search apartments according to price, number of bedrooms, amenities, location, ZIP code, and more features.  We created a showcase feature that offers visitors a chance to easily filter through dozen of search results according to several different metrics, in this case, apartment amenities and features.

What It Is

Instead of other apartment locator features that make the user enter in all the parameters before beginning their search, and then limiting the parameters to just floor plans and prices, 407apartments.com displays all the different possibilities for the complexes featured on the site, letting each viewer build custom search results. By giving users options other than just rent range and the number of bedrooms and bathrooms, anyone using the site is able to filter apartments according to exactly what features they need for their next residence.

Once users begin selecting the appropriate information, the search results update immediately. Users no longer have to leave the page they are on to see all the results from their apartment search. 407apartments.com also features integrations with Google Maps to pinpoint exactly where each complex is in relation to other parts of the city.

Results are updated immediately as users select more search filters

This showcase feature offers an administrative area that allows site admins to easily add, delete, or edit listings. Each item within the showcase can have its own multipage community where visitors can search for further information without leaving the page. Each community also features an admin area where you can update the content and information as needed, and can feature its own SEO friendly URLs to take people directly to those results.


Each community has multiple pages of information you can include, giving users all the information they need without leaving the page.

How We Do It

We used client side code to display all the search results, offering users a better search experience as results are able to load more quickly than with server side code. Using AJAX (Asynchronous JavaScript and XML) programming to link the client side and server side code, the server side code filters the database of apartment information and return the results as they apply to the different search filters (lease term, number of bedrooms, pet friendly, etc.). We used Quicksand to change the search results after filters have been  applied, removing certain apartment complexes from the search results and shifting the remaining complexes to fill in the spaces left vacant by eliminated apartment listings.

The showcase feature also integrates with the Google Maps API to display where the apartments are located in relation to each other and areas of town. After entering the apartment complex address into the Google Maps API, the address is geocoded into longitude and latitude positions. Using the Distance From Location filter on the showcase page, once users enter the location from which they are searching, the address is geocoded and passed from AJAX into the database where all the client-supplied apartment information lives. The database uses the haversine formula to determine the closest distance between the two points and displays the results that fit within what the user is searching for.

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

Use a real name. You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.