Ywda V1.0

[chilipie]

Young Web Developers Association (http://www.chilipie.co.uk/YWDA/)

Please review this site; I've been working on it for the past couple of days. Coding wrongs are entirely my fault; please tell me so I can rectify the problem. Colour-wise it's not particularly stimulating, but there is method behind the madness (for once :p ). I felt that if it was to "teen-friendly" ie. hip/cool/trendy, I thought we would end up attracting the wrong breed of people. If they truley are interested in web development, they'll bother to read the "blurb", to look around and find out more. It's a bit dull, I know, but hopefully it'll put the n00bs of the web design world off. However, any ideas of how to brighten it up are most welcome ;) .

Thanks,
Ollie.

[gsnedders]

You could've at least got a photo of a current PowerMac...

Also, it doesn't display correctly on my "oversized" screen... (There is a darker gray below the content)...

[Jalenack]

typography could be better...I don't like only seeing tahoma on there...maybe some serifs.

The banner should be black and tweak the kerning...you can download the psd at the YWDA thread...

Overall, not too shabby

[Graft-Creative]

but hopefully it'll put the n00bs of the web design world off.
Ollie.

Hrm, I would have thought a site aimed at young web developers/designers (same thing in my book) would have sought to encourage 'noobs' to visit?

Depends what you want the association to be about really, if it's to be a closed club for 'those in the know' then fair enough. However, I kind of got the impression that education and guidence would come into the assoc's remit somewhere?

Don't get me wrong Ollie, I know what you are getting at, just playing devil's advocate.

Design wise - v nice indeed - the sort of design that instantly feels comfortable and easy. I kind of don't notice it in a way, so it looks like you acheived the look you were after. It just feels kind of right, without me having to make judgements or form opinions about it.

Kind regards,

Gary

[JamieR]

The design looks great Ollie, I'll try to start work on the backend of the site pretty soon..

A nice, easy to navigate site is great for what we are doing, and v 1 meets its exact requirements.

Jamie.

[KeZZeR]

Out of all of your designs i've seen so far, this is by far the best one :thumbsup:

[mindlessLemming]

Nice :cool:
Now make div#info, #navigation and #footer expand to fit larger text and you'll have a winner ;)

[Jalenack]

yes i was just noticing that as well. It resizes text terribly..you've got background images that dont expand.

I was thinking that Copperplate or similar fonts might be good to use somewhere (nav links, perhaps?). I'm itching to get in on the coding. Can you set up a ftp account for the founders so we can edit it as well?

And why the mac comp? I like it, yet i don't understand it. It might turn off some non-mac users...And if we are going to have it, lets make it g5 :p

[JamieR]

I'm itching to get in on the coding. Can you set up a ftp account for the founders so we can edit it as well?


Yes Andrew - I'm also itching start work on the backend of the site.....We need a domain and host ASAP - we have been offered free hosting however there is the matter of the domain to purchase.

What we are planning to do is to have FTP accounts for all the founding members, so that's You, Me, Olllie and Geoffers...then we can upload any updated material individually without compromising security or anyone else's work. :eek:

Anyhow, I don't know when this will be done - I'm planning to attempt at getting the domain fixed this week.

Jamie.

[rmedek]

I'm itching to get in on the coding. Can you set up a ftp account for the founders so we can edit it as well?

And why the mac comp? I like it, yet i don't understand it. It might turn off some non-mac users...
Hey, if you had a Mac, you could use SubEthaEdit and all work on the project together, at the same time, using Rendezvous...

[Jalenack]

rendezvous = internal network.
(i think)

But it does have Internet collaboration too..2 of us are on mac 2 on PC... :mad:
Error 404 and I both have it though...

[Graft-Creative]

How about something like http://dotfive.com/profile.php in the header? A bit of self depreicating humour and quirkiness; like, yeah we know we're young - but get over it folks - we really know our s**t anyway :cool:

Just an idea.

Maybe I'm losing the plot..............

Gary

P.s. I'm not comdoning plagarising BradyJ's wonderful site BTW :D

[Graft-Creative]

How about something like http://dotfive.com/profile.php in the header? A bit of self deprecating humour and quirkiness; like, yeah we know we're young - but get over it folks - we really know our s**t anyway :cool:

Just an idea.

Maybe I'm losing the plot..............

Gary

P.s. I'm not condoning plagarising BradyJ's wonderful site BTW :D

oops!

[JamieR]

rendezvous = internal network.
(i think)

But it does have Internet collaboration too..2 of us are on mac 2 on PC... :mad:
Error 404 and I both have it though...

I have a mac and a pc:p:p

[bcarl314]

I often see this type of code:


<div id="branding">

<h1>Young Web Developers Association</h1>

</div>

<div id="info">

<h3>What's this about?</h3>

<img src="images/mac.gif" alt="Apple Macintosh" title="Apple Macintosh" />

<p>The YWDA is an organisation which endeavours to promote web design and development among young people. We bestow support and expert knowledge onto individuals whether they are pursuing a career in web development, or just looking to have some fun.</p>

</div>

<div id="navigation">

<ul>
<li><a href="/">Home</a> | </li>

<li><a href="/ouraims/">Our Aims</a> | </li>
<li><a href="/takepart/">Take Part</a> | </li>
<li><a href="/thepeople/">The People</a> | </li>
<li><a href="/discuss/">Discuss</a> | </li>

<li><a href="/shoutout/">Shout Out</a> | </li>
<li><a href="/terms/">Terms</a></li>
</ul>

</div>


and ask myself, why have a div container for a single HTML element???

Wouldn't this, with a few minor CSS changes, be better???


<h1 id="branding">Young Web Developers Association</h1>

<div id="info">

<h3>What's this about?</h3>

<img src="images/mac.gif" alt="Apple Macintosh" title="Apple Macintosh" />

<p>The YWDA is an organisation which endeavours to promote web design and development among young people. We bestow support and expert knowledge onto individuals whether they are pursuing a career in web development, or just looking to have some fun.</p>

</div>

<ul id="navigation">
<li><a href="/">Home</a> | </li>

<li><a href="/ouraims/">Our Aims</a> | </li>
<li><a href="/takepart/">Take Part</a> | </li>
<li><a href="/thepeople/">The People</a> | </li>
<li><a href="/discuss/">Discuss</a> | </li>

<li><a href="/shoutout/">Shout Out</a> | </li>
<li><a href="/terms/">Terms</a></li>
</ul>


Just a comment.
I "usually" try to use divs only when similar content tags need to be logically "grouped" together.

[AaronW]

The 'parent of a single child' thing is for CSS styling alone, I'd imagine. Since we can't apply multiple backgrounds to a single element, designers need to ugly-up their markup with extraneous DIVs like you see there.

As for the design, it's pretty simple but simple works. I'd firstly change the page's background color to whatever the lightest colour in the background image is because at 1600x1200, with no scrollbar, I see the very sharp seam.

Secondly, that centered title on the content looks out of place. I'd send it back to the left, maybe style it up a bit more with a gradient underline.

Lastly, still on the content area, the padding seems to be about (if not exactly) twice that of the upper blurb area. I'd make it equal. Heh.

[rmedek]

I often see this type of code:


<div id="branding">

<h1>Young Web Developers Association</h1>

</div>

<div id="info">

<h3>What's this about?</h3>

<img src="images/mac.gif" alt="Apple Macintosh" title="Apple Macintosh" />

<p>The YWDA is an organisation which endeavours to promote web design and development among young people. We bestow support and expert knowledge onto individuals whether they are pursuing a career in web development, or just looking to have some fun.</p>

</div>

<div id="navigation">

<ul>
<li><a href="/">Home</a> | </li>

<li><a href="/ouraims/">Our Aims</a> | </li>
<li><a href="/takepart/">Take Part</a> | </li>
<li><a href="/thepeople/">The People</a> | </li>
<li><a href="/discuss/">Discuss</a> | </li>

<li><a href="/shoutout/">Shout Out</a> | </li>
<li><a href="/terms/">Terms</a></li>
</ul>

</div>


and ask myself, why have a div container for a single HTML element???

Wouldn't this, with a few minor CSS changes, be better???


<h1 id="branding">Young Web Developers Association</h1>

<div id="info">

<h3>What's this about?</h3>

<img src="images/mac.gif" alt="Apple Macintosh" title="Apple Macintosh" />

<p>The YWDA is an organisation which endeavours to promote web design and development among young people. We bestow support and expert knowledge onto individuals whether they are pursuing a career in web development, or just looking to have some fun.</p>

</div>

<ul id="navigation">
<li><a href="/">Home</a> | </li>

<li><a href="/ouraims/">Our Aims</a> | </li>
<li><a href="/takepart/">Take Part</a> | </li>
<li><a href="/thepeople/">The People</a> | </li>
<li><a href="/discuss/">Discuss</a> | </li>

<li><a href="/shoutout/">Shout Out</a> | </li>
<li><a href="/terms/">Terms</a></li>
</ul>


Just a comment.
I "usually" try to use divs only when similar content tags need to be logically "grouped" together.

I agree, sort of (I used to feel the opposite way)... The one time I feel a generous use of divs is appropriate is when content may be added. For example, "<h1 id="branding">Header</h1>" is fine for awhile, but what if you need to add a paragraph or a link? Rather than go back, add a div, add content, and change the stylesheet, you could just add content and add to your stylesheet where needed.

[bcarl314]

I agree, sort of (I used to feel the opposite way)... The one time I feel a generous use of divs is appropriate is when content may be added. For example, "<h1 id="branding">Header</h1>" is fine for awhile, but what if you need to add a paragraph or a link? Rather than go back, add a div, add content, and change the stylesheet, you could just add content and add to your stylesheet where needed.

That's exactly why I said I "usually" try to use divs only when similar content tags need to be logically "grouped" together..

I was just commenting however. I think it's best to start from a semantic viewpoint, and add divs to "organize" your site.

[chilipie]

@Geoffrey: C'mon man... At least I got a picture of a Mac. It was to keep you and Andrew happy :p .
Whoops. Forgot to change the background from #ccc to #eee.

@Andrew S.: I quite like the dark grey; it was mean to complement the lighter greys without being too bold. I might tone it down to a #333. I'll download the PSD in a moment, and change the files :) .

@Gary: In a way yes... However, we need to differentiate between people who are genuinely interested in learning more, and people who are just out to play around on <insert crappy "template" host name here>. BTW, I did kind of get inspiration for this site from DotFive... ;)

