Life has consisted of mainly Zelda, The Wire and work this year. No time to find any funny links.

So here’s a clip from The Wire I’ve just uploaded to YouTube. In a rare montage-to-music scene drug dealers Avon Barksdale, Stringer Bell and Stinkum enter the Lowrises to see D’Angelo and check that their product is being sold correctly. The Wire is all filmed on location using no sets whatsoever giving it a real air of authenticity.

The music supervisor of The Wire has his own blog at www.tenthousand.org and wrote a small article about the scene above. There’s some great music downloads and mix tapes at his site too so please go and check it out.

As for The Legend of Zelda: The Twilight Princess on the Nintendo Wii I think I’m about half way through. The video below shows the last boss I finished off a day ago. It’s not me doing the spinning but it’s a good example of the current level of escapism going on at King Mansions. This may act as a small spoiler for those only a short way through the game, and I’m sure I had this baddie down in under 7 minutes:

And as for work well I’m sure I can show you a little of what I’ve been working on here: http://www.audemos.co.uk/redesign/

Ok, here’s some good links:

Ingenious way to kill bees.

The new Burn My Face Off Elmo on YouTube.

No, I didn’t go to see Fat Boy Slim yesterday. There’s some good pictures at The Argus though. Including this famous Brighton face I haven’t seen in ages:

The webstats for KingOfMyCastle during December really skyrocketed. This site had over 80,000 hits and nearly 6,000 unique visitors.

The BBC’s John Simpson looks ahead to World news events in 2007.

I finished watching The Wire Season 1 too and it’s so good I’ve ordered the second box set. Probably the best drama I’ve seen in a very long time. If you skip to the 2:20 in this YouTube video Charlie Brooker gives his opinion of it:

del.icio.us is one of a new generation of community sites that handle your links, posts and articles in interesting ways. Del.icio.us prides itself on being the most popular social bookmarking website allowing users to keep their favourite links or bookmarks online, rather than on their PCs. Nothing too remarkable about that you may say but the clever bit comes when they combine this information to use it in other ways. Then you can see if other people have similar links to you, just how popular your bookmarks are and you may find some links that are more useful than your current ones.

Today I decided to add the ’send to del.icio.us’ links to the bottom of my posts to allow people to automatically add them to the network. This should have been easy as the del.icio.us Save Buttons page has some code there I could use specifically for the the WordPress files which run this website. Unfortunately it didn’t work.

I’ve never programmed JavaScript before so I was stuck on how to make this work. So after around four hours of reading JavaScript primers and some pointing in the right direction online, I managed to fix the code myself.

So for anybody wishing to put a pop-up javascript del.icio.us link on their WordPress posts then please try this code:

<a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url=<?php the_permalink() ?>&title=< ?php the_title() ?>','delicious', 'toolbar=no,width=700,height=400'); return false;">Save to del.icio.us</a>


The reasons the original code wasn’t working were the encodeURIComponent functions in combination with the apostrophes. I removed them, as they’re both url encoded anyway, and it seems to have worked. So if you come across this page from a search engine or one of the other new social/community/network sites then please save it to del.icio.us as this could help some more people out.

I may be adding links to the other popular sites such as Digg and Reddit but I’ll need a long rest first.

During the redesign of this site I had to take into consideration the current hot topic of web standards, accessibilty. This is where you design your site with respect to people with disabilities, such as blindness, so that it can be viewed in as many different kind of browers and screen readers as possible. There are laws, such as the Disability Discrimination Act UK and US Section 508, demanding that public bodies make their websites fit certain criteria. This makes web accessibility a valuable skill to add to your arsenal. It was also the topic of the recent Brighton & Hove web awards keynote speech by Kevin Carey, the head of HumanITy, a digital inclusion charity. The good news is that accessibility and Search Engine Optimisation (SEO) share the common traits of demanding well-writen code in line with web standards so there are also financial reasons to adopt them.

During this sites redesign one of my main goals was to fix the poor CSS layout in an attempt to help its SEO. The old fluid layout technique had demoted the middle content to the bottom of my HTML file leaving the busy left and right bars sitting in the middle of the code. Search Engine robots often give up reading a sites content after a certain amount of code and stopped before they got to the actual post. This has now been fixed and the code is semantically sound with the correct use of headers and other CSS tags (with no hacks) allowing me to post my CSS validation badge at the bottom of the sidebar. To get a better understanding of this you should view the source of this web page and you’ll be able to almost read the site yourself (in Internet Explorer go to view/source and in Firefox press CTRL-U.) If most of it makes sense to a human then it should work better on all devices.

