larryaronson.com

There’s a fundamental conflict in web page design between content and clutter. We want more content to make our pages findable & provide value to visitors while maintaining visually clear layouts so as not to frighten away seekers of simple truths. The key to solving this conundrum is to stop thinking of web pages as printed page emulators. A printed page is a fixed matrix of tiny colored dots (pixels) on a two-dimensional surface. A web page is a dynamic document object composed of multiple layers of interactive elements.

My client, Kate Nasser – the people skills coach, has grown her consulting business by consistently adding content to her blog/website and by using Twitter, LinkedIn and youTube to draw traffic. A recent SEO/SEM assessment of her site recommended adding more keyword-rich content and reducing some of front page’s  clutter.  This is what the page looked liked.

Advanced Tooltips.

We had a box on the right side of the content area listing a dozen “Needs” linked to different site pages or posts. With each need there was an associated comment (technically, a definition list.) We decided to move the box to the left side of the page (ahead of the straight text content,) placing the comment parts in tooltip boxes that appear as you mouse over the topic part. Kate was free to add more content to the hidden (only from humans) comment parts.

Tooltips are the little yellow boxes that appear when your mouse hovers over a link. The content of the tooltip box is taken from the title attribute of the HTML tag that creates the link. But ordinary tooltips are boring with fixed style and color; yellow wasn’t the best choice given the site’s aqua tones.

So, I installed JQuery Tools from Flowplayer.org which has an easy to use, advanced tooltip tool. JQuery is a library of Javascript functions that make it easy to add dynamic behavior to Web page elements without having to worry about cross-browser incompatibilities. JQuery Tools is a free, lightweight tool collection that provides basic behaviors to attach to any page element. The Advanced Tooltip tool replaces the browser’s builtin tooltip and can be attached to any page element, not just links.

To make Advanced Tooltips work, you have to provide a page element with a unique id to hold the content. It doesn’t matter where it’s placed. The element, typically a division, is dynamically positioned near the moused-over element. The element is re-useable; you only need one holder element for all tooltips of a given style on a page. The tooltip is styled using Normal CSS so I was able to match the colors and typography of that section of the site’s front page.

Technical Details (Expand)

<script src="https://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript">
<?php if (is_page("2")) { ?>
    $(document).ready(function() {
        $("h3.need-title a").tooltip({ tip: "#TipBox",
                                       offset: [-25, 150],
                                       effect: 'fade' });
    });
<?php } ?>
</script>

<div id="TipBox" class="needs-tips">&nbsp;</div>

#TipBox {
 display:none;
 width: 200px;
}

.needs-tips {
 text-align: left;
 background-color: #fafcfb;
 border: 2px solid #009ea0;
 font: italic 10pt comic sans ms;
 color: #000;
 padding: 3px 8px;
}

Random Quotes

Kate has a bunch of her own quotes and was updating her front page every few days with a new quote from the collection. She asked if there were some way to automate the process. I browsed the various code and plugin collections and found noting simple or suitable. I decided to write my own.

I copied her front page as a new draft page and cloned the default page template and assigned it to the new page. Thus, I was able to work on and test the new features without endangering the site’s current front page. The cloned template would contain custom code to randomly pick a quote and place it at the beginning of the content area. The quotes themselves would be stored (and editable) as custom fields for that page with the key, “quote”.

<?php
    $todaysquote = '';
    $quotes = get_post_meta('2', 'quote');
    if (!empty($quotes)) {
        $todaysquote = $quotes[rand(0, sizeof($quotes) - 1)];
    }
?>
<div class="dailyquote">&ldquo;<?php _e($todaysquote); ?>&rdquo;
<span>&mdash;Kate Nasser</span></div>

First, a PHP variable, $todaysquote, is initialized. Then the WordPress function, get_post_meta(), gets all custom fields from post number 2 (that’s the front page) with key = ‘quote’. The values are returned as an array of strings and assigned to the variable, $quotes. If it’s not empty, the built-in, PHP random number generator picks one of its array items. Finally, the last two lines define the HTML division element that will hold the quote,  enclosing it in smart quote marks and adding Kate’s signature. Note the use of the special echo function,  _e($todaysquote),  to encode any HTML characters that might be in the quote string.

One of the upsides of this technique is that a new front page is seen in most every visit to the front page including those by search engine robots. Over time, this can expand the number of keywords associated with the page. Unfortunately, there’s no easy way to measure which quotes work best. If you do add random content like this to a page, you should check to see if you have a caching plug-in active. You might want to exclude that page from the cache.

I added this feature as a template hack because my client only wanted it on one page which already had a customized template. It could be easily generalized and added as a filter to the theme’s functions file, for example, to append a random quote to post content when generating a single-post view.

Tags: Advanced Tooltips, jQuery, random quotes, UI Tools