Throughout 2010, we've slowly rolled out our latest masterpiece: it's the new version of our custom IDX (v's 3.0, 3.1), and it is awesome!

However, for our clients who already love their existing REW site and its v2.x IDX, the choice of whether to scrap their old IDX for the new one, is a big decision. So, this page will describe the significant differences introduced in the new IDX platform.

Better, Flexible Search Results:

Your users can customize their browsing experience by changing the format of search results (thumbnails, list view, or mapped).

A Better Registration Box

If you're a fan of forced registration (it is now within your control - see below), then you'll appreciate the new registration "page". It's a thickbox popup now, which means that the user gets a glimpse of the page that they are trying to view, in the background, as they think about whether they would like to register. We think that they are more likely to register, with that little bit of a tease.

More Compelling and Intelligent User Account Control

As soon as the user encounters listings on a site with IDX 3.0, they see an option at the top to "Save this Search", even if they have not registered. This option is present at all times, above the search results.

Contrast this with our older IDX interface, which only presents the "Save search" option on the search form, before the user has seen any properties before they know that the search criteria they entered will return viable results. With the option now appearing alongside the results of a search, users are more likely to want to save the search. And we all know how important that is, since it brings your website into the users' email inboxes.

The system for bookmarking favorite listings is also improved, with fewer clicks required and a more intuitive functionality.

Attractive, Photo-Friendly Details Pages

The new property details pages are bigger now, allowing for more photo space and a grander impression.

Highly-visible call-to-action buttons encourage your users to request more information, bookmark, etc.

Users can also "share" each listing via their Facebook and Twitter accounts, with the snazzy new icons we added.

And finally, the most important listing criteria are writ large on the new pages (the number of bedrooms and bathrooms, the square footage, and the lot size). This is much more friendly to the users who want to scan LOTS of properties on your site.

MUCH More Backend Control for the Admin

The IDX Builder

Now, you can set the default parameters that appear pre-selected in your search, yourself, anytime. Do you want the property type pre-set to "condos"? No sweat. Or maybe you'd like to get fewer inquiries for $150,000 properties — just change the minimum default value on the price range selector. Do you think nobody cares about elementary schools in your region? Leave that selector out!

You control the default "View Type" (thumbnails, list view, map view), and the sort order ("highest price to lowest" or vice versa).

You can also change your "cities list" (the cities whose properties are searchable on your site) anytime, yourself. This used to be something our programmers had to do.

Another popular addition is the ability to manage the registration options! Because it's such an important part of lead generation, the registration needs to be something you can modify whenever you want. With this new feature, you have a lot of options:

• Choose whether to require registration to view property details pages
  • "Yes, always"
  • "Yes, but make it optional"
  • After [x] number of properties have been viewed
• Choose whether to require the user to use a password (if this is disabled, anyone who fills out your contact form, thus giving you their contact info, can view properties, save searches, etc.)

And finally, you can now edit the textual/image contents of the registration page and the login form!

Listings Snippets are now 100% Easier

The best thing about an integrated IDX is that you can setup "filters" or "preset searches" to display dynamic lists of properties on your pages. In other words, you can tell the IDX to put listings over $1.5M downtown on your "Luxury Properties Downtown" page. That is not new to IDX 3.0, but it is now MUCH EASIER. Before now, you had to get your hands dirty in code, which (for our typical client) meant hours of confusion, or paying our programmers to set up these "snippets" for you.

With IDX 3.0 however, this is as easy as performing a search on your own site, then saving it as a snippet, and pasting it onto a page. No clunky code, no arcane abbreviations for different fields, etc.! A very complex drilldown of criteria (short sale condos under $350k, downtown, with pools, and close to Downtown Elementary) now takes one minute to setup.

Custom Searches

This is a neat feature. Imagine sending a search results page to a lead, with the properties filtered how you choose, and with a "refine search" bar that allows them to filter the search, but only according to the criteria you specify.

So for example, if someone's grandmother needed a little cottage by a lake, you could send her a link to a pre-set search, with "lakefront: yes" and her price range already selected and out of sight, leaving only a few search options (or none) for her to change.

It's similar to how you could already create saved searches for users in the older IDX; but now, they can refine the list as they view it, and you can also control the terms of the refinement.

New Map Search Tools

The map search has come a long way. With the new radius tool, polygon tool, and "Search in Bounds" option, the map search is extremely useful. And, as explained below, these new features make it SO EASY for you, the admin, to create very finely-tuned geographical searches (v. 3.1+ only*).

• Polygon tool - This gives complete control over which geographical area is being searched.
• Radius tool - This searches for properties within a certain distance of a given point.
• Search in bounds - Searches for listings in the area shown by the present map pane (no more "clustering").

The users will enjoy these tools, but where they really shine, is when you're creating a search to send to a user, or when you're creating a listings snippet.

For example, let's say you have a page with information about a certain golf course, or lake, or college. Using the radius tool, you can easily create a dynamic list of properties to show on that page it would show all properties within a certain radius of that location. Zing!

Or, let's say your board's list of "areas" is not as fine-tuned as the list of neighborhoods that your users want to search for. Perhaps the IDX feed only drills down as far as "downtown", but there are 20 distinct neighborhoods downtown. Using the polygon tool, you can specify exactly which coordinates will be included in your "Commercial District" search.

Enhanced Performance (Load Times, etc.)

I don't know what to say about these (I'm no code expert), but I know that COUNTLESS hours went into developing improved markup and processes. No more inline Javascript! (It's in the bottom, now.) And we "reduced the number of external resources"! That sounds important.

A New Kind of Search

(Note: The following feature is not relevant to the re-releases of LEC's 2-4, and should be ignored unless you have a template.)

With IDX 3.0, your leads see listings right away, without having to fill out a form. They see all of the listings that match the criteria you set as defaults in your backend. They can use the "Refine" bar to narrow things down from there.

While it's true that most of your users will want to filter the list according to their price range, etc., it is also clear that your users are excited to see inventory as soon as possible. This is especially true for those users who are shopping for which real estate site they will commit to using, over several months of searching for a home. Our new IDX shows inventory right away (in a pleasant, professional design), so that more users stick around.

*A note on IDX versions:
IDX v.3.0 was released earlier in 2010, available on LEC5 or with any of the new "3.0" templates. In this October promotion, however, the version being released is IDX 3.1. The additions since version 3.0 include:

• Ability for user or admin to save searches based on polygons or radii.
• Performance (speed) improvements
• When the admin views a lead's "visits", they are organized by "time" so that you can more easily see the order in which the lead navigated the site's pages
• Slightly improved backend interface for viewing leads' saved searches (more information is included at a glance)

So, I've provided nine examples below of quick (i.e., inexpensive) design work ideas that will improve your site's content.

Creating Styles for Common Situations

You don't really need to know about HTML or CSS to make use of these ideas. At the bottom of this post, I've written about how you would implement these styles (once they've been created by a designer) in your content.

#1 - The Callout Div

Estimate = 1 hour design

This is simply a way to make certain paragraphs, or groups of paragraphs, stand out (see image below). The text is formatted in a coloured box, making your content appear more "magazine-like" and giving prominence to certain elements. This is the easiest way to make a "call to action".

(Note: All Real Estate Webmasters sites (except the oldest ones) come with two pre-made callout div classes: "highlight" and "important", which can be found in a drop-down in the CMS editor. Contact Support if you need help with these; but read the bottom of this post, first, please.)

#2 - The Aside

Estimate = 1.5 - 2.5 hours design

This is similar to the "callout div" mentioned above, but its function is usually different. As its name indicates, it is meant as an "aside", meaning that it's not absolutely integral to the main content, but nevertheless provides its own interest.

On a real estate page, an aside might be used to mention the agent's own approach to the type of property being discussed (like, on a short sale page), or it might describe a colourful piece of history on a community information page. Or, it could be used on the home page (and others) to describe the agency's rebate program.

Here's how it might look:

#3 - The Pull-Quote

Estimate = 1-2 hours design

A pull-quote is a style for making certain text stand out on its own, usually floated within the main text, larger and more visible. You've seen the pull-quote in magazines and certain newspapers, and as a reader, you know that it's effective.

"But, effective for what?"

Well, one thing it does is attract readers who would not otherwise take the time to read your page. Before they move on to other pages (or hit the back button), they can't resist scanning the pull-quote (we've all been trained to recognize that its contents are usually interesting), and that's your opportunity to grab them with something exciting, or super-informative, or funny, controversial, or bizarre.

Here's how one might look:

#4 - The "List" Callout Div (AKA the "Featured Areas Callout" at REW)

Estimate = 1.5 to 5.5 hours design

If you have a list of neighbourhoods, or a list of your office locations, or a list of local parks, it might look like this in your content:

You might know enough HTML to have created a table, so it looks more like this instead:

But HTML tables are a crude practise, not exactly scalable, hardly reliable across browsers, and, let's face it, the simple table I've posted could look better.

With some simple CSS styles, a designer can give you the option to present lists in a more attractive, more useful, more professional format. Here are some examples of styles in ascending order of complexity:

(I know, the following one looks terrible, but it's a good example if you ignore the awkward spacing.)

Remember, once a designer creates a "class" for your callout list, you can use it as often as you like, with different items included in it each time. You simply need to be able to copy and then modify the designer's sample snippet in your backend. (This is really easy if you take the HTML, paste it into an HTML editor (there are free ones online), change the links, and then save it under a new name.)

#5 - Photo Placement Styles

Estimate = 1-4 hours design

When you place a photo in your content, it won't have a border, or a caption, or have text wrapping around it, unless you really know what you're doing. Getting the text to wrap around the image is easy enough with an "align" or "float" attribute (see my tutorial here), but if you could pay a designer less than $200 to make it so that every image you add to your content is presented a little more professionally, why wouldn't you?

Here's how an image looks without any styles it was just thrown up on the page:

Here's how it looks with a very simple border attribute. If ALL of your images look like this, it tells site visitors that you are professional and detail-oriented.

Here's an idea for a something a little more sophisticated, with a caption. It looks good, yes, but the caption option also gives you a lot of flexibility in how you develop your content. Have you ever seen a photo and been frustrated because you wanted more information about it? ("Where is that?!") Anyway, you get the point — this is one great way to dress up your community information pages.

#6 - The Call-to-Action Graphic

Estimate = 2 to 10 hours design

Does your body content area look like a plain ol' rectangle? Maybe you have a flashy design in the header and the sidebar and the footer way down below, but in the area that users are supposed to spend time browsing for info, it looks like a legal document? There's nothing like a graphic in the content to make a page look more interesting.

Even more beneficial than having visual interest for its own sake, is to use it to draw a user's attention in order to get them to take a certain action. For instance, you might write a lot of content about a certain neighbourhood in order to build the user's confidence in you and to keep them on the site. But we both know that what you really want them to do is to go to your contact form, or your advanced search form (where you have registration forced after the user views 3 details pages). With that in mind, it makes sense to compel the user to notice a link to your contact form, or to your search form, and the best way to do that is with a graphical call to action like the examples below, integrated with your page's text, or in the sidebar beneath the navigation:

#7 - The Support Heading

Estimate = 1 hour design (or less)

This is simply a style for a smaller heading that closely follows the main heading.

Most people achieve this effect with an H2 following their H1 (or an H4 following an H2, etc.). However, your content styles are probably setup so that there is a lot of space between each heading, so that the two headings seem too detached from each other, and the result is an opening to a page that looks a little, well, hacked.

A support heading style might look like this:

#8 - The Deck (aka "Standfirst")

Estimate = 1 hour design

You've seen this in magazines, too. It's a style for some text beneath the heading(s) and before the bulk of the text, and it stands out a bit. It's a kind of "teaser", meant to build curiosity.

Here's how it might look on a page

(Disclaimer: I'm told by our guy with a print background that the word "deck" is being mis-used, here. I must stand corrected, as I am just borrowing vocabulary from a page submitted to me by a designer.)

#9 - Cleaning Up Your Layout

Estimate = 2 minutes to 1 hour per page

A large number (most) of our clients develop their own content, which is admirable. However, I believe that most of those do-it-yourself-ers end up with ugly body content that doesn't fit in properly with the high-end design of the rest of the page.

Sometimes it's because the content was created in Word or FrontPage, and then copied into the website without regard for the extraneous code that is generated by such third-party programs. For instance, a page will be written in Word, with font styles that look appropriate in Word, and with spaces used to align text ("It looked good when I wrote it in Word!"). This doesn't translate properly into an HTML page (which is what your site's pages are). In such cases, you need someone trained in code to go through those pages and to remove the extra stuff, while maintaining the elements that do belong on the page. (Hint: You can also paste your content into Notepad and then paste it back into your web page editor to remove the code then you will simply apply your formatting with the tools available in the editor..)

Other times, our clients are simply not able to create an appealing look for their pages, and they center things which should not be centered, use too much bold or italics or capitalization, create ugly tables, etc. Our designers will either improve the appearance of your pages (guaranteed), or they'll tell you that the pages look great already and you won't be charged.

How To Implement CSS Classes

Now you have some ideas for how to improve your body content. But after the designer creates a style and shows you an example on a test page, are you going to be able to use the style in your content, yourself? Don't worry — it's pretty easy. Read on.

The designer will create a "class" and will give it a name. Then you just need to go into HTML mode. Keep reading below for more specific instructions.

Most of the examples I've listed above may be summarized as "putting a class on an existing element", and I've elaborated on this below. However, the "Aside", the "Callout List" and the "Call-to-Action Graphic" are implemented differently this will be explained by the designer or by our Support team, if you ask.

Adding a Class to Text, Headings, or Images

Once you're in HTML mode, it's easier than you might think. You'll see your headings and paragraphs, surrounded by "tags" that look like this:

• Paragraphs will have <p> before them, and </p> after them
• Headings will have <h1> before them, and </h1> after them (smaller headings will use <h2>, <h3>, etc)
• Images will look like this: <img src="/images/my-cat.jpg" /> (there might be a lot of other stuff inside the angle brackets, too, like height="340" or style="float:right; border:1px")

Here's what you do. Find the <p> tag, or the <h1> tag, or the <img /> tag that is associated with the text or image you want to apply the class to. Then you just need to add this to the tag:

class="name"

The "name" will be whatever name the designer gave to this style. For instance, you might be using class="red-highlight" or class="captioned".

So: <p class="teaser-deck">Welcome to my fantastic site about Phoenix real estate through the eyes of a cat.</p>

There should always be a space before class, and there should be a space after your class too, unless there is an angle bracket. The following are incorrect:

• <pclass="highlight">
• <p class="highlight" >
• <imgclass="highlight" src="/images/my-cat.jpg" />
• <img class="highlight"src="/images/my-cat.jpg" />

If there are other attributes in the tag (such as how the <img /> tag also includes a "src" attribute), you needn't worry about where your class appears. In other words, both of these will work:

• <img src="/images/my-cat.jpg" class="highlight" />
• <img class="highlight" src="/images/my-cat.jpg" />

If you doubt your abilities to implement the class attribute, don't worry. You can ask the assigned designer how to use the particular style class they created for you, or you can email our Support team with your questions.

"I don't feel confident that I can do this"

If the idea of going into HTML mode makes you anxious, there is an alternative - it just requires a little bit of programming time (extra cost).

Have you noticed the dropdown in your page editor with the options "Highlight" and "Important"? Those are two pre-made CSS classes that you can apply to blocks of your text without going into the HTML view mode. We can do the same with any other CSS classes you have our designers create; we would add the option to the dropdown, and you would just select the paragraph (or heading, or image), and choose the appropriate class from that dropdown.

You should allow for about 30 minutes of programming time, if you will be requesting that your new CSS class should be added to the editor's dropdown.

Just to be clear: Anyone who buys even the most basic template setup will now be able to upload their own photos to their slideshow, change the order, and even make the images click through to other pages. Here's how the slideshow manager looks in the backend:

Some of you couldn't wait for this, and you paid us to do a custom implementation on your site. (Maybe about 8 of you in the last three years.) Hats off to you, o you pioneers.

How it Works

As you can see, it's pretty simple. You just upload images to the manager, and then drag them into the order you want the slideshow to display them in.

Don't be fooled by the "EDIT" button you can see in the screenshot. You have to crop the images to size yourself, before you upload them. We've included some information about how to edit the photos in the tutorial.

Is the Slideshow the Same on Every Page?

If you order the basic slideshow manager product, then the slideshow applies to all CMS pages. You can't make a different slideshow appear on different pages UNLESS you request it, and approve an estimate of about one hour of custom programming time. If you pay for that extra hour (estimate), then you can have different slideshows on different pages!

Questions and Answers:

Q: Why is there an option to make the images clickable? Why would someone click on my photo of the city's skyline?
A: Some of our customers are going to do stuff like this:

• Take a screenshot of foreclosure listings
• Pay a graphic artist to turn it into a call-to-action with "See Springfield Foreclosures!" written on it
• Upload it as the first image in the slideshow and link it to the foreclosures page
  
  (This will be the cheaper version of high-end CTA slideshows like Mike's, Mark's, and Drew's)
  
  (Note the possibilities are endless, here. You can also use a photo of your team with "Find out why our service is different" and link to your bio page, ETC.)

Q: Can I have different slideshows on different pages?
A: Only if you order a customization that takes about an hour to implement ("Can you please make it so my slideshow manager is 'per-page'?"). I know I would do that, if it were my site. Imagine area-specific photos on the neighbourhood pages!

Q: Does the slideshow manager allow you to change the time intervals between slides?
A: No, it doesn't, but you could ask us to change the interval for you in a custom project. Wouldn't take long.

Q: So how can I get the slideshow manager for my existing REW site?
A: It's a $300 product for those whose sites were installed before we made this a standard of our sites' CMS's. Post in our Work Orders Forum or email Sales and ask for it!
Note that the $300 is only for a standard implementation on an applicable REW template and does not account for time needed to make the product work with existing customized elements.

Q: I already have a REW site, and it doesn't have a slideshow manager. What gives?
A: We are only including the slideshow manager in our installer henceforth. We can't go back in time.

Q: My site went live after you announced this! Shouldn't I have the slideshow manager?
A: Your site was installed several weeks or months before it went live, so that we could prepare it to go live. The install date is relevant here, not the live date.

Q: My images look grainy/blurry. Is there a problem with my slideshow manager?
A: The slideshow manager already works properly, in terms of correctly displaying the photo you uploaded. If you're having problems with the images' display, you are not preparing the photo correctly. Support of this product does not include helping clients with preparation of the photos.

Q: The slideshow is not presenting the slides in the order shown in the slideshow manager.
A: There may be an issue we need to address. Please contact our customer support team.

Q: How many images can I include in the slideshow?
A: There is no limit, but it may slow your pages' load times if you get excessive.

What's an "Area Page"?

This is a term we use loosely to refer to a page that describes a relevant, name-able real estate market that is worked by the agency that runs the website. Sometimes it describes a certain property type ("Phoenix condos"), and sometimes it has a broader scope ("Tempe real estate").

Such a page will need to have the following characteristics:

• It must be optimized, to attract relevant traffic (people Googling "phoenix condos")
• It must have relevant listings (or a visible link to them), to elicit registration
• It must have as much quality text as possible, to build a user's confidence and to keep them on the site, and to house the optimized elements

Having Listings on the Page

For the page to have listings that are relevant to the content (Phoenix condos, or listings exclusive to a neighbourhood of Tempe, for example), usually requires a custom IDX solution. (Many agents' sites merely have an iframed search form, so the user has to fill out a search in order to see listings relevant to the page — and they may still fail to find them.)

At REW, we create "listings snippets" that show whatever category of properties is relevant to the page. If a prospective lead searches in Google for "Phoenix condos" and is brought to our Phoenix condos page, we want to show them Phoenix condos, right away!

If you have a custom IDX solution on your website (2010 or later), you can easily create listings snippets for all of your pages.

(Note: If you can't put relevant listings directly on the page, then you can still apply the principles described in this post. In place of the listings snippet, you would create a compelling, visually-separated call to action (see below) that links to your inventory, wherever it may be.)

How to Organize the Page

You may have seen our standard area pages already. They have a heading at the top, followed by a small paragraph of text (which also contains a special link), then the listings, and finally a larger chunk of text below - and usually there are calls-to-action in one or two places on the page. To summarize: there is only a small amount of descriptive text at the top, followed by listings, and then the bulk of the text. I'm going to discuss the rationale for this organization, and will provide a bit of technical assistance so you can create your own area pages in the same way we do it.

The rationale goes like this:

• The users who are "readers" need to be aware that there is textual information available on your page.
• The users who are "shoppers" are more fickle; they want to see properties NOW and they will leave your page if they don't see them right away.

We need to accommodate both kinds of users. The listings snippet must be visible to the shoppers without their having to "scroll" down the page. Fortunately, the readers will usually be satisfied with a small bit of text, as long as it directs them to a larger bit. The small paragraph "directs" them to the larger amount of text via a "Read More" link, which is just a link that scrolls down the page for them (a "same-page" link — see below).

Creating the "Read More" Link

This requires a little bit of work with the page's HTML (click on the "html" button in your CMS's page editor), but it should be easy to follow these directions:

Let's say you wanted this:

Here's the HTML that would produce the example above. I've made the pieces of the "same-page" link bold:

As you can see, the paragraph we're linking to is signified by the "id" attribute. We've named it "read-more". With that done, we can easily link to this exact spot from anywhere. Since we're linking to it from the same page, we only need to put the following into our link: Just a "#" (means "this page") and the id we gave it ("read-more").

So our link to "#read-more" means "link to the spot named 'read-more' on this page".

Note that you can put an ID on any HTML tag, allowing you to link to that exact spot:

• Headings: <h1 id="name">
• Images: <img id="name" alt="" src="" />
• Bulleted lists: <ol id="name">
• Divs: <div id="name">

If you ever want to link to an ID from another page, you just link to the page with the ID as per normal, but you append "#id-name" to the end of the link. For example, you would link to "http://www.yourdomain.com/phoenix-condos.php#read-more".

Remember that our writers can transform your badly-organized pages into this same format in only a few minutes each. So if you're convinced that our format is an effective lead-generation tool but you're not exactly brimming with enthusiasm for reformatting the pages yourselves, you can ask us to whip your pages into shape at a rate of about 10 pages per hour (or about 4 per hour if your snippets aren't created yet).

"It looks fine on my end."
or
"I'm not sure what you're referring to."

Well, no longer! Just read my amazing fourth blog post (below) and you'll swear you're sitting in the same office as your development team!

That's right - NO more wasting time and money on billable emails back and forth! NO more surly one-line responses from kids half your age!

Tip #1 - Clearing Your Browser's Cache

Often, your web developer will have made a change on your site and you can't see the change, so you complain that they are a quack and a charlatan, a bogus designer, and you want to talk to their production manager. Then they politely tell you to "clear the cache thingy" or something, and your self-confidence wavers. Here's the deal:

Your browser saves a copy (a "cache") of each webpage it visits, so that when you re-visit the page, the browser can show you the page again without having to take the time to ask the server to show the page again. Naturally, this means that the browser will sometimes show you an obsolete version of the page - you need to "clear the cache" to tell your browser to look again for the latest version of the page.

I'm not going to rewrite what has already been explained, so follow this link to find clear instructions on how to clear your browser's cache.

Clear the cache and then refresh the page. If you still don't see what the developer says you should see, it's time to take a screenshot (see below) and show them what you're seeing — or not seeing.

Tip #2 - Creating Quick Screenshots (aka "screen captures") to Put in Emails

This will take you about 5 minutes to learn — and then you're going to wonder why nobody taught you this before.

Most of us communicate by email and it's very limiting sometimes, because we assume we're both seeing the same thing on our screens. But there are MANY factors which can make your screen look different from mine, even when we're both looking at the same webpage (see "browser cache" above, for instance). By sending a quick image of what you see on your monitor, you can often get an "Ahhh!" response and a quick resolution.

Note: The following instructions are relevant to MS Windows. For instructions on getting a screenshot in MAC OS, see the first comment underneath this post. Thanks Jolenta!

1)
Taking a screenshot is easy. Look for a key on the keyboard that says "PrtScn" or something similar. On my keyboard, it's up top with the F- (function) keys. Press that key. Nothing will appear to happen, but you have just saved a copy of what your monitor(s) show, to your clipboard.

Hot tip: Thanks to Anthony for teaching me this one a moment ago:
If you use "alt + PrtScn", you will only capture a shot of the window (program) that you were "in" when you pressed "alt + PrtScn", as opposed to getting everything on the monitor.

2)
Open an image editor. If you don't know whether you even have one, just find an image on your computer and double-click it. I guarantee you that the image will open in a program. That program is your "default image editor".

(I use a program called Irfanview. It's free to download and it does everything I need. It's super fast for what we're talking about here.)

3)
Paste the screenshot into the image editor by pressing ctrl+v. You may need to click inside the image editor first. If nothing happens, or if you see some text that looks oddly familiar, it may be because your "F Lock" was turned on when you hit the "PrtScn" key, preventing the screenshot from being copied to your clipboard. Or, it may be that the screenshot DID show up in the image editor, but you're not realizing it's a screenshot! Try clicking on a link. ;)

If you see your screenshot pasted into the image editor, you're almost there!

4)
Crop the screenshot to only show the relevant part. If you put the whole screenshot into an email, the large attachment may cause the email to bounce, or your developer may be annoyed and tell you it bounced. By cropping the screenshot, you are following etiquette and also making your message much more clear. You are communicating exactly which part of the page you are referring to.

How the image is cropped, will differ with each image editor. In Irfanview, you just click and drag the mouse to select a rectangular space, then you hit "ctrl+y" to crop everything around it.

5)
Copy the cropped image back to your clipboard by pressing "ctrl+c".

6)
(Optional:) Edit the image if necessary. You may need to draw arrows or lines on the image to be absolutely clear in your instructions, and believe me, it pays. I have a shortcut to Microsoft Paint for this purpose (you already have Paint, if you don't have a MAC). When you're done editing, use Paint's "Select" tool (looks like a hash marked rectangle) to outline your image and hit "ctrl+c" to put the edited image back on your clipboard.

7)
Paste the cropped screenshot into your email message with "ctrl+v". Voila! Your designer will be amazed, and will have no more excuses.

Bonus Tip:

This is much quicker than the screenshot process described above, but it only works for pointing to individual images on the site. Remember, though, that there are often parts of your site which you don't realize are images. For instance, the headings overtop of your navigation menus in your side-bar are images - like this one:

In Thunderbird:

If you use Mozilla Thunderbird for email, you can simply drag an image like this right off of your webpage and into your email messages! Try it - start a new message and drag the image above into the body of the email (you may have to drag the cursor down to the task bar and onto the message window button to open it up, if the browser is hogging your monitor and you can't see both windows at once).

Am I not making sense? Check out this 10-second video I made:

In Outlook:

If you try the "drag and drop" option in Microsoft Outlook, you will only drag the image's path name into your email (which is almost as useful for our purpose). If you want to show the image in the email, though, you have to do this:

1. Right-click on the image in the web-page.
2. Select "copy image" (it is saved to the clipboard).
3. Go to the email message you're writing, and paste (ctrl+v) the image into it. Pretty handy!

This tutorial will have presented different obstacles and unanswered questions to different readers. Questions and comments (below) are encouraged. Thanks!

Not only is it towering over the text (instead of "floating" within it like in a magazine), but there should be a margin separating it from the text (see the word "As" almost getting ink on it?).

If you're familiar with inline CSS, you can do something like this: <img src="/images/lab.jpg" />

But in case that doesn't work, read on...

REW Shortcuts

There are two options for easy image formatting in our Content Management System.

In the WYSIWYG (the page editor buttons)

Login to your backend and go to the page you want to add a photo to. See the square icon that looks like a polaroid? (see below)

When you click on that icon, you get the image formatting options, which look like this:

Select an image from the list, or upload a new one, using the button I've circled in red.

Then, click on the "Properties" button on the left to get to the "Image Properties" menu, shown below:

Remember that lamb above? It was supposed to be "aligned" to the left. See the red oval above? That's where you would select for the image to be "aligned left". Then, you just need to make sure that you start typing your text right after the image (on the same line).

Try it!

Our Built-in CSS Styles

The other quick way to format your images nicely is to use the CSS styles that come with all REW sites.

First, get the photo onto the page, with the paragraph of text appearing right after it (on the same line). If it looks bad, like the lamb image above, don't worry.

The next step requires you to be able to access the html code of your pages as you create/edit them. In the CMS, just look for the "HTML" button in the WYSIWYG buttons:

After you switch to html view, you need to be able to find the spot where your image and paragraph are. It'll look like this:

Explanation:
The <p> just begins the paragraph, and this part (below) is the html code that displays the image:

Here's the html code that would display the lamb image and text at the beginning of this post:

Now, let's apply the CSS classes, "floated" or "floated alt", to make the image "float" among the text (see resulting image below):

Here's the html code that displays an image floated left within a paragraph of text:

If you want the image to float on the right side instead of the left, you would use this code:

Forcing Text to Appear Under the Photo (not squished beside it)

Sometimes you'll post a photo which is fairly wide, so you don't want any text beside it (because there isn't any room). But the text shows up there anyway. This happened to me when I first posted the lamb image at the top of this post. It looked like this:

Here's what I did to prevent this:

In the html code, I placed this between the image and the paragraph that I wanted to follow beneath the image:

It's just a paragraph block with a non-breaking space inside (&nbsp;). The style attribute I added ("clear: both") tells the browsers that the paragraph block should clear any floated elements (should appear beneath them). You're supposed to use "clear: left" when the floated element is floating to the left - but I wanted to make things easier for the tutorial.

Please comment below if you have trouble with any part of this tutorial, and I will improve it accordingly!

Your Real Estate Webmasters site, whether it's a templated design or fully custom, comes pre-installed with at least 3 options for this kind of callout box. There are two CSS classes ("highlight" and "important") and the HTML "blockquote".

Blockquote

This markup should create an effect on any html page, indenting the text contained within it. REW sites format blockquotes as a box with a thin black border and a quotation mark graphic, like this:

To put text in a blockquote, just surround it with the blockquote tags:

<blockquote>Your text here.</blockquote>

NOTE! This will not work within our LEC templates (limited edition customs). To make the blokquotes work in the LEC's, you have to include paragraph tags within the blokquote tags, like this:

<blockquote><p>Your text here.</p></blockquote>

Classes: "Highlight" and "Important"

In your HTML, you can place the "class" attribute onto a block of text or a div. Then, you specify which class it will be. It's easy:

<p class="highlight">Your text here.</p>

<p class="important">Your text here.</p>

These two classes should put your text into shaded boxes, each with its own distinct colour. Here are examples:

As I mentioned, you can assign these classes to more than one paragraph, by putting them onto divs instead of paragraphs.

<div class="highlight">
<p>A paragraph.</p>
<p>A second paragraph.</p>
</div>

This will produce an effect like this:

So, how can you have a sitemap that's linked to from every page, but isn't in your navigation? You could paste the link into the body of every page, but that's lame (time-consuming and unreliable, I mean).

Just add the link to your footer, at the bottom of every page. It's easy, and I'm going to tell you how to do it, because I twitch every time I see an REW site without a link to the sitemap in the footer.

In the content management system (CMS, backend) you got with your site, there is a snippet that comes pre-installed but not implemented anywhere. It's called #sitemap#. Guess what it does?

Step 1:
Create a new page and put the sitemap on it:

Login to your CMS and tell it you want to add a new page. Enter what you will in the meta fields, but make sure you type #sitemap# in the body area. And for the filename, let's just use "sitemap" (for the purposes of this tutorial).

Save your new page by clicking on "Add New Page" (or "Add Page" in the old CMS). Your sitemap page is now created, and you can look at it by going to http://www.yourdomain.com/sitemap.php. But, nobody can find it yet, unless they type that address into their browser the way you just did.

Step 2:
Link to the sitemap page from your footer:

Now, click on "Edit Homepage" in the CMS ("Edit Defaults" in the old CMS). Look for the place where you can edit your "footer". Enter this code:

<a href="/sitemap.php">Sitemap</a>

Save your changes, go to your home page, and refresh (F5 key; make sure your FLock is off). You should see a clickable link in your footer that says "Sitemap". Finito!

Two Common Obstacles

1)

After you add the link to the footer, you might see something like this in the footer:

Designed by Real Estate WebmastersSitemap

or this:

SitemapPrudential Realty

In that case, you just need to add a "pipe" (it's this character: "|" It's usually associated on your keyboard with the backslash, near the "enter" key) or some other element, to separate your sitemap link from that other stuff in your footer. Try this:

<a href="/sitemap.php">Sitemap</a> |

or this:

| <a href="/sitemap.php">Sitemap</a>

2)

The CMS sure is nifty, letting you edit the footer across all pages like that. But there's a catch (EDIT: This is no longer the case as of 2010): there are some pages, like your blog pages and IDX pages, which don't listen to what the CMS says. You can't edit the footer of pages that have /blog/ or /idx/ in their address. You need ftp access to get your shiny new footer showing on those non-CMS pages. (Contact your sales rep or post in the Work Orders Forum to request this.)