CSS Sprites: Useful Technique, or Potential Nuisance? – Smashing Magazine
This article explores whether the use of CSS sprites for images on your site is actually beneficial.

HTML5 & CSS3 Checklist
Handy little compatibility chart.

iPad User Experience Guidelines | UX Magazine
My favorite: "Rethink Your Lists" – Consider a more real-world vision of your application. For example, on iPhone, Contacts is a streamlined list, but on iPad, Contacts is an address book with a beautifully tangible look and feel.

Use a Tablet to Create Stunning Comic Book Fan Art Illustrations | Psdtuts+
Why I give up ever trying to illustrate :) This is a sample tutorial?? This would be my magnum opus…

Snake Oil? The scientific evidence for health supplements | Information Is Beautiful
Well visualized data is special. This one is particularly interesting

Take Up and E-Read
Neat discussion on physical books vs. ebooks, especially with regard to sacred text, like The Bible

Photoshop Content-Aware Fill Sneak Peek
o.O … watch this.

Meet The HTC Evo, The World’s First 4G Android Smartphone
I smell an iPhone killer. Unless Apple (and ATT) step up their game, this is going to pose a threat. 4G wireless, plus the ability to use it as a MiFi wireless hotspot. Lots of speed and storage… beauteous.

Brain Crack – ZeFrank
(Careful, F-bombs abound, but it's worth a watch.) “Each day I live in mortal fear that I’ve used up the last idea that will ever come to me.”

Drop shadow with CSS for all web browsers
A tidy collection of all the proprietary box-shadow methods for all modern browsers (AND IE 5.5+). Nice post.

MailStyle: A HTML Email Plugin for Ruby on Rails
Takes a properly written HTML email and puts styles inline and ensures images are absolute paths in order to ensure maximum email client compatibility.

update 8.31.2007: I’m bringing this article up to date with my current set up and a few other links.

Tools Of The Trade

Like any trade, you will need a few tools in order to be a successful Web developer. Here’s what you’ll need.

1. A computer. If you are reading this, you already have one. If you are serious about “this whole Web design thing” you’ll probably need a better one. I recommend an iMac or MacBook Pro with 2GB of RAM. If it is possible to own both a PC and a Mac (get a cheap PC or a Mac Mini) this will also help. Web development is not a processor intensive trade like print design or movie editting, but having a zippy computer will make your whole life easier. If you are a contractor, you can write it off on your taxes.
2. An Internet connection. If you are reading this, you have one.
3. A good graphics program. Use Fireworks, it’s the best. You will probably also eventually need to familiarize yourself with Illustrator and Photoshop as well, but this can wait. (Dear Photoshop kiddies. If one is just getting started, Photoshop is NOT the best app for the job. It is the industry standard because it was first out of the gates. Fireworks is better on so many levels for Web graphics.)
4. A text editor. You will spend most of your time here. For PC, use TopStyle, for Mac, I use Coda, and TextMate. There are a lot out there, and many people have many opinions. Everyone agrees on TopStyle for PC though.
5. An FTP Program. I use Filezilla for PC, and Transmit on Mac. Note that Coda comes with Transmit built in.
6. A variety of Web browsers. On PC get IE, FireFox, Opera, and Lynx. On Mac, get Safari, FireFox, Opera, and Lynx. You will be checking all of your sites in all of these. Make FireFox your default browser, use it for everything. If a site doesn’t work in it, complain to the site admin and don’t go back..
7. The Web Developer Toolbar and Firebug addons. Two extremely useful tools that will help you debug your code and explore other people’s code.
8. A Web Host. Use Dreamhost, they are the best value by a million years.

Getting Educated

Books

Buy these books, read them, highlight them, and refer to them frequently.

1. Don’t Make Me Think. The usability bible. How to build a user-friendly Web site. A bit dated in its examples, but the concepts are timeless.
2. Web Standards Solutions. A very pragmatic, hands on, learn as you go type of book. Read it cover to cover once. Start building a site. Refer back to it as you go.
3. CSS Mastery: Advanced Web Standards Solutions. After you have done a project or two with CSS based layout, pick this book up and read it. It will help you clean up your act.
4. HTML Mastery: Semantics, Standards, and Styling – A great, fairly comprehensive book about all things HTML related.

Web Sites

Articles

1. A Dao of Web Design – Start here.
2. To Hell With Bad Browsers – A classic.

Reference Sites Get an RSS aggregator (Bloglines or such) and subscribe to these sites. Follow them closely.

1. W3Schools - Great tutorials to get you started with HTML and CSS (and other things actually…)
2. Web Design From Scratch – A great compilation of resources for nearly every facet of Web design.
3. Godbit – Has a great community of very knowledgable Web designers.
4. A List Apart
5. Digital Web
6. Vitamin

I subscribe to many other blogs of designers and developers in order to keep a finger on the pulse of what is happening in the very active Web developers community. This is a good thing to do, but you should find these people on your own. I can give you a list to get you started if you so desire.

Any Questions?

Please feel free to contribute or argue with any of the above. I’d love to hear what you think.

The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color like so:

HTML

<

fieldset>

<input ... />
<input ... />

CSS

fieldset{
background: #ccc;
}

Proper rendering (in every browser but IE is close to this: (this specific screenshot is from Firefox)

IE does something a little different: it causes the background color to be applied to the legend as well, mysteriously causing the background color to “spill” out of the fieldset.

The solution is to dissociate the legend tag from the normal flow of the document. That is, absolutely position it. Here’s how: (Since IE is the only browser that needs help with this, we are going to use the Holly Hack, so it only applies to IE)

1. Give the fieldset a position: relative; to make sure we are positioning the legend tag relative to the fieldset.

    * html fieldset{
    position: relative;
    }

1. Give the legend a position: absolute; to break it out of the normal flow of the fieldset. This will position the top left corner of the legend with the top left corner of the fieldset, so we need to bump it up half a character and to the right half a character. Like so:

    * html legend{
    position:absolute;
    top: -.5em;
    left: .5em;
    }

1. Now we’re almost there. By way of a little cleanup, we are going to apply some top padding to the fieldset and a top margin to the fieldset in order to make space for the label tag which is just floating on top of everything.

    * html fieldset{
    position: relative;
    margin-top:1em;
    padding-top:.75em;
    }

1. Voila! You have a form with a fieldset and a legend that looks nearly identical in all browsers.

See an example here.

The answer: Frames aren’t inherently bad, however, when you use a Frameset as a way of managing a Web site THAT is inherently bad.

I came up with five primary reasons.

0. Frames based Web sites do not fit the fundamental conceptual model of the Web!

Every problem with frames flows from this problem. The fundamental conceptual model of the Web is this: Every page corresponds to a single URL. One URL = one page. A site that is stuck in a frameset is referenced from one address, but contains many pages. This presents problems with linking to, and book marking a specific article in a frames-based page. (The ability for someone to link to your articles and bookmark them is a huge part of how traffic to your site is generated).

1. Using frames for an entire site is an improper use of a frameset page.

Framesets are a fairly ingenious and very useful method for helping someone navigate through a single, very large document, much like Adobe Acrobat’s navigation pane. However, most Web sites are a collection of documents on a particular topic (business, organization, etc…).

2. Search engines have a hard time indexing a Web site that is stuck in a frameset.

Google itself mentions that while it does crawl frameset pages, it has a difficult time knowing how to categorize documents in a frame set.

3. Some screen readers/assistive technology do not (or have a difficult time) handling frames based pages.

Those using screen readers cannot quickly scan the contents of multiple pages. All of the content is experienced in a linear fashion, one frame at a time. Frames are not inaccessible to modern screen readers, but they can be disorienting. Different screen readers handle framesets differently, with the more expensive software having better handling of frames. However, to the more common screen readers and assistive technologies, the frames are not an insurmountable obstacle, but are an unnecessary impedance. Much like having only one handicap accessible entrance to a building.

4. A site that is stuck in a frameset adds an unnecessarily high level of difficulty/headache to development/maintenance (especially maintenance).

Most users or clients won’t care about this (unless the developer charges by the hour) but it is very easy for an extensive frames-based site to get disorganized. Broken links and missed “target” attributes abound, making the behavior of the site erratic. A way I look at it is that entropy applies at a much greater rate to a frames-based site than a non-frames site. Ironically, frames are often (naively) chosen as a way to more effectively manage a site. If the site is small-scale enough to have only one developer, and the site never changes hands, this MIGHT be true. However, most often I find that when a developer inherits a frames-based page, the first thing they do is redesign it from the ground up. It is simply too difficult to ascertain what a different developer had in mind with their site model.

Further: A web site that is entirely encapsulated in frames is an unprofessional method of Web site development that was popular as a novelty in the nineties (almost a decade ago) but was quickly abandoned by pros after realizing the above fivereasons.

So why do frames-based sites exist??

If you look around, you will notice that there are frames based pages out there. But if you pay attention, you will notice that there are very few large corporation sites that use frames. I suspect that the reason frames-based pages exist at all is due to a self-styled Web designer (or an administrative assistant of some sort to whom the task of creating a Web site has fallen) utilizing a WYSIWYG Web development tool (such as Frontpage or Dreamweaver) and realizing that if they use frames, they only need to update a navigation page once anytime they want to make an update. This is a very astute observation, however, a professional will recognize that the use of server side includes, or even Dreamweaver’s template system is a much better solution on all levels.

References:

• http://www.webaim.org/techniques/frames/
• http://www.google.com/webmasters/2.html
• http://www.useit.com/alertbox/9612.html