Page 1 of 2
cnn.com goes standard compliant
Posted: Sat Jun 30, 2007 8:16 pm
by Benjamin
Looks like cnn.com decided to get rid of the old tables..
Not sure if it validates, but I don't really care. It renders a LOT faster now.
Posted: Sat Jun 30, 2007 9:57 pm
by Charles256
ack! I hate the new layout..All my stuff moved..

Oh well, least it does render much faster.
Posted: Sat Jun 30, 2007 11:09 pm
by AKA Panama Jack
Really, the new layout is horrible and very cluttered. Even though it is cluttered they removed many areas that I would click on like Law.
Plus they totally screwed up their video links. They no longer open a new window but load on the same page. Damned annoying.
Oh, and it is not valid HTML either.

There are many errors.
And you do not have to get rid of tables to be standards compliant.

I want to smack people upside the head when they say using tables isn't standards compliant.

Posted: Sat Jun 30, 2007 11:31 pm
by Benjamin
I said that in the sense that tables are not supposed to be used for layout, only for data. I'm sure you know that tables were never designed for that task.
Posted: Sun Jul 01, 2007 12:53 am
by AKA Panama Jack
astions wrote:I said that in the sense that tables are not supposed to be used for layout, only for data. I'm sure you know that tables were never designed for that task.
Actually they were. Initially DIV tags didn't have positional attributes other than alignment until they were added with later versions of CSS. Until CSS expanded upon layout capabilities the only way to create a formatted layout was to use tables. DIV tags were never initially designed to create layouts. If you tried to design a site with a formatted layout using HTML 3.2 and CSS1 you would find you had to use tables because DIV tags couldn't do it. Netscape added the LAYER tag that would allow layout formatting but you had to have a netscape 4+ compatible browser to use them.
Tables were the only way to go for a long time if you wanted formatted layouts. It is still that way because there hasn't been a GOOD CSS layout program that is WYSIWYG. Most layout programs are still table based with a CSS editor tacked on, like Dreamweaver. I keep waiting for someone to come out with a layout editor that is CSS based but so far nothing. You still have to hand code the layouts for the most part if you want pure CSS using DIV tags.
Posted: Sun Jul 01, 2007 1:34 am
by Benjamin
Without doing an intensive search to find the original source of the statement I made previously, I will quote the following:
HTML is a structural language, which means it is - or should be - used to add structure into a text through tags. The table tag should then only be used to format data into a table to relate columns with rows.
But since the apparition of tables in HTML, it has been very often used for layout purpose, usually split a web page into columns. Besides the fact that it breaks the meaning of HTML, it doesn't help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, ...).
From a
Tableless layout HOWTO example on w3.org.
Your comment that HTML was designed for layouts is not correct. Sure, it evolved into being used for that, because it worked and there was no better solution, but when those tags were released, the intension was not to "make things pretty". Consider the meaning of the tags. For example, <td> - Table Data, <tr> - Table Row, <th> - Table Head etc.
In regards to your comments that there are no WYSIWYG editors for div based layouts, I'm not sure your correct. I know that dreamweaver allows you to add elements with ID's and Classes and set the corresponding CSS properties. Whether or not they display correctly in Design View is another story, but that is besides the point. If your saying that you can't drag a div to change the width, which IMO is a feature that should be standard, I would say it's easier to just go in and type in the width you want anyway.
3 years ago I wrote a web based WYSIWYG editor that was 100% CSS based and used DIVS for layout and positioning. Adding tables was last on the todo list - I never got around to that part - but it was fully functional. I'm not sure if I still have to code for it or not but I might be able to find it someplace. Although at this point I would probably look at the code and immediately start [s]refactoring[/s] rewriting it.
Posted: Sun Jul 01, 2007 1:59 am
by matthijs
Whether or not a wysiwyg editor is available which can make css-based layouts is totally irrelevant to the question whether tables are supposed to be used for layouts. Astions answered that last question already.
There isn't a "wysiwig" editor for OOP PHP coding either. That would be cool, cut and paste, drag and drop and voila your full MVC application written by the editor
About the cnn.com: maybe they did ditch the tables, but the code is still horrible:
Code: Select all
<div id="cnnContainer"><div id="cnnContentContainer"><div id="cnnMainContent"> <!-- this is where the breaking news CSI code will go -->
<div id="cnnBannerContainer"></div>
<script type="text/javascript">
CSIManager.getInstance().call('/.element/ssi/www/breaking_news/2.0/banner.html','','cnnBannerContainer',cnnRenderDomesticBanner);
</script>
<div id="cnnLeftCol"><div class="cnnWCBox"><div class="cnnBoxHeader"><div></div>
</div><div class="cnnBoxContent"> <div class="cnnContentHeader"> <div class="cnnCHLnks">
<style type="text/css">
<!--
.cnnOpin {display:inline;margin:0px 10px;}
-->
</style>
<div class="cnnOpin">
<script language="javascript" type="text/javascript" charset="windows-1252" src="http://i.l.cnn.net/cnn/.element/ssi/js/1.3/oo_engine.js"></script>
<script language="javascript" type="text/javascript" charset="windows-1252">
O_GoT('<img src="http://i.l.cnn.net/cnn/.element/img/1.3/misc/opinionNewBlue.gif" border="0" title="Feedback" style="margin-right:5px;">Feedback');
</script>
</div>
<a href="javascript:CNN_openPopup('/feedback/help/homepage/frameset.exclude.html','620x364','toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=auto,resizable=no,width=620,height=430');">Make CNN Your Home Page</a>
</div>
or
Code: Select all
<div class="cnnMoreNewsBin">
<div class="cnnMoreNewsCategory"><a href="/HEALTH/">Health <span>»</span></a></div>
Not sure what this is, but definately not something even remotely "standards complient"

