check out this page. It’s my prospective home page design, hand coded with css (my first try at css design).
what do you think of my design? I call it “nature/dark”. I’m going to convert it to a mambo cms template next. That’ll take even more time than making it with css :x after that, the actual content.
any suggestions on how to improve this?
what does everyone think of css design? are tables going out the door?
I like this.
It doesn’t look busy to me.
It has a simple user interface for navigation.
The heading is clear and also interesting to the eye with the wave-like effect on the bottom.
It all seems well-executed.
It does seem to have a MASSIVE left margin though due to the centering which gives you less area to play with in the center. I’m guessing this is so that the web page is more accessible on smaller screen size/resolutions.
Good stuff.
Caleb
dude, this page sux, I don’t see any use of css there scept for the scrollbar, the composition of the site is boring, the logo is laso boring, the typo sux as well
How isn’t there use of css?
The whole structure is quite obviously css-based.
And this is why he is asking about the comparison between tables and css in layout because he is obviously using CSS instead of tables for his layout.
Anyway - back to the critique.
There is an alignment issue in Mozilla for this page on the rightmost edge. If you happen to have a Mozilla browser handy, check it out.
Caleb
visor: are you kidding? the page is great! and BTW, he is using CSS… open hte site, and in your browser, go to View->Source (or page source, view source, etc…)
Notice how he included a stylesheet…
Anyways, I just switched to using Firefox, and he’s right, there is a small alignment issue (only a couple pixels, for me). It seems there’s also one at the bottom left, but that may or may not have been intentional.
I like it though! you should finish it!
yes, I have been told of the alignment issue, I’ll check that out.
visor: perhaps you could point me in the right direction, how can I improve my composition/logo/fonts? Perhaps you would be willing to share some of your own work to serve as examples of “good” design.
superx10: great page? http://dabrowskidesign.tk http://2advanced.com http://pietrina.pl this are great pages
First of visor unless your going to be constructive dont ever post here. Second those pages were made by professionals and arent even that good since they take forever to download even on my ADSL. Jack obviously isn’t a professional but he’s done a danm good job at it; its clean, its easy to navigate, fast loading, gets to the point right away.
My thoughts exacly.
Jack keep up the work and it will be great. I respect that you are doing this on your own. I cheat and use php-nuke http://www.blendercg.com
Jack000,
I took a look at your style sheet.
At the time I downloaded your stylesheet, your header div was 760px. Underneath the header, your rightcol div was 129px, and your maincol div was 632px, and you had a 1px border. So together they equaled a width of 732px, which was wider than your header by 2 pixels. That is what’s causing your alignment issue. Set your maincol width to 630px and it should go away.
I would like to comment on the pages discussed by visor:
It looks great, but consider the size of the thing. As far as I can tell (without looking at the numerous frames in more detail) the entire site is just a big image map with rollovers. Today many people still use 56k modems and one must consider an efficient size to look ratio. My site is only 30k.
he uses horizontal scrolling, bad idea as most sites have vertical scrolling structure. users are disoriented when they are forced to scroll horizontally.
I’m very impressed with his 3d artwork, but in terms of navigation and layout, he’s design is by no means “great design”.
I am considering to submit this site to http://www.webpagesthatsuck.com
wow, really nice. The swirling graphics really sets the mood for the site, which is great for a web site offering graphics services. However, it uses massive amounts of flash, not site breaking but generally a bad idea, as discussed on http://www.webpagesthatsuck.com
the splash page says:
quote:
requirements
1024x768 resolution
flash mx plugin
broadband connection
one should never dictate to the user the requirements of the site. It’s far easier for him to simply click away to another page than to buy a new monitor, download the latest flash plugins, and buy a bigger connection.
again, this not site breaking as it’s a graphics site and can expect patrons to have reasonably good hardware/software.
the design itself: it looks good at first sight. But look at it from a design point of view, where is the white space? There is not a single 10x10 px area without content of some sort, making it extremely busy. Good design consists of subtle and artistic balance of content (graphics, text) and white space. Trying to fill the entire page with content is a beginner mistake (as you can see on my first page, www.freepgs.com/kendo/, and is very out of character for such a big graphics site. Take the example of google, it uses about 70% white space and a small graphic at the top. This is inspired design.
The large central graphic creates very good visual focus, but this causes the homepage to be 566k, 113 seconds download time on 56k connections.
I like this one better than the first, but not worth of the title “great design”
I will also consider submitting this site to http://www.webpagesthatsuck.com
this is perhaps the worst of the three, primarily because no one can get to it! 
the moral: fancy graphics and animations does not = “great page”
just my 2 cents, and please do not take these comments as personal offence, just some objective observations.
ec2: thank you for the fix, I’ll definitely try that when I get some more computer time.
Wow Jack000 thats a nice site.
Cant wait till its finished.
Oh and visor talk like that wont get you any respect on this forum. You sound like a real jerk and you should never put someones work down like that.
No problem,
You’re off to a good start, CSS is very powerful and it takes time to get used to just like anything else worth learning.
In that spirit, here are a couple of resources.
WC3’s Cascading Style Sheets
http://www.w3.org/Style/CSS/
HTML Dog’s HTML & CSS Guides
http://www.htmldog.com/guides/
Westciv’s Hands on CSS Tutorial
http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html
Quirks Mode
http://www.quirksmode.org/
Quirks Mode - Centering a site
http://www.quirksmode.org/css/centering.html
well, I wouldn’t mind if could simply point out why my page “sux”. Then at least I’d be able to learn from this and somehow fix it, but just saying this sux and that sux doesn’t give me many clues.
crits are fine, better than praise because it gives you something of value. (“your image is jagged because you forgot to push the osa button” is often better than “I love that jagged style!” ). You learn from it and see your mistakes.
so here’s a challenge to visor:
the logo and fonts are easy to improve, but the key is the layout.
rearange any graphic element (text and images) on my page to form a better layout - feel free to modify the sizes of the right and main divs -, and perhaps I may benefit from your greater skill and experience as a web designer.
certain bugs I already know and know how to fix:
non-validating, w3c compliant html due to the lack of a doctype element and language tag
the alignment issue in mozilla
absolute positioning, causing the page to not center in screens smaller than 1024x768
reply in this forum if you want to have a try
Hi! Great design for the site, I’m also a web developer.
Here’s a site I think that’s pretty good:
And our own user broken has a good site too:
Your design has an optimal blend between a nice clean layout and size. Good work!
Download yourself a copy of Firefox so you can test out compatibility. What I usually do is have both IE and Firefox open while I’m coding a site.
I’ve found that I really like Firefox more than IE, and I used to be a Microsoft lover (believe it or not, I did back in my dumb-days).
Keep working on it and it will be great!
One More Link
CSS Zen Garden
http://www.csszengarden.com/
“A demonstration of what can be accomplished visually through CSS-based design.”
to Jack:
Very nice page. NO FLASH! I HATE flash… except for games. they make pages take too long to load (I have DSL, i don’t like waiting, even a couple seconds if i don’t have to), get in the way of what I want to do (Get information, dammit, not drool over purty anim’ns), and nag me for plugin updates, etc…
Your page loads on my DSL connection in about 1 sec or less. perfect. easy to navigate and find what I’m looking for. Perfect! 
to Visor:
only the second link you posted worked. I got bored after about 5 sec of waiting for the 1st one to load so closed the window. The second one is too busy, with too much crap floating around in it. too much flash!
to Jack (again):
why are you asking for webdesign comments in a blender WIP forum… where people usually post blender WIP’s rather than webdesign wips?
[edit]
BTW, there are minor alignment issues with Konqueror. If I was up to date on CSS and all, I’d try to help, but the last time i did webdesign work was with SimpleText, in 1997 or 1998… roughly… 
It’s kind of strange that so little people go to webdesign forums. I posted it on a popular (well, google says…) web design forum, and got very few posts compared to elysiun. Artists here are usually well versed with many forms of graphic design, and I thought I might try posting here as well.
mr_rob: great sites! and I am currently downloading all popular browsers to test my page.
zengarden’s a great site as well. It shows up first whe you search for “css design” on google
it turns out that the alignment issue is actually an IE bug. The solution suggested at webdesignforums.com is to make it proper validating code and include a doctype element. (tired… fix it all tomorrow)
I tend to agree that the sites posted by visor really bit the big one.
The first one with its horizontal scrolling was death in digital.
I can’t remember ever seeing such a ghastly concept on a website before - yuck!
The second one was very “flashy” but the flash animation seemed to be taking up most of the screen. It’s like you have to look at the fine print to determine what the website is even about.
The third one wouldn’t load so I guess I have to put that at the bottom of the shit list.
Sounds like visor’s the kind of person that likes setting firecrackers off at home. Lots of noise but nothing useful ever happens and you’re left with an annoying stink afterwards.
I think you should go ahead with this design Jack. It looks neat and tidy and like you might be able to find the content without getting motion sickness.
Caleb
Jack,
at risk of simply repeating what has already been said, i think your site design is coming along very nicely. i wish I had any talent for web page design. i guess i will have to try when i finally have a few blender works that are worthy of being shown to the world. your critiques of the sites posted by visor are right on - it’s funny that he posted those as example of good sites, when the two that you could actually get to had major issues (horizontal scrolling and flash) and the third wouldn’t even come up. anyway, kep up the good work!
Shiro