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
More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take five minutes and implement a basic stylesheet to make your site readable via mobile device. This tutorial will show you how to retain visitors and reduce bounce rate with a super-easy 5-minute mobile makeover.
Continue Reading
Check out this sweet composition of aural styles discovered in the stylesheet for the W3C’s website:
/* AURAL STYLES (via W3C) */
@media aural {
h1, h2, h3,
h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90 }
h1 { pitch: x-low; pitch-range: 90 }
h2 { pitch: x-low; pitch-range: 80 }
h3 { pitch: low; pitch-range: 70 }
h4 { pitch: medium; pitch-range: 60 }
h5 { pitch: medium; pitch-range: 50 }
h6 { pitch: medium; pitch-range: 40 }
li, dt, dd { pitch: medium; richness: 60 }
dt { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn { pitch: high; pitch-range: 60; stress: 60 }
s, strike { richness: 0 }
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u { richness: 0 }
a:link { voice-family: harry, male }
a:visited { voice-family: betty, female }
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
Not bad. Listening to this cascading orchestra, I would imagine the sound of a relaxed-yet-formal standards-compliance gentleman carefully articulating the contents of the page.
![[ Image: 50 Cent ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/50-Cent_G-Unit.jpg)
Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality. In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content.
Continue Reading
In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows.
This article explores the generalization of the previously defined method for providing alternate JavaScript content when Flash support is not detected. Using skyzyx.com’s excellent Flash-detection script, Flash Detect 3, we will outline a general approach for supporting the following browser configurations:
- Browser supports the required version of Flash
- Excellent. This is the ideal situation. Your Flash-based content will be displayed as intended.
- Browser supports Flash, but has not upgraded to the required version
- Okay. In this situation, you could serve either JavaScript content or retro-Flash content (i.e., Flash content that requires a lesser version of Flash). Detection is also provided for virtually any version of Flash, enabling delivery of multiple movie alternatives.
- Browser does not support Flash, but does support JavaScript
- Not bad. Non-Flash browsers will receive alternate JavaScript content. User’s won’t know what they’re missing.
- Browser does not support JavaScript, but does support Flash
- For Flash content that does not require JavaScript to function, the browser will display the Flash content as intended, assuming sufficient Flash version. When the version of Flash is insufficient, non-Flash users will see either retro-Flash content, animated gif content, or static image content, depending on your preference.
- Browser supports neither JavaScript nor Flash
- Worst case. Even so, all hope is not lost. In this situation, visitors will see either animated gif content, or static image content.
Continue Reading
For the unenlightened, SlideshowPro (SP) is a Flash-based slideshow-authoring system that delivers full-featured, high-end, Flash-based slideshows. Websites featuring SP slideshows present content in sophisticated fashion, inspiring users with elegant captions, beautiful transitions, and intuitive navigation.
However, many visitors are unable to experience SP slideshows because they lack the requisite Flash support. SlideshowPro-based slideshows currently require Flash 7 or better to function. And, although Flash 7 is quite common, it is far from ubiquitous. In the "worst-case" scenario, Flash-challenged visitors will see a broken webpage or missing content. Unfortunately, the typical "best-case" scenario is not much better, as non-Flash users typically will see a single, static image, which is generally served via something similar to:
<object classid="clsid...">
<param name="movie..." />
<embed src="http://domain.tld/..." />
...
<img src="http://domain.tld/path/to/alt/image.jpg" alt="alternate image served for non-Flash browsers" />
...
</object>
Continue Reading
This post contains random notes for embedding QuickTime within web pages.
QuickTime Embed Attributes via CSS
<style>
<!--
embed, .embed {
pluginspage: http://www.apple.com/quicktime/download/;
controller: false;
autoplay: true;
bgcolor: #000;
loop: true;
}
//-->
</style>
Continue Reading
Embed Windows Media Player via the object tag
Here is the general format for including .wmv files in web pages:
<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
<param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="controller" value="true" />
<param name="autostart" value="true" />
</object>
Continue Reading
As you may have noticed, Perishable Press recently added automatic language translation to each of our articles. The free, automatic translations are available as a series of image links (via corresponding country flag icons) next to each article’s individual post view. We have found that providing this free service is important as many of our visitors come from countries other than the United States, and therefore may be unable to read our articles as presented in the English language.
Although there are several excellent translation services currently available, our research has determined that Google’s free translation service exceeds our expectations and serves as an excellent online translator that remains fast, effective, and (best of all) free. Another excellent online translator service is provided by BabelFish, which is also highly efficient and free of charge.
Using either of these free online translators and a little .htaccess or PHP magic, it is very easy to serve alternate versions of site content in a wide variety of languages. This article presents two excellent methods of incorporating automatic language support using either .htaccess or PHP. We also provide the (X)HTML source code necessary to manually include automatic translation links within static (X)HTML documents. The translation configurations covered in this article include the following:
Continue Reading
Just a few useful accessibility notes..
Add accesskey attributes to important list items, content areas, and any other key areas of the document.
Use alphanumeric characters as accesskey values, as in this example:
<ul>
<li><a id="home" accesskey="h" href="http://domain.com/home.html"><span class="accesskey">h</span>home</a></li>
<li><a id="menu" accesskey="m" href="http://domain.com/menu.html"><span class="accesskey">m</span>menu</a></li>
<li><a id="search" accesskey="s" href="http://domain.com/search.html"><span class="accesskey">s</span>search</a></li>
</ul>
When an accesskey attribute is present within a link tag, pressing alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of an accesskey attribute within an element brings focus to that element. Thus, radio and check boxes are toggled, links are clicked, and form elements are navigated as the alt+letter combination is pressed.
It is also helpful to provide “skip-to” links that target specific areas of the site. For example, you may wish to enable users of screen readers to skip past or skip to navigational controls:
<div class="hide">
<ul id="top" class="access">
<li><a href="#content" title="Skip to Content" accesskey="c">Skip to Content</a></li>
<li><a href="#navigation" title="Skip to Menu" accesskey="m">Skip to Menu</a></li>
<li><a href="#search" title="Skip to Search" accesskey="s">Skip to Search</a></li>
</ul>
</div>
However, due to current lack of widespread browser support, explicit id-targeting may serve better:
<a href="#menu" title="Skip to navigation menu">Skip to navigation menu</a>
<a href="#content" title="Skip to main content">Skip to main content</a>
Another useful accessibility tool involving document meta-navigation is the tabindex, which is a numerical index that represents each element’s position in the tabbing order. By default, certain elements are ignored by the tabindex, while others retain a default order which may be overridden with explicitly stated tabindex values. Consider the following example, in which the tabbing order will be "red", "yellow", "blue", regardless of where the input elements appear on the page:
<form>
<input id="red" tabindex="1" />
<input id="yellow" tabindex="2" />
<input id="blue" tabindex="3" />
</form>
More to come..
Improve accessibility by adding title attributes to your WordPress userspace.
Note: This article applies specifically to WordPress 2.0.2, but may be generalized to any WP 2.0+ version.
By default, WordPress navigation links omit the title attributes for both page and post views. Title attributes for links provide additional information that can improve the accessibility of your website. This is especially true when images or text symbols exclusively are used for navigation.
To add title attributes to WordPress page-view links (e.g., links for index, archive, and category views), open the file wp-includes/template-functions-links.php and find the functions previous_posts_link (line #494) and next_posts_link (line #459).
Within each function, replace the following line:
echo '">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
..with this:
echo '" title="EDIT THIS">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
Next, replace the EDIT THIS text in each function with “Previous Posts” and “Next Posts”. Keep in mind the reverse chronological order by which these links navigate. Remember to check a few page views and then you are done.
Now, to add the title attribute to navigation links within individual post views. Open the same file as above, wp-includes/template-functions-links.php and find the functions previous_post (line #336) and next_post (line #357).
Within each function, replace the following line:
$string = '<a href="'.get_permalink($post->ID).'">'.$next;
..with this:
$string = '<a href="'.get_permalink($post->ID).'" title="EDIT THIS">'.$next;
Next, replace the EDIT THIS text in each function with “Previous Post” and “Next Post” respectively. Remember to check a few post views and then you are done.