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 ]

Top 4 Tips for copying and pasting content in a CMS like Squarespace

It's not an issue that's limited to only Content Management Systems. It actually seems to happen all the time anymore— this being the problem of copying content from one source, and pasting it somewhere else. Depending on many variables (operating system, the application you're using and apparently how the wind blows), copying from a particular source will sometimes carry all of the original formatting into the clipboard, and when pasting, all of that formatting will follow. 

In the dark ages when I was working on a PC, I don't remeber it happening as much as I see it happening on the Mac, but I do remember using Windows Notepad (app) all the time to clear formatting.

I work with clients all the time who seem to have issues with this, and many of them aren't aware of it.

In-fact, if you search the Squarespace forums for "<div id="_mcePaste">", you'll see that you're not alone with your pasting problems.

Squarespace Tip

If you paste anything in Squarespace's WYSIWYG edit window, and as you're typing a "New Paragraph"— if your cursor only drops-down to the next line, the same way that pressing COMMAND + RETURN will do (adding a line break, or a "<br />"), then chances are you're adding NEW DIVS ON EACH LINE. This happens when you've pasted content with a DIV, and you're actually typing within that same format, carrying it forward throughout the whole document.

This sounds trivial, but cleaning-up an entire page of messed-up content in Squarespace's HTML editor, or any HTML editor for that matter, is not a fun task. Especially when you have to remove line after line of divs, replacing them with <p> Paragraph tags instead. This is a nightmare.

I'm going to attack this from the Mac perspective, mainly because I'M A DESIGNER. We're supposed to all have Macs. (here come the comments...)

Here are FOUR tips to help you with your pasting issues:

1. Mop-up That Mess

Manually clean-up the messed-up content. OH— I just covered this, but that's one that certainly works.

2. Go Pro

Use an HTML Editor. When copying from any source, and you paste-into an HTML editor (also Squarespace's editor— in RAW HTML mode), all that will paste will be ASCII text. In-fact, it will probably be one big lump of text with all breaks and styling completely removed. Have no fear! You can either manually add Paragraph and Heading tags within the code, or switch to the editor's WYSIWYG mode, and blast through re-formatting this lump of lifeless text into what you intended it to be. 

3. Become a Clipboard Karatist

On Mac OS X, I've learned to use the "Paste and Match Style" method, which means the clipboard contents will always take-on the style of what's in-place when pasted. This works well in Squarespace (and apps like Gmail! It's imperative, especially if you build emails from 23 various links and references— MUCH LIKE THIS VERY POST!). I've learned to use the "Four-Finger-Salute" every time I paste. Yes, it takes FOUR KEYS to do this: Command + Option + Shift + V —which won't bring you into the realm of the Content Ninja, but after you learn this method you'll most-certainly become a Clipboard Karatist. (BTW: this doesn't work in Google Docs, and it angers me so.)

More information on the Paste and Match "Crane-Style" technique: http://thaweesak.com/2009/06/15/setting-paste-and-match-style-as-default/

"Get Plain Text" app (from Alice Development)

4. An App for That

Recently, I went searching for an app solution to this Clipboard headache, and I found one! There's an app in the Mac App Store called "Get Plain Text" (from Alice Development) that strips formatting/styles from clipboard text. And yes— it works! I have to admit, I found within a few days that my ability to take screenshots on my Mac stopped altogether from installing this app. I (quite publicly) complained to the developer, and as it turns-out, what I was doing was literally clearing my clipboard immediately when taking a screenshot, by selecting the "Automatically Clear Formatting" option. So there it is— a public endorsement and apology in the same post.

Grab "Get Plain Text" from the App Store.

Make free QR codes in 3 easy steps

I mentioned on Twitter today how easy it is to make QR codes, and after a few responses, I thought I would share it here.

What's a QR Code, and why would I want one?

QR (Quick Response) codes are growing in popularity. They are used to take a piece of information from a transitory media and put it in to your cell phone. You've probably seen QR Codes in magazine ads, on billboards, on web pages or even on t-shirts. Once it is "shot" with your mobile, it may give you details about that business, details about the person wearing the t-shirt, show you a URL which you can click to see a trailer for a movie, or it may give you a coupon which you can use in a local outlet.

Here's an example QR code (that I made in 3 easy steps):

My own QR code linked to this blog post. Scan it!

How do you scan a QR code?

If you have a smart phone with a camera, then your app store will most-likely have several free and premium QR apps available. Basically, just point your phone at the QR code, and the app will do the rest. It's that easy.

LET'S MAKE A QR CODE!

1. Create your content

Ok, this probably goes without saying, but in this example, our QR code will link to a web page, so build the thing you want to send people to, or find the YouTube video, etc. etc.

Not so fast there, pardner!

Since your site visitor will only be using their smartphone to scan your code, make sure that when they arrive on your landing page that they can view the content on the page. Flash content, for example, would be a bad thing for iPhone users, as the iPhone doesn't support Flash.

In Squarespace, I would suggest creating a hidden section for your QR landing page, your email campaigns, etc. This way, people can still browse to the page, but it's not visible on the site's main navigation.

2. Copy your URL in your clipboard and Visit bit.ly

Note:

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+

Ok, there are a few micro-steps there, but can you believe we're almost finished? 

As you are probably aware, bit.ly is a URL shortening service that does lots more than shorten URLS. They also offer free stats, tracking clicks over time, and a free QR code with each URL. Free is good.

You'll want to create a bit.ly account to track and check your history, so be sure you do that too.

3. Paste your URL at bit.ly and click "INFO PAGE+"

Whoa, that's it? I just created a QR code? Yes, my friend. That's it. Here's a link to my "Info Page+", if you want to see what's there.

Now copy and paste that image, run to Kinko's and print-out a QR code as big as a bus. The world will scan it.

(clicking this image will take you the the "Info Page+")

TIP: Adding a "+" (plus sign) to the end of any bit.ly short URL will link you to the info/stats page.

ANOTHER TIP: You'll see a URL under your QR code that looks like this: http://bit.ly/gqtY35.qrcode it's a link directly to a larger version of your QR code.

Quick Tip: Login, Log-on, Sign-in, Sign-on —Which is right?

In my last post, I mentioned a few Member Login tips, and when typing the word Login, I cringe a little. This is because in all my years of web content management (aka being a Webmaster) every organization used a different term.

Here's a content management tip that I've used for years.

When you don't know something, you ask a friend, right? But what about comparing web content terms? You ask Google. It's really true you want to find-out what "the world" thinks, and since Google knows everything, they have to be the best source.

Enter GOOGLEFIGHT.COM

At googlefight.com, you can compare the popularity of anything by waging a battle: MAC -vs- PC, Leno -vs- Conan even web content terms like Login -vs- Logon.

When in-doubt, pick a fight!