Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post

    Charity site review

    Hi folks,

    I'm looking for some constructive criticism with regards to a charity site that I'm working on. It isn't finished obviously enough -- it's full of dummy/ unformatted text, some links don't direct to the correct place and I can think of two other very small things that need to be tightened up -- but I'm hoping that it is 95% there in terms of looks and functionality.

    http://www.tirzah.ie/concrete5/

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    The page overruns on a 1200px-wide screen resolution. Not everyone is going wide-screen or high resolution so you'll have horizontal scroll bars for a number of potential users (which is not good).

    The menu sub-item for "about us" has no border or background to draw attention to the fact that a submenu item has shown up. You might want to make that a touch more defined and obvious.

    In general, try to imagine your sweet old granny trying to navigate the page and think to yourself about where she might get lost or frustrated with the website.

    All-in-all it's not bad.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    visually pleasing
    my only additional comment Rows is that under your contact area you have your email for everyone to see... When I see this on sites I shriek in pitty for the poor soul who has to handle all the spam that will come pouring in. Now provided your email client handles spam ur fine, but something to consider is you could have a little "drop a line" text box thing and handle spam exceptions on the page end... this would also help you on the email client end by being able to decrease your spam "stickness" in case u might actually spam someone unintentionally (I know I've sent ppl emails that have gone to spam and vise versa-and they were legit). Aslo seems to weigh in on importance of not throwing an actual person accidently to spam when dealing w/ trafficking... But those are my thoughts on it; overall nice/clean looking with intuitive flow

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    Thanks for the advice, folks. It's only my second site so I really need all the help I can get.

    All the content is pretty damn rough and I just lashed it up as I received it. I'll have a chat with them about streamlining it. Actually, formatting the content with them present will be a perfect CMS tutorial for them. However, what you are saying about the email address makes perfect sense. I might see about getting rid of the address and putting up a contact form with some sort of captcha recognition in.

    That's good advice, Rowsdower (A G.K. Chesterton fan, I see). I'll add some background colour to the drop down menu. I'll also have to figure out a way of keeping the clouds to the left and right of the content div (which is 900px) while also lowering the container width. Any ideas on how I would go about doing this?

    I had initially absolutely positioned the images (which I think are nice additions) but that's no good if the screen is zoomed into. (See here for a thread I started on it. Any help would be appreciated.)
    Last edited by garabildi; 06-30-2011 at 02:00 AM.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    looks good.

    Things I notice.

    1. logo is perfectly positioned for a 1024x768 resolution. its to the top right and the distance from right hand side is about twice that of the distance from the top.

    2. The contact form should be acessible directly from the nav bar - not from a drop-down link.

    3. email address should not be in a page. Just like how we phone ppl on our mobiles, we should simply be able to fill the detail and submit a form, where it goes, and how it gets there are irrelevant.

    4. I wonder why you use the index.php page for everything? If it isn't the index page of the site, maybe it should be a script with a different name, for each page content, perhaps.


    only tested in ff 3.6.10
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    The reason index.php appears is because it is how concrete 5 (the CMS) references pages. Don't ask me why . I believe there is a way to clean the address up.

    I do take your point about the contact page. It was a client request to have it listed but I'll have a chat with them.

    I didn't really understand your first point. Could you expand on it?

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    yes, I didn't make my 1st point clear did I?

    The page is too wide causing a horizontal scrollbar. The logo however is in the correct place, which means that everything to the right of the logo should go or be moved. I was just exxplaining where a 1024x768 resoution would end, if as I guess, you are using a screen that is wider.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    Thanks for the reply.

    So I'm a little confused as to what my options are. I basically want the banner to be scalable for those who have a wide screen (the image is 1400px wide which I think is fine) but also functional for those on a smaller screen and lower rez.

    I've gotten rid of my beloved mini-clouds running down the side because I can't figure out how to put them in without messing the site up, and I've changed some of the dimensions. I've also added some background colours to the menu to distinguish menu options. I'll mull over the colours to see if they fit.

    It seems to work fine on a 1024*768 resolution and up (I figure little old grannys are used to side scrolling if they are running 800*600).

    Does it look all right?

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    You could make it fluid to suit all sizes of viewport.

    make the container div use a width of 100%.

    make the 'sun' image an image on its own and float it left, within the header div.
    make the logo an image of its own and float it right, within the header div.
    put the facebook and donate icons into a separate part of the site so that the nav menu fills the width.

    As for the design: the arty part of my brain is very small

    I would play about with some idea like, using colours from the logo butterfly in the part of the page below the nav menu b+w image.

    And I'd put the text into two coloumns so they are easier to read. Its said to be easier to read on a screen if the line of text is less than half a page width. I find it to be so.

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • Users who have thanked bazz for this post:

    garabildi (07-01-2011)

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Note: Your footer text is out of whack with the new page width when you blow up your browser to wider sizes. You can add a container to the footer to hold your "footer_menu" div. Make that container 900px wide (same as your content) and use margin:0 auto; to center it and that should take care of the problem.

    To give a scalable appearance to your top banner you can add a background to the <html> element (in case you didn't know, you can indeed add background color and images to the html element and then add another background image to the body element - just be sure to remove the background color from the body or it will hide what you have set to the html background). Just get a repeatable version of your clouds/grass/feathery brushstrokes banner and repeat it on the x-axis on the html. In this way you could then still use your small clouds down the page as a repeat-y background image on the body element. All of that style control and you won't even need to add any markup to the page.

    Similarly, in the footer, just add repeat-x to the background image used on #footer and you've got that all set and you can skip my earlier suggestion about putting the footer menu in a wrapper.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    As for page width, how about something like this:

    Code:
    #container {
    margin:0 auto;
    max-width:1200px;
    padding:0 50px;
    width:auto;
    }
    Then remove your width settings from each of these elements:
    #content
    #main

    That gets you a partially scalable layout that works on 1024 but gets wider up to a certain point with wider screen resolutions, still allowing for a pleasant amount of blank space on each side so you aren't just giving a wall of text (which is what it seems like to me when sites have 100% browser width for text).

    Is that more of the direction you would be interested in going?


    Edit: Here is some CSS to plunk down at the bottom of your style.css stylesheet:
    Code:
    .nav-header li ul{
    	width:111px;
    }
    .nav-header li a{
    	color:#F1F1F1;
    	display:block;
    	font-weight:800;
    	line-height:33px;
    	margin:0;
    	padding:0 18px;
    	text-align:center;
    	text-decoration:none;
    	border:1px solid transparent;
    }
    .nav-header li a:hover, .menu ul li:hover a{
    	color:#05BAFC;
    	text-decoration:none;
    	border:1px solid #fff;
    	background:transparent;
    }
    .nav-header li:hover>a{
    	color:#05BAFC;
    	/*background:#fff;*/
    	text-decoration:none;
    	border:1px solid #fff;
    }
    .nav-header li:hover li a{
    	background:none repeat scroll 0 0 #e4e4e4;
    	color:#333;
    }
    .nav-header li ul a{
    	color:#05BAFC;
    	display:block;
    	font-size:13px;
    	font-style:normal;
    	height:33px;
    	margin:0;
    	padding:0 20px;
    	text-align:left;
    	border:1px solid #fff;
    	border-top:0;
    }
    .nav-header li ul li{
    	width:100%;
    }
    .nav-header li ul a:hover, .menu li ul li:hover a{
    	color:#fff;
    	text-decoration:none;
    	background:#333;
    	border:1px solid #fff;
    	border-top:0;
    }
    #container {
    	margin:0 auto;
    	max-width:1200px;
    	padding:0 50px;
    	width:auto;
    }
    #content,#main{width:auto;}
    #footer{background-repeat:repeat-x;}
    This incorporates the full-width footer update, the page width update, and the menu update that I would suggest you move toward (the general direction that I would go). Some of it is redundant because it is overridinig styles above it. If you moved to make something like this your "final" version you could do some cleanup on the above CSS.
    Last edited by Rowsdower!; 06-30-2011 at 07:29 PM. Reason: More CSS ideas...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    garabildi (07-01-2011)

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    632
    Thanks
    1
    Thanked 21 Times in 21 Posts
    Wow! According to the W3C validator, you have only one HTML error and three CSS errors:

    http://validator.w3.org/check?charse....ie/concrete5/
    http://jigsaw.w3.org/css-validator/v....ie/concrete5/

  • #13
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    From a visual point of view, I really like your site. The articles are interesting and well written, however I would have liked to see the "Contact Us" as an option on its own, but I understand that was your clients' wish. Great work!

  • #14
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have enjoyed reading your site. I enjoyed the articles and find them to be very well written and kept my interest. I also think the design of your site is lovely.

  • #15
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am very impressed with the site. It is compelling (the video is great) and it really holds the attention. It looks like it does exactly what you set out to do with it. I hope it works to help end human trafficking.


  •  

    Posting Permissions

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