Welcome

Moving...

17/12/2007 at 18:48:45 - No comments

Posted by Harry

Ok, I have set up a personal site away from here, under an entirely new domain, and will be over there more than I will be over here. Keep up with things over at http://csswizardry.com.

Harry

PR Design Labs

08/11/2007 at 11:23:03 - 1 comment

Posted by Harry

I have just completed my newest project: "PR Design Labs".

Labs is a public laboratory where developers can go and get free codes and snippets that PR Design use in their commercial development!

Enjoy.

Someone's Ripped My Site!

03/11/2007 at 11:23:20 - 1 comment

Posted by Harry

This is not a new trend, but it shocked me all the same. I recently developed this site for the web department of PR Design and, not to blown my own trumpet, it got some pretty good recognition with CSS galleries. It seems someone else quite likes it too. I was checking my Google Analytics and this link came up. Can you see a slight resemblance? Or is it me? Please gimme some advice! I've contacted Freewebs, asking them to pull the plug on his account but is there anything else I can do?

Thanks, Harry

EDIT: Many thanks to the guys at Freewebs who have sorted the problem out. Incidentally, through my travels on this issue I learned a nifty way of preventing hotlinking. Maybe I'll do a tutorial on it sometime.

Diagnostic Styling

18/10/2007 at 11:24:12 - 6 comments

Posted by Harry

Welcome to another tutorial. Today I’ll show you how to optimise accessibility and standards during the testing phase using Diagnostic Styling.

Imagine this, you’ve developed a site, spent ages on it. It looks amazing. Then the W3C Validator (http://validator.w3.org/) tells you there are alt attributes missing. Now this isn’t in itself a disaster, it tells you which lines the errors are in. But suppose you use Notepad which has no line numbers! Suppose you could have avoided that whole situation in the first place…

Diagnostic Styling works by defining a css rule for a particular situation. Take the following:

This works as follows:

- All images will have a big red outline
- All images that have an alt tag will have a blue border, images without an alt tag will stay red

You are aiming to have no red borders on your images!

Suppose your image has an alt tag, but the alt tag is empy, how do you find those visually?

Now all images with an empty alt tag will have a green border.

But, it doesn’t stop there: this method works with the title tag too.

And the href tag:

Diagnostic styling is only really suited to testing, so remember to strip out any diagnostic css before you publish your site!