SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please Review! New Site Rebuilt with CSS

    I have just completed (for the most part) the redesign of our company website. I will still be adding content such as photos to store pages, forum, chat and a kidz page in the community section.

    So tell me, How Do You Like Me Now?

    http://www.naturalretail.com

  2. #2
    SitePoint Enthusiast pickledshark's Avatar
    Join Date
    Jun 2006
    Location
    Blackpool
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say that first impressions are quite good.

    First thing I spotted was the "You are visitor #" which, for me, is a negative and doesn't do well for the professional image.

    The image on the homepage (of fruit and organic food) looks out of place - it could maybe do with being bigger or give it a border/drop shadow.

    I really don't like the navigation bar - it feels unnatural to use and a little frustrating when it gets over two levels of nav.

    The header images on the pages other than the homepage are quite good - the way the picture "breaks out" is a nice touch. The images do look a little rough around the edges in places - I would suggest a little work here would go a long way. In comparison the homepage header (background) image is weak.

    I would say that I would respond better to a more bright and bold colour scheme (think fruit) than the earthy, wheat style colours you have used. The bright and strong colours would relate more to vitality, health and energy - whereas the earthy colours make me think farmer, schoolteacher and that flakey, pasty-skinned vegetarian that everyone knows.

    I hope that helps, I have given you my honest opinion.
    Fresh Store Builder
    Create Amazon Stores & earn $$$$ daily as an Amazon Associate

    Only $97

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Location
    UK Liverpool
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice long time since I seen a yellow website and its looks great well done M8 Good Luck

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,265
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nice effort, and it's good to see a colourful site!

    I agree about the "your are visitor #" bit - doesn't look very good.

    My main comment is about the top navigation...

    When you hover over a top level link the text colour changes and it's illegible.

    On the drop downs I don't get the right sort of cursor which makes it very hard to click on anything (just got a friend to test this and she got confused!).

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some quick notes:
    - Make your links more distinct. Initially when I visited your website I wasn't able to recognize links which was within a content area. You could either add underline or change a color.

    - Make your header more vivid - add colorful photo etc..

    - Add break before copyright text

  6. #6
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really pretty website, simple, clean, great colors. I like the font one size bigger and it would be perfect.

  7. #7
    SitePoint Zealot topher's Avatar
    Join Date
    Jun 2004
    Location
    Arizona
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Chris,
    Good on ya!

    I think you could use some more/better art direction on the "in store" photos used in the headers. Also consistency in photo styling could be better. PM me if you'd like to discuss.

    I agree body links could use a visual boost.

    I too noticed the I-beam cursor when hovering over top nav links - compared to Mr Hand, it's like nothing is there.

    The styling on the drop down links in the top nav seem a tad too "3D" to me.

    In keeping with the other main navs, I think you should add a clear link at the top of the About Us page leading to Contact Us. The email link at the bottom right does take you to your contact page, but I'm one of those types who look for the exact words contained in main nav link (aka: Contact Us) when I'm looking for it on another page.

    A convention you've set up is: if a top nav item has a drill down menu, one can simply click on the item name (About Us, Locations, Departments, etc.) and find the "drill down" links on that "main" page. I think it might be better if you follow a rule that those drill-down links be near the top of the page, or somehow easy to find. I see you're using contextual links (Specials), nicely headered links (Departments) and easy to find link-groups (Community). I'd opt for one of the latter and stay consistent.

    Overall, Nice!
    -topher

  8. #8
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    I agree that the color scheme is good and the i-beam cursor a bit confusing.
    Be sure to check / edit all text, since "bare with us" may not be professional-looking, either! ;-) [Sand. recipies page.]

    Just so you know, there's hz. scrolling on 800 x 600 resolution & any text sz.
    increases will blow the navigation out big-time.

    Good luck, have fun & good for you in switching to css / html,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  9. #9
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the comments so far. Keep them coming.

    I have changed bare to bear. Will consider the 800 x 600 problem

    Artwork in headers are actual customers/workers budget doesn't allow for professional photo shoots onlocation and that would make customers nervous

    considering body links but I do not want to throw a nonrelated color in the site

    colors are meant to be earthy and relate to the vegetarian and vegan

    top nav hovers are green to match color on individual store logos. looks ok on all browsers I have tested on, though I agree are a little dark, but also hard to read when a pointer is over top of them anyway.

    Drop downs will stay the same (I Beam) unless anybody knows how to fix without a complete teardown. My stats show users using IE6 unless coming from sitepoint. I looked at the CSS dropdown menus, but all seemed to have IE6 bugs which would do me no good. (subject to change these when other areas of the site are complete)

    contact us is readily available twice on every page

    font size is comparable to most sites i researched and is scalable

    image on main page will rotate out, and I can say I am not totally satisfied with it either, though I am uncertain why.

    I like the main header being faded out showing the sunflower. it is meant to be subtle and not so much in your face, but instead directing the eye back to the logo and down to the main body.

  10. #10
    SitePoint Zealot topher's Avatar
    Join Date
    Jun 2004
    Location
    Arizona
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Main nav looks better.

    Artwork in headers are actual customers/workers budget doesn't allow for professional photo shoots onlocation and that would make customers nervous
    A professional shoot needn't involve customers, but w/o a budget, it's a moot point.

    considering body links but I do not want to throw a nonrelated color in the site
    I take it underlines are out?

    I like the main header being faded out showing the sunflower. it is meant to be subtle and not so much in your face, but instead directing the eye back to the logo and down to the main body.
    Just a tad stronger for me.

    Font size is comparable to most sites i researched and is scalable
    OK, but increase the font size in FF, and there goes the nav.

  11. #11
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd also like to add that with the navigation, it's not obvious where you are once you're two levels into a section... IE: Departments > Bakery; the top navigation bar link isn't highlighted to show you're in the Departments section. I realize that there is sub-navigation on the right side of the page, but it's not obvious (I had to look twice). If you're going to use horizontal navigation for the main sections of the site, be consistent with the sub-sections.

    I also agree that the teal link color, when you mouseover the links, is not a strong contrast with the brown of the top navigation. Consider using white with an underline, or a stronger contrasting color.

    I do feel that the body copy is a little small, and I would increase the text size in the browser to read it better... But that brings up the issue already mentioned; Firefox will make the top navigation two lines instead of one, and you lose most of the second row of links, which is a usability issue.

    Those minor issues aside, I don't feel that the home page is very strong as far as telling a visitor what the site is for. I realize it's a site for an organic supermarket, and that you have a list of store locations (which could stand out a bit more... maybe put them in a box that's a different color, change the header from "The store locations are:" to "Find a store near you!"), but the News release link is strange... It doesn't seem to be news related to the NRG chain of stores, just health in general. Is this really appropriate for the home page?

    The usability of the News Section is weak as well. Click on the link and you're taken to a page in a new window, with no navigation links back to the main site, only to a site called Quantum Health, which itself opens in another new window. This can be confusing for some web users.

    Also mentioned previously, content links need to stand out more from page copy. Using the same color as regular text, with no underlines, makes visually scanning a page for links impossible. The only way to find links now is to "feel around" with the mouse cursor.

    Other than that, the site look and feel is good. The colors could be a stronger contrast, but overall the site feels correct for an organic store. Nice job.

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mostly everything has been said, however I noticed that the bottom left part of the layout is mis-shaped compared to the other rounded corners.

  13. #13
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ShockTech
    Mostly everything has been said, however I noticed that the bottom left part of the layout is mis-shaped compared to the other rounded corners.

    I Know, aint it cool! beats all those square box designs that look like front page doesn't it!

  14. #14
    SitePoint Member lazer98's Avatar
    Join Date
    Sep 2006
    Location
    Memphis
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Turning to CSS completly is quite an undertaking, everytime I have tried in the past I just never seem to get the right results across all browsers.

    Overall I like the site, the header is a little offset from the body, not all the time though, I'd say it is about 10px off to the right, if I resize it is corrected.

    The hover color on the menu bar is diffucult to read, it looks great on the background below, I would change the hover for the menu to a different color, perhaps a yellow this will keep with your color scheme.


    I would also add something additional to the home page, perhaps additional images, just blend them in.

  15. #15
    SitePoint Member
    Join Date
    May 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I dont have many visual critiques for ya, but I do have a few suggestions about your code. I'm glad that CSS/Tableless layouts are starting to grow in popularity. But I think that your document could be more semantically correct. All the elements in your source code are div's. The title of your webpage or masthead should be your h1 tag. Your links should be un-ordered lists or definition lists. your class names should be something more human readable like, 'content', 'secondary-content', rather than 'left' 'center' 'right' (see alistapart.com) Also your drop down navigation is composed of a huge inline/embedded javascript. The same effect WITH cross browser support is possible with just css and a small linked javascript. (see suckerfish dropdowns via google)

  16. #16
    SitePoint Enthusiast LogoVertising's Avatar
    Join Date
    Sep 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nice website

    nice layout, good work

  17. #17
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The same effect WITH cross browser support is possible with just css and a small linked javascript. (see suckerfish dropdowns via google)
    I will try to work on the code as I learn more, and as far as CSS drop downs, I would like to see samples of them working correctly in ALL browers. (anybody?)

    Also I have noticed the alignment issue as well but do not understand the cause. Anybody know what would cause this? It seems like an IE6 issue more than FF, Opera or Safari.


    Thanks for the tips

  18. #18
    SitePoint Member
    Join Date
    May 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chrisOBrien
    I will try to work on the code as I learn more, and as far as CSS drop downs, I would like to see samples of them working correctly in ALL browers. (anybody?)
    http://www.deansabatino.com/suckerfish/suckerfish.html

  19. #19
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    colors aren't working for me. when I think organic I think bright, vibrant greens, blues, etc. as is it gives me the impression of spoiled, decay. Try working along the lines of the pink and teal in the logo even.

    Layout needs some work in the content area, your intro text gets lost to the store locations and then that photo is just floating there.

  20. #20
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice looking site. The background image isn't very good and I don't really like the color scheme.

    The layout is very nice for this type of site though.

    _______________________________
    <removed - use signature for links>
    Last edited by Varelse; Sep 8, 2006 at 14:19.

  21. #21
    SitePoint Member bizaway's Avatar
    Join Date
    Aug 2006
    Location
    India
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is cool. But in my IE6 the top header and the menu moved to the right a little bit on some pages. I think need some more tweaking.
    The home page and (http://www.naturalretail.com/htm/juice.htm) are two examples of the alignment problems.
    Webmaster
    Anyone can start online business
    http://www.bizaway.com

  22. #22
    Non-Member Musicbox's Avatar
    Join Date
    Nov 2004
    Location
    india
    Posts
    1,331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    layout is very nice but when menu opens on hover colors must be changed to match with the layout.


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
  •