TwoFiveDesigns | TheTakeOver: portfolio layout

[twofivedesigns]

Everyone click the link below to see my latest and greatest portfolio layout.

CLICK HERE

[cC.ShorterGFX]

very nice but i noticed that the chair on the banner looked pretty badly cut out near the bottom. but i like the concept of the design. finish it!

[Chris]

Just a couple thoughts. You've done alot of improvement in the way you work with your content. I can see that instead of spreading things out, you chose to go with a one-page layout style of design that offers everything pertinent to the visitor right away. What loses me is the structure of the site once the visitor leaves that page. It feels like you spent a ton of time putting together the landing page, and then spend 1/8th of that time on the others. No other section has nearly as much developed, and the content, aside from the portfolio, is bleak and hardly even deserves its own page.

I also found the navigation to be a bit lacking. Once I left the front page, I was unable to return. Whether you intended for this to be a one-time landing page where the visitor only sees it when they first come to the site or not, you really need to pay close attention to the navigability of your site. The rule of thumb in regards to visitors is 3 clicks. If they can't find what they're looking for in 3 clicks or less, they will probably leave. In this case, if you go more than 2 clicks, you're stuck! I will leave this however because it may just be undeveloped. You just never want to put absolutely vital information on a page visitors won't be able to get back to.

The portfolio section itself is a bit confusing. How you laid out the content is fairly easy to get around, but the whole black on dark grey kind of threw me a loop.

Overall, you did a good job of putting out your information, and promoting the important aspects of your services.

Now comes the semantic critique

#1 I would have done the navigation buttons a little differently. Generally speaking, you lose SEO quality when you choose graphics over text. You may have saved yourself because you remembered to include alt titles for the buttons, but the semantic value is lost. Navigation and header information are vital to securing a good grasp of SEO. Without it, information has a way of being indexed incorrectly, and your site may not get the exposure it needs to be placed in search engine results.

#1a. Building on the last comment about using text rather than images, I believe with CSS3 (and even 2 I think) it is possible to alter the rotation value of a text block. So you could even win back some loading time on more valuable elements.

#2 Alot of IE bugs. I see a lot of hiccups in the layout itself. I'm using IE8, so I'm assuming you haven't debugged this for IE. You should definitely look into cross-browser compatibility because some of the errors can have a profound impact on the overall appearance of your site, Alot of the bullets appear broken and offset because of this. You also have some eerie occurrences going on with the right side of the downloads section of the front page. Your image hover also doesn't work on IE (page navigation).

#3 Confusing size and proportions for header elements. Text size should emulate importance. There's no rule that says h1 elements MUST be bigger than h2 elements (obviously this can be changed via css), but you're all over the board. The client quotation is considerably bigger than any of the other header blocks. Your downloads header is larger than your "featured project" header, and your download gallery and "services" section are the smallest of all. This kind of confuses me because I don't know what you want to seem important. I get that you want to totally blow up testimonial because it gives you credibility. But making the text bigger doesn't make it any more believable. The problem with gaining credential value from testimonial is that alot of designers make them up. So it doesn't make sense to expect one portion of a sentence made by a client to do any amount of good for the rest of the site. The size of the downloads header leads me to believe that you would rather me download your templates than look at your previous work. And the demeaning size of the other elements makes me think that I shouldn't even bother with them. Obviously some of these sections are pretty important, but size is everything. If it were me, I would pull the standards card, and make them all the same size (headers, anyway). This presents a clear and balanced view of what should be perceived as vital information.

#3 I see some other hiccups down at the bottom. The text in the pill boxes is overlapping the red boxes below them. I bet they aren't supposed to be outside the black containers either...

There's also a JPG on the bottom right that very well should probably be a transparent GIF or PNG, because the outline is red. :P

Although most of what I mentioned above is probably more important, I want to stress how important the rest of this is.

The way you've styled your entire front page is inline CSS. I strongly suggest you externalize this. You basically defeat the purpose of modular CSS by making everything inline. CSS was designed to be a more organized way of styling documents. Ideally, when you're dealing with a 30-40 page website, CSS should afford the ability to change elements on all 30-40 of those pages by changing a single page. If you leave it like this, and decide to change something, you're going to be changing each and every element in each page you wish the change to occur. Not to mention having inline CSS also increases the load time because there's more information for the browser to parse while loading the page. Even your JS functions are inline! Wtf!?! To make matters worse, some of the IE hiccups are probably coming from a lack of a CSS reset. Although I wouldn't force people to use them, CSS resets are essential to improving cross-browser compatibility. You should look up the YUI css reset, in particular.

Here are some screenshots of the differences between FF and IE

FF



IE



I don't have firebug on this computer so I can't really check out the validation situation, but I may do that later. Hope you don't mind the attention.

Anyway, hope you find my comments useful. Hopefully you come back to read them. LOL

EDIT: One more thing I forgot to note, you should fix the dumb quotes you use in the testimonial.

http://www.fonts.com/AboutFonts/Arti...martquotes.htm
http://www.dwheeler.com/essays/quotes-in-html.html