Functional design, Features and Usability
The Coral Gables Story is a very functional blog. When I say functional, I mean it provides a lot of things besides just articles of regular posts. While the core of the blog is the actual content that it delivers, Janie and Shelly implemented many ways to provide functionality besides the content.
But first things first: Janie and Shelly are in the business of selling real estate. The ultimate measurement of all of their efforts is the gain they achieve in their real estate business with this blog. As you will see, according to their vision and within the overall context of the site, real estate is interwoven via different features.
Real estate search at the visitors' fingertips
This is a great functional design example: The Coral Gables Story provides regular real estate services (home search, featured listings, market reports), just like any other blog or real estate website would do. But they do it both in a straight forward, call-for-action way (main header, top right sidebar) and also implicitly, in the context of the post. Their system is set up in a way, that the RealBird Map-based Search engine (shameless plug:) is embedded in the footer of each of the geo-tagged posts, providing a non-intrusive real estate search engine at the bottom of each article, with instant results, in the context of the location.
Explicit placement of real estate services "above the fold"
This is fairly straightforward: The main, top horizontal navigation area contains the usual real estate items: Featured Listings and Home Search. Furthermore, the top right sidebar also contains a large, visible call-for-action button called "Search For Homes". These are functional design elements consistently placed on all the blog posts and most of the static pages.
When designing the blog, it is very important to know the difference between graphics design and functional design. Actually it's less of a difference and more of a transition: the projection of graphics design into functional design. A blog is an interactive software application after all as opposed to a brochure or a street sign. One of the main considerations is the placement of critical elements on the user interface. Functional elements that should be in front of the user all the time have to be placed:
- Above the fold: I.e. viewable and usable without scrolling in the browser
- Should follow user behavior studies that show where people tend to look and click on a webpage.The best place to learn about this is from Google. Google has a set of guidelines for publishers about recommended ad placements. We can trust Google's research on this: their interest is to generate as much ad clicks as possible via their AdSense Publisher network, so they did their homework. I definitely trust their resultsWhile these heat maps talk about ad placement, most of the information is applicable for the placements of important, functional elements. Janie and Shelly did a great job with placing the important real estate links correctly on their blog's homepage and static pages. Read on, it's getting exciting now...
Implicit placement of real estate services in blog posts' footers
This is where it gets exciting. Again, referring back to Google's ad placement heatmaps, one of the most viewed and clicked areas of a blog post is right after the post. The reason for this is the following: While on regular websites and webpages, users scan for information to click and view usually above the fold, on a blog post their intention is different. They arrived via RSS or organic search or social media shares and they know what they want and that is, reading the post first and foremost, they usually don't care about main navigation, headers, sidebars. But once they are done with reading the info and assuming that the author won their heart with the content, they will want to do more. They are most likely scrolled down to the bottom of the post and they are now scanning that portion of the page, it's no longer "above the fold" that matters, it's the blog post footer area that is the HOTTEST location. Once again, here is Google's heatmap for a blog layout. So the important thing to note here is that you place functional elements differently on homepages and static pages vs. blog posts.
Janie and Shelly have something really unique in this regard. Something that I have not seen on any other real estate blogs. Blog posts that are geocoded have a live RealBird Map-based Search embedded in the hottest footer area. This is an implicit, soft way to brand yourself as a real estate professional and to provide contextual, instant real estate search in the post itself.
See for example this post: Did LeBron do it in Coral Gables with a Candlestick? This is a post about a celebrity topic so visitors are less likely to be active home buyers, but nevertheless the embedded map-based search in the footer instantly provides a nearby homes for sale tool. And since the area that the post is about is a high end luxury market, of course, the homes listed are luxury properties too. Perfect contextual match. Just imagine the revenue if one of the many visitors over the years is in the market for luxury properties and find Janie and Shelly via this post. Statistically speaking, the placement of this contextual real estate service might make the difference between actual business and no conversion. Of course, the same is applicable to geocoded posts that are targeting the actual home buyer demographics, market report posts like this
Community pages and driving users toward actions
Both on the homepage and on the sidebar of the inner pages and posts, there is a very unique visual slider that categorizes the main niches that Janie and Shelly focus on. In fact, this is part of their core navigation structure and on every page they drive visitors toward these special pages that aggregate related posts that are classified by topics, provide live search engines, community information including school widgets, photo galleries, live twitter update widgets and more. These pages are hubs and they provide help for search engines to understand their site's structure better and also for users to get directions while navigating the site. It is a very unique and powerful approach. See for example the Historic Homes in Coral Gables community page.
Deep social media integration and drive for engagement
One of their core marketing channels is social media. Janie is also an active guest author on AgentGenius and an expert on how to utilize social networking and geography tools, so it's only natural that they integrated many social media tools, including prominent sharing tools (both at the top and at the bottom of a post !), custom Facebook Pages for special niches (e.g. the Historic Homes section) and highlighted links to their social media. They understood that they might find themselves engaging people on different platforms and via different niches and as long as there is a unified way to manage communication, it is OK if a visitor becomes a Twitter follower rather than a regular blog reader for example or a fan of the Historic Homes Facebook Page versus The Coral Gables Facebook Page They provide many ways for people to stay in touch. Providing options can satisfy a larger group of people who have different online behaviors. I like it a lot how fluidly they move "attention" between the many platforms that they operate.
There are many other features on their blog that encourage engagement. They use IntenseDebate for their commenting system, which allows people to login for commenting with their preferred network credentials (Facebook, Twitter etc.), it can autoshare comments to Twitter and Facebook to generate return traffic and it is extended with CommentLuv plugin, which allows commenters to add a link to their own blog below their comment. This is a dofollow link and while theoretically, it can "leak" PageRank from your post, the upside of motivating visitors to comment with "link love" is way higher than the insignificant "leak" an extra outgoing link on the page might mean.
Another interesting plugin used by The Coral Gables Story is "What Would Seth Godin Do". It adds another small module at the bottom of your post (see above why this is a hot area on the blog design). You can configure it to differentiate between new visitors and returning visitors and show them different messages accordingly. It's another great, soft way to develop different funnels and encourage engagement based on visitor segmentation.
The site is out for only two weeks and over a hundred distinct pages are indexed by Google already and actual visitors are clicking through via very strong search keywords such as "potamkin home in coral gables" or "LeBron James buys house in gables estates" or "George Merrick's french villages". These are really high-profile, targeted, highly competitive keywords. This is due to the following reasons (among others):
- Search engine optimized Wordpress platform
- Using Thesis, a highly search engine optimized theme for Wordpress. Used by Google's very own Matt Cutts
- The abundance of content available already at launch
- Well structured blog architecture
- The utilization of must-have SEO tools and plugins including backlink-building, Google Webmasters tools, Google XML Sitemaps plugin, Feedburner RSS implementation with pinging and Janie's diligent social media marketing utilizing her many channels to get the word out.UsabilityThis is a tricky one. Before launch, they decided to exclude some features from the blog for various reasons. With each feature, they considered the benefit a particular one brings in vs. the usability sacrifice. Some features may look useful at first, but it turns out to be confusing or hard to use. Others may be very valuable, but slow down the blog, hence ruining the user experience. For example, originally they had the Meebo bar plugin installed, which is a nice plugin to encourage sharing and collaboration on the blog, but it made the blog perform sluggish. Finally it was excluded to guarantee fast blog performance during the launch. It's a case-by-case decision to make, but a very important one. Also, a caching plugin is highly recommended. It can speed up the blog by several factors. See for example the WP-Super cache plugin If installed correctly, it makes a huge difference.
Actionable things that can be learned from this:
- Blog architecture matters: One can go further than "just" a stream of posts. If it's possible (budget, expertise etc.) try to set up the blog to be more than just a blog, provide call-for-action buttons with landing pages and design the homepage differently than the blog post layouts.
- Search engine optimization matters: Many people skip simple, but time consuming tasks, such as building backlinks from already existing platforms. You'll be surprised how many pages are out there where you can add your new blog Url to. Adding to the sidebar of your ActiveRain blog will create a backlink from all your current and future blog posts. Don't forget your outside blog or your RealBird account settings and even those places like Twitter, that will add nofollow to your links. Some people will still click on those links and may end up sharing your content or interacting with your blog. Create a document and start collecting all the possible places and 3rd party domains that are in your control, those that you can use for backlinking. You'll be surprised to see how many you have.
- Usability matters: This sounds easy to understand, but harder to execute. People tend to overdo functionality and sacrifice usability, speed being the most important of them all. No matter how much traffic you get, if the site is slow or unintuitive, you will lose those visitors faster than you got them.
Now onto some Wordpress customization goodness
As promised here are the details about the automatic inclusion of the RealBird Map-based Search into posts' footers. Please note that it requires two components. One of them is very easy to install and is a standard Wordpress plugin called GeoPress, the other one is an advanced customization of the Thesis theme. Depending on which theme you use for Wordpress, it may require different steps to achieve this functionality.
We are getting a bit technical here, so if you are unsure, please ask your WordPress blog provider or webmaster to do it for you.
Step 1 - GeoPress plugin
With GeoPress you can add geographic tags to your posts and pages. You can enter an address, points on a map, or the latitude & longitude on the post editor interface. The plugin also turns your blog RSS feed into a GeoRSS feed. GeoRSS includes the location information that helps 3rd party systems and aggregators to exactly identify the post's location, rather than parsing and guessing. For example, if you write about an event at a venue or the market stats of a sub divison, you can add the exact location of the place to your post with this plugin and with a few clicks. After setup, you will be to geocode and save a location with your post. The Wordpress editor will be extended with a new panel as shown below. Just enter the location, click "Map Location" and Save the post as usual.
The GeoPress plugin has a lot of cool feature: It will turn your regular RSS feed into a GeoRSS and also adds the coordinates to the post meta information. This is the location info we are going to use for auto-embedding the RealBird Map Search into the post footer.
Step 2 - Configuring Thesis to add the RealBird Map-based Search
The Thesis theme provides a custom_functions.php file in the /custom folder under the theme's root directory. Modifying that file is the proper way to add additional functionalities to your Wordpress blog. If you use other themes, please refer to that theme's documentation to see how this can be done.
While editing this post, I realized that the customization needed for this step is a pretty heavy software code and since there is no way we can support all the different WordPress installations out there, it's better to exclude the actual code for now. Having that said, if you want to know the details and are comfortable with manual customization of your theme, please email us at firstname.lastname@example.org or via ActiveRain and we will send you the code sample. Please note that this feature requires a RealBird PRO subscription. Also if you are a WordPress provider for real estate professionals, we are happy to share it with you as well. Finally, we are working on a WordPress plugin that will hide the complexities and we will have a follow up post about that, once it is released.
Here is a screenshot and link to see it in action. This live property search map is provided after the post content of "Historic Coral Rock Home Ready to Renovate – Ingraham Highway":
List of plugins and tools that were mentioned in this post
- WP Super Cache Plugin
- What Would Seth Godin Do Plugin
- Google XML Sitemaps Plugin
- GeoPress Plugin
- Thesis Theme
- Google Webmaster Tools
- RealBird Map-based Search
I hope you found some new information in this two-part series (Part 1), something that you can apply to your own real estate blog as well.
Please do us a favor and in exchange for Janie and Shelly letting us disclose the details of their site, send some Facebook love their way.
Just click the *Like* button below to share The Coral Gables Story with your friends.
Thanks for reading.
Like this post? Subscribe to our RSS feed or receive email updates when new articles are posted
Generate More Leads from this Listing
With a Trulia Pro Account
Find what you need?
See More Blog PostsAbout Real Estate! SEE MORE NOW!