This is a blog that was created to talk about web design. The both of us hope people can learn from this, even learn something ourselves maybe.

Monday, January 31, 2005

Take A Gander!

Ok here is my latest site, it is pretty much finished now. It uses a templating system from TELA, they make personals' packages. You install and then you skin the site from top to bottom. My first few tries at this resulted in the standard kind of site, it still looked like the original (try this for a view of the original). So I put some time and sweat into it and voila, here it is:

Friday, January 28, 2005


508 Guidelines - should we or shouldn't we? Well elitists might try to. On the other hand they are there to help the disabled view the World Wide Web with a variety of means, shouldn't we want that? This is a good link to read more on. (it's the government's online course about Section 508)

You only need check one or two things actually, such as making sure ALT attributes are included, correct MIME types for certain tags, good document organization, tables have to comply to certain rules, etc., It's not that difficult but then again, you are also NOT required to comply since you are not a Federal Institution. Only Governments need comply.

If you want to add a link in to check your validity, use the following:

Thursday, January 27, 2005

Non-Compliance cont.

I just want to add, and I know this was the point of Rich's post. Why the heck do we bust our butts to make our web pages complient if not all of the browsers are complient. Why would you even put out a browser that didn't follow the standards. Ok I am off my sound box, but I just got Opera and nothing works?!?! whats going on...

Wednesday, January 26, 2005

The Reality of Non-Compliance

This has been a thorn in my side for a long time, absolutely drives me nuts. I used to code (a long time ago) with IE in mind then I was turned on to Standards Compliance in a big way. After reading a lot I realized it was more important than to pander to large corporate products (IE), so I transformed. Now I code Standards Compliant, and add in the "hacks" to make this horrible browser work.

Case In Point? Ok here it is. Electric Red. I coded it to be Standards Compliant, mainly testing on Firefox, the only browser that can say it is. It comes out fine, then the other day I looked at it in IE, and OMG, what a mess. I even looked at it using Opera, and Mother of God what a terrible crap shoot - there's nothing there!

Now, not only do I have to add in a multitude of hacks for IE, but I have to add them for Opera too! Ok so enough of the ranting, I just wish that Microsoft would release a browser that everyone can use! Oh and some other good news, Google has hired Firefox's leader programmer, the lowdown is that they're going to be releasing their own browser.

Friday, January 21, 2005

WooHoo...XML and CSS away!!


I am quite proud of -
Clayton Van Sickle

The XML and CSS were written by rrd intially, but I have made changes, and with those changes came 28 XML errors and 3 CSS errors! This is the part I am proud of, I fixed them all, by myself I might add!!! YAY!!

Thanks for the intial code rich!!


Thursday, January 20, 2005

Flash tutorial One!

Alright I will start off with a good one. "onClipEvent"

Nice trick with this handler -

This one is nice, it allows you to hide the mouse, and in turn replace it with something else, more specifically a graphic that you have made.

1. You need to make a graphic, preferablly in flash as vectors is whatyou hsoul dbe using to make things run smooth. You can make it in flash by drawing it using the tools, when you are done don't forget to convert it to a symbol (graphic). This is done by right clicking and dragging down to "convert to symbol"

2. Create a movie clip, this is easy go up to the top >Insert>New Symbol> this will
open up a selection box, name your symbol *always name your symbol* (naming techniques will come in a later post ;).

3. If you made your graphic else where you need to import it. here is how - Click>file>Import>Import to Library (another thing you should always do) select the graphic you have made.

4. Double click on the movie clip, this will open it up in the stage. Drag your graphic into the field. Then got back to the main scene.

Ok here is where the fun begains. Now you have your movie clip on your stage. I would make sure it is on the top most layer since it is goign to be your cursor.

This is where we will introduce our "onClipEvent" this handler can only be used on movie clips, just as (on) events are used for buttons.

In our case we are calling for an event to happen when the movie clip loads.

One thing to be certain to do with every movie clip is to name it in your library and name it on your stage. If you look in properties once you have licked on your movieclip there will be a place where it says This is its true ID in action script. You can call it whatever you want in your library, but while you use it in actionscript you must refer to it by its So call it anything you like.

Now comes the code. It goes directly on the movie clip. Click on the movie clip and you will see a blank area for action script. Here is the Juice -

