Preface
The first time I surfed the Internet, I used a dumb terminal. Before long, a monochrome monitor in Minnesota could play the movie "Monty Python and the Holy Grail" through a server. There was no mouse, no good user interface, let alone 24-bit color. Gopher is the only tool available. Search can only use Archie and Veronica. No one had heard of W3 (World Wide Web), and the web seemed adequate at the time.
Translator's note:
1. Dumb terminal. Much like a PC, but without its own CPU, memory and hard drive. Transactions are processed through a common host.
2.Gopher. A client/server application that displays all information to the end-user in menu form by performing FTP transfer, remote login, Archie search, etc., allowing the user to browse a large number of information. In this way, users do not need to know (or enter) their addresses when accessing Internet resources.
3.Archie is the first program to automatically index anonymous FTP website files on the Internet, but it is not a true search engine yet.
4.Veronica is a Gopher-type resource that you can use to retrieve all menu items that contain specified special words in the Gopher space.
After a while, strange code started flooding my search results. I could still read what I needed, but it was annoying. A colleague told me that it was HTML, a graphical language for the Internet. I had learned some methods to try to filter out HTML. Later, 256-color monitors and the first version of the Mosaic browser appeared, and everything began to change.
It's been a long time since then, technology has improved incredibly, and web interfaces have been overhauled, rethought, and reinvented countless times. Since I started working as a web designer, I've experienced first-hand the various phases of table-based design, the woes of JavaScript, the struggles of CSS, and more importantly, more universally accepted web standards.
In the beginning, the internet was only created according to the ideas of Geeks (technology fanatics). There was only pure content on the internet. They did not consider background colors and beautiful pictures. But the truth is, people like to see richer expressions when surfing. The emergence of table design method solves this difficulty. We can control the layout through tables! We all started to "cheat" the system. Can't we make a thin line of 1 pixel? Just insert a transparent GIF dot into the row of the table and set a background color and you're done! Can't control fonts? Then use another tag <font>!
Before I was introduced to CSS and web standards, I had been designing with tables for many years. The design method of web standards is completely different from before. It is efficient and charming. I fell deeply, passionately in love with new design methods. It can use meaningful code to separate content from layout, but still maintain white space and beautiful design. I immediately "like the new and hate the old" and no longer use the old design methods.
Until today.
There has been a lot of discussion about web standards and CSS. Like every good keyword, it will become the next "big name" in the history of web technology development. It started with Dougl as Bowman redesigning Wired.com and has continued to evolve. In 2003, the book "Designing with Web Standards" written by Zeldman was published, allowing us all to see the light. Designers around the world embraced and cheered for the new design method. It's structured, it's semantic, it's fast and lightweight.
However, there are still some people who still use the traditional table design method, and even use the <font> tag. They say that the traditional method is easier, more convenient for maintenance and rapid development. Who is right?
I decided to do an experiment myself to see how things changed and which method we chose was better.
challenge
I designed a hypothetical website using graphics software. Then first use HTML4.01 to make it, using tables without any CSS; as a comparison, then use XHTML1.0 Transitional to make it, the code conforms to the usability and accessibility specifications, and uses CSS to avoid tables as much as possible (unless the table is Used to represent tabular data.)
The production process is divided into three stages, and the process is recorded in detail, and the pros and cons are compared to see what we got? What has been lost? Which side should we be on.
Phase One: Design the Site
I started designing a fictional site. I'm assuming I'm making a website for an organization called "Butterfly Watchers Association". Haha, this is probably my best client who will not be involved in the design process. I tried to make it as realistic as possible, imagining the target users of the website, using a traditional layout and authoritative fonts.
I want the site to be compact, effective, and concise. Also, I thought there should be butterflies on the page, so I looked everywhere for a suitable butterfly image and soon found one at stock.xchng. The blue butterfly resting among the green leaves perfectly fits the image of the site. After some processing and modification, this picture becomes the header of our page.
During the design process, I adhered to some usability principles. For example, try to keep the image file size as small as possible. At first, I planned to use the Garamond font for the navigation. Later, considering that the user's machine may not have this font, I decided to use the Georgia font (this font is similar to Times New Roman, and in the worst case, it can be replaced by Times New Roman font) . But for the header image, I still used Georgia because it is an image.
The text has a gray background and uses the Trebuchet MS font; the news uses the Verdana font, which also looks good when scaled down. There’s an unwritten rule of thumb to use 4 fonts in a design, and I don’t really agree with that.
The second stage: "Use the previous method and use transparent GIF images to control the spacing."
If you are already a web designer who has participated in multiple projects, the following structure is very familiar to you:
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Content goes here.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
We are accustomed to using tables to speak because they are our most basic "building blocks". For example: use transparent GIF images to control spacing, and use various attributes of tables to control position. Someone explained it this way: Tables are reliable, and pages laid out with tables can be forward compatible! No css dares to compete with tables, tables can fit all browsers and so on.
Let's start by reproducing the entire design process step by step.
hour 1
oh. It seems like we can go back in time. How can we define the background color without using CSS? Oh, yes... it's bgcolor, thanks for the tip. Okay, let’s start making the form and preview the effect. I defined "align=center" so that it will be centered in all browsers, great, how easy it is! The form doesn't look bad, and I feel like I'm reunited with an old friend. I expertly used transparent GIF images to control spacing, and the work went quickly! kindness? Why is there a blank space between the header and the menu? Oh, it turns out that there is an extra space after the images code, and the IE browser will display it. This is easy to change, just delete the spaces.
Hour 2
I use javaScript to create a flip effect for the navigation menu:
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript is written like this:
function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
Other than the fact that I've forgotten a little bit about the old design methods, the whole progress was quite fast. Although I tried to reduce the nesting of tables as much as possible, the code still looked a bit complicated, so I added some comments to make it easier to find the places we need to modify.
I encountered a small problem: I can't remove the underline of the link without using css. Maybe there is a solution, let's search it on google.
Hour 3
After searching on google, I still can't find a way. How can I make a link without underline? There must be a solution!
4th hour
Let's take a look at the results of the first 4 hours on browsers other than IE6. oh! Very ugly in Firefox, looks fine in Opera and Netscape.
Hour 5
Go ahead and code..., debug and modify.
At work, I realized the limitations of the <font> tag for controlling font size. I couldn't define multiple sizes. Damn it!
I also encountered problems with text layout in the News section. In order to indent, I had to use more table nesting to achieve the effect. In order to arrange the butterfly pictures in the text to the right of the text, I also had to add a table to solve the problem. This kind of "cheating" typesetting makes me feel helpless.
Hour 6
The design is finished and it looks pretty much the same as the original design, you can click here to take a look.
Click here to see how many tables are included.
Phase 3: We don’t need forms!
Below we will take a look at what is a design based on web standards and laid out with CSS. I'll start with the identification of the content. I will try to make the logo semantic and avoid redundant tags.
The header is an image, but it's also a title, so I write the code like this:
<h1>Butterfly Watchers Association. They flutter. We watch them.</h1>
I'll think about how to display this title correctly later (ideally, we care as much as possible about the content and as little as possible about the layout). Other headings (news, sightings and membership) will be identified as <h2>.
A menu is basically an unordered list (list), so it will be identified as a list. Paragraphs do not need to be classified (we use inheritance selectors to "hang" them in the containing layer). I'll compare it to the original content text to see how many extra tags I need to add to achieve the layout (I'll try to avoid adding tags as much as possible).
This is the original content text. Take a look at the original code, it conforms to the xhtml1.0 transitional specification. Notice that all elements are already contained within <div>s with defined names. The date in the news has also been added with the date class. You can see the code is very simple.
hour 1
Define the border of the "container" layer to be 1px. Center the content by defining "text-align: center" in the body style. In order to be centered in all browsers, margin: 0 auto; (meaning top=0, right=auto, bottom=0, left=auto) is also defined in "container". Centering can be done just as easily as with tables.
Define the padding "top" and "bottom" values of "body" to be 20px (not directly defining padding in "container" is to suit all browsers).
The unordered list (li) must be defined as "display:inline" so that the menu will be displayed in one line. I added navigation icons between menus. These navigation icons are defined using the non-repeating background method, which can accurately define the (x, y) position, similar to this:
background: url(menuBullet2.gif) no-repeat 4px 9px; The click color change effect of the menu adopts the hover style of the link, no longer requiring JavaScript.
I set the butterfly image at the head of the page as the background of <h1>, so that I don’t have to worry about ease of use, and the title can be read normally on devices that cannot display images (such as screen readers and search robots).
Hour 2
The first item of the menu (HOME) uses a different icon and I had to hide the original background and add an extra id (frst) to the HOME menu:
#hMenu ul li #frst
Another (CONTACT) icon:
background: transparent url(menuBullet3.gif) no-repeat 615px 9px; I cannot use CSS to control the two columns to have the same height. Fortunately, I can use a background image to work around it. I defined a "container" that repeats the background vertically.
background: #fff url(bgMain.gif) repeat-y;
Hour 3
CSS definition boxes are much more convenient than tables, especially the many properties of borders that are very useful.
Now I start defining the <h2> header. The definition of the icon is the same as above.
I float the "news" layer to the right of "sightings" and "membership". Define the "copyright" layer with "clear: both;" so that it follows the floating layer. Float the butterfly picture in the text to the right, and the text can automatically wrap around the picture. Defining the 1px border of the image and setting the padding distance can achieve the nesting effect of the original two tables.
Some problems were discovered: the copyright layer and the content layer partially overlap.
4th hour
The error shown is related to the float:right; definition of "sightings" and "membership". Floating them to the left solves this problem, which seems odd. I used Firefox for the first test. Well, it doesn't look bad, except that the menu icons have been shifted by a few pixels.
There are some CSS techniques that can correct the display effect in non-IE browsers, such as giving different property values to different browsers.
I used the !important value in the definition of the same element. The same definition written in front can be executed first. This value is not supported by IE browser.
background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px;
In CSS, if there are multiple definitions for the same element, the last one is valid. But because IE does not support !important, IE will use the second defined value, and other browsers will use the first defined value.
All done, see the results here.
in conclusion
table-based design
I tested the page using every browser I could find, including those for Linux, Windows, and Macintosh platforms. Table layout pages look the same in different browsers. "It's as solid as a rock", this is the first comment given to table layout.
However, when it is necessary to modify part of the page content, changing the table layout is quite laborious. This is a problem. If we use a CMS (content management system), it will be troublesome for the content to be formatted.
The whole design time is a bit long because I have forgotten the old method. If I did it again, I think it might save 1-2 hours.
I describe table-based design as a lot of "grunt work", although I'm often surprised by the advanced design techniques. With designs based on pure CSS, I'm usually used to breaking down the design and analyzing bugs step by step. However, using table design does not require this work. You just need to keep throwing tables into the design. Let's look at the CSS process again.
CSS-based design
Designing with CSS feels much better. Code changes are direct and transparent, and I can clearly control the entire process. In contrast, the design of the table is like laying bricks. The greater the change in the page, the more convenient and efficient CSS design becomes.
CSS design is also very meaningful for saving bandwidth. Extracting all styles into separate files and using one or several style sheet files for the entire site can make the entire site smaller.
Separating layout information from content also has many benefits. In the future, I can revamp the entire site at any time without changing anything, just like CSS Zen Garden. It also increases ease of use, making it easier for search robots to discover your page (remember: Google is your most important source of visitors).
Although your work efficiency is very high when you are familiar with CSS-based design, you must spend a lot of time learning the rules, differences in box models, browser processing techniques, and a lot of theory, and it requires continuous practice to master. In short, CSS is simpler than tables, but if you want to design using pure CSS, be prepared to invest a lot of time learning it. Even if you are an experienced developer, you should be prepared to deal with various bugs. Sometimes it can take several hours to deal with a bug.
winner
CSS and web standards-based design win. Just looking at the code for both methods is enough to make a choice. CSS offers many more benefits (mainly in terms of ease of use). In fact, the fundamental reason is my laziness. If I use a table design and the client contacts me a year later and says it needs to be revised, I may tell him that I have joined the army and am in a foreign country. If I were using CSS, I would change it for the client without a second thought because I wouldn't have to reinvent the wheel.