Critweeks On Site Layout And Design(color, Shapes, Buttons, Etc)

[daring_du]

Hi,adopt-a-patient.110mb.comConstructive critique-isms please. I'm not too good at color coding so if there are any suggestions for making the color nicer let me know.Almost any other comments welcome, too. I'm still doing a fair bit of tweaking as well. I want to put a hit counter on there and then eventually use some PHP (or something like that) to put a clock on the site that always shows the current time in Kenya;probably something like adding 8 hours to whatever the time is at 110mb (assuming 110mb is in America). Is that possible?I've also got a lot of tweaking plans for the design and some javascript and more css stuff but for now I'd like to get some feedback on what's already there.Thanks.

[jeffman]

I haven't looked at the code. I write purely from a visual perspective.Generally, it's catchy and looks good.The background is maybe overwhelming. I rarely see such extensive use of background patterns these days. It's a 1990s concept. Experienced designers are more likely to use a simple, light color, or a very muted texture.The graphics are very jaggy, especially the welcome graphic. That's just a matter of learning your PhotoShop tools a little better. Since it's all on a white background, I don't think you need to save your files as .png format, but you can still anti-alias against a white background and include some of that white as part of the image.No one likes blinking text. Also very 1990s.I don't think this looks the way you want it:You'll need your inner techno-geek to fix that, I'm afraid.

[thescientist]

I would agree with DD and yourself on the coloring. Seems bubbly and 90's, if that makes sense. Too many clashing colors, see if you can find a theme, with two or three strong colors, with maybe a couple of softer colors to balance things out.

[daring_du]

Hi dd and scientist,Yeah I think I agree with you about the background so I'll probably end up changing that at some point today. I'm not sure if the jagginess you are talking about, re the graphics is because I saved them as PNG8 (in fireworks). At first I was trying to make the site compatible with explorer and I received some advice that PNG8 images are a good way to deal with that. I think that is at least part of the reason why it's a bit jaggy, cause when I view the image against a white background in fireworks a lot of that jagginess isn't there, though I still see some of it.I do have the anti-alias option selected as well. Uggggghhhh ok so I did some searching for anti aliasing but I've not yet found a tutorial that is helpful to me; just pages saying what the antialiasing options for fireworks are in general. I did go to those options and tried hard, crisp, sharp, which does not seem to produce any noticible difference between the three options. I didn't get enough sleep because of snoring roomates last night and an early morning today so I'm feeling bugged now; I only had an apple for breakfast, too...I'm not all that satisfied with the color scheme either, but I'm so horrible with colors. Perhaps I'll try a "less is more" theme or something, though then I start to feel like maybe it's too boring. Anyway, I guess we all struggle with our demons, eh?I'll probably just ignore the graphics issue for now and try to come back to it again some other time. There is still a lot of content I need to put onto the site that I need to concentrate on, too.I don't see what's so wrong with the 90's; like it's some kind of offense to do something that was common in the 90's. Anyway, I'll get rid of the blinking update sign, though, in my own defense, I did use it in what I felt like was a proper context (updates are important, you know!). It was kinda fun to play around with text decoration, though.Hmmm, I opened the site in firefox and I don't see the same problem in the screen shot you posted. What browser did you use?

[jeffman]

Firefox on my Mac. Normally Firefox is pretty consistent between platforms, but it's always worth checking.Nothing wrong per se with 1990's styling. It's a lot like clothes fashions, only the changes happen faster, especially as technology changes. Only one thing I'm dead certain about, and that is blinking text (which I see you have changed).

[thescientist]

take some time to play around this site, it was a big help with the last project I worked on.http://kuler.adobe.com/

[daring_du]

ugggg so would I need to make like, three separate style sheets; 1 for firefox, another for IE, and another for macs? That sounds hard.Ok ok ok, so the blinking text was a bad idea but then again so was IE6 and you don't see anyone making a big deal about that, do ya? I also changed the background and took off the sunset looking image from the corner, although the same basic color theme still applies. What do you think now, huh (pokes you all hard in the chest)?BTW, should I remove those green 1px border lines? I can't really discern if the page would look better without.That green box on the right uses a complex collection of divs to make it look like it's a picture frame type thing, and each top, right, bottom, and left 1px div has to be changed if I want to change the color of the whole rounded rectangle. It's a pain, but I really like the effect. Scientist, I didn't get the kular thing. There doesn't seem to be much explanation about what I'm supposed to do there and I'm a bit rushed for time right now. I'll trying have a look at it again tomorrow when I've got a bit more play time.

[thescientist]

ugggg so would I need to make like, three separate style sheets; 1 for firefox, another for IE, and another for macs? That sounds hard.Ok ok ok, so the blinking text was a bad idea but then again so was IE6 and you don't see anyone making a big deal about that, do ya? I also changed the background and took off the sunset looking image from the corner, although the same basic color theme still applies. What do you think now, huh (pokes you all hard in the chest)?That green box on the right uses a complex collection of divs to make it look like it's a picture frame type thing, and each top, right, bottom, and left 1px div has to be changed if I want to change the color of the whole rounded rectangle. It's a pain, but I really like the effect. Scientist, I didn't get the kular thing. There doesn't seem to be much explanation about what I'm supposed to do there and I'm a bit rushed for time right now. I'll trying have a look at it again tomorrow when I've got a bit more play time.

