View Full Version : Not a site review. More of a...

06-26-2005, 03:12 AM
PNG study?
Test layout?
High bandwidth monster?
Drunken Saturday afternoon in the rain?

I'm sure it's one of those.

Since this is the place to post this type of stuff here it is (http://home.earthlink.net/~harbingerofthevoid/haywire/index.html) .


WARNING! it's a 500k page. It may take while to load up on dial-up. It took Mozilla 20 seconds or so and IE 45 seconds to load on my DSL.

This site WILL NOT WORK on Ie5/mac. Probally not on IE5/pc either. It uses the fixed layout that I like once again. It will fail graphically on anything higher than 1152x864 resolution. There are quite a few bugs to work out for higher resolutions.

There are a few graphical bugs that I didn't put the time into fixing yet so...

The thought process (yeah thats good) behind all this:

It's pouring down rain out side today so I couldn't go help my dad in the yard.

I started fiddling in PS and made some intresting background images.

I loaded them into a page and started laying divs over them.

Started messing around with the positioning and all that rut. Portisehead came on Winamp and I had the idea of placing the CSS behind the background image. Why? beats me. Beer #3 probally. I tried not to use the "fix" but it became grueling hard and beer #4 took hold and said,"YO! make it fixed and z-index that schtuff!". (thats a quote. my beer talks all homeboy to me.)

So plop this here and this there and everything is scrolling and neat-o. (i'm the clear-white alter-ego of my beer ;))

Then the paragraphs started looking dull. Big blue box. Need to spice them up some so onto the addition of even more pngs. A little line here, a little filter there, and an alphaimageloader and booyah! ( <--faking hip)

If anything maybe this will be a clean example (clean being a loosly used term) to help others use pngs in IE and try out the fixed positioning hack for IE. I must note though that my hack is well...hacky. It hides all the page from IE5/mac (maybe pc as well) so if you use it be fore-warned (is that one word or two?) that you instantly alienated all uses of IE that don't use IE6.

So in conclusion:

I'm not sure why I'm posting this. It's not a site more of an offline experiment gone hawyire. After tooling for an hour or so I thought if I get some people to look at it maybe it's worth the hour I put into it.

I talked to my brother for the first time in like 2 years and the first time I can remeber on the phone.

It's still raining.

I think I'm in the form > function category of web building.

How come all the cute ones are 16 or married?

I think thats all...enjoy :D

tugbucket is mine...aight?!

06-26-2005, 03:30 AM
It loaded instantly for me. Looks awesome though.

06-26-2005, 10:18 PM
The code stuff behind the ripped paper (?) is pretty cool. Scrolling the page is kinda slow though, probably cause of the images...

edit that's europe, right, not ripped paper? lol. :)

06-26-2005, 10:54 PM
well I added the navigation and I fixed the stupid bug that makes the links not work on Mozilla. Tough to try and put some kind of navigation in there. So much stuff all positioned that in 800x600 it had to be narrow to make it look like something.

it's now a measly 650K file load ;)

It works form 800x600 (maximised) all the way up to 1600x? It should work even higher as my fill images are 3000px tall.


It does look like a map. It wasn't trying to be like that, just a bunch of random PS stuff mashed together.

Mozilla/FF doesn't like the png over the content really, thus the slow scroll. I did fiddle with it to make it where tohe pngs don't lay right over the text so that it wouldn't cause a chopped up text line when it did scroll.

I just found out that using the alphaimageloader causes the css not to validate. oh well.

06-26-2005, 10:55 PM

06-26-2005, 11:22 PM
Only if you drink too much ;)

HBOTV - how did you do the background? I know it sounds like a well asked question - "how did you.."but I'm crap at PS and wanna learn more :D

06-26-2005, 11:54 PM
weazel, lets see if I can make a play by play happen.

first get these brushes if you don't have them:


1 make a large work space. I think mine was 2000x2000 to sart with. And fill it with the base color. For me that light brown. Leave a transparent layer under it.

2 on a new layer paint randomly with a a grunge brush or two in black. Just random where you want the cut out to be.

3 Erase all the starys and translucent mess left by the brush.

4 use the wand to select a lot of the black splotches. click back on your base layer and delete. That leaves you a bunch of random holes.

5 copy that layer and select all the un cut out part. Fill it with a darker shade of the base color. Unselct it and gausuian blur it a little. lay it under the base layer and you have the shadow.

6 reselect the base layer again and then make a new layer. Keep it selected and then paint into it with more brushes. I painted into the same selection on like 10 different layers. Abjust the opacity and blending options until things start blending in and looking good to you. i ususally leave everything unmerged with the base layer so I will alwyas be able to get the selection area back.

7 slap all the layers together except for the BG the base layer and the shadow layer. then you can use the bushes as erasers to "clean" up any parts that look bad. Smudging/Dodging/Burning/Blurs just make the messyness look more finished I guess. Just be careful with the smudging. The file was around 40 megs and when you smudge PS likes to eat the crap out of your RAM. I've frozen my computer many a time doing that. I mainly steer away from smudging things now unless the file is small.

8 I had to erase and repaint all over the place the make things look right to me. When I started putting divs over it things got weird as some divs layed awkwardly on top of splotches on the BG. so I went back in and made alittle edit here and there to it.

It's really a lot of trial an error. Play around and don't have a specific vision of what you want it to look like. The more I let things just happen the easier it seems to me.

06-26-2005, 11:58 PM
I think I'm in the form > function category of web building.

Well it never harmed Phillipe Starcke - though he's more famous for designing beautiful, but malfunctioning fruit juicers ;)

Form>function. Form<function. Who cares! It functioned perfectly well in making me go 'oooh!' And I'm gessing that was the intended function? :)

Nice work, interesting as always!


06-27-2005, 02:37 AM
Alpha transparency support in IE will do good things for the Web. I've made a few of these layouts while daydreaming about the day IE7 arrived.

Were I to change something, it'd be making the blocks with text in them white instead of that #94A7AD-ish colour. The logo block would stay blueish, but I think having the attached ones the same colour is too much of it.

Since you don't do any background repeating, I don't see why this can't work in IE5? Maybe a little bit of help from the DOM (which by the way can be used to solve your CSS validation problem) and it should be good to go.

You could probably speed it up by removing any alpha pixels that don't actually change. I get the feeling there might be a lot of those.

06-27-2005, 03:57 AM
Thanks Gary. The oohs are better than the ehhs ;)


