My first site ever that I fully coded and designed. Portfolio.

[Reinkaos]

I started this yesterday and just finished template.

It works best in Firefox 3.5.

www.stoopidwiseman.co.cc

CnC?

[Chris]

Will be here shortly.

[Reinkaos]

I'm a nub at coding.

[Chris]

(Sorry for the double post...forgot about the 5 min rule)



#1. The layout is really sort of bland. I won't say you should redo it, but you should try to keep things as interesting as possible. 2 column layouts are just...bleh...you know? There's so much better ways to use your space and give content a home. Speaking of content, you need to throw some in here, so we can see what you plan to do with it. Content can make this look good or bad, so it's kind of necessary.

#2. I'm willing to bet, judging by the code, the loading time, and the way each image loaded individually, that you sliced and coded this with photoshop. While I'll give it to you since it's your first time, don't ever ever ever ever ever ever ever ever EVER do this again. And I'll tell you why.

- It's messy. Look at your code and count the number of blank p elements you see in the layout (blank also includes non-breaking spaces, or &nbsp. TOO MANY. This is messy code, and it makes your browser work twice as hard. It's cluttered and it slows things down.

- Photoshop slices things and uses tables to lay them out. While this was acceptable when photoshop first introduced the "publish to html" feature, it is outdated and considered taboo with the introduction of CSS. What is CSS? It's the answer to tables and their unholy presence in the design world. Why are tables considered taboo? Because back in the day, we designers had to use tables to make our designs and layouts nice and pretty. But because of the fact that tables were never intended to be used in such a fashion, alot of crap ensued. Things were buggy, and it took forever to get things just right. Now, with css (this is years back now), all your troubles are over. And instead of 20-30 images coupled in table cells, you have 4-5 divs that do the work for you. It's smarter, and more efficient. If you are using tables for anything besides tabular data, YOU ARE WRONG!

- It's lazy.

- See reason above.

I could go on and on about the reasons why I hate the publish to html feature in photoshop, but you get the idea.

That brings me to my next points.

#4. Navigations, unless for some ungodly reason and purpose, should be done using the following two methods: 1. As an unordered list (this gives you spacing and horizontal or vertical placement). 2. As text. Navigations are usually vital to the success of certain layouts and designs, and if they are images, well they have to uh...load. Take this lesson to a certain degree and consider the following: Most of the text in your design should be static text, not images. If you want to use a font that your viewers may not have, and you simply cannot use a web-safe font, then fine, use images sparingly. But in this day and age, you should be considerate enough to make your text static, not individual images. Bad boy.

Other than that, since this is your first, you're off to a decent start. It's good to make mistakes right off the bat so you don't have to slam into them later, but please, please consider the suggestions I've made. I assure you I do not lead you astray; times have changed in the webdesign world, and this is just one of many things that have evolved.

[Chris]

Another point I wanted to make:

You should decide whether you want to have a horizontal navigation or a vertical one. You see sites with this sort of layout when there's alot of subsections for a page, or it needs to be broken down in some way. But you've got the same links on both bars, and this is a little unnecessary. Make less work for yourself and confine yourself to either one or the other. Usability wise, it makes no sense to have the same bar twice on one page. It's confusing more than anything else.

[Scrib]

Take Sol's advice mate he's like a guru at this stuff

[Reinkaos]

(Sorry for the double post...forgot about the 5 min rule)

Best critique I've ever received. Thanks.

I'm actually working on a site right now using every suggestion you gave me.

I just found out how to add a background image to a div tag. :P

[Chris]

@ rein

http://webdeveloper.econsultant.com/css-cheat-sheets/

[Reinkaos]

Everytime I try to add a margin or padding to one of my div tags, it expands the div tag too so it gets everything out of place on my template. Is there anyway to fix this?

It's making me raaaaaage.

[Chris]

Post the code here and I'll take a look for you