1) well, adopting a strict DTD and validating your site would probably eliminate 99% of the inconsistencies between browsers, as is evidenced currently.2) wait, you know people who like IE6? Today or back in 2000? New background looks nice. 3) yikes, that seems pretty complicated indeed! check out his site for options using lists or simpler div container methods for creating a similar effect. this link in particular has photo gallery examples which could be tailored to your site so you have much less markup and a little more semanticism (is that even a real word, haha?)http://www.cssplay.co.uk/menu/. With good CSS implementation, you should only have to change the color in one place to effect multiple, similar elements.4) the kuler sites lets you browse through color schemes created by other people, or lets you create your own. they have a color wheel that you can manipulate based on certain color principles/conditions so that you can maintain color integrity as it pertains grouping colors on different ends of the spectrum. Some colors work better with others and for certain reasons. this will help you see what they are and give you some insight as to how to make your own schemes.

[daring_du]

1) well, adopting a strict DTD and validating your site would probably eliminate 99% of the inconsistencies between browsers, as is evidenced currently.2) wait, you know people who like IE6? Today or back in 2000? New background looks nice. 3) yikes, that seems pretty complicated indeed! check out his site for options using lists or simpler div container methods for creating a similar effect. this link in particular has photo gallery examples which could be tailored to your site so you have much less markup and a little more semanticism (is that even a real word, haha?)http://www.cssplay.co.uk/menu/. With good CSS implementation, you should only have to change the color in one place to effect multiple, similar elements.4) the kuler sites lets you browse through color schemes created by other people, or lets you create your own. they have a color wheel that you can manipulate based on certain color principles/conditions so that you can maintain color integrity as it pertains grouping colors on different ends of the spectrum. Some colors work better with others and for certain reasons. this will help you see what they are and give you some insight as to how to make your own schemes.

Hi scientist,Strict dtd? Are you flirting with me? Anyway, I'll have a look at what kind of difference it can make. I still don't know how the heck fire I'm supposed to check support syztems like mac firefox when I ain't got no mac. Even if I try different DOCTYPES how should I test them on browsers that I ain't got?Haha I remember back in like, what was it, 2004 that IE6 was being touted as the next great thong. I suppose hindsight really is better....but to answer your question, NO. I really don't know anyone who likes IE. In fact, I've heard it referred to as a sack of hammered buttholes before, which, despite it's extremely crude implication, I can't seem to deny. If you see Bill, please tell him I'm extremely disappointed and I ain't even a computer nerd. :)Thanks for your link to cssplay. I 've seen that reference before at perishablepress.com. Jeff star, really swell guy; I really like his site. But gosh, I'm such a dummy head I really find it hard to understand so much of this. I guess I'll just have to make time for it all. I'm supposed to be learning javascript, but recently I've found myself far more involved in css because I'm trying to get this website up for a friend. I'm doing this work for him for free because I'm still just learning and cause I kind of like people like him involved in voluteer stuff, even though I don't really understand it myself. anyway...I especially liked the lego house design. I seriously spent about 5 minutes just mousing on and off the design cause it looked so cool. Thanks for the link.oh wait...I'm updating this post as I read...I just found a page on the cssplay where I got the disign for my buttons. http://www.positioniseverything.net/articl...r_2_9_home.html. The site is entitled "cleva treva" so it makes it sound like this trevor person is the architect of this design but now I'm wondering. I dunno if there is supposed to be some official representation about this design, but I used it without posting any thanks, although I feel a bit guilty about that and I'm willing to post thanks to whomever credit is due. I've received permission from the website owner to post any links to web design which I think are necessary though I've only done that for w3schools so far, but maybe I should so something about these button designs since I like them so much; who do I give credit to? (btw, I'm looking at the "border art" section of cssplay for these refs).update: My viewing of a css bar chart regarding browser usage found here...css play browser usage response" GOD DAMMIT! IE again?"guess I'll go now.

[thescientist]

The strict DTD is meant to release you from worrying about all the inconsistencies. Pages in non-strict DTD sites often are more lax in their rendering and interpretation of page elements. If a browser is standards compliant, which almost all modern browsers are by now, coding to a strict DTD gets you on a more even footing with them. In all fairness, IE8 seems to have finally got with the program, for the most part. Also, people would be surprised how much CSS can do when they think they have to use Javascript; ie hover effects, rollovers, image galleries, using lists do to cool things, etc.

[jeffman]

I develop on the Mac and then correct for Windows. What that really means is, I correct for IE. I rarely need to make adjustments for Firefox, Safari, Opera, as the implementations are remarkably consistent across platforms. You still need to check, but it's not the same emergency as the IE/everybody-else difference is.And yes, IE6 is a royal PITA. I've plain and simple stopped worrying about mysterious spaces or whether .png files display transparency correctly. As long as the design is not FUBAR, and as long as the JavaScript works correctly, I'm good. Fortunately, the major headaches are well documented, and as thescientist says, a strict DTD clears up a lot of things.