I could look into making the Ps white instead of the blue. It would take remaking several images but never hurts to try. I'm kind of fond of the toned down-ness color wise. I'll play with it and see if I like it the other way.

I'm not to familiar with DOM. The reason I see it not working in IE5 is this:

The background image is the one on the bottom right. It's fixed so no problem. The "fixing" thing doesn't work in IE5 anyways. I guess I could suck it up and make the whole page scroll in IE5 but that would loose a lot of the effect. Looking at it flat I have:

background fixed (no problem)
above that I have the HTML CSS showing through layer that scrolls. Still no problem.
Above that I have the right images that are fixed to the bottom. Thats a problem. In IE5 they will scroll up and off the page. The navigation will do the same thing. So far I have shortened the "fixed" positioning code fairly well. IE5, doing it the old way (ie: feeding IE it's own style sheet) will not fix anything.

Thebn there is the fact that the 2 bottom left images are pngs. as well as the 4 images for the navigation. Is there a way to make IE5 display them correctly?

You could probably speed it up by removing any alpha pixels that don't actually change. I get the feeling there might be a lot of those.

Not sure what you mean. You mean cutting out any of the "extra" parts of the iomage so that they are as small as possible? I have cropped the images down to the bone in that regard. I sliced the bottom left mimage into 2 parts to try and help load time. If I make the BG jpg smaller quality it looks grainy. The navigation could probally be done in 5 images. 4 for the links and 1 for the shadow but honestly the shadow is 50% of the whole file size so it wouldn't make too much difference.

the "connectors" are trimmed down to just at the top and bottom of the links on them. the rest is the padding of the p's. I guess I could make them 2-3 images but right now they are only 5k each so not a bother.

I can probally clean up the bottom left images a bit and try and get them down to 50-75k instead off 100k.

If thats not what your getting at, what are you saying?



Navigation now works.

the 2 other linked pages have been added .

Is it just too much? Dropping the scrolling code in the BG would cut the file size down by 200-250k.

brief file size synopsis:

bg right image: 111k
bag left image 1: 200k
bg left image 2: 188k
navigation: 100k
paragraph link png: 12k (IE 11k)
paragraph end png: 4k (IE 8k)
scrolling code: 42k

all in all 650k load.

I could probally cut the two side images buy placing them Ps and giving the top half a color fill instead.

I'll work on that next.

And anyone want to go into the code? On the contact page in IE the very bottom P end png is shifted like 1px to the left. Not sure why.

thanks all for the looks.

Played with the background a little and trimmed off 300k! Still looks alright. The navigation banner thing is a pain though. A gif put in the is going to look real grainy.

I think I just fixed the glitchy slow scoll issue in FF as well :D <--okay maybe not. I swear I had it and I don't know I did and nows it's back :(

Just trimmed off another 40k. Gifs instead of a few PNGs. JPGs instead of a few GIFs.

07-11-2005, 10:17 AM
sorry to bump this (sorta old thread, i guess)....
but i just stumbled across, and had to say....

yr so cool Har-otv
and THANKS for the awesome brush link!

first get these brushes if you don't have them:


07-11-2005, 10:54 AM
Looks really cool well done. :thumbsup:

07-14-2005, 03:49 AM
Glad to see some kudos all. 'preciate the response. If i ever get around to doing anything worthwhile maybe all this feed back over the last year will play a big part in it (can't promise anything but...).

Z R O those brushes are great! I messed around with them and found several that I loved and a few that I could work with all the time. Real good stuff she has on there. Fun to play none the less.

Danny- :cool: glad to see more positives than negatives.

I got tons of views but not too many responses. i guess that goes with the territory. I would have loved to hear from opera/safari/etc users as to the usability of the page but alas...

maybe in a week or so I'll get another brain fart and try something more "out there" to stir everyone up.

So my take on this layout:

pros for the viewer:

scaleable down to 800x600 and large enough to read at larger resolutions

pros for me:

learned a little more
easy to edit

cons for the viewer:

large load time (although it's as slim as I think I can get it)
the scrolling HTML confused 2 people I asked to look at it ( I thought it was neat and laughed at them)
not IE/mac (maybe <5.5pc as well)

cons for me:

nothing to put in it to make it worth a crap

Weird thing though. I edited this a while back. I thought I solved the scroll lag on FF/Moz but I thought I failed. I went to the page tonight and it's all fast and smooth again. Anyone mess with the fixed positioning + the div over a div thing like this before?
What I'm doing is placing the navigation banner (yep it reall yis a banner) over the content section. To alieviate the chop I am making the nav div wider and taller than the content div. That way there is no "edge" for the text to "snag" on. (I write a lot in quotes ;) ).
Sometimes it hangs on scrolling and sometimes it doesn't. Any clue?

p.s. need ideas for another layout.

07-14-2005, 05:07 AM
loaded fine for me, but an idea. compress your stylesheet and html, more than you have.

look at googles html. very tight, very small.

07-14-2005, 05:16 AM
what do you mean by "compress"? you mean take out spaces etc...? I'm sure i can condense the CSS as it's pretty much intact as is and can be trimed more.

right now the CSS is <4k and the index is the same. the other 2 pages are <2k each.

07-14-2005, 05:23 AM
so basically its the images

well, put up a loading script and cache the images
it will take a while on first load. but then will work nicly

07-14-2005, 05:32 AM
please correct me if I'm wrong (which I usually am).

All my images for the layout are done through the CSS. Does this not cache them?

After the home page loads on my comp, the other pages load like a snap. The only images so far that are in the HTML are on the Art page. Those of course take a bit to load up as they range from 80k-220k.

Maybe I'm just not clear on how caching works.

the initial load time is because of the the 300k worth of images being loaded from the CSS. After they load the first time should they not be already cached?

07-14-2005, 10:20 AM
im pretty sure your correct.
use thing like pre-loader scripts for rollovers (:hover), and things that dont already appear on load, right?

(again its pretty cool)

the problem isnt really the inital load (unless dialup i guess)...
its the choppy-ness on scroll that annoying/weird...
and thats just "browsers still suck" right?