project workflow / CSS

I was wondering if anyone has any great tips for tackling modx/CSS projects. As opposed to Flash sites, i find CSS rather bothersome, as comprehensive WYSIWYG editing is lacking and getting it to work as intended in all browsers is often very tedious. The way I work is as follows:

1. make a raw sketch of a page and determine the main div blocks;
2. make the div structure using dreamweaver (or notepad), add some dummy content, menu items, markup
3. work out a page design in Illustrator or alike;
4. cut it into pieces using save for web;
5. style the css in dreamweaver;
6. replace dummy content with chunks, snippets, etc., making a template in modx;
7. add some content in modx;

Then the frustrating testing cycle:
8. test in various browsers;
9. copy the complete page source code from the browser to dreamweaver;
10. edit the css styling in dreamweaver where needed;
11. edit snippets/chunks;
12. copy the css part from dreamweaver back into the modx template;
13. test again; ...and again...and again...

As you can see I use dreamweaver to edit the css styling in wysiwyg mode. Although it is not an exact representation of the rendering in various browsers, it is faster (for me) than editing the modx template directly, as I often cannot predict the outcome of a styling change.

How do you work? Any tips or tricks?

Quote from: modxxx at Sep 17, 2007, 04:14 PM

As you can see I use dreamweaver to edit the css styling in wysiwyg mode. Although it is not an exact representation of the rendering in various browsers, it is faster (for me) than editing the modx template directly, as I often cannot predict the outcome of a styling change.

IMHO, as long as you are a slave to the WYSIWYG CSS editor, you will never find working with CSS either efficient or effective. To make the best use of CSS, you really need to master it, and unfortunately, learn the major rendering inconsistencies between the browsers you are targeting. There are lots of great CSS resources on the web, and many are mentioned here in our forums.

One specific tip, if you have all of your CSS in a separate file (as you should if you are aiming to design standards-compliant, accessible templates that properly separate content from presentation logic and style), you will find it very easy to test changes simply by editing the CSS and reloading the page.

I’ll let more designer-oriented folks discuss more about how they come up with a template from a graphic design, but the Save to Web technique is rarely effective in my experience for designing standards-based templates. I still use the splice tool in various image editing applications, but with a focus on cutting the layers out so I can apply them as CSS backgrounds, and not embedded into the markup, which would effectively mix the content and presentation. I’m sure there are many more emerging tools and approaches to going from graphic design to markup and CSS.

Play with CSS, it is the future of web, don’t bother yourself with particular method of styling cause they all have got their limitations as we humans!.
I’m using Dreamweaver as of my fast css approach to do some minor changes in the CSS files, why don’t you try free and ready to use standard layouts?, i almost selcet one and krack my fingers and start to imagine what i can accomplish... am sure someday you’ll do it in your way of styling when you get familar enogh with css standards of styling that is basically comes from raw sketch of a page!

Quote from: OpenGeek at Sep 17, 2007, 05:01 PM

IMHO, as long as you are a slave to the WYSIWYG CSS editor, you will never find working with CSS either efficient or effective. To make the best use of CSS, you really need to master it, and unfortunately, learn the major rendering inconsistencies between the browsers you are targeting. There are lots of great CSS resources on the web, and many are mentioned here in our forums.

I guess i will have to live with that for the time being. IMO, CSS is an attempt to logically describe visualisation which forces designers to use stacked boxes and square layouts. It is the structuring of information enforced upon the presentation. And then there’s the rendering inconsistencies. :’( It just takes a lot of time to get a design right in the mainstream browsers.

Quote from: OpenGeek at Sep 17, 2007, 05:01 PM

I still use the splice tool in various image editing applications, but with a focus on cutting the layers out so I can apply them as CSS backgrounds, and not embedded into the markup, which would effectively mix the content and presentation. I’m sure there are many more emerging tools and approaches to going from graphic design to markup and CSS.

That is what I meant using the save for web option, I only use it for splicing the design into seperate images, and then use them as backgrounds for the various div’s.
Actually, that would illustrate my frustrations with CSS. Suppose a client wants to change the nicely rendered horizontal menu tabs on top, to vertical tabs on the left side. This would mean:
- changing the div structure
- redesigning the page in illustrator
- splicing the images
- changing the css styling
- testing for various browsers
For me, that’s a nightmare, consuming half a day’s work. It probably has to do with the fact that I am a proficient Flash developer, being used to doing changes like this within 30 minutes, not needing cross-browser testing.

If you used absolute positioning for the menu and other elements of your design when you originally coded it, you wouldn’t need to change the (X)HTML (div structure) if the menus were moved and redesigned, just the CSS.

Both floats and Absolutely positioned divs can be used and you can change float left to right and swap around the design. But there are times when absolutely positioned divs can be the best answer, depending on the layout you strive for.

If you ever have a design that really calls for absolutely positions divs, yet you still near the footer to clear, it would do no harm to visit and take a look at http://www.projectseven.com/tutorials/their javascript for archiving a graceful alternative to "Faux Columns". The tutuorials and much of the software is free.