@Kezzer: Thanks :thumbsup:

@Andrew K.: Not a patch on LJ though ;) . I'll start working on the expanding boxes later.

@Rich: I'm stuck on Windows though :( (Geoffrey, stop throwing "666" signs at me please :D ).

@BCarl: That's solely for presentation purposes. The div is for the background, and the h1 is styled to display: none. This wouldn't be possible without the extra piece of markup.

@Aaron: I'll change the headings and the content padding. What do you think about serif titles and sans-serif body-text like on my site (http://www.chilipie.co.uk)?

[bcarl314]

@BCarl: That's solely for presentation purposes. The div is for the background, and the h1 is styled to display: none. This wouldn't be possible without the extra piece of markup.


Maybe I'm missing something on the html side of this, and I don't mean to belabour a point, but you have the following HTML


<div id="branding">

<h1>Young Web Developers Association</h1>

</div>


And this for the corresponding css


#branding {
width: 670px;
height: 130px;
margin-top: 15px;
background: #444 url(images/branding.gif);
}

#branding h1 {
display: none;
}


Why can't this be changed to


<h1 id="branding">Young Web Developers Association</h1>


and this css

h1#branding {
width: 670px;
height: 130px;
margin-top: 15px;
background: #444 url(images/branding.gif);
}


I'm not trying to be a pest, I just don't understand why you did it this way?

