Test and critique me site!

Sdashiki · Nov 27, 2007

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

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 · Nov 27, 2007

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 · Nov 27, 2007

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 · Nov 28, 2007

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.

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 · Jan 28, 2008

New updates to the site, kind of revamped somethings.

Looking for any fresh perspectives.

angelwatt · Jan 28, 2008

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 · Jan 29, 2008

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.

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 · Jan 29, 2008

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 · Jan 29, 2008

Sdashiki said:
Test and critique me site!

Is it a pirate site? Shiver me timbers!

Sdashiki · Jan 30, 2008

angelwatt said:
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 · Jan 30, 2008

Sdashiki said:
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.

Code:

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

Darkroom · Jan 31, 2008

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: https://forums.macrumors.com/threads/422119/

Sdashiki · Feb 13, 2008

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 · Feb 13, 2008

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

Spievy · Feb 13, 2008

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.

Sdashiki · Feb 14, 2008

werther said:
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.

Search

Search

Test and critique me site!

Sdashiki

macrumors 68040

CANEHDN

macrumors 6502a

mac 2005

macrumors 6502a

Sdashiki

macrumors 68040

Sdashiki

macrumors 68040

angelwatt

Moderator emeritus

Sdashiki

macrumors 68040

angelwatt

Moderator emeritus

dsnort

macrumors 68000

Sdashiki

macrumors 68040

angelwatt

Moderator emeritus

Darkroom

Guest

Attachments

Sdashiki

macrumors 68040

werther

Suspended

Spievy

macrumors regular

Sdashiki

macrumors 68040

Our Staff