Our favorite jQuery techniques/plugins to enhance your CSS are:

Rounded Corners Don’t you hate it when your corners aren’t rounded in every browser? Or having to use some image based hack to get it just right? This jQuery plugin will fix that for you. Any browser that doesn’t support rounded corners natively will display your corners just how you intended.
Equal Height Columns Sometimes CSS just isn’t enough, and this little script will help you overcome the hurdles that CSS leaves.
Selector Styling Select menus are ugly, and really, they have no alibi, at least not any more. This plugin utilizes the jQuery UI to fix some really ugly HTML elements.

Better tooltips with CSS this tooltip tutorial walks you through better tooltips and creating them with CSS.

Pretty checkboxes and more pretty checkboxes and radio buttons We all know checkboxes look better on a Mac than on a PC. This script changes that. It lets you change yet another one of those ugly default parts of the web with jQuery.
Targeting advanced elements One of the best parts of jQuery is its ability to use advanced selectors, and this indepth guide will explain it to you better than I ever could.
Make an entire div a clickable link This little jQuery plugin will allow you to set a rollover effect and a link on an entire div all while letting your code validate. C’est super chouette!
Super Selector Support from the plugin’s site “In the course of a recent project, I used jQuery to add a first-child class to some <li> elements in our top navigation, to shore up IE6 CSS support without having to alter the markup. After seeing how easy jQuery made that, I realized it’s be possible to write a plugin allowing any browser supported by jQuery capable of supporting all CSS 2.1 selectors. So I wrote SuperSelectors. It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.” Ah, thank you!
Better current field highlighting Yes, you can create some field highlighting with CSS, but this technique from Chris Coyier over at CSS tricks is a great way to enhance the usability of your forms.

Some helpful resources are:

• jQuery for Designers
• Learning jQuery
• Noupe

This week we will be discussing some popular text replacement libraries and their limitations and potentials.

1. sIFR
   sIFR is one of the original font replacement techniques, and is one of the most complicated. It involves saving a flash movie with your font in order to allow the glyphs to be displayed when called for by your site. This site currently uses sIFR. The official sIFR 3 Beta site has examples you can take a look at. (I don’t think they play too nice with internet explorer, and since that is what is on my loaner computer…) And, as they themselves say, this is an OK solution for now, but not the answer for the next 20 years.
2. FLIR
   Facelift is a little different than sIFR. It does not require Flash to run, so there is wider browser support for this option. You can style the text just about any way you would like. However, there are drawbacks here as well. If the user has images disabled, they will not see the pretty text. It does support links and will change colors on hover.
3. Cufón
   This javascript library is quite promising. No images or Flash required to make the font replacement work. Hover has to be enable specifically for elements on which it is needed and Cufón replaced text is not selectable. But for a highly simple and easy to configure solution, this is a definitely an option to consider.
4. typeface.js
   This javascript library is infact quite similar to Cufón, it allows for a little bit easier uploading, hoever it only accepts TrueType fonts. Typeface.js allows use of a greater range of CSS selectors than Cufón, but it is a little larger, and the spacing out of the box is a little bit off (although that can be fixed with a little bit of CSS magic). Typeface.js also provides you with selectable text.
5. Typeselect
   This was originally built on the typeface.js library before typeface.js added selectable type as a way to make the type selectable. However, it is a strong solution in its own right. It uses jQuery (which means it will play nice with what I build) but there is currently no suport for :hover or line breaks. This is a promising library that I intend to follow until either they get the kinks worked out, or all browsers on all computers support @font-face.
6. @font-face
   The holy grail of font replacement. What we have all been waiting for. The CSS3 specification that allows us to use our fonts without having to worry about sacrificing accessibility, design or functionality. The support is coming. Webkit browsers support it (Safari and Chrome). So does Firefox (as of 3.1). And, heck, even IE does. The specifications are not yet final, so your CSS might not validate, but you can start including it in your work. (And here is an article on how to make @font-face work with Cufon so the js only gets executed if the user has a browser that is incompatible with the CSS property. Nifty, eh?)
