Two fellow Wise Women list members have books hitting the shelves at the moment:

• Shirley Kaiser of Website Tips, Brainstorms and Raves and SK Designs has a new book, Deliver First Class Websites: 101 Essential Checklists. Two chapters are online (in html rather than pdf so no sign-up needed): Chapter 12, The Ultimate SEO Checklist and Chapter 14, The Ultimate Testing Checklist
• Miraz Jordan and Maria Langer‘s WordPress 2 (Visual QuickStart Guide) looks especially useful for those of us getting to grips with the intricacies of WordPress.

Although I don’t have the budget for books at the minute and can’t vouch for them personally (yet), both books come highly recommended via other list members and are definitely high up there on my list of books to be coveted.

And finally…

How will your obituary read when you pop your clogs? Find out at Quiz Galaxy (thanks to Croila).

If you read this post, here’s an update.

Trawling through the multitudinous spammer comments for willy wotsits and all sorts of pharmaceuticals that would sound dodgy even if the “author” didn’t go by the name of Righteous P. Turbitude III, I nearly fell of my chair at seeing Andy Budd’s name nestled amongst them.

Many thanks to comments from Andy Budd and Chris Mills (author and publisher respectively) for pointing out that:

• Amazon.co.uk have now reduced the price of CSS Mastery to £15.83 and
• an updated ebook (errors fixed) will soon be available for purchase from the Friends of Ed website (still a bargain at $17.50).

Thank you both for providing the new information (and apologies for the uncharacteristic rant). It was uncharacteristic, no? Please tell me I’m not a whingebag?

I’ve been dipping into CSS Mastery in preparation for the Wise Women css study group kicking off this Friday and it is excellent. Really, really excellent.

Starting off with a review of basic css that *cough* we all know and need to frantically revise love, the rest of the book takes you through ever more advanced techniques to produce sites such as this and this.

I’ll write more when I’ve read more but I suspect it will be sitting alongside Rachel Andrew’s CSS Anthology as a book that is always to hand and frequently referred to.

I’m knee deep in the redesign of a multi page website for a nearest and dearest, trying to make it accessible, validate, blah, blah, blah when I suddenly came across a great tip for validating your css even when your (x)html isn’t yet ready for validation. Ever seen this message from the W3C validator?

“Please, validate your XML document first!”

Frustrated, I googled for that phrase and came across an excellent article by Zoe Gillenwater in Making it Legal: Validating Your (X)HTML and CSS. Here’s an excerpt:

The CSS Validator accepts more than just .css files, which is handy if your styles are embedded or inline, instead of linked or imported. Just put in the URL to your (X)HTML page (or CFM page, etc.), and the validator will find the styles in it and validate them. It can also find and review linked or imported style sheets this way, but it is recommended that you validate external style sheets directly, not by submitting their parent pages to the CSS Validator. This is because if the XHTML page has errors or warnings itself, trying to validate its external style sheet can result in the error “Please, validate your XML document first!”. To avoid this, simply validate all external style sheets directly, rather than through the page they are linked or imported from.

I was going to point you to the error message for this site but blow me down, now my css validates (unlike the code and don’t get me started on the now borked archive page) but here’s a quick summary of what you need to do to validate the css independently of the (x)html:

1. You’re using Firefox, right?
2. With Chris Pederick’s Web Developer extension for Firefox, click on View CSS and your style sheet(s) will open in a new tab or page.
3. Click on the hyperlink to the page(s) containing the css For example, the css for this site which will in turn open in a new page or tab.
4. Click on Tools > Validate CSS to automatically use the W3C Validator.

If you like the Web Developer extension for Firefox you might also want to get the the Web Accessibility Tools Consortium Web Accessibility Toolbar for Internet Explorer and the (still in beta but very useful) Microsoft Developer Toolbar.

Validation using the above method doesn’t seem possible at first glance (no time to delve right now) but there are plenty of other tools to make it very worthwhile downloading.

Right, I’m off to make a pot of tea, find some good coding music at Pandora or Last.fm and wait for the phone to ring…

PingMag’s 8 Web Design Warm Fuzzy Feelings

I’ve been making minor changes to the layout over the past week and although I’ve been anal in keeping chronologically organised backups, the thought of going through each one trying to find the problem has me running from the room screaming “Hold the sauce Napolean”.

