Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16

Thread: Westhill Youth

  1. #1
    Junior Member Biting Hobo's Avatar
    Join Date
    Mar 2007
    Location
    Corsicana, TX
    Posts
    18
    Member #
    14922

    Current Rating

    Visual Appeal:
    4.0 out of 5

    Accessibility:
    4.5 out of 5

    Website Speed:
    4.5 out of 5

    Compatibility:
    3.0 out of 5

    Overall Rating:
    3.5 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    Hello everyone. I've just recently completed this site for my church's youth group, and I was hoping for anything you'll give me in the way of a critique. The people I've asked so far seem to really like it, but I figured I'd ask the pros about it.

    My goal was simplicity, functionality, and a different approach. I also concentrated on making the site efficient, and I think it meets that goal. If you think otherwise, please let me know.


    Also, out of novelty, check out the main site. (www.westhillchurchofchrist.org). I didn't design it, and I really can't do much in the way of making it any different.

    But I'd be happy for any critique on either one.

    http://www.westhillchurchofchrist.org/youth

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Your code uses divs quite a bit, but it's still not semantic. Instead of all those line breaks, simply put each block of text in a paragraph tag, because you're representing paragraphs. It's also not semantic (and fails markup validation I bet) because of the ultra-presentational <b> and <i> tags. Put the text in question in something like <p class="note"> and style that instead.

    The background image takes a little while to load, too. There's not much you can do about it though, I suspect.

    It's still much better than having freaking tables everywhere.

    edit: holy crap, I can't believe it passes XHTML 1.0 Strict validation with <b> and <i> tags; they've been deprecated. It even passes XHTML 1.1 sans one small problem.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Junior Member Biting Hobo's Avatar
    Join Date
    Mar 2007
    Location
    Corsicana, TX
    Posts
    18
    Member #
    14922
    "holy crap, I can't believe it passes XHTML 1.0 Strict validation with <b> and <i> tags; they've been deprecated. It even passes XHTML 1.1 sans one small problem."

    I rule. (kidding)


    No, but seriously, I will re-arrange for semantics. I was more interested in making sure it validated, and that it looked good. Does it?

    What, in particular, are you talking about? Or is it just sometihng you saw everywhere?

    Thank you very much for your input, I welcome more!

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Rewriting (no offense; it's just faster for me that way) now. Hold on.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  6. #5
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Here's the new version with what I added:
    • XML prolog. Ignore it for now. I like it.
    • Added those two attributes to <html> so it becomes more XML friendly and XHTML 1.1 valid
    • Deleted the potentially unnecessary content wrapper container. Wherever possible, don't specify a tag. It sounds weird but it's true; you want to avoid using tags of any kind.
    • Changed the h1 capitalization and the tilde. The capitalization should be controlled through CSS because, in this csae, it's presentational. The same with the tilde.
    • Changed the first line of text to an h2 because it's naturally a header.
    • Changed the body text to paragraphs. The <br /> tag is rarely semantic. It's not in this case because you used it to move content around.
    • Changed most recent update to a definition list, the idea being that "most recent update" is the term and the definition is the date you provided. This change is debatable, but I see it as semantic. I expect an ambush from somebody else with an argument to the contrary.
    • Changed the explicitly formatted text to another paragraph, but with a class of note.
    • Changed the ID of your footer to just "footer." Avoid using color names in your CSS, because if you decide to change your site's colors, the class names won't make sense anymore.
    • Got rid of the logo entirely. Simply make it a background image for the footer itself.
    • Very importantly changed the footer list of links to a ul, because it's a list. You can reproduce the exact same effect through CSS while still stating in your layout "this is a list of links."
    • Similar to an earlier point, changed the capitalization of the link text. Should be controlled through CSS.
    • Got rid of the class on all the links because it's redundant. Just make a selector like [minicode]div#footer ul li a[/minicode] to select all links in the navigation.
    • Removed all the tags for the Home "link" (not actually a link, but I mean that last bit of text in the navigation). In your CSS, simply assume that if something in that list is not a link that it is the current page, and format it appropriately.

    HTML Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    		<title>Westhill Youth Group - Light the Fire - 1.0</title>
    		
    		<link rel="stylesheet" type="text/css" href="base.css" />
    	</head>
    	
    	<body>	
    		<h1>Westhill Youth</h1>
    	
    		<h2>Thanks for stopping by!</h2>
    		
    		<p>Whether you're a fully embedded member of the youth group, an occasional visitor,
    		or someone who can't even locate Corsicana on a map, we welcome you. This site exists
    		as an extension of the Westhill Youth Group in Corsicana, Texas, and we hope you'll
    		find it as friendly and easy as we are in person.</p>
    		
    		<dl>
    			<dt>Most Recent Update:</dt>
    			<dd>Tuesday at 10:55 PM</dd>
    		</dl>
    		
    		<p class="note">This section is inaccessible from the main site.  Bookmark it for convenience.</p>
    		
    		<div id="footer">
    			<ul>
    				<li><a href="news.htm" class="navs">News</a></li>
    				<li><a href="agenda.htm" class="navs">Agenda</a></li>
    				<li>Home</li>
    			</ul>
    		</div>	
    	</body>
    </html>
    Not crapping all over your code; please don't interpret it that way. I just "finished", meaning "I'm always going to keep adding to it" a 40 page article on semantic web design, so I'm always trying it out.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  7. #6
    Junior Member Biting Hobo's Avatar
    Join Date
    Mar 2007
    Location
    Corsicana, TX
    Posts
    18
    Member #
    14922
    Very thorough, thanks. I'll take that code and make it work for me. I really do appreciate it.

    I still haven't had any input on how it looks, though. Frankly most of the visitors aren't going to be too concerned with whether or not my code is semantic. (though it is imporant)

    I'm working on that now. Thanks again.

    edit:

    And looking at some of the changes, I realize that I'm going to have to really re-invent the wheel there. Alot of my code is hackish- for instance, IE doesn't scroll properly when using a scroll wheel in some places, so I used a 1px transparent gif to make it work. And it did.

    I took the code listing above into Notepad and tried it... I don't know... I'm not too enthusiastic of making it perfectly semantic if its going to need so much modification, especially when what I have now not only works in all browsers I've tested in, but also validates. It's good enough for me unless there's some reason it shouldn't be.

    Call me a noob, but as of right now I'm pretty much satisfied with the code. I'm interested in how it looks, by now.

    Re-Edit
    "Not crapping all over your code; please don't interpret it that way. I just "finished", meaning "I'm always going to keep adding to it" a 40 page article on semantic web design, so I'm always trying it out."

    Ah, well, I can see why you'd lean more towards that aspect of it. I'm sure my code has plenty of "practice" in spotting less-than-perfect semantic code. :knockedout:

  8. #7
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    If you're satisfied with it now, then fine. Just consider it for future pages or sites.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  9. #8
    Junior Member Biting Hobo's Avatar
    Join Date
    Mar 2007
    Location
    Corsicana, TX
    Posts
    18
    Member #
    14922
    I certainly will...

    Where is your article? I might want to read it...

  10. #9
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    It's not available yet. It's going to be reviewed at work (the primary audience is the developers there), and then released here eventually.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  11. #10
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    How does it look? Not all that great. The biggest problem is the background picture, it is blurry, grainy, and dark. I would use a nice solid background, or stylish background tile, and then add that picture to a gallery. Everything other than that picture looks alright.

    Here is an awesome youth group website. Here is another. Granted, your church probably isn't as big as The City Church in Seattle (first link) or Saddleback Community Church (second), but you can still have a rockin website.

    Good Luck!
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com