Posted: Sun Jul 01, 2007 2:15 am
by Benjamin
I could only speculate they are in the process of completing the rollout or that they are rendering containers whether they have content or not, which would be a programming issue most likely.
Posted: Sun Jul 01, 2007 2:54 am
by AKA Panama Jack
astions wrote:Without doing an intensive search to find the original source of the statement I made previously, I will quote the following:
HTML is a structural language, which means it is - or should be - used to add structure into a text through tags. The table tag should then only be used to format data into a table to relate columns with rows.
But since the apparition of tables in HTML, it has been very often used for layout purpose, usually split a web page into columns. Besides the fact that it breaks the meaning of HTML, it doesn't help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, ...).
From a
Tableless layout HOWTO example on w3.org.
Your comment that HTML was designed for layouts is not correct. Sure, it evolved into being used for that, because it worked and there was no better solution, but when those tags were released, the intension was not to "make things pretty". Consider the meaning of the tags. For example, <td> - Table Data, <tr> - Table Row, <th> - Table Head etc.
I have been doing this since the inception and what I said was true. Though some pundits would like to rewrite history to fit their perceptions.

You still could not create table-less layouts that weren't just liner text pages until DIV tags had positional attribute support added with the inception of CSS2. The ONLY way to have your page layout in nice FORMATTED columns and rows was to use tables.
That is what they were really designed for. You place your data in nice neat rows and columns for the entire page. It was similar to page layout software for creating flyers and brochures. If you think about it that is exactly what web pages were for the most part when they started out.
You should try and create a web page using HTML 3.2 and CSS1. That is when tables and div tags made their appearance. You might find it eye opening.
astions wrote:In regards to your comments that there are no WYSIWYG editors for div based layouts, I'm not sure your correct. I know that dreamweaver allows you to add elements with ID's and Classes and set the corresponding CSS properties. Whether or not they display correctly in Design View is another story, but that is besides the point. If your saying that you can't drag a div to change the width, which IMO is a feature that should be standard, I would say it's easier to just go in and type in the width you want anyway.
You are right that Dreamweaver CS does have a better Layout Editor but it still has some work to go. And considering it costs $400 it's not really worth it yet.
Posted: Sun Jul 01, 2007 3:31 am
by matthijs
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html401/struct/tables.html#h-11.1
More good info:
http://www.stopdesign.com/articles/throwing_tables/
http://www.456bereastreet.com/lab/devel ... structure/
http://www.hotdesign.com/seybold/
Bottom line: tables are for tabular data, not for layout.
And last:
google valid and strict reduces page load 21%
Posted: Sun Jul 01, 2007 3:41 am
by timvw
Just have a look at the definition for table in an earlier html specification...
http://www.w3.org/TR/REC-html32.html#table
Tables
HTML 3.2 includes a widely deployed subset of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes. Note that the latter role typically causes problems when rending to speech or to text only user agents.
Posted: Sun Jul 01, 2007 3:46 am
by Benjamin
Ok everything is cool... let's not let this turn into a div vs table debate. We can always open up another thread for that.
My original point is just that they removed virtually all tables, the site loads a lot faster, and other than that, nothing really.
I'm not sure if I like the new layout or not, but I'm really happy that it's faster. I was almost to the point where I was just going to stop visiting their site.
EDIT: @timvw That quote is interesting, but it also contradicts other articles published by the same organization. Maybe there were internal debates about this as well.
Posted: Sun Jul 01, 2007 4:03 am
by alex.barylski
AKA Panama Jack wrote:That is what they were really designed for. You place your data in nice neat rows and columns for the entire page. It was similar to page layout software for creating flyers and brochures. If you think about it that is exactly what web pages were for the most part when they started out.
I remember the Internet back in highschool using the Mosaic browser...web pages didn't look anything like they do now. They resembled more of an web 2.0 style web site with a missing CSS file. No layout or structure just colored text, etc...
I remember when web sites started to take on more of a traditional print/brochure appearance, which I'm willing to bet, is around the same time designers started realizing they "could" use tables for layout not just tabular data.
I think the original inventors of HTML didn't really see that coming. I think they were actually looking at it all from a completely semantic point of view. <h> this <b> that and <table> too. HTML was introduced to share hyper-linked information in the academic world and resembled something more analogous to a Lynx browsing session than today's Flash and bang.
To claim that tables were designed for layout?!? It's clear to me they weren't, that is just what ended up happening to them as people pushed the limits of the new medium and discovered new, undocumented, unplanned uses.
I remember seeing sites done almost entirely in FRAMES...infact my first couple of web sites were done that way...frames were used for layout not tables. But then search engine optimization entered the picture and all of a sudden tables were better because search engines indexed your menu page and your users were lost, as the rest of the page wasn't available.
Cheers

Posted: Sun Jul 01, 2007 6:01 am
by superdezign
The only reason we ever used tables for layouts was because we didn't have a choice, not because we just "never thought of" using divs. Divs were just logical divisions. They served what some people use anchor tags without href attributes for: identifying information with an id. Original HTML wasn't designed for layouts, but for delivering information in an organized fashion. Websites weren't always pretty.

Posted: Sun Jul 01, 2007 9:28 am
by Arawn
CNN sure seems to be wasting a lot of bandwidth even with the new layout. The only thing they gzip seems to be the HTML. They're still using tables on other sections of the site. I see they're using Prototype and Scriptaculous in the new layout. Looks like they're replacing SSI with HXR, maybe they'll be spinning off a lot more sites like sportsillustrated.cnn.com and HRX would let them pull content from the new sites. Interesting changes.