Awhile ago, Silvan Mühlemann conducted a 1.5 year experiment whereby different approaches to email obfuscation were tested for effectiveness. Nine different methods were implemented, with each test account receiving anywhere from 1800 to zero spam emails. Here is an excerpt from the article:

When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. But which obfuscation method is the best one? I drove a test to find out.

After reading through the article and its many findings, here are what seem to be the best methods for obfuscating email addresses displayed publicly on web pages..

Continue Reading

Many bloggers, designers, and developers take advantage of Google’s free Analytics service to track and monitor their site’s statistics. Along with a Google account, all that’s needed to use Google Analytics is the addition of a small slice of JavaScript into your web pages. For a long time, there was only one way of doing this, and then in 2007 Google improved their GATC code and established a new way for including it in your web pages. Many people switched over to the newer optimized method, but may not realize that there are now three different ways to track your pages with Google Analytics. The latest method uses asynchronous tracking to minimize negative impact on user experience. Let’s take a look at each of these three methods for tracking your web pages with Google Analytics..

Continue Reading

Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.

Method 1: Preloading with CSS and JavaScript

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. As one of my favorite topics here at Perishable Press, I have covered image preloading numerous times:

Continue Reading

For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like:

• p:first-child
• p:first-child:first-letter
• p:first-child:after
• p:first-child:first-line

Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix things up with some “special” styles:

Continue Reading

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the <pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect <pre> tags.

First thangs first

Before getting into it, let’s take a moment to ensure we’re all on the same page. The (X)HTML <pre> element is used to display preformatted text, code, or just about anything else. pre tags are ideal for multiple lines of code or text that need to retain character spacing, display unformatted characters, keep inherent line breaks, and so on.

Continue Reading

In my recent guest post at The Nexus, I discuss Google’s new nofollow policy and suggest several ways to deal with it. In that article, I explain how Google allegedly has changed the way it deals with nofollow links. Instead of transferring leftover nofollow juice to remaining dofollow links as they always have, Google now pours all that wonderful nofollow juice right down the drain. This shift in policy comes as a terrible surprise to many webmasters and SEO gurus, especially those who have invested vast amounts of time, effort and money engaging in supposedly lucrative PR-sculpting pursuits.

Of course, this new policy leaves many of us wondering how to deal with it. If (and it remains a big “if” until Google clarifies their position) — if nofollow link equity simply vanishes into the ether, the repercussions may be significant. For example, webmasters who now rely on nofollow to salvage link juice otherwise leaked through lengthy comment threads will need to devise another strategy or suffer an inevitable loss of valuable PageRank. There are many good strategies available, including everything from long-term reorganization of site structure to short-term fixes involving much-despised tricks such as iframes and JavaScript links. Personally, I wouldn’t touch iframes with a ten-foot pole, but in the case of an emergency, I certainly would take a look at using external JavaScript to get the job done.

Continue Reading

When designing sites, it is often useful to identify different pages by adding an ID attribute to the <body> element. Commonly, the name of the page is used as the attribute value, for example:

<body id="about">

In this case, “about” would be the body ID for the “About” page, which would be named something like “about.php”. Likewise, other pages would have unique IDs as well, for example:

<body id="archive">
<body id="contact">
<body id="subscribe">
<body id="portfolio">

..again, with each ID associated with the name of the page. This identification strategy is useful for a variety of reasons, including the following:

• Page-specific control over CSS via descendant selectors
• Page-specific DOM manipulation via JavaScript
• Page-specific control over the navigational interface, current-page highlighting et al
• Page-specific content-inclusion via conditional PHP if() statements

For page-specific control over your design, using the current page name as the body ID will certainly do the trick. The question is, what is the best way to go about defining the different attributes? For static sites or for sites with only a few pages, it might be easiest to just add the IDs manually. For larger, dynamic sites, however, you can automate the process with the magical powers of PHP.

Continue Reading

One of the oldest JavaScript tricks in the book involves providing a “print this!” link for visitors that enables them to summon their operating system’s default print dialogue box to facilitate quick and easy printing of whatever page they happen to be viewing. With the old way of pulling this little stunt, we write this in the markup comprising the target “print this!” link in question:

<a href="javascript:window.print()">Print This!</a>

Big yuck there, of course, due to the obtrusive nature of the JavaScript implementation. Adhering to the principles of proper Web Standards, it is better practice to separate behavior from structure by placing this amazing “print this!” function in its own location, either in the <head> of the document or even better in an external JavaScript file. So basically, we want markup that looks more like this:

<a href="http://domain.tld/target/" title="Print this page">Print This!</a>

