Some issues to consider when using 960 Grid system

Web page Production WEBJX article introduction: October has the opportunity to design an entire corporate website from scratch. Take this opportunity to use the long 960 Grid System. We four years ago, the old site is also about to be revised, the original design width is 1000px, we intend to be unified to 960px in the future, while using the 960 Grid System. The following collation of the use of 960 Grid system to consider some of the problems, the rookie to encourage.

October has the opportunity to design an entire corporate website from scratch. Take this opportunity to use the long 960 Grid System. We four years ago, the old site is also about to be revised, the original design width is 1000px, we intend to be unified to 960px in the future, while using the 960 Grid System. The following collation of the use of 960 Grid system to consider some of the problems , the rookie to encourage.

Why is 960px?

Web designers have long wanted to look for an ideal page-width value that can accommodate most screens and display more information on one line as much as possible.

The first thing we'll consider is Full-screen adaptation, but that's not a good solution. On the one hand, you need to do a design that adapts to each width, from the background picture, to each column title's text length, needs to consider adapts the changeable width, on the other hand, is also the most fatal point, compares the English word, the Chinese character is not the fluctuation, the user to the text position memory dependence is bigger. Adaptive width also means that the number of words displayed on one line is variable, and it's very difficult to find out where you've just read it when you're reading a chunk of Chinese text. As a result, fixed page widths are more common than adaptive. In the past, information blocking independent thinking we will consider using the mainstream screen width -20px (ie, the left and right border + the width of the scroll bar). At the 1024*768 resolution, the page width should be 1004px. But not long after, many people realize that there is a better width--960px.

960 = 2^6*3*5. Compared with the 1004 nonsense figure, 960 can be divided by 12, 15, 16, 24, the number of 80, 64, 60, 40, these numbers sound harmonious and reliable. So 960 is ideal for web design using a grid design system.

Why use grid design system?

Grid Design system, namely Girdsystem (also known as grid design systems, standard size system, program layout, Swiss graphic design style, international plane design style), is a graphic design method and style. Using a fixed lattice layout, its style is neat and concise, popular after World War II, has become one of the mainstream styles of publication design today.

Grid design system is very common in the typesetting design of printed publications, and web design often draws inspiration from typography. In web design, the use of grid design system can not only inherit neat and concise style, but also greatly reduce the workload of the design, from the perspective of the front-end engineering, the advantages of this layout is self-evident: natural standardization and reusability. From the perspective of the whole team, the use of grid design system can simplify the workflow, easy to communicate, but also convenient division of labor and unified style.

This is a sketch of the 960px page design using the 3*3 grid, from "The Principles of Beautiful Web".

960px is the only one?

960 is the only optimal page width? Of course not. Currently using the grid system is not strictly the width of the page is 960px, it may be 950px, such as Yahoo's Yui frame is 950px. About the Web Grid system design Introduction can look at the taobaoued this article . 1024*768 will not always be the mainstream resolution, with the development of resolution, the next better width is likely to be 1440 (2^5*3^2*5), or an era of no resolution, the page can scale automatically scaling (as now seen in Mobile version Safari). In addition, good design and creativity often need to break the rules, grid design system is not the only available style of Web page typesetting, there will always be some excellent non-960px pages (especially the full flash site); sometimes people talk about their SEO flaws, or compatibility, user experience is not good enough, But from an artistic standpoint they are still excellent.

Why use 960 Grid System?

960 Grid System is a CSS framework developed by Nathan Smith with 12 columns, 16 columns, 24 columns and three versions. CSS may be completely out of tune for many programmers, but it does require architecture and optimization as well as other program code. Even if you're running a very small web site, it can save a lot of time and cost by properly organizing and reusing CSS code. The CSS framework is the one thing that makes you work on every site, and give it to those tedious repetitive tasks, focusing on how to create more exciting designs!

Furthermore, 960 Grid system provides not only a CSS framework, but also printable thumbnail charts, firewofks, Phototshop, omnigraffle, and vision template source files ... you can make it available to a lot of people in the project team.

It also reduces a lot of compatibility issues for you, and it supports Yahoo as a-level browser:

Does the thing with 960 Grid system look good?

This question is very realistic and colorful. The ability to create a good web site using 960 Grid system is beyond doubt, with many success stories listed on its website . In addition, the familiar woothemes of WordPress users also use the 960Grid System.

In the context of Chinese, every designer has its own judgment. For example, I think that the 16-column grid system is more suitable for Chinese corporate websites, and you may have other ideas. But not using it will certainly create a satisfying web page. "Frameworks are merely tools that help people achieve solutions, not the solutions themselves." It ' s up to designers and developers to combat Class-itis and Div-itis. (The framework is just a tool to help people get solutions, not the solution itself.) It depends on how designers and developers manage class and Div) ".

For developers, the framework is better than No. There are also a number of excellent CSS frameworks available. 960 Grid System is a relatively simple framework, it does not care about fonts, colors ... you can customize a font color frame for your website. But the framework also means that there will be some style you don't use, if your site is very concerned about this problem, you need to carefully consider the use of the framework.