Test and critique me site!

Discussion in 'Web Design and Development' started by Sdashiki, Nov 27, 2007.

  1. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #1
    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.
     
  2. CANEHDN macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #2
    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.
     
  3. mac 2005 macrumors 6502a

    mac 2005

    Joined:
    Apr 1, 2005
    Location:
    Chicago
    #3
    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.
     
  4. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #4
    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?
     
  5. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #5
    New updates to the site, kind of revamped somethings.

    Looking for any fresh perspectives.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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/
     
  7. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #7
    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?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    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%.
     
  9. dsnort macrumors 68000

    dsnort

    Joined:
    Jan 28, 2006
    Location:
    In persona non grata
    #9
    Is it a pirate site? Shiver me timbers!
     
  10. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #10
    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...
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    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;
    }
     
  12. Darkroom Guest

    Darkroom

    Joined:
    Dec 15, 2006
    Location:
    Montréal, Canada
    #12
    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
     

    Attached Files:

  13. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #13
    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.
     
  14. werther macrumors regular

    Joined:
    May 15, 2006
    #14
    I think it looks real good.....just one thing: Perhaps the footer background should be fluid like the banner background.
     
  15. Spievy macrumors regular

    Joined:
    Dec 24, 2002
    Location:
    Virginia
    #15
    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
     
  16. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #16
    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.
     

Share This Page