7. HTML/CSS/IMG Phark Method
   What most of us do (or should be doing). Using a background image for a header with the text displayed at -9999px (although I think I read that this could do bad things to your Google Page Rank and that you would be better off with an image and alt text for SEO, but this is better from a usability standpoint)

Want to know if you can embed that font? For sIFR you can use any font that you can embed in a PDF or Flash file. For the others you need to make sure your license allows the use. FontSquirrel has a nice list of @font-face ready fonts (for free) that can be used with any of the above methods.

(Image credit sindesign)

1. Tables are evil and should never be used.

Tables are one of the most vilified aspects of HTML. While for quite some time they were over used and abused, they do have a place in modern, semantic web design. Gasp! It’s true. Tables deserve to be used! But, they deserve to be used correctly and responsibly. Tables are meant to hold tabular data, go figure. Your site will indeed be XHTML/HTML compliant, even if you use a Strict doctype and tables. Because you used them properly.

2. IE6 doesn’t work with transparent PNGs

I know there are a million IE hacks to make the PNG files that you made in Photoshop work with IE6. But did you know that you don’t need that fancy workaround? What doesn’t work in IE6 is PNG24. But I am guessing that you didn’t know that PNG8 supports Alpha transparency. It is Photoshop that doesn’t support the Alpha transparency in PNG8. What is a designer to do? Make their transparent PNGs in Fireworks! You can make your PNG8s have Alpha transparency. No hacks required to make them transparent in IE6! Which is good, because as much as I hate it and do not support it in my work without additional charges anymore, it is around. And it always comes back to bite you when you least expect it.

3. Flash is not SEO compliant.

Ok, so this is an iffy one. Flash is definitely not accessible to screen readers, and to be 508 compliant you need a text version of the information on your site. But there is an initiative between Adobe and Google to help search engines crawl all your fancy schmancy Flash designs. So, as I have said before, Flash in small doses is OK. Flash on an enterprise level is OK. I have changed from a Flash hater to ambivalent, but yes, it does (sort of) talk to search engines.

4. Small fonts make your site look “designer”

Please. Don’t. Do. This. Yes, in print, itsy bitsy type makes you look luxe and high class. On the web, your 9px text looks ridiculous on my wide screen. Creating white space shouldn’t be done only by making text smaller. It should be done by creating vertical rhythm and adding enough padding to your text blocks.

5. There is no such thing as good typography on the web without replacing text with images.

Web typography is tough. But we aren’t chained by simply using images any more. There are @font-face and Cufon. There are sIFR and FLIR. Some of these are easier to implement than others. And some of these give you more control than others. But the important thing to remember here is that your line spacing, vertical rhythm and general typography can (and should) be controlled.

I know there are other misconceptions about the web, but these are some of the most pervasive, and I thought it was time to set the record straight.

(Header image credit: Imformatique)

There is a lot of buzz around the web about pending legislation for making 508 compliance mandatory for all US-based websites. We have to say that we are happy about that. What this means is that sites will be forced to be accessible to screen readers and other assistive devices. (My mom is a special education teacher, so making sites accessible is quite important to me.)

This goes beyond W3C compliance, although that is a good place to start. What exactly do you need? Alt tags and longdesc for images and elements that have no readable text. A text file alternative for imbedded flash. A good meta description and client side image maps. Row and column headers in your tables. Javascript should not change the meaning of the text presented in the HTML.

All of these are good practices, but it is time to start making them mandatory in all of the coding that you do. It is simple code changes that will save your clients money.

From the 508 web site:

§ 1194.22 Web-based intranet and internet information and applications.

(a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

(e) Redundant text links shall be provided for each active region of a server-side image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

(i) Frames shall be titled with text that facilitates frame identification and navigation.

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(o) A method shall be provided that permits users to skip repetitive navigation links.

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Hopefully the web starts to be a more accessible place.  If you are political, please support the legislation requiring all US based websites to be 508 compliant!

(image credit kodomut)