treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Website design feedback/critique

  • Hello,

    I am redesigning a charity website and would appreciate some feedback or any suggestions for improvement.

    This is the original website - http://rasa-advocacy.org.uk/

    This is the redesign - http://rasa-wakefield.org.uk/wp/

    Thanks

  • A couple of quick thoughts...

    First of all, it looks a lot nicer than the original, more immediate eye-appeal, IMO, more inviting for the visitor.

    What I like (mostly macro-level stuff):

    • -- more generous overall layout
    • -- Bigger, catchier header
    • -- Slideshow
    • -- animated drop downs

    What I'm not crazy about:

    • -- the very wide text area
    • -- the lines are too long IMO for the type size
    • -- the excessive space at the bottom of the footer and the fact that it floats up on pages with little content (i.e. need a sticky footer)
    • -- the black highlight (an oxymoron) for page name on hover
    • -- the page name isn't centered in the colored rectangle
    • -- neither is the upward arrow in the back to text icon

    And a general pet peeve: the contact page. For basic messages, wouldn't linking the "contact" menu item to a basic mailto link be better?

    Sorry for the funky formatting! I'm not having much success using markdown here...

  • I agree with everything with one issue: using a mailto: link is probably not a good idea for a site that may receive a fair bit of exposure...That is a spam attack waiting to happen (unless encoded in some way of course...)...

    Id recommend setting the global font size to 16px instead of 14px...and the menu font-size to 14px (you will have to make the search region a hair smaller) but, as far as accessibility you'd gain a few points in my book.

    I would also increase the line height...it is often something that is overlooked but increasing it can really improve readability.

    edit: one more thing - the scroll up arrow; i think it should be the dark blue, not a black...it doesn't fit the UI...

    Excellent work though...the initial site was rough.

  • @jshjohnson,

    I think the website it dramatically better, gives it a more contemporary look rather than a early 2000's or 90's approach.

    To embelish on what @kgscott284 said in regards or using the mailto:. If it's really necessary to use it than you can incorporate something like this to protect against spam.

    html

    <span class="email">name[at]domain[dot]com</span>

    jQuery

    $(function() {
        $('.email').each(function() {
            var $email = $(this);
            var address = $email.text()
            .replace(/\s*\[at\]\s*/, '@')
            .replace(/\s*\[dot\]\s*/g, '.');
            $email.html(''+ address +'');
        });
    });

    or use php if so choose, just my two cents..

  • I've been using http://wordpress.org/extend/plugins/si-contact-form/ for awhile mow with no problems.

  • You spelled Seekers as Seeksers on the top right.

  • Thanks for the feedback guys - I appreciate it.