A project that I am working on uses the font Creative Block BB for its headlines. I use sIFR for these situations. Unfortunately sIFR3r278 won’t work with Creative Block BB. I have tried creating the swf file from Flash Pro CS3 and from OpensIFR, neither work. More exactly, both encode the swf fine (OpensIFR with a reduced font set) but don’t work within a web page. I have tried other fonts, they work fine.

After a bit more testing I have found that Creative Block BB will render with sIFR2.0.3 but only when the swf file is encoded with OpensIFR. The solution is only partial though because Creative Block BB can’t be encoded with a space character, thus the rendered text doesn’t have a space. This is no good. If I had Fontographer or other font creating software and knew how to use it, I would try adding the space character to the font. I guess it is time to find another font.

Web 2.0 has been in full swing for a good year or so now. Lots of modern, advanced frameworks and best practices have come to light to fully take advantage of the Web 2.0 trends. Of those best practices, I would like to briefly address the notion of Progressive Enhancements and Graceful Degradation.

Progressive Enhancement and Graceful Degradation are complimentary practices. If a Progressive Enhancement won’t work, it should degrade gracefully. Some have said that
Progressive Enhancement has its limitations. True. When designing an interface, JavaScript can create such a easy and seamless interface that the non-enhanced version will have to be radically different. Also true. This, in my mind, is when Graceful Degradation comes into play. If a system fails, it must do so while being usable as long as possible. In other words, if JavaScript is disabled, a user interface should still work with traditional client-server requests.

Here is a quick view of some sites and modules that rely on PE and sometimes GD.

The Good

These modules degrade gracefully when JavaScript is disabled.

• Gmail - A standard version is available if JavaScript is disabled.
• Apple Video - When JavaScript is disabled, a message to enable JavaScript is displayed. Plus the option to download the video is available.

The Bad

These sites do not degrade gracefully when JavaScript is disabled.

• CNN Video - Sorry CNN. I love the new site, but video and other things fail when JavaScript is disabled.
• YouTube - Much like Apple, a message is displayed when you don’t have the appropriate technologies, but they do not offer a downloadable version of the video.

All in all this is a tough situation. A lot of time, resources, and money are required to fully implement a well PEGD web site. Trade-offs and priorities will ultimately win the current battle until more frameworks and best practices surface enough to become common place techniques for dealing with complex interaction solutions.

I found my first browser bug. Unfortunately, the bug surfaces in a browser that is fastly becoming obsolete, IE6 - I say that with great pleasure - and it is also a quasi-bug because the bug only surfaces with the famous iepngfix.htc hack to make PNGs work in IE6. I haven’t investigated the bug yet. I will when time permits, but, in a nutshell, if you are used the aforementioned hack on CSS background images and use the keyword !important, then the hack won’t work. You’ll get a ~20% gray background color instead of a nice clean transparent image.

I am in a continual process of reevaluating and documenting web development techniques that I have learned in the past. In this vain, here is a trick that I used on the Weary Davis web site for the menu. I have included an image of the entire menu unfurled for all to see. The foundation of the technique is covered well by David Shea on A List Apart in a piece entitled “CSS Sprites: Image Slicing’s Kiss of Death.” I use this technique a lot. In fact, I am using a version of it on the Robert Eatman redesign.

The benefits of this technique are clean, semantic HTML, easier asset management (i.e. one image to maintain), and pure separation of presentation from content.

IE5 for the Mac was canceled nearly 4 years ago. I haven’t seen it show up in my server logs for quite sometime. IE5 Mac is dead, dead, dead. This means that the Comment Backslash Hack or Mac Hack and the IE5 Mac Band Pass Filter are retired. You will never see a hack like this in my css files again:

/* Hides from IE5-mac */
* html .buggybox {height: 1%;}
/* End hide from IE5-mac */


Yeah for dead and dying CSS hacks.

All versions of Internet Explorer prior to 7 cannot correctly display the transparent PNG-24 images. In place of the transparent pixels are light gray pixels. The solution that I like the most is called the IE PNG Alpha Fix. It uses a .htc file that corrects the behavior of IE using javascript. The fix also requires the a CSS hook:

* { behavior: url(iepngfix.htc); }

I have used this solution on a couple of projects now, it works well and doesn’t require gratuitous HTML hackery.

Unobtrusive JavaScript, CSS, Flash typography  has been around for a while and is equally important as swfIR if not more so.

Truth be told it is nearly impossible to separate content from presentation with HTML and CSS while making semantically lean markup. At least that is true if the design of the presentation is complex and unique. Designers tend to like flourishes, embellishments, and other eye candy. Treated right, this is a good thing. Our minds like high-quality, stylized content. But high-quality design will add structures in the the markup that aren’t related to the actual content. These structures or hooks, are great for adding design elements, but bad for long-term maintainability of a site.

Here is an example of a design hook that I used while making the Harris Construction web site.

<div id=“big”>  <div id=“little”>div>
<div id=“rightConcrete”>div>
<div id=“topLeft”>
<div id=“topRight”>
<div id=“bottomLeft”>
<div id=“bottomRight”>

In retrospect, I could have developed this code better by using non-design specific ids. That would have been in the mindset of future reusability. Not that the hooks that I used can’t be reusable, but non-specific hooks would have been better. CSS Zen Garden uses a similar approach by adding non-semantic, empty divs much like the ones I used above. The Garden also uses ubiquitous id and class attributes to accommodate nearly every design situation that can be thought of. While this is good for the Garden’s purpose, leaner code means saved bandwidth, more maintainability, and many other thing.
What is the solution to this conundrum? Content Management Systems.

