SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please review my site.

    I just asked for a review of my site, but forgot to include the url. So here it is again. The website is http://www.jdathleticsinc.com.previewmysite.com
    This is my first 'job', my second ever website, and my first one done strictly with XHTML and CSS, not WYSIWIG. My friend started a business distributing athletics wraps and needed a website for the parent company to link to. She would eventually like to expand it to include the prices, more products and maybe a shopping cart.

    I would appreciate any suggestions or comments because I want to learn as much as I can about web design (I love doing it) and improve to the point where I can start my own free lance business.

  2. #2
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,547
    Mentioned
    957 Post(s)
    Tagged
    14 Thread(s)
    You can actually go in and edit your own posts, meaning you could have gone back and added the link to your original request. I'll delete it for you.

  3. #3
    Always have a backup plan! failsafe's Avatar
    Join Date
    Jun 2006
    Location
    Canada
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 cents worth

    Hi there, couple of first impressions on your site design:

    Maybe try switching the testimonials column to the right side and moving the main panel under the logo. Also, either have both panels bleed off the sides of the page, or have an equal margin separating the panels from the edge of the page. You might also try making the main content panel background white and nuking the outlines. The tabs might also work better visually if they sat above and behind the main content area.

    Your rollovers work well and pages load quickly. Some of the text on the home page product boxes is wrapping funny on my display (Firefox, Mac platform). Links seem to work well. I like the complimentary colour scheme you have developed and the general graphics are coming along well. Your products look very interesting. I could use one of those knee wraps!

    Anyhoo, just my two cents worth.
    "We're all mad here." Cheshire Cat—Alice in Wonderland, 1865
    ________________________________________________________________

    Graphic Design • Web Development • Writing and Voice Services

  4. #4
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback, failsafe. I was wondering about the balance of the panels ... thought I would try something different than a complete balance, but you have a good point there. Two things I would like to ask about ... the text that wraps funny in some of the browsers is a product of my lack of experience - I tried to fix it, but really don't know how. Same thing for the tabs - I couldn't figure out how to place them on top of the main panel, so I was hoping they would look fine where they were, even though that wasn't my first choice. Could anyone help my with those two problems?

    In terms of the position of the two panels, I heard somewhere that the eye travels from left to right and settles on things that are to the right. That's why text is better to the right of an image. Does that work here - putting the more important text to the right? But if you think that the two panels should be switched I definitely will consider doing it.

  5. #5
    Always have a backup plan! failsafe's Avatar
    Join Date
    Jun 2006
    Location
    Canada
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again.

    Here's a link to a couple of free templates that use top tab navigation. Inspecting the HTML and CSS code will help you with the tab situation. http://www.jbvisions.co.uk/free-templates/index.htm

    I haven't taken an in-depth look at your code but the text wrapping may just be that an HTML break tag <br> (or <br /> if XHTML) is all that is needed after the image, or you could create another row in your table to hold the product description, centering content within the table cells so that the text is centred below the product image. If it was me I think I'd remove the wide borders on the table and maybe use a thin border just on the product image itself. As you progress, you might want to read up on tableless layout where elements are positioned with CSS and not tables.

    As for the right-left column thing, I like to create a logical progression for the viewer's eye to travel to pertinent information. In this case, from the logo down to the page heading, down again to the product information and to the right to the testimonials. Testimonials are valuable content but, IMO, are secondary to the company and product information.

    Hope this helps and remember that this is just one person's opinion. Others might have a different point of view.

    Cheers.
    "We're all mad here." Cheshire Cat—Alice in Wonderland, 1865
    ________________________________________________________________

    Graphic Design • Web Development • Writing and Voice Services

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    When I first opened the page and it loaded up, my eyes instantly jumped to the top-left corner where that orange is. Then they lead over to the JD Athletics letters. After that, there wasn't really any intuitive path for my eyes to follow. I had to look around for a second to figure out what I was trying to look at.

    I also have the text-wrapping problem like failsafe had (Firefox in Windows), specifically on the foot, knee, and heat pack boxes.

    The borders around each of the boxes seems odd to me. I think you may want to try something like just removing the boxes, and having the text centered below each of the respective images.

    Also just a few things my DOM inspector popped up for the site:
    On line 92, your "&copy" doesn't have an ending ";" (should be "&copy;")
    On your table, the cellpaddings should just have numerical values, no need for the added "px" at the end.
    Also, the table element should have a "summary" attribute defined.

  7. #7
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "When I first opened the page and it loaded up, my eyes instantly jumped to the top-left corner where that orange is. Then they lead over to the JD Athletics letters. After that, there wasn't really any intuitive path for my eyes to follow. I had to look around for a second to figure out what I was trying to look at."

    Samanime, did you mean that you also think that the main content should go just under the JD Athletics, with the testimonials to the right?

    As for the products and their names, if there are no borders around will there be enough of a separation between the items to distinguish them as separate categories going to different pages?

    I will fix the other items you mentioned tonight when I get home from work. Thanks so much for your suggestions.

  8. #8
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it looks like that you made by yourself.
    veru helpful and inspiring one.

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Moving the content to the left would probably help, because I believe that's where my eyes next went. It would probably be the most effective change you could make in that regards.

    Also, you could change the spacing around the image and text using CSS, or using whatever method you are currently using, just remove the actual border, and after your image put a break, and then center the text and image together. I think it will probably look good that way. Or, maybe instead of eliminating the border all together, just use the CSS border instead of the normal table cell border, so it has a solid colored border instead of the "button" border.

  10. #10
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, Thanks, I'll try that.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to agree. I immediately saw the orange color scheme with the blue. No offense, but personally I find the orange colors to detract from the site immensely. I think it has a relatively nice feel but the colors remove some of the professionalism. I would also recommend switching the testimonials. Typically a box like that indicates a nav bar and I'm instinctively drawn to click on it, even though its not its purpose.

    Otherwise, nice layout! Best of luck.

  12. #12
    Always have a backup plan! failsafe's Avatar
    Join Date
    Jun 2006
    Location
    Canada
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi WebMachine.

    Just want to say that it takes guts to open your design to critique. It can be overwhelming and easy to feel discouraged, but it is also a wonderful way to learn.

    If you want to look at some variations on your colour scheme take a look at http://www.wellstyled.com/tools/colo.../index-en.html. Here you can experiment with contrasting colours, pastel or dark versions of your colours etc. Another great site for colour scheme inspiration is http://www.colorschemer.com/schemes/.

    All the best.
    "We're all mad here." Cheshire Cat—Alice in Wonderland, 1865
    ________________________________________________________________

    Graphic Design • Web Development • Writing and Voice Services

  13. #13
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Going past the first impression and where my eyes fall and tend to travel, the first thing I notice is that you have a rather groovy tab theme, but then these rather plain looking product boxes (and, indeed the content and sidebar box borders themselves, but less so). It's been mentioned that the text wraps in the product boxes, but in addition to fixing that, I would make a nice background/border for the product boxes that compliments the tabs.

    Further, the ActiveWrap logo at the top requires work. It looks like it's been resized in MS Paint.

    On a personal aesthetic note, I'm not sure I like the JD Athletics text with the very harsh looking shadow behind it.

    Finally, I would definitely put a contact form on the contact page. Maybe include a check list of which products I'm interested in. And then make sure it sends me and the owner an email. Put contact details and what I was interested in in my email ("Hi, thanks for your interest in... Our sales consultant will contact you in 24 hours. If you have anymore questions you can contact us...) There are millions of contact form PHP scripts out there, I'm sure you'll find one that will sort you out.
    Last edited by Mr Moo; Oct 5, 2007 at 05:41. Reason: Make me look less like a spelling idiot
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  14. #14
    SitePoint Addict
    Join Date
    Nov 2005
    Location
    Minnesota, United States
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont care for the background color much. And I think you should make the content completely centered with your background image make the image wider if you need to. If it is supposed to be centered already then you might want to take a look in FF at 1024x768 resolution to see what i mean

  15. #15
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    site looks nice and clean though orange looks a bit out of place

  16. #16
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The orange really seems out of place .. the transparent image has a blue theme ... i'd think if u switch the orange to a lighter blue it would stand out more subtly. The left side bar is not flused with the main content box. Otherwise it looks clean
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Click M O N E Y S H I O K ! Click


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •