Some conclusions on the design of portal website focus pictures

Focus images are a way of presenting content that integrates pictures, text, and dynamic interactive effects. They play a very important role in attracting attention (the so-called focus), optimizing page layout, and many other aspects. This is especially important in portal websites where content is paramount.
I have accumulated some experience in this process and would like to share it with you. The template is more suitable for large portals like Sohu and Sina. It may not be right for personal websites and business websites. That is another matter.

1. The more stupid the better (combined with point 3)
Editors hate HTML. In particular, for pages that are highly time-sensitive and frequently updated, it is most fatal to let editors directly copy content onto the HTML of the focus image.
2. Plug and play to prevent conflicts
Don’t be afraid of making the class name (css class) too long. You can add prefixes and suffixes if you like. It’s better to make it more unique.
The focus image function is relatively independent. Often, a page has been published for N days, and then you suddenly want to change the focus image. If the class name of the focus image is too common (such as title, head, main, etc.), it will be a tragedy if an inexplicable style conflict occurs when it is applied to the page.
3. Visual Designer
Design a focus image designer, editors can use the designer to fill in data and quickly generate focus image code with one click.

4. Style must be separated from structure and behavior
Editors can easily change font color, background color, etc.

5. Try to use HTML template technology
Separate the structure (html) and behavior (js logic). You can consider the official jQuery template plugin

6. For super large portal websites (such as Sohu and Sina), SEO is often given lower priority than content.
Why? Because this type of website is already known to everyone and there is no need to search for it.
This determines the fact that JS can be used to dynamically generate the focus image Html code. Although this type of HTML code is SEO unfriendly!

The last sentence: For the focus pictures of large portal websites, use json data combined with html template technology to dynamically generate the focus pictures with js, and put a lot of HTML codes related to the focus pictures into the page. Editors will hate it, which will affect the updating efficiency of the website content!

<<: Detailed explanation of Vue plugin

>>: A comparison between the href attribute and onclick event of the a tag