Notice the new value for the href attribute. Rather than pointing illogically to the JavaScript function, it now points to an actual resource, which may be anything you desire. Previously, users without JavaScript would click the “print this!” link and blink while nothing happens. With the unobtrusive technique, you provide the location to which users without JavaScript shall go. Possibilities here include an explanation page or even just the page itself, depending on how lazy you wanna be.

Continue Reading

With the recent Feedburner service outage, many sites across the Web experienced severe drops in their Feedburner subscriber counts. Apparently, Google is requiring all Feedburner accounts to be transferred over to Google by the end of February. In the midst of this mass migration, chaotic subscriber data has been reported to include everything from dramatic count drops and fluctuating reach statistics to zero-count values and dreaded “N/A” subscriber-count errors. Obviously, displaying erroneous subscriber-count data on your site is not a good thing. Fortunately, there are several ways to ensure that this doesn’t happen.

Over at CSS Newbie, author Rob Glazebrook weighs in with an excellent point about covering your bases when displaying your Feedburner subscriber count. As explained in the article, Feedburner’s handy API makes it easy to tap your data and display your subscriber count on your blog. Despite its best intentions, however, Feedburner occasionally returns inaccurate data or even no data at all for the subscriber count. For those of us who care about the accuracy of our publicly displayed feed statistics, displaying information like this on your site is simply unacceptable:

Continue Reading

In the beginning…

In the time of the dinosaurs, HTML authors controlled the way anchors opened by adding target="_blank" as an attribute on an anchor tag. Then the molten mass of Internet began to cool into the thin crust of Web 2.0, the continents began to separate and there came a great migration of pages from HTML to the shinier, new XHTML. Most authors didn’t know what that meant, but it had an “X” in it, so it must be cool, they thought.

Alas, there came a great despair as the beloved target="_blank" attribute was no longer looked kindly upon by The Great Validator. The new XHTML pages would not wear the Shiny Badge of Validation Love.

Continue Reading

Earlier this year, I posted an article explaining how to implement an unobtrusive JavaScript dynamic clock. While not completely earth-shattering or cutting-edge or anything like that, the dynamic JavaScript clock has received some great feedback from users who found the script to be exactly what they were looking for. In fact, a couple of weeks ago, Bill Brown went above and beyond by taking the time to improve the script with some great new features, including a “blinking seconds separator (for kicks)” and removal of “the need for the noscript tag.” Here is the complete script sent by Bill in a recent email (with slightly reformatted markup). To try it out, simply copy and paste the following code into a blank PHP document (no editing required!):

Continue Reading

I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence.

Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only method thrown in for good measure) for removing unwanted focus outlines.

Continue Reading

A great way to save bandwidth is to take advantage of Google’s AJAX Libraries API to serve your favorite open-source JavaScript libraries. Here is how Google explains it in their official documentation:

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular JavaScript open source libraries.

Continue Reading

In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation.

The Challenge..

There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image rotation. To achieve these effects, designers often use either CSS, direct image manipulation, or some combination thereof. CSS may possess limited ability to round image borders in certain browsers, but for drop shadows and image rotation, designers must either modify each image individually, or rely upon convoluted techniques employing additional graphics and CSS to get the job done. This may be suitable for a single header graphic, but for any significant number of images, hand-editing each one in Photoshop with the desired visual effect is neither efficient, practical, nor scalable.

Continue Reading

I know, I know, not another post about IE6! I actually typed this up a couple of weeks ago while immersed in my site redesign project. I had recently decided that I would no longer support that terrible browser, and this tangential post just kind of “fell out.” I wasn’t sure whether or not to post it, but I recently decided to purge my draft stash by posting everything for your reading pleasure. Thus, you may see a few turds in the next few weeks, but hopefully this isn’t one of them. In any case, here is my final post on IE6, at least for awhile..

Continue Reading

As announced at IE Death march, I recently dropped support for Internet Explorer 6. As newer versions of Firefox, Opera, and Safari (and others) continue to improve consistency and provide better support for standards-based techniques, having to carry IE 6 along for the ride — for any reason — is painful. Thanks to the techniques described in this article, I am free to completely ignore (figuratively and literally) IE 6 when developing and designing websites. Now that I have dropped support for IE 6, I feel liberated, free of the constraints that once enslaved my time, energy, and resources. Working on my new design, I have already saved countless hours that would have been wasted on IE 6. If you are still chained to an old copy IE 6, I highly recommend kicking it to the curb and experiencing the freedom for yourself. All it takes is a few lines of code and the decision to go there.

Continue Reading

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this:

