Designing a real estate listing website

Designing a real estate listing website

After over 8 years, we’re selling our condo in Kenmore, WA. Never one to rest on my laurels, I created a website to highlight the incredible photographs taken by our good—and extremely talented—friend Dylan Greene. What started out as a simple site to display some photos quickly grew into an opportunity to flex some web-development muscle.

Take a look a the site (and if you’re interested in buying, let me know!):

A few things about the project were worth discussing, in reverse order of interest:

  1. One-page design – I decided to put all the content—photo tour, building info, and neighborhood map—on a single, long page. While the content could be logically separated into pages to create a mini-site, there is a reason for this unified design. Used for many infomercial-style products, this “funnel” approach introduces a product and builds excitement with testimonials, images, hints at pricing, etc. as the reader progresses down the page, but the call-to-action is at the bottom.
  2. Big photos – Since we had excellent photos of the unit, I wanted to highlight them. The 400-pixel wide versions that appear on the MLS and other listing sites weren’t doing these photos justice. In addition to the large on-page display, I employed the excellent Javascript tool called Lightbox to open each photo as large as possible. Besides the obvious “wow” factor from the page dimming and the photo expanding to fill the page, this approach lets visitors see the photo as large as possible. People want photos. Good photos. Big photos. I know because that’s what I want when looking at homes online.
  3. Google Map house iconInteractive Google map – Maps on websites are nothing new, but a map that not only conveys a sense of place but also nearby amenities are not yet commonplace. I hope adding a map and populating it with icons representing schools, shopping, and other points of interest will build excitement for potential buyers. Our condo really is located in a great place: equally close to I-405 or I-5, plenty of services within walking distance, and in a good school district.

Location, location, location

The third item deserves a bit more discussion. In the “old days” maps on websites were static GIFs; directions could only be text. In Feb. 2005, Google introduced a game-changer: Google Maps. Since then, maps could be interactive and allow users to zoom or pan the map intuitively by dragging and scrolling. And it was instant; no more clicking cardinal direction arrows or magnification icon to load a new map section or to zoom, a la Mapquest’s old interface. Directions, too, became interactive: enter a starting point and customized, turn-by-turn directions appeared. That was a huge improvement.

Map innovation grew as developers began playing with the Google Maps API. Custom map tiles, markers, overlays of data points, animation, etc. So when it came time for me to show the location of our condo, I wanted to add value to that map by answering visually the common question “What’s nearby?” Adding the basic map was a cinch: I signed up for a free Google Map API key and added a few lines of javascript. Bam, done. Populating the map with amenities, though, is a bit more complex. After reading some of the excellent documentation Google provides (and messing around in their API playground) I was able to write some simple javascript to place amenity markers on the map.

Limiting myself to some simple marker icons and pop-up info windows was more difficult than coding them; I wanted to add interactive tools like walking directions with line overlays and pedometers, bus routes, and other cool things. Doing so would have been overkill for a simple real estate listing site. But those technologies are there, available to be played with and mashed-up with other data.

Why bother with all this?

Someone asked me why I would bother going through the trouble to build a site like this when it’s the real estate agent’s job to sell the house. The answer is simple: most things in life are improved/expedited/accomplished when one takes an active role in them. That’s especially true of trying to sell your home in a down market. I’m fortunate to possess a skill set that comes in handy to help publicize our listing on the web. Every bit of exposure helps, especially when that exposure puts the home in a positive light, as I hope this site does.

Oh, and the final reason? I really enjoy web development.

  1. My first official "microsite" for QH As faithful readers of this blog know, I recently began...
  2. Web analytics: bounce vs. exit It’s been a while since I posted anything technical, so...
  3. Whidbey weekend The extended Woodard clan enjoyed another lovely weekend retreat, this...
  4. WJEA at CWU Okay, who can decode those acronyms? Let me help you:...
  5. More than one way to skin an e-mail account Today, I logged into my Gmail account. “That’s strange,” I...


  1. Jonathan Rundle

    You might have a future in development for real estate. Maybe.

Leave a Reply

You must be logged in to post a comment.