This article originally titled Throwing Tables Out the Window written by Douglas Bowman and translated into Spanish by Hermann Käser, here are very interesting article.
Look ma, no tables!
Those who were in the
Digital Design World in Seattle this year I saw a presentation entitled
No More Tables , CSS Layout Techniques (No more tables, CSS design techniques). In this presentation, we review the proper use of tables and a few tips on how to style with CSS añadirles. Then we went to tableless designs, looking and seeing examples both
ways of doing basic (positioning and floating).
In half of the presentation changes his mind and announced that we were going to turn true example of tables and spacer gifs to pure CSS design. It would have created a practical example for this presentation. But that idea seemed too prepared. If crease my own example, would have been all clean and tidy. Everything would be as I wanted to avoid all the problems and know how to avoid.
A prepared sample was not good enough. I wanted a real challenge. So I chose the site of a small Seattle company that assumed some of the people in the audience would recognize: Microsoft .
Ok, maybe more than
any of the public would know this not so little company. Many people visit the site of
Microsoft every day. The home page of Microsoft may or may not be more known and used to search giants like
Google or
Yahoo! . But Microsoft generally receives a lot of traffic and the number of people passing through its pages are literally millions.
The shame is that the product of Microsoft not this as optimized as it should be. They have not taken the plunge ( NT: In reference to changing design with CSS tables ). Users are lowered pages unnecessarily large, and servers spend extra bandwidth. With 40KB, the code page of Microsoft not exactly a giant beast. But if code is full of inaccessible, rough, based on tables, full of proprietary tags and Javascript. Notice I did not mention it to be or not valid HTML. Despite having a style XHMTL, Microsoft ignores the doctype in your page. Why?
's another of those "let's get with Microsoft"?
Not simply and honestly.
Microsoft chose not to enter the wave of "hate Microsoft", or to use to attack a company that the industry people love to hate.(Do not avoid any opportunity to question certain decisions of the company, but avoid judging).
admit I purposely chose a major company. It is my nature to go against the big boys. But it is also an example that we all know. Microsoft was (and still is) the perfect candidate for a redesign based on CSS
These are the reasons for not using tables
Reason No. 1
For the inefficient use of the abundant tables and spacer gifs used for the design of the page. The pages are more tied when its content is into tables and often results in less accessibility. Microsoft not this one . A large majority of the pages on the Internet today still use tables for layout. chose Microsoft because it can serve as a familiar example (and eventually as a model) that relates to the same problems that many sites have yet to resolve.
Reason No. 2
Because the structure of basic Microsoft product is a model that thousands of sites used for your own design: Header + 3 + Pie columns . Specifically: a header that spans the entire width of the top of the page, a column on the left with the navigation, a main column with the main content, a column to the right with extra stuff and a foot that is put columns beneath and occupies the entire width of the page. If the model is not much 3 column sites use a variation of 2 columns with the samestructure with a basic column to the left or right of content:
Reason No. 3
Because Microsoft web site uses CSS to little more than the fonts and colors. I'd love to see the company that basicallyinvention the concept of style sheets, CSS lean more and less on outdated methods.
Reason No. 4
Because Microsoft used different versions of the page depending on the browser. A version for Internet Explorer andWindows (v5.5 and above). Another diluted version for all other browsers (including IE / Mac) that omits some product images and logos. Non-IE/Win version leaves out some functionality and showing page elements with other methods. If you have IE / Win 5.5 or better and you can check other browser. Anyway here are some screenshots with the differences highlighted in red:
Non-IE/Win version is visibly full version anemic that served to IE / Win. We all know that this does not have to be this way. In case you are wondering if it is that the code simply does not work in some browsers and some do. Microsoft makes a browser detection on purpose to produce different versions of the page depending on the browser. Microsoft could make one version that would work in all browsers
At least Microsoft offers a version of its product non-IE/Win browsers. Some developers do not even do that. The excuse I always hear to stop developing for other browsers is that IE / Win is the browser used by most people and that it takes too long to develop for other browsers. Others say that developing for browsers other than IE / Win is too expensive. Both reasons they take long and costs too are false.
Many developers believe these excuses because they begin to develop and test with IE. Then see it in another browser and frustrated when they see all the "bugs" that have to be fixed.
IE CSS plays a less demanding than the other browsers that have come out in recent years (Mozilla, Firefox, Safari, Opera).Beginning with IE means that fewer problems in the development stage will be discovered. Developing for IE initially and then trying to adapt to other browsers cause one increase in cost and time in the long run. But there is a better way to develop that is faster and less expensive.
Begin with the strictest browser, that (almost) always shows the way things are supposed to be. Everything works there. Then make the "patches" to IE. The development is much faster as well. You can go against the logic start developing for browsers that do not account for the largest share of traffic. But the process is much more fluid and efficient if you are not used or are dependent on IE. Start with IE and start with bad code that take much longer to fix for other browsers.
Along these lines, we still have the
IE Factor . Anyway as we gain experience with the IE problem with CSS, Factor IE is minimized.
There is hope.
Just the facts, please
For the second part of the presentation, we went step by step through the process of converting the design tables based on the Microsoft site to a more accessible and based on CSS that works in all browsers. This is not the first time. Others have re-written the Microsoft page before. Many regular readers of this page have been doing their pages without tables for almost a year. But we do not see the rest of the world doing the same, even though the field is fairly explored. Hence, the presentation in the Digital Design World and this article.
Following the presentation, we separate each step of the process in manageable pieces. Underline the important points of the process, including throwing tables, conversion to more semantic code and CSS techniques used to successfully imitate each part of the Microsoft website.
During the presentation we use many visual aids (diagrams, screenshots and graphics) helped to understand the techniques used in each section. also had separate code files saved in "pre-cooked" to which I could refer to each stage of the process.
One reason for writing this article is to then publish the final results of the transformation of Microsoft.com, which are hard to ignore:
Current Design (IE / Win)
| Current Design (other) | Transformation |
|---|
| Spacer gifs | 35 | 76 | 0 |
|---|
| Tags <img> | 43 | 122 | 6 |
|---|
| CSS background images | 1 | 1 | 11 |
|---|
| Supported browsers | 2 | Most modern | Most modern |
|---|
| HTML file size | 40 KB | 39 KB | 15 KB |
|---|
| Downsizing | - | 3% | 62% |
|---|
Go beyond
The numbers get more interesting when we make estimates
à la Meyer / Davidson of ESPN.
According to the results published in an official Microsoft product called Inside Microsoft , the Microsoft receives traffico is 1,200 million pages during 05/2004. In this presentation, I showed how to minimize the code below to lower it by 62% to 25KB.
I also said that a reduction of 25KB was sufficient if Microsoft is serious put an item using CSS. Multiply this by the 38.7 million average daily visitors savings would add
924 GB of bandwidth per day and
329 TB per year.
These numbers should be sufficient to attract attention.
Now, the fact that change is only one version and supports the most advanced design (currently IE / Win) Microsoft and is seen in all other browsers.
Companies like Microsoft may or may not want to maintain a single version of their product that works with all browsers, which load faster and more accessible to all users and devices. Anyway, I thought it would be worthwhile to demonstrate how they orany other company can create a single version that use cleaner code, works with most browsers and with greater accessibility.All in a time of one or two hours.
Additional Points
In case you want to know, the CSS-5K grew 3KB (IE / Win and non-IE/Win respectively) to 8 KB for the final version. ( NT: Remember that the CSS file is stored in the browser cache and therefore lowered only once )
The flying menus seen in version IE / Win is possible to reproduce. We use the pseudo-class: hover to display a list when you select the corresponding item. One problem: IE does not support: hover on the lists, so I would have to use the Microsoft currently uses Javascript. Or something like like Suckerfish Dropdown .
The huge change <img> between the current version and the transformation is by the amount of spacer gifs using the current version. Non-IE/Win version called bullet each image individually instead of using a CSS declaration, as do the version IE / Win and transformation.
All Javascript Microsoft site was cleared and all the homeowners attributes link labels used to (apparently) count clicks.Microsoft could add something to this level, but preferably with valid code.
As mentioned previously, this paper is to publish the results and potential benefits of using CSS and more semantic code and simple to build pages. publish this article intentionally omits the final code. understand that many people could learn from this example studying the differences between the original and the transformed code. But I will not degrade anyone working in Microsoft publishing changes to its source code without presenting it directly to them and discuss technical changes and, if they want.
