Topic: trying out css (and html...and graphic design...)

I'm probably not ready to be posting this here...but I've found the advice on this forum to be pretty valuable, and I'd like some design tips.

Inside Tapping the Vein

Here's the scoop... I'm new to graphic design, css, and doing things correctly (with pretty much everything). I haven't been ok'd to use more of the band's images yet, so that's why the same logo appears on every page, why there are no extra graphics, and why I use a pop-up on the graphics section. Eventually, I'll only pop-up the off-site links (and all of the main catagories other than music will be on-site).

Once I get my server up and running on the network, I'll add in my forum code, and some extra goodies...trim the pages down to next to nothing with server-side file includes, and register tappingthevein.org.

I'm red-green color blind, which can be quite a setback when trying to develope sane (and web-safe) color schemes and graphics...thus my reliance on #990000 and #000099. I've seen lots of great advice here about using css for vertical spacing instead of tables and br's, but I haven't been able to find a way to make it work properly... Also, despite looking decent now...it really doesn't have much of a "finished" look...or professional flare. I made the banner graphic in photoshop, and although I think it's decent (on my machine, at least...), as a 128 color selective gif, I can't make one that dithers properly at 256... When I try to change it from selective to web palet is goes all to heck.

Any advice of any kind on graphics, code, design, or basic site improvments is greatly appreciated!

Thanks,

clv



[This message has been edited by clevergeek (edited 02-15-2002).]

clevergeek: Welcome (again). It is interesting that you say you are colour blind as it is something we should all bear in mind but often do. A few quick thoughts and I'll drop some more in as I come up with them.

So on the colour front I think the use of that white colour for the main text distracts from everything else. I like that graphic of he band and perhaps that is a theme you wan to carry over into the text. That dark blue is either just a little too dark or the size is too small - I might be tempted to try and grab the off white of the singers face and arms and use something like that as your main text colour and keep the blue red for graphics and highlights. ZOX is one of our colour experts and might want to drop in an opinion on this. I'm not sure about how tricky the colours are for you but if you want I'd be happy to suggest a few if you want. ZOX's site is a great place to go too:
www.webwhirlers.com/colors

For vertical spacing (depending on where it is being used, can be had using margins or padding - see briggl's tutorials in the GN - one is up for approval so you'll need to go via the forum).

You could also use CSS to get rid of things like the nested italic and bold tags I saw.

Some of your SSIs are showing:

quote:

---

<!-- <!?#include virtual="/dir/
document2.html" ?> -->

---

check out the GN tutorial on this.

I'm not sure there is any need for the nocss notice as you are still using tables for your layout and this is designed for older browsers where this may break (more advice on this if you want).

You have an awful lot of metatags but not the two most important ones (keyword and description).

Overall its a good start - the colours do need some work and I'm sure we are ready to help out there if you want. There are also a few tweaks that could improve the code and you don't need that many tables even if you are going to go for a table based layout.

Emps

Very simple and purposeful site. I like it simply cause it is simple and easy to nav.

- Jon

Wow...it took longer for me to make lunch than it did for you to reply with a review..


{{{ I'm not sure there is any need for the nocss notice as you are still using tables for your layout and this is designed for older browsers where this may break (more advice on this if you want). }}}

Yeah, I put it in because I'd originally hoped to move everything over to CSS and eliminate all of my tables...but I don't really want a full-paged design. I like my centered version, and everything I try with css and divs seems to not look like what I've got now. Is there some way for me to set a div/p widths and center it?

{{{ You have an awful lot of metatags but not the two most important ones (keyword and description). }}}

Do all search engines use those for indexing? I'll put them in.

{{{ That dark blue is either just a little too dark or the size is too small - I might be tempted to try and grab the off white of the singers face and arms and use something like that as your main text colour and keep the blue red for graphics and highlights. }}}

Thanks for the colours link... I think that'll help. My wife had told me the same thing you did about the white being too garish...I just hadn't found an off white colour to replace it with yet. I'll review my use of tables and see what I can take out.

Which dark blue are you refering to. In the logo or the color of the links? I'd like to make it as readable and unobtrusive as possible...so every little bit helps...

Thanks much for the pointers,

clv


[This message has been edited by clevergeek (edited 02-15-2002).]

[This message has been edited by clevergeek (edited 02-16-2002).]

clevergeek: Some quick replies:

1. CSS-only layout - I thought that might be the reason. My advice (esp. to people just getting to grips with CSS-only layout) is to have your page as a table and keep a separate page for testing to get things right. For centring try just setting the margins of the main box to a smallish percentage or look at this:
http://bluerobot.com/web/css/center1.html

which one you go with is your call (and it depends on the design).

2. k&d metatags - no not all search engines use them but enough of them do to make it worth your while putting them in.

3. Colours - if you want us to throw in ideas for colours let us know (e.g. a better red might be crimson #f00000). I was referring to the colours of the links - there is a trade of between unobtrusiveness and noticeability (not the word I was looking for I think) and you are doing well it just needs a few tweaks - how about a red box around the link and a stronger hover change.

Hope that helps,

Emps