just starting out

Quote from: kickass at Apr 04, 2006, 12:44 AM

Something you should keep in mind before ever using ANY CSS Zen Garden code. It is, for the most part, a mess.

Couldn’t agree more, it’s easy to see the influence of css apps like macrabbit css edit and style monster with a blend of inexperience and no understanding of browser compatibility issues.

Hand code - it’s the only way to fly

it’s easy to see the influence of css apps like macrabbit css edit and style monster with a blend of inexperience and no understanding of browser compatibility issues.

That’s not entirely true, since folks like Claire from Tanfa.co.uk have had designs accepted there. It’s trying to absolutely STRETCH that envelope out to the max with the css while leaving the html the same that causes the mutant css that NOBODY who regularly designs production sites for a living would ever use. I do admit though that I haven’t looked at source code there in awhile so I don’t know if what you say is the case today. I do know that almost all of the technique there is not production technique, it is purely css zen garden technique.

I’m imagining drawing what I want on paper, then in photoshop, then slicing it up and doing the actual CSS last.

I think if you do that you are bigtime limiting yourself. I’ll tell you why. Print designers are always dealing with a static grid. They know the exact dimensions of whatever layout it is they’re working toward, and they know that the dimensions won’t change. We webdesigners do not have that luxury. The person who looks at the page you design may be on a 14" monitor at a resolution of 800 x 600 or may be on a top of the line huge screen at 1280 or greater. Your viewer may not need to do a damn thing to your design to view it OR they may need to bump the text size up to 200%. The web is a liquid medium. We must treat it that way when we create. Only by doing so will you create something beautiful for ALL viewers, instead of just for those with the same text size as yours set in their browser and with the same screen size and resolution as you. When your designs flex with the screen and viewer settings you’ve mastered the art of css design.

Oh, and I usually start by writing the stylesheet from beginning to end. I do have to amend it but the MAJOR structure and the most important elements are completely mapped out in the css before I ever even start to write the html. But that’s just me.

I’m becoming fond of using ems instead of pixels or even percentages, and I’ve always liked the sliding doors technique of allowing for expandable graphics.

Some designs, of course, like Scotty’s Pager design, are interesting enough to use pixel-perfect sizing. I especially appreciate the GIMP file for that template!

I only wish I had more of a talent for originality myself. I know what I like when I see it, and can usually come up with several different ways of imitating it, but I just can’t seem to imagine it before seeing it. I do hope that is something that I can learn.

Quote from: kickass at Apr 04, 2006, 03:18 AM

That’s not entirely true, since folks like Claire from Tanfa.co.uk have had designs accepted there.

I should have probably worded it better, while I’ve never heard of claire from tanfa - I wasn’t implying that ’everyone’ used style master


Quote from: kickass at Apr 04, 2006, 03:18 AM

I do have to amend it but the MAJOR structure and the most important elements are completely mapped out in the css before I ever even start to write the html. But that’s just me.

That’s interesting, I do the css layout first, mark it up, then populate it with content, then style the various elements building on the layout first, I’ll start with the nav’s first ending with the text, misc links and headers ... our designer provides all the font details and colors, so I do the easiest parts last

That must be the same "everyone" my kids always referred to when they wanted something

The CSS Zen Garden site even states that it’s for graphics artists only. It’s intended to demonstrate what can be done with CSS, not to be templates to use in the "real world". And it certainly does accomplish its intended mission beautifully. An excellent source for inspiration.

If you are really looking for templates that are extremely flexible and have more practical CSS, here are a couple of links:

http://webhost.bridgew.edu/etribou/layouts/
http://www.alistapart.com/articles/holygrail

Quote from: sottwell at Apr 04, 2006, 05:40 AM

That must be the same "everyone" my kids always referred to when they wanted something

... because they could

Not at all. I always prevailed...because I can!

Quote from: sottwell at Apr 04, 2006, 08:05 AM

Not at all. I always prevailed...because I can!

and good for you! ... one needs only to endure, to conquer

Quote from: sottwell at Apr 04, 2006, 08:05 AM

Not at all. I always prevailed...because I can!

Because I am the parent

Seriously thanks for all the help, this is a brave new world for me. Back in the day I did websites the hard way, coding uphill with tables and cgi. I’ve been out of the game for a while and I’m retraining my brain to think in CSS.

The one thing I see that I’m trying to break out of is the two/three column layout. I haven’t yet come up with my dream layout, but I want it dynamic, visually appealing and most of all usable. While I appreciate the design of CSS Zen Garden, most of those layouts are just not easy to read or use. I have to design a site that my grandmother will be able to use (she *has* to be able to see pictures of her great-granddaughter) without having to call me and ask for help.

There are several very nice templates that have been modified for MODx that would be suitable for something like that, and a couple of simple gallery snippets that would suit even your grandmother (who probably isn’t all that much older than I am!)

I used ScottyDelicious’ mini gallery with lightbox to make up a portable art book for my partner, and it turned out very nice. He’s very happy with it.