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 ]

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;
}

Creating a Squarespace Login Template - The Easy Way

I've seen this question come-up on the Squarespace forums in the past— the need exists where people want to have a unique login template for their site.

Well, it's cake. It just takes a little juggling knowledge.

404 Error Pages

This same technique applies for your Squarespace 404 Error page (the page a visitor sees when a "page isn't found" because of a broken link). The difference is— the Login & Error pages have no "Page ID", so it's not really that easy to add a special design for 404 error pages. (like these)

Adding QR Codes to your Squarespace Site

Have you ever wondered why someone would ever want to scan a QR Code on a website?

I have to admit, I've always considered it a little silly to add a QR code to a webpage, and even have gotten into a friendly Twitter debate with friends on the topic. Adding QR codes to "objects" like posters, cereal boxes and even lawn mower boxes make total sense to me. 

My earlier opinion about QR Codes on web pages was— the user is already RIGHT THERE on their computer, so why would they ever want to take-out their smart-phone and scan their computer screen? 

That is, until a recent client gave me reason to re-consider my stance. A client wanted to add a QR code to their "map" page, partly as a novelty, but mostly so customers viewing the website's locations page would have a way to "send the map to their phone".  I caved; It's really not a bad idea. If the site visitor doesn't know what a QR Code is, they can ignore it— similarly, the way we all ignore barcodes on any product we consume. (Well, exactly like a product barcode in-fact). 

Earlier on my blog, I shared how to use bit.ly to create QR Codes. But I thought you would benefit from this brief tutorial to show you how I would add a QR Code to a Squarespace site.

The Great Bit.ly Redesign of 2012 :)

Bit.ly went through a recent re-design. To access the "info page" that contains the QR Code, just add a "+" immediately after the bit.ly URL to access that page. Exmaple: bitly.com/PrxlQa+

Understanding Image Ratios in Squarespace Slideshows

In the video video below, I walk my client through determining the "image ratio", using Picasa to crop images, and adding the newly-cropped images to the Squarespace Gallery + Slideshow.

Have you enjoyed using the Squarespace Slideshow component that's built-into V5's editor?

Rather than define an exact pixel size, Squarespace has decided that setting the "ratio" makes more sense, because the images already are set to proportionally scale in Squarespace's Photo Gallery, and the Gallery module is what feeds the slideshow component.

This concept works well for "standard" photos that would come out of a camera— photos that use generic/standard size ratios. However, when using a Squarespace Slideshow in custom locations, where a pre-determined "target size" is important, it can be a little tricky.

In the client-site example on my video above, I've incorporated three Squarespace Slideshows on the same homepage. All three slideshows are the same size, but as my client quickly learned, using THE EXACT image size is important.

Here's why this is important:

It's fantastic that Squarespace's code will auto-crop and re-size the images to fit our areas, and they won't distort the aspect ratio, but if the images are larger than the target area, there is a great-deal of unnecessary overhead when loading the images. It's totally possible that the image files-sizes could be 10-20 times larger than they need to be. Pre-scaling your images will greatly help you! 

(*NOTE* This changes in Version6, where images are sampled at multiple image sizes on the server-side)

Here's What.

If you've used the Squarespace "Slideshow" component, you might already know that configuring a custom "image ratio" is a little confusing, so in the video, I'll walk you through determining the "image ratio".

Do I need to learn Photoshop?

No. I work with many clients who wish to swap-out images on their websites, but either they don't want to invest in the cost of Photoshop, or in-reality— learning how to use Photoshop for simple edits can be daunting. 

There are hundreds of apps, and even websites that will allow you to crop and re-size images, and after further hunting for "an ideal app", it looks like Google's Picasa (free app) will be the easiest to use, and is available on both Mac and PC.