A List Apart Classic: Breaking through the deadlock of grid design

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Late one night in November, I flew over my hometown of Tucson, Arizona, I was moved by the layout of the city grid, Tucson is one of the cities built by the United States through planning, and everything in the city has been carefully laid out by the designers (Figure 1), I just came back from London, and London is the opposite. , London's Urban layout (Fig. 2) Chiri, looks more like natural.

Figure 1: Tucson, Arizona

Figure 2: London

I've been thinking about this article for a long time, and the two-city view reminds me of web design, where today's technology allows us to freely implement web format design, or completely out of the grid, there is no doubt that this is a choice that will be a real challenge How do we give up those blocked thoughts and think outside the grid?

The feeling of the city

The similarity between urban planning and Web design is interesting. Grid layouts are ideal for creating predictable, easily navigable web sites that help designers plan and make them accessible to users (Figure 3).

Figure 3:ryan Brill

In a positive sense, Tucson the city is certainly easy to access, a little sense of direction or a street map is enough, the residents to other people to instruct their position, just say, I Campbell Avenue and Prince M.I. intersection of the southwest corner on it. Public transport is south North or East West, the road is very easy to distinguish.

On the other hand, the original plan of Tucson's designers only took into account the limited expansion, and when the city developed beyond the planning point, the problem arose. The limitations of Tucson grid prevent the emergence of different styles of communities or neighborhoods, many Tucson residents feel that the city lacks a vibrant city center or a large number of personality communities, as a result, even if such areas appear, and easy to travel, they are too lazy to find.

London is different, it is a mystery. I know Londoners have to rely on city guides to travel. The city's transportation system is full of challenges, and taxi drivers need to pass a special exam to get on their posts. The city's natural growth has not made it an easy place to travel.

In London, however, the vibrant city and unique neighborhoods are full of cultural enclaves and interesting communities. Although more difficult to travel, because of the variety of tastes, people are more willing to stay in it.

This metaphor is also appropriate for those Web designs that tend to be natural, how can people easily travel through those Chiri alleys? On the other side, beautiful designs can be achieved by breaking the rules that we have always complied with. As you can see in Figure 4, the rules that break through the grid design make the design both easy to use and look different.

Figure 4:aiga Los Angeles

Puzzle of Grid Code

As a more code-oriented rather than a design person, I am puzzled to find out how our design is rigidly stuck to the code, I believe that the long form layout let us prison (Figure 5), Lenovo to the latest CSS layout, it is easy to know why this is.

Figure 5:k10k

Table layouts fit well with grid design. The Code of the table itself reproduces a grid, and we simply fill in the cell with pictures, text, and interface elements to complete our design (Figure 6). If we want to implement complex unstructured design, we need to use a large number of pictures in the document, resulting in a bloated entire document.

Figure 6:weightshift

Table layouts have some advantages, but as with urban planning, advantages can sometimes become inferior. Grid-based grids ensure that all of the cells inside it behave well, do you want all columns to have the same width? It's too easy, it's the nature of the table. Keep the cells in a consistent gap? It's a piece of cake. But what if you don't want this uniform structure? Unfortunately, you can't.

CSS has changed all this, and this is the theory that I think we haven't learned to design for the Web. We, especially those who have gone from a long table layout to CSS, are just beginning to understand how the visual model of CSS helps to break the stereotype of grid design. is CSS layout perfect? No, we've lost something in addition to the benefits of CSS. The whole column extension is a big problem for CSS design, and the gap between cells is also a problem.

CSS is nothing but the sideline and the box, the grid also has, however, the essential difference is that CSS allows us to take a box from the surrounding environment independent of arbitrary disposal (Figure 7).

Figure 7

We can use the position or float property to locate, we can use the lightweight image as the background, so when we use Box we can both achieve grid layout, but also more efficient implementation of the non-grid layout, you can in the Dave Shea Blood Lust See this example, this is his One of the many designs used in 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 shows how to implement separate unstructured grids using CSS and box.

Figure 9

Once we understand the capabilities of BOX, we can easily break through the shackles of the grid. Figure 10 shows a highly unstructured, even free design.

Figure 10:kutztown University:communication Design Department

The BOX uses CSS to locate:

Figure 11

Not only has the code become cleaner, but it is also straightforward for designers familiar with CSS layouts. This design is also intuitive and easy to use and unconventional.

Prospect

The beauty of modern layout technology is that we have more options to choose from. Using CSS we can create easy to manage, lightweight, visually rich design, if you like, can also be grid designed, while we can easily break or lift this grid.

This brings more opportunities for contemporary Web design, and we should not make the same mistake by being more familiar with the grid design.

For those of us who have long been addicted to tabular layouts, the difficulties are particularly high. For years of Web designers, this means breaking with what has been used, and some may not find it difficult, but most people will be afraid. We need to learn how the CSS model works and to say goodbye to stereotypes.

There are some new people who have never been in a table layout design, and for them our past approach is both strange and inflexible, and it is from these people that we hope to see more breakthroughs in design stereotypes.

The Web is maturing, and the way we design it is changing, and there is more innovation and creativity in front of us. We will not rigidly adhere to the planned city, we can achieve unique design, we these old designers, United today's new people will make the Web with each passing day.

Related reading

The author thanked Mark Boulton for his Grid-system series and thanked Timothy Samara for the making and breaking the grid, published in 2002.

The author of this article

Molly E. Holzschlag is a well-known WEB standards advocate and provider. The best-selling of her more than 30 books is the Zen's CSS design, which she wrote with Dave Shea (Zen Web). Molly is an invited expert from the consortium and a former head of the WEB Standard project group (WaSP). Molly with designers, developers, executives and policymakers to provide the impetus for a practical, beautiful, meaningful Web.

Translation PostScript

This is a 2005 article published in a LIST APART, 2005, the CSS layout is not as common as it is now, and the table layout has made many people unbearable, as a senior expert in the Web field, author Molly E. Holzschlag is also a long-term user of the table layout, when CSS close to maturity, based on the layout of the CSS is refreshing, her mood on the grid design based on the table is complex, from the article can be seen.

However, time to 2009 years, when the CSS has been pervasive, CSS layout has become a good time, we need to think again on the grid design, grid dead, or that the table is evil? The answer is not so simple, today's web, no matter how it changes, its purpose is eternal, in addition to the Web Application, the WEB will never change the mission is to express and convey information, if you are a scholar, you will love London, however if you are a postman, you will choose Tucson. Therefore, whether it is grid design or natural design, and no absolute advantages and disadvantages, the grid design more clear and tidy, natural design more elegant refining.

And the forms are not as evil as many people say, note that now the table is not the old form, BOX can be combined with CSS, tables can also be used to decorate the table completely using CSS as a group of organically combined and interactive BOX, when you do not need the precise positioning of the cell, the table is a BOX is the perfect container, because it is the best compatibility for all browsers, it will not collapse, will not be inconsistent, its behavior more easily meet the expectations, most importantly, it is the most direct way to organize things.

This article International Source: Http://www.alistapart.com/articles/outsidethegrid

Original author Molly E. Holzschlag

Chinese translation Source: Comsharp CMS official website, translator 35 kilometers.