Multiple version of IE on one computer

FREE WINDOWS XP IMAGES FROM MICROSOFT WITH PRE INSTALLED IE6, IE7, IE8 BETA, ETC!!! it expires in sept 08 but they reckon theyll make new ones.

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

FREE VIRTUAL PC APPLICATION!!!!

http://www.microsoft.com/downloads/details.aspx?FamilyId=28C97D22-6EB8-4A09-A7F7-F6C7A1F000B5&displaylang=en

ITS AMAZING!!! WELL I HAVNT TRIED IT YET BUT WILL SOON.

and theres also this is development too - some sort of emulator app or something

http://www.my-debugbar.com/wiki/IETester/HomePage

10 colour contrast checking tools to improve the accessibility of your design

Colour Contrast / colour blindness: No need to feel paranoid, looks like there are tools out there that check it for you. Follow the link to the article in the heading.

To see a quick run down of what colour blindness or color blindness is go to this link:
http://www.vischeck.com/examples/
Basically to avoid problems in your design use lots of contrast and don't have red / green things on top of each other, or they will disappear, and don't use red/ green to differentiate something. Same goes for oranges, pinks, greens - they will look very similar.
I guessing you avoid problems too by using tints/ shades of a colour, since no matter what color a person is seeing, they can all see tints / shades of the black or white in the colour. Using white to highlight something is therefore always safe because everyone can see white on a darker background, whether that darker colour is meant to be green or red dosnt matter, so long as its dark enough green or red to provide contrast with the white.

I tested Sim Daltonism app (mac os x only) quickly and it was rad, you download the app and then it shows you whatever is on your screen around you curser with different colour blindness settings, so you can see webpages OR photoshop/ illustrator mockups. So you can rollover your links and so on in your browser and see what it looks like to colour blind people at the same time.
http://michelf.com/projects/sim-daltonism/

The one to remember to check is the most common form which they say is
"Deuteranomaly (partial red-green)
Complete or partial inability to see using middle-wavelength sensitive retinal cones making hard to distinguish between colors in the green-yellow-red section of the spectrum. This is the most common form of color blindness."

The only disapointing this is how aweful my designed looked to a colour blind person - the colours were icky! I guess they're used to this. But I'm going to try and check for Deuteranomaly (partial red-green) in new designs since it is the most common, I even know a few people who have it. I want the colours they see not to look like dogs breakfast even if the site is readable / useable.

For extra brownie points you could send screenshots using tools like this to your clients to show them you've tested it. Great to use at the (graphic) design stage aswell, run the tests on your mockups before presenting them so you dont have to change your design later for accessibility.

http://www.456bereastreet.com/ looks like it has much well written info on Accessibility and the like, read more there when time.

Web development mistakes

Excellent big list of common mistakes and oversights. Good to read over before starting a new site as a refresher because its so easy to forget these if you havn't been doing web work for awile.

Looking forward - Internet Explorer and the CSS box model

For a run down of the Internet Explorer Box Model CSS problem /solutions see this link:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

To avoid problems with the IE5 Win border box model I have for years just been using the technique below automatically. I'm so used to using this method I'd actually forgotten why it was I did this in the first place. So I looked it up and what I was doing was to support IE5 Win! (Or IE6 in quirks mode - which it will never be because I always use a correct doctype).

Nesting Boxes Method For Avoiding Box Model Hacks
"One solution to the box model problem is to not assign padding or border to a DIV to which you have assigned a width. If you don't need a border effect, you can get your padding by simply setting margin or padding on all the box elements (DIVs, Ps, BLOCKQUOTEs, etc) contained with the DIV. If you need a border, simply nest a DIV within that DIV, do not assign it a width (it will fill up its parent DIV), and assign a border to the nested DIV."
Or more simply "...avoid specifying both width and padding or border for the same element. This ensures that all browsers will use the same total width, no matter which box model they use."

So, if you now make sites with the sentiment of 'fuck you IE5 Win you dont even exist' which alot of people are doing now, you can stop thinking 'padding is evil'.

A reminder, the padding/borders were only evil on a div with a stated width. Theres no problem if the div is auto width. Again I was so used to padding / borders being evil I was avoiding them everywhere in favor of margins.

It is archaic and time consuming to be going to all this extra effort of putting margins on all your little contained elements just for IE5. Or special hack values in your CSS. Instead use padding and borders to the W3C spec, and then if your project really does require IE5 support (lots of users who are old, poor, underfunded etc), add an IE5 only stylesheet using conditional comments, and in that, make the width of your divs be = (width+left border+right border+left padding+right padding).

One thing I just realised when writing that was that not having padding / borders on fixed width divs in the past made making layout size calculations alot simpler. All I've had to remember using the nesting method is margins+width, which simple to calculate.

But if Im switching to using padding and borders on my fixed width divs in the future, the calculation becomes: WIDTH MY DIV TAKES UP = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Thats heaps of values to think about! And some times people like to have their text padding in ems so it relates to their font size, so if that is the case, then calculating the width your div takes up becomes tricky, how do you add a pixel and an em?

So depending on your situation, it could turn out to be better to keep doing the old nesting method on some layouts. But its nice to know you don't really have to anymore.

MailMan - Maling List Manager

http://www.list.org/features.html

Mailman, the GNU Mailing List Manager
Mailman is free software for managing electronic mail discussion and e-newsletter lists. Mailman is integrated with the web, making it easy for users to manage their accounts and for list owners to administer their lists. Mailman supports built-in archiving, automatic bounce processing, content filtering, digest delivery, spam filters, and more. See the features page for details.

isEngine

isEngine is a website package that lets you maintain your own site over the internet from anywhere in the world. It combines XML storage with HTML templates to produce a searchable website.
who it's for:
isEngine is built with artists & the arts industry in mind.
But it suits musicians, festivals, writers, journals, shops, manufacturers, just about anybody !
http://isengine.net/
http://isengine.net/calc.html
Good calculator / breakdown of costs of different services / add ons. The idea being that the company who made it gets residuals each year from all the sites they have. The customer gets a cheaper price than having it custom made because theyre using a boxed solution.

IE6 PNG Transparency Fixes

Looked for a few solutions for the IE6 transparency problem:

SUPERSLEIGHT:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.

I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.

If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
position: relative;
z-index: 1;
}

Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.

ALPHAIMAGELOADER ON ITS OWN:
If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.

eg. in an IE6 only conditional commented stylesheet add your fixes
#adivwithatransbkrndthatrepeats {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
height: 1% /*might be necessary sometimes to make it have layout*/
}

if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
#adivwithatransbkrndthatdosntrepeat {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
}

Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.

TWIN HELIX:
Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
http://www.twinhelix.com/css/iepngfix/demo/

Some other solutions are listed here with more full descriptions of options:
http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/

JQUERY:
http://jquery.khurshid.com/ifixpng.php
and following on:
http://plugins.jquery.com/project/iFixPng2

This is an example of a site that uses tricky side columns with transparency fixes
http://www.builtbybuffalo.com/