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.

In the current version of my custom contact-form WordPress plugin, Contact Coldform, there is no built-in method of sending emails to multiple addresses. The thought of adding such functionality had not occurred to me until recently, when a Coldform user asked about enabling it. After a bit of investigation, it turns out that integrating multiple-recipient functionality into Contact Coldform is as easy as it is practical. I will definitely be adding this feature to the next release of the Coldform, however, here is the modification procedure for those who just can’t wait.

Continue Reading

Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), however the menu remains useful even in CSS-challenged browsers (e.g., Internet Explorer). In this article, I explain how the Perishable Press jump menu is built using Web standards via CSS and (X)HTML, and then provide the specific code required to emulate the jump menu as it appears here at Perishable Press.

Continue Reading

Welcome to the homepage for Contact Coldform, a free contact-form plugin for WordPress. Contact Coldform is designed with a sharp focus on clean code, solid performance, and ease of use. No frills, no gimmicks, only pure contact-form satisfaction. If you are looking for a solid, well-designed, user-friendly, fully customizable contact form, look no further: Coldform is perfect for any WordPress blogger. The comprehensive Options panel makes Coldform easy for beginners to take full control, while the consistent, logical PHP/(X)HTML code makes Coldform ideal for advanced users desiring customized functionality. The best of both worlds: a “clean-slate” contact form that provides everything you want and nothing you don’t! :)

Coldform Features:

• Compatible with WordPress versions 1.5 - 2.8 and beyond.
• Plug-n-play: add Coldform to any WordPress page or post.
• Simple installation — upload, activate, and customize.
• Complete WordPress Administrative Options panel for full control.
• Ultra-clean code output: standards-compliant, valid (X)HTML.
• Customizable anti-spam challenge question to protect against spam.
• Secure form processing and protection against malicious attacks.
• Same-page error messages to help users complete required fields.
• No obtrusive markup or code added to your <head>.
• Includes option to enable users to send carbon copies to themselves.
• Coldform message includes IP, host, agent, and much more.
• Customizable form-field captions, error messages, and success message.
• Customizable drop-in CSS skins for easy styling.
• Customizable CSS attributes.
• Customizable everything!

Continue Reading

Earlier this year, Geoff Stearns and Bobby van der Sluis teamed up to create the “ultimate JavaScript library for embedding Flash content” into web documents. For those of you familiar with techniques for embedding Flash, these two names are instantly recognizable. Geoff Stearns is the author of SWFObject and Bobby van der Sluis is the author of UFO. Easily, SWFObject and UFO are the two best and most widely used techniques for detecting and embedding Flash content. Needless to say, when I heard that these two great minds were collaborating on an even better method to embed Flash, I was very excited to check out the fruits of their collective efforts..

On July 25th, 2007 the first publicly available version (0.2 - public alpha) of SWFFix was released to the masses. SWFFix is a Flash-embedding JavaScript library featuring standards-compliant markup, Flash-version detection, and Express-Install support. SWFFix uses the nested-objects method to optimize cross-browser support, deliver alternate content, and facilitate graceful degradation. SWFFix “fixes” the issues commonly associated with the nested-objects method (e.g., the click-to-activate requirement of IE6 and Opera 9+), providing greater functionality and a richer user experience. SWFFix also features dynamic embedding of Flash content for (X)HTML documents. Best of all, the SWFFix library consists of a single, extremely lightweight JavaScript file — only 12KB (unzipped) or 3.4KB (gzipped)! Overall, definitely impressive.

Continue Reading

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

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

Here are the validation services currently provided by the W3C ¹:

• W3C Semantic Data Extractor
• W3C Link Checker
• W3C Site Valet Tools
• W3C WebLight - Illumit
• W3C Markup Validation Service
• W3C CSS Validation Service
• W3C RDF Validation Service
• W3C Atom and RSS Feed Validation Service
• W3C P3P Validator
• W3C XML Schema Checking Service
• W3C MUTAT Developer Information

References

• ¹ As listed at W3C Quality Tips for Webmasters

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..