Test and critique me site!

[Sdashiki]

Ive posted this site before in the photography forum, but now I am more interested in finding problems with the site than simply the content of it.

I documented numerous "conversions/modifications/hacks" of Polaroid cameras, and I wanted to make the info easily read and used.

So, if you are interested, check out my site:

http://option8.110mb.com/polaroid (http://option8.110mb.com/polaroid)


Notice any bad links, bad breadcrumbs, images, usability issues, etc. (i know that on the left, half the links under "Models" do not work. Thats cuz I have not completed those pages but left the links. Oh well)


the root of the site, has links to my portfolio and the polaroid section, i only need feedback on the 'roid part.

[CANEHDN]

Seems to work for me just fine. I sent you a test to see if contact me works. It looks like basic html and it seems to be functioning. I like the graphic at the top.

[mac 2005]

Overall, nice-looking site. Good colors, and the cameras look great.

I have two minor suggestions.

1. The justified type can be tough to read. A "ragged right" is more readable and avoids the inconsistent spacing between words.
2. All of the type elements seem to be the same size. Varying the type size helps the reader more quickly sort through your content areas and identify which ones to explore first.

[Sdashiki]

Thanks for the test email, i wondered what that was in my inbox!

im still debating the justified, but with the way all my photos are setup floating in the main column, the ragged edges seem weird to me. :confused:

And ive tried to break the site up with colors instead of font size changes. I typically use xx-small - xx-large and not "pts" for my font sizes.

The breadcrumbs at the bottom, does anyone even notice those?

[Sdashiki]

New updates to the site, kind of revamped somethings.

Looking for any fresh perspectives.

[angelwatt]

Here's my run through. Let me know if you have any questions on my comments.

Code doesn't validate. Mostly from not having the alt attribute for images. That'll an easy fix.
CSS doesn't validate either.
I find the text to be quite small and hard to read.
The justified text doesn't bother me.
I notice some inline CSS (CSS that is added directly to HTML tags) in the "right" section on the images. You can use a CSS selector to take care of this (e.g., #right img { float: right; }).
Also in the right section I see empty p tags used for clearing, which is not a great practice. You should be able to add styles to the other paragraphs there to handle the spacing.
The b tag is deprecated so you should avoid using it in favor of using CSS to apply the needed style, or if you have to, use the strong tag instead, but go for CSS if you can. I see you made good use of strong elsewhere and em.
Your CSS link tag is set for "screen," which is good except that you don't provide a "print" stylesheet to be used when printing. This causes the print version to be bad. You can either use "all" over "screen" or create a print stylesheet specifically to handle that version. I use print stylesheets myself to remove the navigation and header sections. It's up to you though.
Looks like you have an empty div tag (id=leftend) after the left side HTML.
Personally I'd try to make the site more fluid. By that I mean that the main content can take up more space to fill the browser window rather than being a fixed width. The left and right areas are stealing a lot of space away from the "main" content.
The site has a mostly "professional" feel except for the top links on the left where you use lower case links. Using capitalization gives a more professional feel.
I believe this came up in a past thread when you were seeking comments, but it seems like something in the header should be a link, either the logo or the text in the upper right. There's very few sites that don't have a link for the site in the header so many people now expect it.


Resources:
HTML Validator: http://validator.w3.org
CSS Validator: http://jigsaw.w3.org/css-validator/

[Sdashiki]

Excellent, thank you.

I didnt design this CSS template. I wanted something that would work in all browsers and not have to worry at all. Its got -margins and whatnot, but it works.

You have certainly given me alot of stuff to look at for future updates. However, I really am more interested in simply giving away the info than doing it in a 100% clean code manner.

The only comment I have to defend the design choice is that I wanted the main text area to be small enough so that I couldnt fit a long step on one page. The site works better for going slowly step by step, then continuing on, instead of being overwhelmed with all the instructions at once. Perhaps it could be a little wider, but meh, too late. :rolleyes: Oh, and it shouldnt ever be printed, thats on purpose.

Maybe someone can tell me why, for instance, in IE6

http://option8.110mb.com/polaroid/batteries.html

vs

http://option8.110mb.com/polaroid/about.html

the logo at the top left moves about 2px to the right?

[angelwatt]

That's fine to defend your decisions. My comments are definitely not written in stone. It sounds like you have your reasons and that's good enough for me. I just offer suggestions and let people take their pick of what they want to care about.

Hah, just figured out the logo issue. It's the bottom portion that moves left and is caused by the table in your content area. IE has issues with total calculations of width plus margin, etc it adds up to a different sum than other browsers. Though another problem there is you have border="1" and style="border:2px solid black" thus having two declarations, which may be confusing things more.

Possible solutions; well first get rid of border="1", then see if that actually fixes it. If not make the width of the table 99%.

[dsnort]

Test and critique me site!

Is it a pirate site? Shiver me timbers!

[Sdashiki]

Hah, just figured out the logo issue. It's the bottom portion that moves left and is caused by the table in your content area. IE has issues with total calculations of width plus margin, etc it adds up to a different sum than other browsers. Though another problem there is you have border="1" and style="border:2px solid black" thus having two declarations, which may be confusing things more.

Possible solutions; well first get rid of border="1", then see if that actually fixes it. If not make the width of the table 99%.

Ok, the ONLY pages with the logo error in IE6 are:

links.html
about.html
index.html

every single other page is fine...im stumped? i can see no difference in the code that would cause it, but my eyes burn...

[angelwatt]

Ok, the ONLY pages with the logo error in IE6 are:

links.html
about.html
index.html

every single other page is fine...im stumped? i can see no difference in the code that would cause it, but my eyes burn...

I just tried those pages with IE6 on Mac (ies4osx) and I don't see the logo shift from before. Do you see it fixed? or did you mean those ones did work?

It's a hard problem to solve. I have a suggestion to try. I found the CSS below, and think it may be contributing. Try setting to other values and see how it effects IE. If only my Firefox extensions worked in IE I could manipulate the HTML and CSS to see the effects myself.

div#main .pad {
padding-left: 3px;
}

[Darkroom]

hi there... Safari does not display your page's main logo correctly, but it's an easy fix.

i've attached an image displaying your logo in Safari (Top) and Camino (Bottom) so you can see the difference.

to fix it, you can read this recent thread concerning the exact problem for another user: http://forums.macrumors.com/showthread.php?t=422119

[Sdashiki]

Ok, major revamp of the site. Changed the entire layout of the first few pages. Went from a list of stuff to a list of stuff categorized appropriately, cutting on the clutter.

Added a home button over the Polaroid logo on all pages.

Tweaked a few things, and added a ton more information!

thanks for all the help so far.

[werther]

I think it looks real good.....just one thing: Perhaps the footer background should be fluid like the banner background.

[Spievy]

LOL
you must be editing it right this second.

The Photo Link wasn't working, tried it a few seconds ago, now it works no images, hit refresh got some weird code, refresh again. Now it works. :D

[Sdashiki]

I think it looks real good.....just one thing: Perhaps the footer background should be fluid like the banner background.

I have tested this on the following section of the website:

http://option8.110mb.com/polaroid/104/104.1.html

All the pages for the Auto 104 section have a full width footer.


compare it with the rest of the site and let me know if its preferable. Im torn.