Late one night in November, I flew over my hometown of Tucson, Arizona. I was struck by the grid-like layout of this city. Tucson is one of the cities built through planning in the United States. From above, everything in this city looks like a grid. It was carefully laid out by the designer (Figure 1). I just came back from London. London is just the opposite. The urban layout of London (Figure 2) has twists and turns and looks more like it came out of nature.
Figure 1: Tucson, Arizona
Figure 2: London
I have been thinking about this article for a long time. The aerial view of these two cities reminds me of web design. Today's technology allows us to freely implement grid-based designs, or completely jump out of the grid. This choice has a great impact on web designers. There is no doubt about the push, but the real challenge is how do we let go of those closed-minded thoughts and think outside the grid.
city feel
If you compare urban planning to web design, the similarities between the two are interesting. Grid layouts are great for creating predictable, easy-to-navigate websites. Grids are great for helping designers plan and make them easy for users to access (Figure 3).
Figure 3: Ryan Brill
On the plus side, Tucson is certainly an easy city to visit, a little sense of direction or a street map is enough, residents give others directions, suffice it to say, I'm on the southwest corner of the intersection of Campbell Avenue and Prince Road Just anywhere. Public transportation is due south and north or east and west, so it is very easy to identify the road.
On the other hand, Tucson's designers originally planned for limited expansion, and problems arose when the city grew beyond its planned limits. The limitations of Tucson's grid prevent the emergence of different styles of communities or neighborhoods. Many Tucson residents feel that the city lacks a vibrant downtown or numerous distinctive neighborhoods. As a result, even if such areas do appear, they are easily accessible. They didn't bother to look for it.
London is different, it's a mystery. I know Londoners themselves rely on city guides to get around. The city's transportation system is full of challenges, and those taxi drivers need to pass special exams before they can work. The city's natural growth doesn't make it an easy place to travel.
However, London is full of exciting districts and unique neighbourhoods, as well as cultural hubs and quirky neighborhoods. Although it is more difficult to travel, because of the variety of tastes, people are more willing to be among them.
This metaphor is also suitable for those web designs that tend to be natural. How can people easily navigate those winding alleys? On the other hand, beautiful design can be achieved by breaking out of the boxes we’ve been living within. In Figure 4 you can see how breaking out of the rules of grid design allows the design to remain usable while still looking different.
Figure 4: AIGA Los Angeles
The Myth of Grid Code
As a person who pays more attention to code than design, I am confused to find how our design is stuck to code. I believe that it is the long-term table layout that makes us draw a solid foundation (Figure 5). Thinking of the latest CSS layout, it is easy to Know why.
Figure 5: k10k
Table layouts work well with grid designs. The code of the table itself reproduces a grid. We just fill in the cells with pictures, text, and interface elements to complete our design (Figure 6). If we want to implement a complex unstructured design, we need to use a large number of pictures in the document, causing the entire document to be bloated.
Figure 6: Weightshift
Tabular layout has some advantages, but like urban planning, the advantages can sometimes turn into disadvantages. A table-based grid ensures that all cells in it are regular. Do you want all columns to have the same width? Too simple, such is the nature of tables. Keep consistent gaps between cells? It’s also a piece of cake. However, what if you don’t want this neat structure? Unfortunately, you can't.
CSS changes all that, which is why I think we haven't learned to design for the Web yet. We, especially those coming to CSS from longstanding table layouts, are just beginning to understand how helpful CSS's visual model can be in breaking out of grid design ruts. Is the CSS layout perfect? No, in addition to the benefits that CSS brings, we also lose something. Column expansion is a big problem for CSS design, as is cell gapping.
CSS is nothing more than edges and boxes, which are also found in grids. However, the essential difference between the two is that CSS allows us to separate a box from its surrounding environment and dispose of it at will (Figure 7).
Figure 7
We can use position or float attributes for positioning, and we can use lightweight pictures as backgrounds. Therefore, when using Box, we can implement both grid layout and non-grid layout more effectively. You can see this in Dave Shea's Blood See this example in Lust, one of the many designs he used in his CSS Zen Garden (Figure 8).
Figure 8: CSS Zen Garden: Blood Lust
Figure 9 shows the BOX-based unstructured design used in Blood Lust, and also shows how to use CSS and BOX to implement independent unstructured grids.
Figure 9
Once we understand the capabilities of BOX, we can easily break through the constraints of the grid. A highly unstructured, even free design is shown in Figure 10.
Figure 10: Kutztown University: Communication Design Department
These BOX are positioned using CSS:
Figure 11
Not only is the code cleaner, it's also more intuitive and simpler for designers familiar with CSS layout. The design is also intuitive, easy to use and unconventional.
Outlook
The beauty of modern layout technology is that we have more options to choose from. Using CSS we can create manageable, lightweight, visually rich designs that can be grid-based if we wish, and we can easily break or break the grid.
This opens up more opportunities for contemporary web design, and we shouldn't make the same mistakes just because we're more familiar with grid design.
For those of us who have been obsessed with table layout for a long time, the difficulties are particularly great. For those who have been Web designers for many years, this means breaking away from what they have always used. Some may not find it difficult, but most people will find it intimidating. We need to learn how CSS models work and have the courage to say goodbye to the old rules.
It is from these newcomers that we hope to see more breakthroughs in design stereotypes, for whom our past methods are strange and rigid.
The web is maturing, the way we design is changing, and we have more innovation and creativity in front of us. We will not stick to planned cities, we can achieve unique designs. We old designers, combined with today's newcomers, will make the Web change with each passing day.
Author of this article:
Molly E. Holzschlag is a well-known Web standards advocate and evangelist. The best-selling of her more than 30 books is The Zen of CSS Design (Zen Web Design), which she co-authored with Dave Shea. Molly is an invited expert on W3C working groups and the former director of the Web Standards Project Group (WaSP). Molly works with designers, developers, practitioners, and decision-makers to drive a Web that is useful, beautiful, and meaningful.
Postscript
This is an article published in A LIST APART in 2005. In 2005, CSS layout was not as common as it is now, and table layout has overwhelmed many people. As a senior expert in the Web field, the author Molly E. Holzschlag She is also a long-term user of table layout. When CSS is approaching maturity and CSS-based layouts are refreshing, she has mixed feelings about table-based grid design, as can be seen from the article.
However, in 2009, when CSS has become pervasive and CSS layout has become familiar, it is necessary for us to think about grid design again. Is the grid dead, or are tables evil? The answer is not that simple. No matter how it changes, today's Web has an eternal purpose. In addition to Web applications, the Web's ever-changing mission is to express and transmit information. If you are a literati, you will fall in love with London. However, If you were a mailman, you would choose Tucson. Therefore, whether it is a grid design or a natural design, there is no absolute advantage or disadvantage. The grid design is clearer and neater, while the natural design is more elegant and refined.
And tables are not as evil as many people say. It should be noted that today's tables are no longer the tables of the past. BOX can be combined with CSS, and tables can also be used. A table completely modified with CSS is like a set of organic combinations and interactions. BOX, when you don't need the precise positioning of the cells in it, the table is a more perfect container than BOX, because it is the best compatible with all browsers, it will not collapse, and it will not be different in length. , its behavior is easier to meet expectations, and most importantly, it is the most direct way for people to organize things.
Original author Molly E. Holzschlag
Chinese translation source: COMSHARP CMS official website, translator 35 kilometers.