Portfolio Page -- Imagine the possibilities

[Flip ツ]

Version I of my portfolio Website --

This is my first website I've ever fully designed + Coded, so it was a big learning step for me. Everything should be fully standards compliant (CSS/xHTML) and theres a tiny jquery library for effects. It's also very light on images, so it's well optimized, though... the temporary hosting I'm using at the moment is pathetically slow, so disregard all loading speeds.

screenshot


Live Link
http://205.205.200.231/~h807461/portfolio/index.html

DA Page
http://flipn7.deviantart.com/art/Fli...yout-126473888

**Note**
It doesn't fluently work, if at all in any IE. if you see anything in other browsers, It'd be appreciated if you told me

I am also aware, that my contact page for isn't functional.

[diabloUNDERWRLD]

O.o fantastic work! Well done!

[Phayze]

I really like it. I don't know a whole lot about web design, but from what I can tell this is a great site.

It's very user-friendly, easily navigable, and it's easy on the eyes. You've got some nice work in there, too.

Nice job.

[Chris]

I've got some critique, just give me some time to finish work.

[Chris]

First off, I want to say this site has a lot of potential. But there are a number of things that hurt this layout more than anything else. FUndamentally, as well as visually, there's alot left here to be desired.

#1. Positive. Good choice of typo. I think you executed this fairly well. Sans-serif type fonts are extremely legible, and do a good job of presenting clean text. This also suits the style you were going for, so kudos on that. The downside - your copyright is a serif font. Try to keep everything consistent. Make sure you stick to one style, because visually, sans serif fonts do not mix with serif fonts whatsoever.


#2. Positive. You have a good grounding in elements. Everything has plenty of room. The downside - there's almost too much whitespace. You could correct this by increasing the font size of your header slightly, and reducing the height of the div containing the header.

#3 Negative. Fluid layouts are good for sites that need to be dynamic, but there is a boundary that needs to be met, and you've missed a couple of key points with the layout. I use a widescreen monitor, and it shows me how big monitors literally destroy your layout. Everything scoots to either side of the monitor, and the middle is just devastated with open space and stretched images. I honestly think this sort of layout should be fixed width, not fluid as it is right now. You don't do your content justice making it stretch to fit the browser. The other downfall for fluid layouts is what happens when the design is larger than the monitor of the viewer. For one, your 2 content sections cram together, and this shouldnt happen. You can fix this by making the divs fluid. Your "latest news" div does this correctly, and wraps the text based on the amount of space given. Your header also suffers a similar fate, and gets covered up by the paralell div. Fluid content needs to be fluid.

#4 Positive. Congrats on a validated page. Although, you could go a step further and get it to validate as xhtml strict. I see nothing here that could prevent that from going smoothly.

#5 Negative. The top elements of the layout are built well. They are clean, and smooth, aside from the repeated cloud which I think you could have done another way and come through with a more fluid result. However, as you continue down the page, things don't match up. The consistency seems to break off, and you see broken edges, and awkwardly sized boxes. A single color bg would have looked better than this.

#6 Indifferent. You need you be more conscious of your content. I understand this is your first coded layout, and this sort of thing comes with experience. But look at other sites and how they present their content. Indentations are used to separate items of interest, and should be used as such. I also noticed that there are some leftover linebreaks in the actual content. When I resize the window, lines "identity to our" and "comapny and website" break into two lines. Whitespace may be causing this, not sure.

Some general food for thought:

You do a good job of presenting your most relevant work, and making it obvious that you are a designer. That part is good. But your content is very disruptive.

Your header says "Who am I?", but the first thing that section says is "We". The other side does it right. "What do I do", "I can provide". Why is this important? It's a style of presentation. By saying "We" you give yourself a more professional appearance, and some clients respond well to that, It makes you sound like a collective; as if it's more than one individual. But the downside to that, is that the way you've presented yourself, your brand, you go in the opposite direction. You give a more personable tone to the site and your content by saying "Who am I". Clients respond well to this sort of feeling, too. But you need to be consistent. The way you've worded things at the moment makes me feel a little uneasy. "Is it just him doing the work, or is there more people involved?" "How do I know he's for real?"

I hope I helped you in some way. Thanks for sharing your work, and hopefully your work improves as a result of my critique. I'm free if you have any questions about what I suggested.

[Flip ツ]

Well, that's just about the most in depth Crit I've ever received. Great stuff.
I feel I made an uneducated decision with the footer font, and alot of people have been getting on me about it.. It's a good point, and I will change it accordingly. At the time, I figured it was more of a copyright induced font.

