Template Updates

I’ve made several updates to existing layouts. Most notable is a bit of an update to the ever useful ruthsarian_utilities.js. I’ve updated the event_attach function so that it actually works as intended. More on that in a bit. I also removed my own min-width emulation code for IE and am sticking strictly to the PVII code because, as I found out, there are some serious issues with my approach on older browsers. I also went through and added proper attribution/credits which should have been there from the very beginning.

I’ve moved all the skidoo-based layouts back to HTML 4.01 strict DTDs. The reason is simple enough, XHTML specs specify that to be correct XHTML, your web server should return a mime-type of application/xhtml+xml when serving XHTML documents. However, most return the HTML mime-type of text/html. Also, a number of browsers will display the page as plain text if given the XHTML mime-type. Opera 7.01 and later accepts that mime-type, and you can reghack IE to do so as well. But in the interests of being “correct”, I’m converting back to HTML 4.01 strict.

So if you’re playing around with one of these templates, you might want to pick up a copy of the updated version.

Now, back to the event_attach stuff. IE supports a window.attachEvent which will allow you to apply multiple functions to the onload event. (Opera supports this as well.) However Gecko-based browsers do not. For those, we’re left with the old school window.onload = myFunc;. So to attach multiple function to an event I created the event_attach function which creates an array for a given event and populates the array with pointers to the functions you want to execute on that event.

Nifty.

One sticky problem: order of execution. With IE, the last function attached, is the first to execute, a method known as LIFO. Opera’s version of the window.attachEvent does just the opposite; it’s FIFO. So which do I emulate for non-attachEvent browsers? Since IE has the larger marketshare, I decided to mimic IE. I prefer the method Opera uses, but I’m playing to real-world usage here.

Another approach would be to ditch using the window.attachEvent function alltogether. However I prefer to use functionality if it’s there, rather than reinvent the wheel. But if you feel otherwise, feel free to alter the script to your liking.

A Matter Of Style

Here’s a design-related topic. Oh boy!

Recently I was involved in discussing a redesign for a given web page. We picked an element that would be used (several times) on the page. It consists of a left-floating image of some type that shares space with a paragraph or two of text. The paragraph would specifically mention different areas of the website with the relevant text within the paragraph pointing to the specified website. The idea here is that this element is better than providing just a list of links, which is what the pages being updated currently are like.

Of all the things to get hung up on, I focus in on the image being used. There will be several of these elements grouped together on the page. The theory (mine anyways) is that you provide an image, a small image no more than 100×100 pixels, that can quickly convey the basic subject area that the paragraph will discuss and provide links to.

So a technology element would have maybe a picture of a computer. An athletics section might show someone playing baseball… and so on.

The example images used in the demo that was put together covered a wide area. Basically, a normal picture just shrunk down to 100×100. My feeling is that doing this puts way too much information into such a small space. The subject matter could become clouded, and the image itself a bit blurry and perhaps not very “readable”.

My solution would be to use a cropped portion of the image that had only a couple objects in it. That way the elements in the image of easy to distinguish and, by being more simple in subject matter, easier for the user to associate and remember the association of that image to the subject matter at hand.

Here’s an example of the image covering a large area (with junk text so don’t bother clicking on the links):

Lorem Ipsum

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

And now the same example but with the close-up image I was talking about:

Lorem Ipsum

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

To me, the close-up is a lot simpler, a lot easier on the eyes, doesn’t create an overly-busy area, and pages the page and information a lot easier to digest. With fewer, more pronounced shapes and colors it is easier for the image to become a symbol of the text it is to represent.

So what do you think? I’d like to hear from you guys. If you have any links on this subject, I’d like to see them as well. I’ve been trying to research this specific issue, but really haven’t found anything. I’ve found a bit about symbols and some references to icons with simple subjects make better icons, but even that might be a bit of a loose interpretation.

Thoughts or ideas or any rambles are greatly welcomed.

Gargoyles DVD: Volume 2!

And so it has been confirmed that more episodes of Gargoyles will be released on DVD!

This is great news.

Skidoo Too: Gargoyles was a layout I had been toying with for a bit when the first DVD was announced. I had heard that Disney would be watching the sales of that DVD to gauge whether releasing more DVDs would be worth doing. So to do my part, I pimped the show quite shamelessly in the layout content.

Mission accomplished?! Maybe. All I’ve heard about sales of the first DVD is that it did “well” or at least well enough to prompt Disney to release more episodes. Nothing about what is being released (the whole second season? only part of it?) has been confirmed, just that more episodes will be released.

So it looks like I have to start working on a new layout. hah.

Thanks to everyone who bought a copy of the DVD. That was very cool of you. And if you didn’t, hey, you still can!

Sizing Things Up

I’ve updated Skidoo Too (and only that layout because I’m lazy) with a little bit of nifty. It’s a font size selector. You’ll see at the bottom of the left column a group of 3 icons. Clicking on one of the icons will change the font size used for the page.

This is done with JavaScript and sets a cookie to remember the user’s preference. On page load the user’s stored font size preference set.

It’s done quite easily, and in a very compatible manner, by simply altering the font size value of the body element. Because we’re altering a style on an element, it’s really easy to access in a compatible way via JavaScript. All we need to do is set the document.body.style.fontSize variable to some string value, like “110%”, to set the font size.

This assumes that you’re using percent or EMs to define your font sizes in your CSS. (Which of course you are.)

It’s quick, it’s easy, and probably worth the 2 seconds it takes to implement.

You can download the updated Skidoo Too layout here. Or grab the lastest ruthsarian_utilities.js and go to town.

IE Boxing

Here’s a demo I made displaying a rounding error with IE and my solution to it.

Basically, any time you’ve got two or more floats next to each other and their widths, defined in percentages, equals 100%, you’re going to run into this rounding error.

I’ve seen this a lot, but never really focused on it as I found that other hacks would sometimes resolve the issue.

But the hack presented in the demo ( setting negative margins on the right-most floated block element ) works much better and is less hacky. I like it.

Hopefully you will find it useful.