[Graft-Creative]

It's because Ollie's using a graphic for his header but still wishes to have a
<h1 > as text in his html, which is there to preserve page structure, aid SE indexing, and to provide css incapaple browsers with a meaningful page header.

Gary

[Graft-Creative]

@Gary:...BTW, I did kind of get inspiration for this site from DotFive... ;)


I was talking about the baby image, thought it could be quite fun, in a self deprecating humorous way:

[gsnedders]

Hahahaha... My PHP code in the background :P

That is a nice header, not just because of who wrote the code :D

[hemebond]

I don't likeHome bar Our Aims vertical bar Take Part vertical bar The People vertical bar Discuss vertical bar Shout Out vertical bar TermsI use borders.

[redhead]

Hello,

I think that there are a couple of points of the design that could be improved upon.

The #navigation div does not appear to have rounded corners... this seems a little weird seeming as everything else has it's corners rounded off. It's just odd that it doesnt follow the others?

Also, the whitespace in the #content box doesn't appear quite balanced... there is loads of space at the top before any text starts, then the box finishs relativly abruptly after the end (in comparison with the beginning). This may be due to the inconsistency of the heading alignments, the YWDA and "Our Aims" headings are centered, the "What's this about?" is on the left, which may make it look like the "our aims" heading takes up more space than it really does? I'm not sure... But you may as well keep it consistent throughout.

Aaron already seems to have covered most of that! whoops...

Now I'll get into ultra-picky mode... Any chance you could have your gradient / fade background thing staying still? ALA style? (http://alistapart.com) That'd rock so much more! ;) I'm not a huge fan of the hover effect on the navigations links, dunno if there's something more interesting that can be done? And an <acronym> around occurances of YWDA, XHTML and CSS would be good... but again, it's just me being picky!

Other than that, good job! :) maybe introduce a little more colour? I'm not too sure.