The Ministry of Railways has finally rolled out an online ticketing system, and that alone is worth encouraging. Of course, it is debatable whether moving the advance-sale period for online tickets up by two days is a good idea; for migrant workers and other vulnerable groups who lack access to the internet, this is not very fair.
I have already booked train tickets on this website three times (the first two times were round trips to the Winter Solstice conference), and each time I ran into one problem or another. Even when the Winter Solstice conference was still very much in the off-season for train tickets, I still encountered network failures several times. Clearly, these failures are not entirely due to too many visitors; there may also be problems with the site’s own design.
Of course, I have no way of knowing how the backend mechanism of this ticketing website actually works; I can only see the appearance of the web pages on the front end. Judging only from these pages, the site is simply crude and unbearable to an extreme degree.
First comes the huge Flash banner at the top. I don’t know why a utilitarian website needs to put up such a gaudy Flash element, and not for the interactivity at which Flash excels, but merely for the sake of a flashy effect, using a Flash banner. This may be the inertia of the government’s long-standing “image projects”: any government project, even one that is practical and beneficial to the people, is first and foremost an image project.
This little webpage also makes heavy use of image links, including the most important ones such as “Buy Tickets” and “Remaining Tickets Inquiry,” all in image format and all very flashy. If these flashy parts were removed and only the practical functions retained, the entire page could be reduced by at least two-thirds in size.
Even worse, none of these image links has an alt attribute. In other words, if the images do not display, we have no idea what these links are. The title and alt attributes of images can indicate their meaning when the mouse hovers over them or when the images fail to load, and they are also an important part of helping search engines understand a site’s keywords and structure. On this Ministry of Railways website, however, these things seem never to have been considered.
The “full-text search” placed right in the middle of the page has never returned anything for me; either it errors out or it is blank.
These problems suggest that the webpage designer was probably not starting from the site’s practicality, but was first making the page from the standpoint of visual effect. Yet even judged by its visual effect, the website remains terribly poor, full of all kinds of fossilized design elements.
As expected, this page is laid out mainly with tables rather than divs. To programmers today, div+CSS has long since replaced table layouts, and even the appearance of a table tag in a webpage has become something of a disgrace. Of course, rejecting tables altogether may be too extreme, but from the mainstream programmer’s point of view, using divs rather than tables for layout whenever possible has become common sense, or a professional rule of thumb.
But all Chinese government websites are an exception. Even newly built or newly redesigned government websites and bank websites still often cling to outdated table layouts, and still mainly support the notorious IE6, which Microsoft has already abandoned. When IE6’s market share in the United States had already fallen to 1%, in China it was still maintaining a usage rate of more than a quarter—this phenomenon is probably not only because IE6 is bundled with XP and pirate copies of XP are widespread in China, but also because of the network environment. There are still so many important websites insisting on IE6 compatibility, or even only IE6 compatibility, so it is no wonder Chinese netizens are reluctant to abandon IE6. (By the way, the new Suixuan blog no longer supports IE6. If the page appears badly garbled when you visit it, and there are error messages, please upgrade your browser.)
But even IE6 had already long supported div+CSS layout, so why is the Ministry of Railways’ new website still using tables? Perhaps the simplest explanation is that they simply hired a third-rate programmer to make the site. But that may not be the case. After all, given the待遇 of a state organ, however much deadwood there may be, it would hardly go so far as to hire a few amateur programmers to write it, would it? The key point is that there is no absolutely objective standard for measuring a programmer’s ability; the quality of a programmer must also be judged according to the website owner’s requirements. Whether a webpage is successfully written depends on how its meaning is understood, and such understanding is multiple.
We find that table layout and div layout are like two paradigms, much as the Ptolemaic system and the Copernican system are. We know that Copernicus’s way of “layout” became mainstream in science long ago, but those who still insist on the Ptolemaic system at that point were not necessarily without reason. At the beginning, there was no objective standard for judging which was better; the two systems each had their strengths in practice. What determined the winner was in fact some metaphysical tendency behind them. The “Copernican layout,” coordinated with a kind of intellectual temperament more in tune with the spirit of the age, determined its victory.
Of course, div layout has many advantages, but tables are not useless by any means. The reason div came to occupy the mainstream among programmers is not simply efficiency; behind different codes lie different ways of thinking. This is similar to what Feenberg calls “technical code”: in each technology, the alternatives at certain minor points often imply different intellectual tendencies and value concepts. Thus modernity is “selectable,” and each tiny choice has a different guiding force. When we decide whether to choose IE or Chrome, iPhone or Android, Windows or Linux, table or div, what guides our choice, and what is guided by our choice, is far more than efficiency—it is virtue, meaning the ideal of what is “good.”
That may sound a bit mysterious, so let us look concretely at the respective advantages of tables and divs.
Consulting the various explanations online, one generally thinks that the main defects of tables are that the code is cumbersome and hard to read; the advantage of divs is that the code is concise, and the webpage’s “structure” is separated from its “presentation,” which makes maintenance easier. (A quick explanation: according to Web standards, the elements of a webpage can be divided into three items: structure, presentation, and behavior. “Structure” refers to the framework of the page content—for example, which parts are headings, which are body text, which are forms, which are headers and footers, and so on, as well as the order and hierarchical relations among headings and paragraphs. “Presentation” refers to the way this content is displayed—font and size, left-aligned or right-aligned, arranged horizontally or in vertical columns, and so on. “Behavior” concerns the visitor’s actions: how things change when the mouse hovers, where one jumps after clicking, and so forth. In terms more familiar to us, perhaps these can be recast as the three parts of a webpage’s matter (content), form (appearance), and dynamics (interactive action). If these three parts each do their own job and prepare separately, then maintaining the webpage becomes very convenient, because you can completely update its content while keeping the style unchanged, or radically change the site’s appearance while leaving the content untouched. Different tasks can be assigned to different specialists, and these tasks are relatively independent; there is no need to arrange a dictator to coordinate everything at once, and successors do not need to fully understand their predecessors’ architecture in order to continue maintaining it. In this way, even as the content, form, and editors are continually making small adjustments, the website can maintain continuous and stable updates. This is precisely where the greatest weakness of table layout lies.
From a functional standpoint, table layout is not especially inferior to div, and CSS styles can also be applied on top of tables. The cumbersome code does not simply mean that this layout method is difficult; on the contrary, table layout in a certain sense is far more convenient and faster than using divs. Because div+CSS layout requires programmers to “write” the code by hand, whereas table layout is more suitable for WYSIWYG editing in Dreamweaver, FrontPage, or even Word. So it is said that to achieve the same effect, writing with divs often takes more than twice as long as writing with tables.
Moreover, div layout requires a great many careful considerations, especially because achieving compatibility across different browsers is a painful task. By contrast, table formatting is very precise and makes it easiest to achieve a neat and uniform layout, which of course is also rigid.
That is to say, if the requirement is to lay out a certain webpage as simply and precisely as possible, table probably still has the edge. But if one further considers maintenance, inheritance, and reuse after the webpage is completed, then div is what can win out in terms of efficiency.
Webpage writing is always meant to realize some specific function. For example, the Ministry of Railways needs a website to provide ticket booking. Just in terms of the efficiency of achieving this goal, div layout does not have the advantage, especially when div+CSS was just getting started; it was in no way comparable to a mature table layout. But among programmers, writing webpages does not point only to some task that needs to be accomplished right now. Programmers also see their work as a kind of free creative activity with artistic qualities. In other words, the work of writing is not judged only by its practical task, but is also endowed with a certain inner meaning—programmers all long for their code to become immortal, for their code not merely to accomplish this one mission, but to perhaps be passed down as a symbol of their own glory. So even when the visual effect of the webpage is the same, programmers care about the aesthetic quality of the code.
In the gaps of media, new spaces of meaning are opened up. It is precisely in this attitude—not being completely and utterly fixated on the immediate goal, but lingering a little within the medium—that a specific historical path of technology is revealed. In this sense, beyond the three elements mentioned above (matter, form, dynamics), div’s characteristic must add one more point, namely the separation of “purpose”: the creative activity of writing the webpage is separated from the purpose that this webpage is meant to achieve; the utility of the webpage (function, efficiency) is separated from the good of the webpage (beauty or ugliness, good or bad), and only then does the programmer’s creativity obtain its own space of meaning—utility ≠ virtue. This inequality is the principled issue on which virtue ethics and utilitarian ethics must necessarily draw a clear line between them.
Translated from the Chinese original with AI assistance. The original text is authoritative.
Leave a Reply