Researching Real Estate Listing Options

In most instances, Real Estate sites will subscribe to a listing/search service, and the service will allow them the ability to add the code to their site. There are probably two ways this is done. 

Embedded Javascript
- this is the preferred method because most developers will allow the site owner to customize the look & placement of the code. 

Iframe Solution
- this is probably the most common that we will run into out in the real estate world. Because basically, anyone can add an I-frame to a website. The biggest problem with using I-frames, is the fact that we cannot customize the look/design of the entire frame. This is why all many real estate sites will see that the listing engine page doesn't match the rest of the site. It looks like there is a hole punched to view the site beneath, and that is precisely what is happening.

In the BiffWard example below, you will see the top left portion is actually on bifward.com, and the center – content area is served up by an external service, or other creative workarounds to bring in Iframes.

On the following example, I added the ability for the cleaners customers to log into an external site, and using some special code we customized that Iframe to be a better experience. (Click on LogIn or Create Account) http://www.klinkecleaners.com/online-account/ 

However, the added drawback to using Iframes, is the fact that they are not responsive-friendly. In-fact, Iframes are responsive-nasty.

Their size doesn't adapt to the screen-width, so mobile/tablet visitors would need to have something else to view. We can detect these visitors and the screen size and offer a different component for those screen sizes, but it's usually a better solution to find a JavaScript component that is either mobile-ready, or something we can smack into place with a code-hammer.

You could Google to find software vendors that real estate agents are using… or you could just snoop-around a bit (STEPS BELOW)

 1. Visit the site and look/search for properties. 

2. Right-click on the search results area and VIEW FRAME SOURCE. At least in chrome, you have the ability to view the Iframe's frame :)

 

3. looking at the code, you should see references to the software that's being used. Especially in the I-frame examples, the end-user doesn't have the ability to take any of those references out. So the software vendor will obviously want to keep selling their product by listing their name/app/platform within the code.

 If the code that you see is a JavaScript solution, then the end-user is probably still obligated to keep references to their code within the site. (Additionally, companies will pay a premium fee to remove logos and links to the tech-provider's site.)

4. In this example, I would bet that Tucker has a national account with Sierra Interactive, and probably many Tucker agents can use Sierra? I'm not sure how these local/regional/national accounts work exactly, but I plan to get to the bottom of it. 

Update on Wednesday, July 17, 2013 by Alan Houser

I'm finding lots of useful "real estate software" articles on 1000watt.net [ I Googled ]

Pro Restaurant Site Tip: Adding Clickable Phone Numbers for Mobile Visitors

As Squareflair is in the process of churning out custom V6 sites, we've learned to focus a great deal on the mobile experience. 

The tired cobbler's kid's feet

Yah, so... our own mobile-awesome Squareflair V6 redesign is waiting in the wings. We hope to launch it someday soon, but our clients come first!

I've mentioned before here on our blog, with the launch of PunchBurger.com, the primary goals of a restaurant website should be the following: 

1. Show the menu.
2. Give customers a phone number to call.
3. Give customers clear driving directions.

4. DO ALL OF THIS FOR MOBILE VISITORS.

While building the latest Squarespace restaurant site for DeLullo's Trattoria ( delullositaliancom ), and testing on mobile, I came-up with a cool trick: to place the phone number in the site's navigation. Along with placing the phone number a little lower within the site, there's no way the number will be missed by visitors. 

To do this on Squarespace was actually pretty tricky, but only because I had to add a script/hack to the default link action that the menu applied. 

So here's how I did this...

[1] Add the phone number to the menu by using the create a new page menu function, and selecting the LINK icon.

[2] Fill-in the Configure Link name field (and only the name field) with the phone number. I added a little extra human messaging to keep things friendly.

What happens at this point, without extra scripting, is sort-of odd. On non-mobile/touch device (a notebook/desktop), the link refreshes the page. On mobile, nothing happens. —so onward with the script!

[3] The link element we added above is actually using the class ".external-link", and since we want to trigger an auto-dial from a mobile device, we can inspect the code and see that at a smaller size, also known in Responsive Design circles as a "mobile breakpoint", we can see the class ".mobile-nav" is being used in the main menu area of the site.

Here's the script used (change the "[ ]" to "< >")

[script type="text/javascript"]
Y.use('node',function() {
    Y.on('domready',function() {
        Y.one('.mobile-nav .external-link a').setAttribute('href','tel:765-292-2000');
    });
});
[/script]

This really should do the trick. If you have questions, just give a shout in the comments below.

Easy Image Pre-loader in Squarespace

This is an easy way to pre-load images on your site: just add the images’ paths to the DIV class, and call the DIV in your HTML.

In other-words, you will need to inject the "loader div" somewhere in your html. You can even stick it in the footer of your site, if you don't have "injection points" at your disposal.

Just add this HTML:

<div class="loader"></div>

...and add the following custom CSS (below). The DIV will not be visible but the images will preload nicely.

div.loader{
background:url(/storage/hover.gif) no-repeat;
background:url(/storage/hover2.gif) no-repeat;
background:url(/storage/hover3.gif) no-repeat;
margin-left:-10000px;
}