Discussion on website reconfiguration from Douban station design _css/html

Douban.com very sophisticated application of the div+css, and through the use of color, minimize the picture and so on and so on, so that the Web page is refreshing, and can maximize the size of the compressed Web page, so that the efficiency of access to maximize.

The first time to see douban.com, there is a "reading" magazine in the hands of the feeling of reading, very simple and elegant, as if there is a bit of scholarly flavor. By Chinese-style site rape are accustomed to, that the site is so and can only be so, no doubt many people first saw Douban.com will be his site's simplicity touched, will feel the front of a bright! Why is this so, so some ideas, Take a look at Douban.com's website design and see how he did it:

1, the use of DIV+CSS page technology, from the "Web site Refactoring" a book translation, this kind of layout has begun to take root, the benefits are not much said (can visit Ajie w3cn.org understand), can be said web2.0 necessary.

2, through the color block background to highlight the whole piece of content, important colors have light powder, blue, and white bottom combination, very refreshing.

3, the core of douban.com is books, music, movies and Users (groups), all using thumbnails, the user (group) thumbnails smaller. The first three online pictures are generally more good-looking, but also must be larger, the latter because it can be uploaded, designed to a smaller picture, can make the pictures look good.

4, in addition to the above, Douban on the picture and stingy, almost no. Even users send comments, post can not send pictures. This benefit is very obvious, one can make the user focus on the text, and the picture part of the site is related to the core, does not produce irrelevant things. In addition, make the website visit speed very quickly.

5, no matter what the page is the same layout. Layout in the upper and lower way. The top is navigation, the middle is 2 column way, the left is the core content of the page, the right-hand side is the auxiliary and related functions and information; The following is the station navigation. All navigation also doesn't have a single picture.

6, the use of style sheet Douban also imaginative, the selection of the link is dark blue, the point is orange, delete is crimson anti-white, books/music/Movies using crimson White, functional description and Site bookmark icon is green, the recommended star is red, the remaining is the eternal black. The entire color is spread around the blue and red colors and green. This and Douban logo can be in line with, very coordinated.

7, button use of very little, but I decided that since the button is so little, but not all, so better!

8, Watercress page length, each page is very short, general 2 pages, no more than 3 pages. I always thought that too long pages would make users lose patience, and 2-3 pages was the best choice. The reason why there is this long page is only a portal to more than a few advertising location approach, not every site need to do so.

9, advertising, watercress is different from other websites, do not provide fancy advertising, only Google text ads and "reading", "readers" of the text ads, I think he will only provide text link ads, if the traditional pictures, flash ads, the entire site will be changed.

10, does not use the pop-up window, this beginning is not very accustomed, later I study that this should be related to the site audience, most of them are interested in reading, music, film, so let the user as far as possible along the line to finish or better, because these things I see no one is jumping to enjoy. Therefore, I think it is not accustomed to not pop-up windows, it may not be easy to really douban on the permanent home, is not destined to be the core users of Douban.

Overall, douban.com very sophisticated application of the div+css, and through the use of color, minimize the picture and so on and so on, so that the Web page is refreshing, and can maximize the size of the compressed Web page, so that the efficiency of access to maximize. Because there is almost no spam on the page, which makes it very efficient for Google to retrieve it, the correlation of each page makes the whole station very friendly to the retrieval robot. UI layout, the entire site unified layout, very easy to get started, not easy to let the user lost. The UI philosophy of watercress I want to have a relationship with the developer using Python, which is a quick choreography of functional logic by indenting, plus the power of Python itself, making the Python program very simple and straightforward. From this perspective, the watercress layout can be seen as the programming of the Python program, the concept of watercress can also be seen as the idea of Python.

If you want to Douban website style belong to what genre, I think watercress should belong to Google's minimalist pie! Of course can not be said to be copied, after all, this is different from the early days we copied the European and American black very commercial style, nearly 2 years to copy Korea large color block big picture flash template that way. I think Google's simplicity has four key points: simple (adequate functionality, including page navigation), Ease of use (simple to start, interaction and UI), considerate (close to user psychology), focus (based on the business itself), on this basis to add their own web site industry characteristics, Does it mean that the domestic web2.0 Web site is a possible trend to restructure?