CSS? What is this magic?

When I was first given the duty of designing the Bleach website, I spent a lot of time on a number of different sites detailing how to get into web design. With a few tutorials and a lot of practice, I felt I had learned enough HTML to get the job done. The original site sucked, but a few weeks later Pedro, Alex and I sat down and cranked out the masterpiece of usability you all know and love.

Recently I had some time on my hands, so I figured I would go back and learn a bit more about the trade, maybe spruce things up a bit, clean up the mess of code I created and make it so that anyone viewing the source code wouldn't have their internal organs liquefied.

So I check out a few Intermediate and Advanced sites, and it turns out the entire idea behind this site is wrong. Huh.

Here's the idea: bleachfilm.com is made entirely with HTML, the backbone of traditional webscripting. This code doesn't provide many answers for layout problems; it's supposed to contain the content, and only the content. Layout is then handled in an alternate file, a CSS file (there may be other types, I don't know. CSS is the one I'm learning now), that then assigns presentation properties to the HTML that makes up the page.

Since I did not have this language at my fingertips when creating the site (note: this is why we never half-ass big things like learning web design), I jury-rigged the layout by using tables. Tables are generally used for presenting tabular data (please refer to table 2.1 in your text), but I stuck tables within tables within tables to accomplish such feats as 1) putting things next to other things (normally impossible in HTML), and 2) creating borders (that whole grey-square-inside-darker-border that all the content lives in? That's a table in a table in a table).

If you were to look at the source code of the site (not that I'm saying you should), you would see little more than table tags and font tags. Only today, reading up on advanced techniques, did I learn that you should "never ever ever use a font tag, because a slow and very painful death will undoubtedly follow". Hmm.

Armed with this newfound knowledge, I can go back and do everything correctly...again.

I'm also doing things correctly in the hosting part, this time. What you're supposed to do is keep a copy of the site on your hard drive, modify it there, and upload every time you make a change. This requires an FTP program that I didn't have. What I did in lieu of that was use the WebFTP server the host provided to upload and edit files. This is great, except that it makes it impossible to keep an accurate backup on your hard drive (it only deals in archives, and seemed reluctant to upload ones I made myself. Therefore, I could only go one file at a time). This worked fine, but if anything had happened and we lost data, our backup files would be weeks old. Additionally, if anyone was to try to log on while I was making changes, all kinds of crazy shit might happen.

So now I went out and downloaded my very own FTP interface, so I can update on Lappy, and then upload everything to the server, ensuring that my backups are always perfect. No crazy shit will now happen. All is well.

So, most of this week is going to be rebuilding bleachfilm.com, based on my newfound knowledge, to look exactly the same. If all goes as planned, none of you will have any idea that I changed anything, unless you looked at the source code (were you to do that, your eyes would bulge out of your head and the words "ZOMG OPTIMIZED" would appear in enormous letters, forever burned onto your retinas, so I don't recommend it).

Of course, ideally I would use PHP for the site, but no way in hell is that going to permeate my brains before this movie comes out.

Oh, something relevant to your interests: new Media content on the site, my cast interview. Not nearly as amusing as this here blog, but still, enjoy.