//this hides the pesky mouse cursor; this is the most effecicent way as it only hides it once instead of every frame like mostother ways.
onClipEvent (load) {
//this part effects movement
onClipEvent (mouseMove) {
this._x = _root._xmouse;
this._y = _root.xmouse;

notice the formatting, just like Javascript. In the second part you can do all kinds of thing realative to the mouse. like in my game SWAT you will notice that on e movie clip is restricted to only the "x" axis this is done by simply omiting the code for "y" or -

onClipEvent (mouseMove) {
this._x = _root._xmouse;

more to come about OnClipEvent's.

Sorry this got long I was trying to be thorugh (sp?).

Wednesday, January 19, 2005

XHTML, the purists version

Hey I thought this would get you going, fabulous article from 456 Berea Street. It's a very good look at XHTML from the purist's view, and how in every day use it's actually quite hard to address these issues properly. Personally I take it as something to aspire to, I mean who doesn't want to follow the Standards and be proud of it, that's why we have the buttons on our pages in the first place right?

Do you people flash or no?

Hey guys,

I was wondering about some things, see I am a graphic designer by nature who just so happens to have an aptitude for code. While our fellow brit has got me learning CSS and all the high level fancy XML (my tables just aren't good enough) I do know quite a bit about flash, and photoshop for that matter. But flash is more important for us as web designers, so here is my question I put to you. Would you like me to start posting little flash how-to's here? And if so what are your current levels of understand actionscript and such so I know where to start...

Darky out!

Monday, January 17, 2005

Image or Text, Image or Text ...

I do a lot of reading in the day, articles that I surf to, mainly about design and new places to go visit admittedly, but then again that's my line of business. So here I am sat, thinking about a site I'm working on and I think to myself, what would be more effective, an image to illustrate the point, or a piece of text with power-words in it to grab the surfer's attention?

My that's a pickle eh? Well it IS a good question, too! So I'm wondering what your thoughts are on this - if you want to get their attention to something and you NEED it to be clicked would you use a graphic, or a piece of text?

After browsing a lot, I noticed that many developers these days, use both. Or sometimes, a mouseover reveals text - this immediately grabs attention of course, as the surfer has to read what it is, so it's clearly effective.

Sunday, January 16, 2005

Learning XHTML and CSS

While learning XHTML and learning more about CSS, I came across this site, HTML DOG. After spending just a little time in there, everything about CSS makes much more sense to me now. It also has some advanced guides which some of you may find helpful.

Wednesday, January 12, 2005

Great site for beginners

I was cleaning out my bookmarks today and I found this site,, that I used often when I was first learning HTML. It's got all kinds of very helpful tutorials on everything you can think of. You pros might find one or two things in there you can use also, ;-)

Displays Different On Alternative Computers?

Hiya all! KJ and I had been discussing one of our mutual projects the other day (Atlantis Treasures) and she was saying that at work the H* tags looked fine, but at home they appeared WAY larger. She compared her browsers at both places and both had the same settings. Does anyone have anything to add that might help us sort this quandry out? Comment away!

Tuesday, January 11, 2005

Navigation Design Help

If you have ever designed a website from scratch you might have fallen prey to the many quirks of a surfer - you are after all, a web surfer, are you not? The problem with designing good navigation links is this: are they used? Do the surfers get to where they want to be, quickly, and without a fuss? This article is a real help when designing one from the beginning, take the time to read it, and absorb the information they're telling us.

Monday, January 10, 2005

The Designer's Cluttered Computer

Although not strictly dealing with any design issues, I thought I would post this because I'm curious. I had been browsing some guy's blog and he had said how many windows he had open so it got me thinking. Here's what I have right now (12:18pm,Monday,Jan 10):

Computer One:
Firefox, with 6 tabs;
Winamp, with my current fav bands (Jimmy Eat World, The Killers);
IE, for testing purposes (I hate IE for everyday use);
Netscape, 3 tabs open;
Opera, just one tab open, testing;
Macromedia Dreamweaver MX, 4 tabs open, all on one site;
Adobe Photoshop CS;
FlashFXP FTP client;
MSN Messenger, w/ 2 open convo's;
2 File Managers open, looking for stored graphics;

Wow, and it STILL runs! :)

Computer Two:
MSN Messenger, w/ 2 open convo's;
2 File Managers open;
ProtoWall, an IP level firewall;

This computer is mainly used for file storage, my music dump, zip files etc., But nonetheless it is as powerful as the other in terms of everyday use (not for gaming though). I'm sat behind both of them, it's like something from NASA, those guys in the control room!

So what about you? What are your desktops like? Full? Close?

Readable Code, Pride Of Place?

Since I started writing web pages a long time ago, I borrowed a habit that I had developed from writing C/C++, and that was "order". I liked my code to be neat, still do in fact. Take a look at my Two Wizards Design site, you see how each tab increment is 2 spaces? It's nice and ordered, someone coming along after me stealing my code will have a good time of it :) (and no, I don't mind ppl stealing my code, since I can't really prevent it, although a mention would be nice!)

Anyways, I kept that habit up, and encourage everyone I talk to about it, to do the same. Why shouldn't we have pride in our work? Workmen polish and shine what they build, bureaucrats make sure everything is dotted and crossed, there is no difference in our work ethic in that sense. Going on from this, I was reading through Stopdesign and noticed that he separates his individual css files, into css content. So there is a css file for fonts, a css file for positioning etc., It's a very neat method, and I have begun to adopt his way of writing CSS, partitioning it out according to what it does.

Do I need to? No. I could make it an unholy mess with import directives all over, but from the usability on my part, it's better, and from any reader's view it will also be better. Well it comes to this really: we can't stop people reading the css, easy to figure out from the (X)HTML source file, then just read like any other page. So if that's the case, we may as well write it properly, orderly, and well-defined, with (preferably) no extraneous css from older versions.

Tuesday, January 04, 2005

Simple Trick You Need To Know!

I ran across this problem the other day and I was stumped by it. I had a <p> set of tags, in which I placed a floated image. What was the problem? Well in Mozilla browsers the <div> that contained the paragraph would not stretch it's height to cover the paragraph, because the image was floated (and thus it assumed the paragraph was empty since nothing else was in there). This is a feature and it was mystifying at first. The solution? After the paragraph I created this div:

<div style="clear: both;"> </div>

What does this do? The clear property is set to both which means that nothing is allowed to reside to either side of this div. Since it comes after the paragraph I talked about in the semantic flow of the document, the containing div stretches it's height to cover this new div. One proviso - I had to place an nbsp inside the div to give it content, other than that it worked beautifully.