2 - The whitespace in the who am i and adjacent boxes are a little much, I think. I'm definately going to cut that down. as far as the 'whitespace' in the banner, I don't intend on cutting that down at all, to be honest. I'd personally prefer to keep it like that. Meanwhile, you do present good points.

3 - So your saying I should have a background and keep everything width wise in place? Thats the way I understood it, your right, makes perfect sense.
I have a hard time trying to get width or horizontally places objects working in different browsers/resolutions. I just can't do it. Though, vertical doesn't seem to pose a threat to me as much...

I cant say im too sure I know what your talking about for the 'repeated cloud' I just opened the page up in a 1600x900 res monitor, and I couldn't see any problems actually. The only thing I noticed was a small blank space to the right of the page, enabling a horizontal scrollbar.

The idea I came up with (learned from IPB style headers) was I put the image of the clouds aligned to the right. then to the left, I put a 1px wide image of the sky's gradient on repeat, therefore making the banner expandable width-wise for all browsers and resolutions. If you look closely to the left of the banner, it is faintly noticeable. So far, I haven't found a wide monitor the banner doesnt look normal in in chrome/firefox. Let me know what your using..

4 - thanks. For now the code is a little sloppy, It could use some sweeping

5 - im confused by this, actually... either way, I refer to the repeated cloud up in point 3.

6 - Im terrible with parsing paragraphs, so I cheated and used linebreaks. I'm a terrible person but I get what you mean.

in terms for the two paragraphs in the middle, for now they're placeholders, I should've mentioned. I was too lazy to write something up for the moment. I'll get something clever up there real soon.

[Chris]

Well, that's just about the most in depth Crit I've ever received. Great stuff.
I feel I made an uneducated decision with the footer font, and alot of people have been getting on me about it.. It's a good point, and I will change it accordingly. At the time, I figured it was more of a copyright induced font.

Copyrights are copyrights are copyrights.

2 - The whitespace in the who am i and adjacent boxes are a little much, I think. I'm definately going to cut that down. as far as the 'whitespace' in the banner, I don't intend on cutting that down at all, to be honest. I'd personally prefer to keep it like that. Meanwhile, you do present good points.

It's just a personal preference for me. I do agree you should probably bring the width up for the 2 content sections.

I have a hard time trying to get width or horizontally places objects working in different browsers/resolutions. I just can't do it. Though, vertical doesn't seem to pose a threat to me as much...

Working with grids and relative positioning help make this a much simpler job. With fluid layouts, you have to account for so many things as opposed to a fixed width where alot of things are easy to predict. And even better, no matter the size, it looks the same.

I cant say im too sure I know what your talking about for the 'repeated cloud' I just opened the page up in a 1600x900 res monitor, and I couldn't see any problems actually. The only thing I noticed was a small blank space to the right of the page, enabling a horizontal scrollbar.

The idea I came up with (learned from IPB style headers) was I put the image of the clouds aligned to the right. then to the left, I put a 1px wide image of the sky's gradient on repeat, therefore making the banner expandable width-wise for all browsers and resolutions. If you look closely to the left of the banner, it is faintly noticeable. So far, I haven't found a wide monitor the banner doesnt look normal in in chrome/firefox. Let me know what your using..

It may show up the same for you, but it shows up clearly for me. A repeated image used to fill space works well if done correctly, but if you just take a 1px chop from a fairly complex image, you get a "stretched" appearance, and it's a little ugly. I was thinking a fixed image that could fit the div at a reasonable size would be a better alternative. I use a 1900x1200 monitor, and while I don't expect it to look perfect (not everyone surfs the web with 23" monitors), you should try to account for different resolutions.

5 - im confused by this, actually... either way, I refer to the repeated cloud up in point 3.

Hope that clears things up a little for ya.

[Chris]

Okay the 5 min edit limit is really gay.

This image is for the response to the "IPB Style headers"


And this is for the "#5"

[Flip ツ]

Yeah, I know what you mean, to fix the header. I'm going to make the end of the right-aligned banner fade to a natural gradient, then use a 1px wide picture of that gradient, everything should look smooth then. At the time, I was getting slightly annoyed, haha. I just went in with the 'quick fix'.

for the 'no 100% height' it was done intentionally, and now you bring it up. it does appear to look like a mistake... Another rookie mistake, I'll get on that this weekend, hopefully, aswell.

last, You've sold me on the sans serif. Will do
Great stuff, I'm hoping you post in every web layout thread I do

[Chris]

No problem, glad I could help