CSS-driven, tableless layouts in Agile Platform

CSS-driven, tableless layouts in Agile Platform


Can anyone advise on the current best practices for the development of tableless layouts in Agile Platform? My initial impressions are that the previewing of my designs within Agile Platform's WYSIWYG editor are inaccurate when CSS is used, particularly for positioning. Is it possible to do design work in a different editor (or plain-text) and then import them?

I can't tell you that this is the best practice, but it is how I did it...

First, you should design the entire layout in your favorite design tool. But keep in mind that the generated HTML should be minimal and the huge chunk of your design should reside in the CSS file. After you got all the classes you will need, copy those to the internal StyleSheet of the ServiceStudio. The WYSIWYG editor won't apply all the styles as it should, but well, I had to learn to live with that...

As a second tip, I recommend you use the developer tools from Chrome or Safari (it is the same...) that allows you to make changes to the stylesheet with the page already rendered. This way, you can make those small tweaks without the need to republish or debug the application just to check if 1 more pixel is enough!

In resume, you should make your base CSS in some editor, then copy those classes to the internal stylesheet, design the layout in the WYSIWYG editor but keep in mind that you will get more than what you see, make your adjustments with developer tools, tweak your CSS and repeat... =)

Best regards,
Pedro Magalhães 
Thanks for the insight, Pedro.

I like how your process sounds. I'll try it.

Also IE has developer tools (press F12) where you can tweak (some) CSS
FireFox has several Add-Ons