Talking about website reconstruction from Douban website design_CSS/HTML

douban.com very cleverly applies div+css, and through the use of colors, minimizing pictures, etc., it not only makes the website page fresh and pleasant, but also compresses the size of the webpage to the maximum extent, thus making Access efficiency is maximized.

When I read douban.com for the first time, I felt like I was reading a "reading" magazine in my hand. It was very elegant and seemed to have a bit of a bookish flavor. We are all used to being raped by Chinese-style websites, thinking that websites are just like this and can only be like this. Undoubtedly, many people will be touched by the simplicity of his website when they see douban.com for the first time, and their eyes will light up! Why? It will be like this, so I have some ideas. Let’s take a look at douban.com’s website design and see how he does it:

1. Using div+css page technology. Since the translation of the book "Website Reconstruction", this layout method has begun to be deeply rooted in people's hearts. There are not many benefits to say (you can visit ajie's w3cn.org to learn more), but it can be said A must for web2.0.

2. Use the color block background to highlight the entire content. The important colors are light pink, light blue, and white background, which is very refreshing.

3. The core of douban.com is books, music, movies and users (groups), all using thumbnails, and the thumbnails of users (groups) are smaller. The pictures on the Internet of the first three are generally better-looking and must be larger. The latter can be uploaded and designed into smaller pictures, which can make the pictures look better.

4. In addition to the above, douban is extremely stingy with pictures, almost none. Users are not allowed to post pictures even when posting comments or posts. The benefits of this are very obvious. It allows users to focus on the text, while the pictures are related to the core of the website and will not produce irrelevant things. In addition, the website access speed is very fast.

5. No matter what page, the same layout is used. The layout adopts a top-middle-bottom approach. The top is the navigation; the middle is a 2-column format, with the core content of the page on the left, auxiliary and related functions and information on the right; and the site navigation below. All navigation also does not have a picture.

6. Douban is also ingenious in using style sheets. Link selections are highlighted in dark blue, clicks are highlighted in orange, deletions are highlighted in dark red, and books/music/movies are highlighted in dark red. Function descriptions and The site bookmark icon is green, the recommended stars are red, and the rest is eternal black. The entire color palette revolves around blue and red shades as well as green. This fits well with Douban’s logo and is very coordinated.

7. Buttons are rarely used, but I decided that since there are so few buttons, it is better not to use them all, this is better!

8. The page length of Douban is very short, usually 2 pages and no more than 3 pages. I have always believed that pages that are too long will make users impatient, and 2-3 pages is the best choice. The reason why there is this long page is just because the portal website wants to have more advertising positions. Not every website needs this.

9. Advertising, Douban is different from other websites in that it does not provide fancy advertising spaces. Currently it only has Google text ads and text ads for "Reading" and "Readers". I think it will only provide text link ads in the future. If Traditional pictures and flash ads are provided, and the entire site will change.

10. Do not use pop-up windows. I was not used to this at first. Later, I researched and found that this should be related to the audience of the website. Most of them are people who like reading, music, and movies, so let users follow the route as much as possible. It’s better to finish the walk, because I don’t think anyone is jumping to appreciate these things. Therefore, I think that those who are not used to not having pop-up windows may not be able to really settle down on Douban for a long time, and they are destined not to be Douban’s core users.

In general, douban.com uses div+css very skillfully, and through the use of colors, minimizing pictures, etc., it not only makes the website page fresh and pleasant, but also compresses the web page to the maximum extent. size, thereby maximizing access efficiency. Because there is almost no junk information in the page, Google search is very efficient, and the relevance of each page makes the entire site very friendly to search robots. In terms of UI layout, the entire website has a unified layout, which is very easy to use and not easy for users to get lost. I think Douban's UI philosophy may also have something to do with developers using Python. Python is a fast arrangement of functional logic through indentation. Coupled with the simplicity of Python itself, Python programs are very simple and clear. From this perspective, Douban's layout can be seen as the arrangement of Python programs, and Douban's philosophy can also be seen as Python's philosophy.

If you want to say what genre the Douban website style belongs to, I think Douban should belong to the minimalist style of Google! Of course, it cannot be said to be copying. After all, this is different from the dark and commercial style that we copied in Europe and America in the past 2 years. It’s like copying Korean flash templates with big color blocks, big pictures, and big pictures. I think Google’s simplicity has four key points: simplicity (enough functions, including page navigation), ease of use (just start with simple interactions and UI), considerate (close to user psychology), and focus (based on the business itself). On this basis, adding your own website industry characteristics, does it mean the possible trend of domestic web2.0 website reconstruction?