I’ve started by running a validation check. Cue the wailing and gnashing of teeth. From 0 to 41 errors in one several easy steps. I’ll start by fixing those plus the css validator issues but if anyone wants to chip in with how to make the right hand sidebar (sidebar 2) come back up to the top in Internet Explorer, I’d be mighty grateful.

Design trends in 2006

Two articles so far: Andy Budd’s Web Design and Development Trends for 2006 and Cameron Moll’s Bold predictions for the savvy designer, 2006 edition.

No mention of behatted boxers then?

MaxDesign : some of the best tutorials on the net.

Eagle-eyed readers will have spotted that there is no longer an odd red bar (Firefox) nor a big red box (Internet Explorer) when you move the mouse over the big banner picture there at the top.

[Now for the boring bit unless you’re fascinated with css.]

I was perplexed because I was sure that at some stage (late at night) I’d added a border in that red colour (#990000) but I went through the css with a fine toothcomb and could find nothing. Then inspiration struck and I realised that it was a hover effect causing the red bar/box.

I’m still at the stage where I have to check css code, especially when it means having one set of links behave differently to another, so I pulled out Rachel Andrew’s excellent book, The CSS Anthology: 101 Essential Tips, Tricks & Hacks. It took less than a second scan the index, straight to pages 7 and 8 for a revision of contextual selectors and bingo, it’s fixed.

Big beaming smiles all round.

I’ve tested in Firefox, IE and Opera on Windows, if anything’s broken where you are, could you let me know?

Next steps: reduce width of the layout so that viewers with 800×600 displays don’t have to scroll horizontally (sorry about that) and set the content column (this one) to flexible width so that it resizes.

I’ve a small black and white dog at my feet at the minute, saying a big thank you to everyone for their good wishes. She’s feeling a lot better, can climb the stairs and jump on the bed now but… just a minute, she’s whispering… oh, one of those special doggie chocolates from the tin on the top shelf would make your bad leg feel a lot better would it? Okay, let’s go get one…

Night, night.

If you scroll down to the bottom of the sidebar column you’ll see that 3 lines have now become 2:

Aiming for:
Valid xhtml 1.1
Valid css

is now:

Valid xhtml
Valid css

A big thank you to himself* for assistance above and beyond the call of duty via msn last night as I stared bemused at the screen, unable to fix the last few errors (pesky statcounter javascript closing tags) without smashing or kicking something.

I’m still debating which doctype to use and will be reading up on the subject this weekend, including Autistic Cuckoo: Doctype Declarations and Content-Type Headers and HTML and XHTML Frequently Answered Questions. If anyone knows of a good (recent) summary of the merits of each doctype, could you let me know? Ta.

What else… oh I made a 404 page a while back, forgot about it and then rediscovered it when, well, I clicked on a bad link. I’ll credit the (stock xchng) photo when I find the photographer’s name. It’s here somewhere dammit. I just checked to see if it validated but (duh), the validator gets a 404 message…

* Who by the way has updated the Tippler competition for us google afish, afich, aficionados.

I’ve spent most of the day believing it was Thursday so to celebrate it being a Friday, a few useful web-based tools:

Internet Frog: a cute way to test your upload and download connection speeds.

Browser Size: “a nifty online tool for setting your browser size while doing Web design”.

Want to try out different blogging/cms softwares but don’t want to install them all on your server? Try Open Source CMS.

This site was created with one goal in mind. To give you the opportunity to “try out” some of the best php/mysql based free and open source software systems in the world. You are welcome to be the administrator of any site here, allowing you to decide which system best suits your needs.

The administrator username and password is given for every system and each system is deleted and re-installed every two hours. This allows you to to add and delete content, change the way things look, basically be the admin of any system here without fear of breaking anything.

Snook Colour Contrast Check: I normally use the desktop version of the Nils Colour Contrast Analyser but the Snook web-based version includes a useful (and fun to play with) slider to adjust colours so that you can achieve an aesthetically pleasing combination and check that the colours contrast enough.

Why is color contrast so important? Here’s the layman’s version: we’ve all been on sites that use red text on a purple background. We peer and squint at the screen, muttering obscenities before beating a hasty retreat to the calming waters of more readable pages but if you have any of the various forms of colour blindness and/or low vision, colour contrast becomes even more important. Read more at the W3C.

And finally…

If I didn’t know better, I’d swear that my father had written this: The internet is shit.