The only true way to separate content from presentation is to rely on a content management system. With a CMS, the possibilities for redesigns, media neutral delivery, and everything in between are limitless. A well-designed, flexible content management system will allow many different views of the content. This means that you can have a couple of HTML views (one for the primary design, one for printing, one for handheld devices), a PDF view, an RSS feed, and much more. Content Management Systems enable website managers to flex their designs in a cost effective manner.

Content management systems do more than just help with separating content from separation. But that is saved for a later post.

What is accessibility?

In the world of the web, accessibility means providing a broad audience the opportunity to “view” your web site, regardless of their disability. Accessible web sites are needed to accommodate people with disabilities such as no-to-low vision, color blindness, and limited mobility. These web sites can be used with assistive technology – screen readers, Braille tactile feedback devices, embossing printers, and TDD.

Who needs accessible web sites?

There are two main groups whose web sites should be accessible. The first is all state and federal agencies as they are required by law to accommodate those with special needs. The second is any organization or company that wants to reach a broader audience and wants the additional benefits of meeting web accessibility standards.

How is accessibility regulated?

The requirements for State of Kansas agencies are described in the Web Content Accessibility Guidelines for the State of Kansas Version 2.0. The federal requirements for all federal and state agencies are covered by Section 508 of the Rehabilitation Act. These guidelines are based on valid CSS2+ with either HTML4.0+ or XHTML 1.0+ code, which are collectively known as web standards. Both federal and state guidelines are very similar in their requirements and suggestions.

How to create an accessible web site?

There are two keys to creating and maintaining an accessible website. The first key is valid and appropriate use of web standards. Web pages should be tested for errors by the World Wide Web Consortium’s on-line validator, which identifies any incorrect use of web standards within the page.

Being able to validate a document’s semantic structure is only part of what is needed to create an accessible web site. The second key is to craft pages with accessibility in mind. Documents should be able to gracefully degrade to web browsers that do not have the ability to read the document in its intended format. For a video interview on your site, for example, a transcript of that interview should be available to a person who cannot hear. Additionally, pages should not rely on visual elements alone for tasks such as navigation, nor should they be worded in a confusing manner.

What are the benefits of web standards and accessibility?

Reduced Bandwidth

In general, a web page that uses web standards is 25-50% smaller in file size than a traditional web page because the page uses less markup and is separated from the look and feel of the site. The practical benefits of this are faster download time for your users and lower costs for your hosting service.

Easier Maintenance

The benefit of having smaller documents is also apparent in maintenance. Since most of the traditional HTML is replaced with web standard HTML, site developers and maintainers can concentrate on what is most important: the content of the page.

More Access

CSS2+ allows users to be able to access your site with more devices. One of the mainstays of CSS is the ability to apply a different style sheet to a document to change both its appearance and its user interface. Different style sheets can be used to enable a PDA, a voice reader, a Braille display, or other devices to access your site. High-contrast, large-print, and printable versions of your site can also be created.

Happier Federal Government

As noted earlier, the government requires that any federal agency must meet Section 508 guidelines of the Rehabilitation Act. For more information, visit www.section508.gov.

Better Search Engine Indexing

Search engines can use up to 100 different criteria for ranking your sites within their search results. Web standards allow you to place the content of your document near the top of the document source. This allows search engines to index the page’s content before processing the navigation and other repetitive elements. Some search engines scan only the top of web documents.

Terms Used in This Document

TDD (aka TTY)– Telecommunications Device for the Deaf. When a deaf customer calls, this device relays the through an operator. The operator then types what you say. That is then transmitted back to the caller’s TDD. The TDD then “displays” what you said. TDD devices are included in the CSS specification and can be used to enhance a sites accessibility.

HTML – HyperText Markup Language. HTML is the format the most web pages are coded in. The current version of HTML is 4.01.

XHMTL – Extensible HyperText Markup Language. XHTML is a reformation of HTML 4.0 into XML.

XML – Extensible Markup Language. XML is a flexible way to create standard information formats and share both the format and the data on the World Wide Web.

Markup – Markup is another term for the HTML that surrounds the real content of a web page. It describes to a browser how the document should be displayed.

Web Standards – Web standards are specifications on how to properly code your web pages. The pertinent web standard specifications for most web sites are HTML4.0+ or XHTML 1.0+ and CSS2+.

World Wide Web Consortium (W3C) – The W3C is a mostly volunteer group that develops open, well-defined specifications and guidelines for web development.

Cascading Style Sheet (aka CSS or style sheet) – CSS is the principle technology for controlling a site’s look and feel, including colors, fonts, and general layout.

With every new web site that I create, I use a very specific directory structure for the ui. This allows the root web directory to not become over saturated with folders that do not contain actual web content. My folder structure is as follows

• ui
• css
• images
• js

Essentially, I use one main folder to contain all user interface elements: cascading style sheets, images, and javascript. The css folder can contain numerous files depending on the complexity of the web site and interface. The images folders contains the images for the web site framework. This includes any images needed for the general design, icons, buttons, and any other design imagery. The images folder does not contain images as they relate to a particular page or article. Those images are handled differently depending on the complexity of the site. The js folder is used to hold all javascripts. I thought about separating them out into behaviors and other scripts, but in the end I decided not to. I don’t use a ton of javascript (yet) so I didn’t see the need for the separation.

If there are multiple designs for a project, I use the following structure:

• ui
• design 1
• css
• images
• js
• design 2
• css
• images
• js

In this case, I give design 1 and design 2 a name that refers to the design. If the design is a retro 50’s design, I use something like stylin50s. If it is an oceanscape sort of thing, I name it something like comotionontheocean. I have a little bit of fun with the names. It keeps me sane somehow.