/* set the minimum width for IE 6 */
#target_element {
	width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */
	min-width: 333px; /* min-width for all standards-compliant browsers */
	}

Although ugly, invalid, and resource-intensive, this technique works well at setting min-width properties for IE6. But beware! There is a catch. Chris Herdt recently wrote in with an important discovery:

…inclusion of any padding or margin on the element that has the fix applied will cause IE6 to crash…

Continue Reading

In an effort to organize my pile of offline notes, I will be posting a number of quick, “to-the-point” tutorials on a number of useful topics. In this post, I share an excellent method for auto-clearing and restoring multiple form field inputs using a bit of unobtrusive JavaScript. This method was discovered at xy.wz.cz. There are two steps to this technique, which should take no longer than five minutes to implement.

Continue Reading

This was just too juicy to pass up. Blogstorm recently blogged about an easy JavaScript technique for making any website editable. After checking it out for myself, I just had to share it here at Perishable Press. Here it is:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Paste that single line of code into the address bar of any modern browser and have fun editing the page. Obviously, any changes will only apply to the page as seen in your browser, not the original document. Even so, it’s a fun trick to play around with, snap screenshots, be creative, etc.

Go ahead — amaze your friends!

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques:

First clearfix method: addresses several reported rendering and display bugs by declaring very small values for both font-size and height, while also declaring a zero line-height value. A little paranoid perhaps, but the unique declarations seem to have no unintended/negative side-effects. This method also targets IE exclusively for the inline-block declaration. Check it out:

Continue Reading

NOTE: This post was written many months ago under the erroneous assumption that caching Mint’s JavaScript was a good idea (for Y-Slow compliance, performance, et al); however, after a brief chat with the man himself, Shaun Inman, I was quickly informed that this was a bad idea: caching Mint JavaScript files will cause Mint to stop functioning. But, for what it’s worth, and for the sake of retaining potentially useful information, I present the original article here for your amusement.. </note>

Recently, I spent some time addressing a few of the performance issues pointed out by Yahoo!’s very useful YSlow extension for Firebug. Working on performance tip #3, Add an Expires or a Cache-Control Header, I encountered some difficulty while trying to get the JavaScript used by Mint to cache as desired. Apparently, the HTAccess directives used to cache my other scripts do not effect the two PHP-generated JavaScript files used by Mint. Although I am not entirely certain, I suspect that these files are not being cached along with other scripts because the way in which they are called via query string parameter (Apache is far from perfect when it comes to dealing with anything associated with query strings). In any case, I really wanted to have these Mint scripts cached by the browser, so I ended up editing two files in the Mint core to make it work. For those of you struggling with the same dilemma, here’s how I did it..

Continue Reading

In this CSS Hackz Series article, I outline several solutions for displaying alpha-transparent PNG (a.k.a. PNG-24 format) images in everybody’s favorite broken browser, Internet Explorer. Specifically, IE versions through 6 (excluding IE 5 for Mac) fail to support alpha-channel transparency for PNG images. In these versions of IE, every pixel containing alpha-transparency is displayed with an ugly, flat gray color.

Fortunately, there are plenty of hacks and workarounds designed to “fix” IE’s PNG image-display problem. Unfortunately, every currently available solution requires the use of Microsoft’s proprietary AlphaImageLoader transparency filter ¹. Thus, if you need to display translucent PNG images in IE, the solution will inevitably involve the AlphaImageLoader filter until more sophisticated techniques are developed.

Continue Reading

Opening the CSS Hackz series is the infamous CSS-expression hack for achieving minimum and maximum widths in Internet Explorer 6.

Here is how to set the maximum width for IE 6:

#target_element { 	
	width: expression((document.body.clientWidth > 778)? "777px" : "auto");
	max-width: 777px;
	}

Here is how to set the minimum width for IE 6:

#target_element { 	
	width: expression((document.body.clientWidth < 335)? "333px" : "auto");
	min-width: 333px;
	}

Continue Reading

Recently, while restoring the popular Jupiter! WordPress theme, which several readers use to “skin” the Perishable Press website, I found myself searching for a simple, effective JavaScript technique for toggling element visibility. Specifically, I needed to accomplish the following design goals:

• Users should be able to toggle the visibility of any division containing post-meta information
• The post-meta information should remain visible by default and when JavaScript is unavailable
• The JavaScript should be as unobtrusive as possible, requiring minimal scripting in the markup

Here are a couple of screenshots demonstrating this repetitious toggling functionality as employed in the Jupiter! theme (click on either thumbnail for larger screenshot):

Continue Reading

In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in..

Continue Reading