This nifty little jQuery plugin will allow you to have anti-aliased rounded corners on your design without the hassle of creating images or worrying about browser compatibility. Note that it’s just a jQuery plugin which means that you’ll also need the jQuery library which you can get for free.

How does jQuery Corners do it?

Well, first it checks if the browser supports rounded corners and if so uses the browser’s built-in rounded corners support. If the browser however doesn’t support rounded corners, then jQuery Corners uses its own algorithm to emulate rounded corners. I took a look at the algorithm’s generated code and it looks like it’s using DIVs with varying width and colors to do to the trick. Simple and elegant but most of all it works.

Give it a try for yourself – jQuery Corners

As a quick and easy to follow guide, here are a few things that web designers have to do when creating website.

• Don’t forget to put something descriptive in the Title Tag
• Use the H1 tag for the heading instead of just increasing the font size of your heading text. The content between the H1 tag is a huge factor in SEO. Remember though to use the H1 tag only once!
• Use H2 and H3 tags for subheadings. That’s what they’re meant for. Again, don’t just change font-sizes. Use the header tags accordingly. As opposed to the H1 tag, you can use H2 and H3 tags as often as you want.
• Make use of the “alt” attribute in images. The main purpose of the “alt” attribute in images is for usability. Some users just choose to browse with images turned off. The “alt” attribute gives them an idea of what the image is about. On the other hand, search engines also give credit to the value of the alt attribute so make good use of it.
• Avoid Javascript and Flash in navigation. Search engines like HTML and plain TEXT. That’s it. So if you rely on some fancy javascript or flash for your navigation then you’re doing it wrong. Use ordinary HTML links for navigation as much as possible. You can use CSS to achieve most of the fancy effects you want anyway.
• Don’t use images for paragraphs of text. I know this is absurd but I’ve seen many websites who use images to display paragraphs of text. While people can read it, the search engines can’t. Use plain text for text content… makes sense?
• Comply with the W3C standards. It’s not just for browser compliance. It’s also for the search engines. You can validate your HTML and CSS code at http://validator.w3.org/

I’m sure I missed a few things but the list above should you get started.

The CSS Code

This is the part that gives the dropdown structure. Without the CSS, all you’ll get is plain HTML only output.

Filename: dropdown.css

The Internet Explorer Javascript Hack

Hey! Didn’t I say CSS? Why do I need Javascript? Well, if the guys in Microsoft just followed CSS standards properly then we won’t need to put this javascript. Yes, this is here because we don’t want to make those IE users feel left out.

Filename: dropdown.js

The HTML

Finally, here’s the stuff that puts these things together, the html page.

Filename: dropdown.html

There you go. Copy and paste the code into their proper filenames and check it out. Here’s a working sample: