-
How can we make the website better, more suitable for W3C standards and have a good user experience? This is a problem faced by many web page producers, and it is also something everyone wants to know. Netgather webmaster has ended up with the following results in long-term practical work. I hope it can be helpful to everyone. Please criticize and correct any shortcomings.
1. Understand the theme of the website, clarify the content displayed on the website and the majority of the browsing groups
If you want to build a website that is useful to users, you should first consider the content and functions of the website. What do users need? How can they find what they want quickly and easily? As a website designer, during the entire design Everything should be done around this aspect. If users can't get what they want quickly, or your site isn't easy to use, then the site is a failure. Users will be disappointed and may never log in to your website again. A small example: If you want to make a stock website, but the font size of the website is 12px, think about it, the number of old people who retire at home and speculate in stocks is not a small number, even if your website content No matter how good or incisive it is, it's impossible for them to hold a magnifying glass to the monitor and look at your website. The result will just be that you lose a large number of users.
2. Reasonable color matching
For a web designer, the design process is both painful and joyful. After figuring out what kind of website you want to make, you will have to go through a process of color selection and layout to reflect the theme more reasonably. Personally, I think that if you are not building a super personalized website, then color matching is not a difficult task. First, identify the main color. In fact, the industry characteristics of color are not very important. It is only people's perception of an industry that creates the relationship between industry and color matching. For example, if you are building a hotel website, of course it cannot be red. Why? In fact, it comes down to people's perception, because We both thought red was a festive color and therefore inappropriate for a funeral home. For example, blue is generally better for technology or technology-based websites, pink is better for feminine websites, etc. Second, auxiliary colors and finishing colors. To confirm the main color of a website, auxiliary colors and finishing colors are also required. The auxiliary colors mostly use the same color combination and adjacent color combinations. The same color matching is obtained by changing the transparency, saturation, lightening or darkening of the main color. The adjacent color matching is based on the main color by taking adjacent colors on the color wheel, such as red and orange. The finishing color is generally quite different from the main color. It is generally used in the more important content or buttons of the web page. Its function is to attract the user's attention and clear the visual fatigue of the web page. Use the finishing color reasonably to avoid too much appearance, otherwise it will Counterproductive.
3. Good web layout
The elements that should be grasped in web page layout are clear priorities, coordination and tidiness, respect for users’ visual habits, and reasonable arrangement of content. Display what users want first as much as possible, and pay attention to potential guidance user behaviors. As the saying goes: A good memory is not as good as a bad pen. When designing a website interface, we should first use a pencil to sketch the layout of the website, and then use drawing software to create and modify it after achieving the desired effect. Details determine success or failure. In the design renderings, use as few large color blocks as possible, highlight navigation, and have clear sections to achieve a clean, concise, neat and coordinated effect. For example, the navigation bar should be appropriately added with a mouse effect; the lines of the web page should avoid too much color difference; the outline and shadow should not be too obvious, if it is present or not, it is best; appropriate pictures and texts; the spacing between web page sections should be reasonable and uniform; the text styles of the same level should be unified; and the physical characteristics of daily life should be respected. Achieve realistic effects (for example, the light becomes brighter on one side and lighter on the other, or like a ribbon wrapping around an object, the turning point should be slightly protruding and have a subtle rounded shadow)...
After the production of the web page renderings is confirmed, we will start the production of the html page.
4.Webpage title and meta
The title and meta of the web page should be based on the basic columns and content pages. Do not use the same format for the entire site. You do not need to add keyWords, which has little effect on search engines. The header tag prevents keyword stacking.
5.Use of h1-h6 tags
A webpage h1 tag can only be used once. On the home page, channel page, and list page of a website, the h1 tag can be used for the website name, channel name, and column list name respectively. However, on the article details page of a website, the h1 tag must be used on the article title. h2-h6 tags can be used repeatedly on a page, complying with the website hierarchy in turn.
6.CSS files
Try to import css files from the outside using links, and write a reset.css that you often use to reset the css style. Avoid using *{}. Write one style in one line to reduce the file size. Try to use class definitions and reduce id definitions. Try to avoid css hack techniques for different browsers. Never do it for yourself.
7.Optimization of background images
In addition to the actual content of the website, the images used in the frame should be defined in the css file as much as possible. According to the actual situation, the background image should be merged as much as possible to improve the loading speed. It's best not to tile a very small image over a larger area.
8.div+css layout to reduce page nesting
The purpose of using div+css layout is to reduce the page code, make the website structure hierarchical, and separate content and presentation. Reducing nesting is not only friendly to search engines, but also helps reduce page size and makes subsequent maintenance and modifications easier.
9. Optimize page js
JS files that can be merged are merged into one, reducing large-scale loops and excessive hierarchical references, and improving loading and running speed.
10. Avoid dead links and empty connections
How frustrating it would be for users if clicking on an article they wanted only opened "This page cannot be displayed."
11. Appropriate text and graphics
Don't deliberately fill your website with images. Search engines don't recognize images except for the alt attribute. Adding pictures at appropriate locations can help attract visitors and eliminate the fatigue of reading long texts.
12. Requirements for web page images
Add alt attributes and width and height attributes to web page images. Do not compress the images deliberately to ensure that the image display is not deformed.
13. Test your website in different browsers.
In order to allow more people to browse your website normally, please test your page with different mainstream browsers to ensure that your website can run normally.
14. Passed W3C verification.
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
Author tomato's personal space