I've noticed that a lot of our clients, once their website's initial design framework has been created, aren't savvy about how to use a designer for further development. They aren't aware of how extra design work can improve the body content, which improves stickiness and conversion. It also just makes the site look better.
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:
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:
- <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.