Another Question: Easiest way to convert from tables to CSS?
Category Technical
Bookmark :
I have a client that has hired a design/marketing firm to come up with a look and layout for their corporate intranet/extranet site. This firm has delivered HTML files, images, JS, etc. as an "example" of the site. However, these people did it all in a crapload of nested tables instead of CSS.
My question is: Is there any methodology or tool that can ease the pain of slogging through all these tables manually and converting them to proper CSS? I have pages and pages to do, and if there is an easier way I really hope to find it.
I also thought that asking this would help others who find themselves in similar dire circumstances.
Thanks in advance for your suggestions!
Rock (from the Web)









Blog Roll










Comments
are you for real...? did you really mean that?
Posted by Glenn Nall At 10:35:23 AM On 09/17/2006 | - Website - |
Posted by Stan Rogers At 02:11:28 PM On 07/08/2004 | - Website - |
Depending on how many layers the tables are nested, it can be a real drain on performance. However, a middle ground I have also used in the past is to apply CSS Tags to my Tables instead of replacing them (and yes you get code bloat) Rocky, I will email you a sample of what I mean tonite if I can dig it out).
But absolutely you are right. If there is no overwheming reason to do it, it might not be worth it.
However, you till have to play with the Tables in Domino (unless you are using the raw HTML) to get the same end result. So if you have to take extra time and effort, it may well be worth looking at.
There are serious tradeoffs to CSS as you say, but once you have it nailed, maintaining is much easier.
In one app, I have to maintain different subforms and stylesheets to accomodate NS4 users (I cannot force them to change). I do not subscribe to the theory that unless you use my browser of choice, you cannot use the site.
Posted by Christopher Byrne At 01:23:07 PM On 07/08/2004 | - Website - |
http://more.ericmeyeroncss.com/about-book.html
The description says, that the book is also about transitioning from tables to style sheet layouts.
I haven't read the book yet (just ordered it), so I can't say whether it could help you or not.
Perhaps you'll give it a try.
Posted by Thomas Voelk At 05:16:54 AM On 07/11/2004 | - Website - |
Apart from that, take some time to figure out what does and doesn't belong in tables. Despite the protestations of some, the fieldname/field pair can be legitimately tagged as tabular data.
The "real" method is to group all of the logical sections of the page into divs (logical divisions). These can nest, of course. Once the page has been divided into "pools" of information, then and only then would one worry about what things look like and where they should appear on the page. (BTW, even the worst of the graphics-come-first designers are usually pretty good at logical arrangement of data, so you can usually pull a design apart into its component bits fairly easily.)
Posted by Stan Rogers At 01:18:18 PM On 07/08/2004 | - Website - |
Posted by Scott Kingery At 07:02:19 PM On 07/08/2004 | - Website - |
Rock, you have mail.
Posted by Christopher Byrne At 02:18:05 PM On 07/08/2004 | - Website - |
possibilityprobability the the placement of "pools" of design/information will need to be changed - things moved, appearance changed, etc. Tables are quick and dirty and get the job done if the site has a minimal probability of changing; however this is not the case here. In this case we have a very complex site that is going to be maintained by one to two in-house developers after I leave. When (not "if", "WHEN") changes come down for the layout I want them to be able to go into the CSS and simply tweak it there to make it look the way they want; otherwise they will need to do heavy-duty editing of the passthru HTML to change anything about this site (and we're talking tables nested 6 or more layers deep).Chris - Excellent suggestion on the naming of the DIVs. I was wondering how I was going to keep it all straight, and I think your idea is the way to go.
As for the subcontractor, that may be a possibility. Don't get your hopes up, but I'll see...
And yes, I got the pics - not quite dressing like the natives yet, though
Stan - I agree with you about the "right" place to use tables. In fact, the user-completed forms in this site will most likely be straight-up Notes forms, with tables, and styles assigned to the tables. I mean, forms rarely change (other than "move this field up, change this label"), and it allows me to use native Notes/Domino design elements. As for the use of CSS for the rest of the site, do you agree that, based on the description I gave Ben, the conversion is worth the effort?
Thanks for your responses so far; I am looking forward to where this goes...
Rock
Posted by Rock At 01:33:49 PM On 07/08/2004 | - Website - |
I look forward to your example - thanks.
Rock
Posted by Rock At 01:36:31 PM On 07/08/2004 | - Website - |
Posted by Ben Langhinrichs At 01:15:31 PM On 07/08/2004 | - Website - |
too bad you can't convince them to change to firefox.
Posted by jonvon At 09:58:48 AM On 07/13/2004 | - Website - |
Unforunately designers do not always thing about performance. UGA redesigned their web site (http://www.uga.edu/) and do not even think about trying it over dialup. Sure it looks good, but performance wise? Yuck. (Off topic tidbit here since you are a dawg: At one point they had removed the link to the Atheltic Department from the site home page and nobody noticed it until I mentioned it to Claude Felton (the SID) at a football game. Thankfully, it reapperared shortly thereafter).
IBM Interactive was famous for their beautifully designed web sites for the US Open, the Masters, Macy's, etc. But performance wise they could never deliver.
So onward we go as this is all water under the bridge at this point.
My first suggestion is do what you recently did an article on: low-fidelity presentations. For each template, rip out all of the contents from the tables AND other tags and just leave the tags. Then map out the format (perhaps simply by printing the edited HTML). Then make an equivalent low fidelity model using DIV, SPAN, or whatever.
You could also take another approach and do an Edit replace, such as
replace
<TABLE>
<TR>
<TD>
<TD>
</TR>
</TABLE>
<TR></TR>
with
<DIV CLASS="TABLENAME">
<DIV CLASS="TABLENAMETR">
<DIV CLASS="TABLENAMETD">
</DIV>
</DIV>
</DIV>
Note my syntax for TABLENAMETR and TABLENAMETD. I do this to keep the association clear in my mind and so I can assign specifi properties to these classes.
This task is easier if they have assigned names to the Tables.
Once you do this, it becomes easier to play with the stylesheets. "Borrow" some sheets from sites that look similar in design or even from Blosgshere.
This is similar to how I made changes to my copy of the Blogsphere template and the associated style sheet. Get a copy of Dreamweaver, open the pages there, make the changes there, and then move the code to Domino (will make your life MUCH easier).
Note one nasty thing I discovered about IE vs Firefox & Netscape in the setting of styles for my blog (http://www.controlscaddy.com/) that I need to fix tonite:
Firefox and Netscape automatically resize my background images in the right hand column to the column width I had specified. IE does not.
Also, be careful in your use of the <SPAN></SPAN> Tag. It does not always behave as expected.
Of course, here is the commercial. If you need a subcontractor for this effort, I have time
Did you ever see that picture of you in Bermuda that I sent you?
Posted by Christopher Byrne At 01:15:53 PM On 07/08/2004 | - Website - |