The Ark is one of Sweden's most famous rock bands at the moment, and I've had the fortune to work at their forum. When I took over, the forum was suffering terribly from spam, and it was still stuck at a 3.3.03
No MODs or customizations had been done what so ever.
basically, it looked like this
[IMG]http://i36.tinypic.com/2gy7ww0.png[/IMG]
What I wanted to do was not only to bring it up to date, but also to make it feel like it was truly a part of the rest of their website. I was rather experienced with HTML and CSS, but had never ever touched anything that had anything to do with databases before, so it was a true challenge. It was all trial and error, and these forums have been a great help!
this is what it looks like today
[IMG]http://i37.tinypic.com/2kg41l.png[/IMG] http://thearkworld.com/forum/default.asp

user/password is demo/demo is you wanna have a look.
For comparison, this is what the main site looks like
http://thearkworld.com/main.asp<

Much, much better than before, well done .<

thanks! <

It looks very very nice.
Great job on the look and feel.<

Originally posted by JJenson
It looks very very nice.
Great job on the look and feel.

thank you :)

I think I did pretty well considering I've never done anything like it before.<

Looks very nice.
:D<

I think your site looks great! I'm jealous! <

That looks amazing - really good job you've done.<

One suggestion I would have it for you to decrease the file size of the header image. It is 364kb. That's pretty big for a header graphic in my opinion. If you saved it as a gif you could get it down to about 80kb or so and it would like exactly the same.<

Originally posted by leatherlips
One suggestion I would have it for you to decrease the file size of the header image. It is 364kb. That's pretty big for a header graphic in my opinion. If you saved it as a gif you could get it down to about 80kb or so and it would like exactly the same.

thanks for the input! I really didn't like the way how the colours in the feathers compressed in gif though, but what you said made me realize there might be other ways of decreasing the file size. I chopped the image into two pieces. The top with the text and the beige bars are now a png with a size of 5kb, and the actual image is a 133kb jpg.<

You could also use a PNG and shrink down the size with PNGOUT/PNGGauntlet or OptiPNG. You'd have all your colors, and it would probably be smaller. I'd make the PNG from your original though. (assuming that you have an original Photoshop file, or something)<

I gave PNGGauntlet a try, but the output still was about 345kb, so it seems like slicing the image still is the better option.<

When you ran it through PNGGauntlet, did you start with a PNG as outputted by your graphics program or did you convert the existing image? I ask only because it does make a difference.<

I ran the original PNG through PNGcrush and it did not make a significant difference.<

I'd try with PNGOUT (PNGGauntlet is simply a .NET GUI for PNGOUT) as some have gotten better results with PNGOUT than with the other options. I've got a few other articles from different people that essentially echo the results that Jeff Atwood had gotten.
Either way, even a small reduction is significant - especially when you get that bandwidth bill. <

hehe yeah that's true. Well I'm quite content with the solution I have right now, I think 138kb in total is pretty alright for a header :)

If anyone wanna have a look again, I've changed the folder icons into peacock feathers instead, to make it fit the theme even more.
New posts

No new posts

Hot topics

First I tried to find a good stock graphic of a peacock feather, but then realized it would probably be better if I just made it myself in order to get exactly what I wanted.<

Sweet.
Now I really need to update the guitars over at www.jesusjoshua2415.com ...<

Thanks :D
it's actually quite amazing how much of a difference the change of a few graphics can make. I immediately got positive feedback when I had made the change. It makes you realize that it's not just the overall look and functionality that's important, but also in the details. I just wish older versions of IE had better support for png. Even though I have the javascript png solution, there will still be problems when using pngs with transparency as backgrounds. And the solution doesn't work at all in older versions of IE than 5.5

oh well. I'll live ;D<

you could still shave a significant amount of Kb from your images, if you save your new_logo using 95% compression it will be only 84Kb without any appreciable loss of detail

and your topic icons would be half their size (and work in ALL browsers) if you saved them as transparent gif rather than as png<

yes, I know. I suppose it's a question about vanity, because I like how you can have smooth edges with pngs. Oh well, since I'll only use them on light backgrounds, I suppose there's no harm in optimizing them for light backgrounds and save them as gifs..<

Only Alpha transparency is borked. Single-color transparency works fine - and that's the same as you would get with a GIF, but with more colors at your disposal.
(interesting this topic would come up as I've been reading a few articles on the subject lately)<

oh, I wasn't aware of that there were different kinds of transparencies for png. any articles you can recommend?<

Not off the top of my head. Most of the articles I've been reading I came across through some random browsing one sleepless night. Like an idiot I didn't bookmark the good ones... <

Here's one that's worth looking at: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/<