After last Wednesday’s post on the live implementation I thought there might be nothing left to change on this site. The PHP templates were fixed, the CSS was fixed, the design had improved by a factor of 10, what else was there to do? After adjusting the rightbar adverts and the comments form I thought I had finished. It was only after I decided to check my site out with some online validation tools I realised there was a lot more to do. The goal was to get one of these:
and to do that I needed to get a pass from a range of different sources. I did well and made around 10 changes that have increased the accessibility by quite a margin. I now present a list of different validation sites, along with comments on why this site failed to pass.

Cynthia Says. My site passed the Section 508 test and only came up with a few warnings, not fails, on the WCAG tests. One problem was with the alternative text of images (the description of the image). You are meant to use an ‘alt’ tag so that people whose browsers have images disabled can still know what the image was. Blind people should also be able to read the image description, not guess what it is from the filename. I enter these descriptions when I create each post and I can often get lazy and ignore them. The recommendations are that the descriptions should be between 7 and 81 characters long and I will endeavour to include these from now on.

TAW. This validation service checks your site against WCAG 1.0 standards up to level AAA (priority three) and is the best looking of the lot. Instead of a list it actually visibly highlights problems across your web page making identification of problems much easier. KingOfMyCastle.com passes Priority 1 & 2 but falls over with only one instance of failure to comply with Priority 3. The mistake is with the search box on the right. I am advised to put some text into this box as some screen readers have difficulty when they are empty. Aesthetically, I felt this was wrong so I have left it blank.

ATRC. This checker validates your site to WCAG 2.0 Level 2 on it’s default setting. Unfortunately my site fails on only one factor, a dodgy link created by WordPress. This link has no text to actually click, which is what the validator complains about. Solving this would involve making changes to the WordPress engine itself, something I’m not about to do. Oh well, at least this isn’t my fault.

EvalAccess 2.0. Ouch! This one threw up over 250 problems and 600 warnings although Priority 1 was clean and Priority 2 had only one issue. The issue was that it didn’t ‘associate labels explicitly with their controls’ in the search area on the right. To fix this would mean putting some text next to the search button saying ‘Press this to search’ which I feel is unnecessary on a submit button. Most of the issues thrown up on Priority 3 are with Access Keys which allow the reader to move to specific links using shortcuts, rather than the mouse. A good article about access keys can be found at A List Apart and it’s well worth the read if you’d like to know more about this underused and badly supported feature.

So that’s the automated experts view on my source code but what do I think? Well, I’m upset that I can’t display the badge proudly at the bottom of this site but I’m not a government organisation which lets me off. This is just some place on the web I dump a number of links, images and articles I think people may find interesting. However, the improvments from the last design are numerous. Just try increasing the font size (CTRL scroll wheel) and you’ll see that the site doesn’t break as before. The markup is much more cleaner and I’m sure that anybody using a device other than a standard web browser will be having a much better experience than they were last week. I’ll just chalk this one up to a big experience gain on my part.

will be happening to this website over the next couple of days. There may be times it’s down and other times you might get some gibberish on the screen. Thats because I’m doing a live implementation of my new web design.

Now you should test your sites on your PC before you implement them but that would mean creating a whole new WordPress database on my computer. Unlike many websites this content is dynamically generated by the WordPress blogging engine. You never get to see WordPress as it’s just the back end I use to write posts, manage comments and upload images. All you see are the HTML pages it generates using my PHP templates and my CSS stylesheets.

I’ve had to radically change both PHP templates and all the CSS for my design so over the next couple of days I’ll be putting them through this blog’s WordPress engine (think mangle or mincer) looking at the output and then fixing all the bugs. Luckily you can swap themes quickly in WordPress so once I’ve outputted a web page I can switch back to the old style while I work on fixing the code.

Hopefully they’ll be a fully functioning website by tomorrow morning.

It’s now 22:50, Wednesday 15th. Let’s see how long it takes. Hope you enjoy the new design!

Yes, I’ve been hard at work this weekend thinking about this site’s redesign and I’ve come up with a few ideas. I think the new motif will be the King from a playing card. Something similar to this:

I’m going for three columns, fixed at 810 pixels. It may not fit on everybodys screen but the important stuff (i.e. my posts) will be on the left. The amount of users still stuck on a 800×600 display is minimal and I’ll make a seperate style-sheet for handheld device users. The content area will have a white background, whereas the body background will be very pale blue. I’ve yet to decide whether to do a flashy fade from background to content. It’s easy to do with the fixed width but may end up looking out of place. Simplicity is the key. There will be much more white space, the text will be much smaller, the headers bigger and the links will be a different colour.

One issue is the other pages I current have linked on the left. It took me ages to get that folder effect (neglecting graphic design in the process) but I don’t get that many visitors to those pages:
‘Current eBay Auctions’ is still popular and bring many hits from eBay itself, I’ll be keeping something similar in the redesign.
‘House Records For Sale’ has 60 users landing on it every month but I haven’t sold a record from it or updated it in over a year so it’s time for that to go.
The ‘ID These Tunes’ section used to be very big but all but two of the tracks were identified so it’s time for that go too.
The ‘Photo Album’ page is great, being all my photos of course, but due to the invention of services such as Flickr, allowing me to embed photos in the rightbar, this may have to go. I have to think of my bandwidth too!
The less said about ‘Links’ the better. Half of them are dead and today was the first time even I’ve looked at it for months. What with the services such as Digg (which embarrasingly I’ve yet to look into) this page is redundant.

A major design flaw with this current design is that the links I’ve described above have so much prominence on the main page. When I crowbarred the blog into this design it felt right but as the blog has now come to overtake the rest of the site in importance and hits they now look like useless relics from my previous design. So out they go (apart from the auction page).

More soon!

Oh well. I didn’t win the award yesterday for Brighton & Hove’s best personal website or blog. Instead it went to Adactio. Which is a well coded and regularly updated website. Well done!

One thing I did notice was the number of extremely good looking websites being made in Brighton & Hove. There really is some first class design out there, so I’m glad my fledgling web design business has some really good graphic designers I can call upon if needed.

I also have tons of ideas for this site’s redesign. If I can just get the header image I’m after right I could get started on this puppy within a week or two. Keep you eyes peeled!

The time has finally come for a total redesign of this site. As well as being visually unremarkable the code is a horror to look through. So over the next few weeks I’ll be taking a detailed look at the descisions and processes used to bring this site up to date.

As you can see, there was much redevelopment from my first site to it’s current incarnation. The first used frames (top and left were fixed, right was the changing content) which is a big no-no in current web development, but it was my first site ever. The current site moved from the frame-based to it’s current three-column CSS positioning, which has been a W3C recommendation since 2001. This separates all layout information away from the content which is a good thing for many reasons including Search Engine Optimisation and Accessability.

Making a three-column website work in all browers can be a bit of a headache, especially when the middle column is liquid (i.e. it stretches to fill the gap between the left and right column.) If I could ignore Internet Explorer 6.5 then life would much simpler but there were some serious problems with the way that browser renders CSS positioning. It doesn’t understand the min-width and min-height parameters, requiring you to hack the code specifically.

Three-columns were all the rage three years ago but now it’s more de rigeur to have a tidier two-column format. A good example of this is the Warren Ellis website (below left). This has a liquid content area and all the other stuff in one fixed-width right hand section. As much as I’d like to use that style I shouldn’t really use it as I aped his old three-column layout for the current look.

Fixed width or not? It’s suggested that the minimum width you should have a web page is 720 pixels. Most computer screens operate at 1024 x 768 pixels so is there a need to make your website fit a smaller 800 x 600 screen? Well yes there is, and even on the bigger resolutions the browser window is often smaller than the whole screen. Will that make your website look stupid on a 1600 x 1200 display? Probably. An example of taking a fixed width website to an extreme can be seen with the Lonely Flower design at CSS Zen Garden (above right). You can cheat by looking at the user’s resolution and generating the web page specifically for that resolution but I’ve never seen the point in generating more style sheets than necessary.

My initial thoughts are to go for a 550 pixel content area (fixed) and a 250 pixel sidebar (fixed). This would still work on 800 pixel wide screens and, as long as the background was well designed, shouldn’t look too bad at higher resolutions. The lack of a liquid content area would annoy some people but everybody knows how to use a mouse wheel or scroll down these days so the desire to fill every inch of the screen is reduced. And for an incredibly techie note, it would make it much easier to push the content higher up the HTML making it much more Google friendly.

Once I’ve decided what course to take I’ll write again. I’ll be tackling the issues of colour, header and background design next, my least favourite subjects. It’ll be time to dig out my Photoshop guides and colour wheels for sure.