Web Design: When the Title Cannot Be Displayed Completely
|
<br />I just saw the newly revamped ChinaUI.com website today and I think it is getting more and more beautiful. This change is indeed quite big. I took a quick look at it in the morning and closed it. When I opened it again in the evening, I found a problem. In other words, the title is not fully displayed due to the width of the design. It seems that the text is cut off using a program. I think a lot of sites have encountered this situation. For the sake of visual effect, the text has to be truncated to meet the overall visual effect of the website. Usually we use two methods of truncation. One is to set a certain number of characters in advance when outputting in the background. Another method is to use CSS or JS to visually clip the complete content that has been output. Before web page standards emerged, the first method was basically used to solve this problem, and it is still widely used today. The advantage of this method is that it can accurately cut the number of words, but the disadvantage may be that because the cutting work has been completed in the background, the output content is incomplete. The second is a sleight of hand created using CSS or JS. Hide content beyond a certain length. In order to achieve the desired visual effect, the advantage is that it can retain the complete data content. The disadvantage may be that the text captured by non-IE browsers is not perfect. For example, Firefox often has the embarrassing phenomenon of cutting off half of a word. The question I want to ask is: "Will the incompleteness of the title affect the user's motivation to click?" I dare to make such a statement: the incompleteness of the title will greatly affect the user's motivation to click on the information. We will use a news headline from Youai.com for analysis here. There is a news headline on the website that reads " America invents new user interface technology to blow ", which is a headline that has been mechanically cut off. Faced with such a title, is our curiosity aroused? Of course it is possible. But our understanding may be like this: "The United States invented a new technology for user interface and is bragging about it... This is fake news. Maybe the two companies are bragging." If this is the case, then I have no interest in this kind of gossip news. However, the complete title should be: " The United States invented a new user interface technology that can be used to operate a computer by blowing air ." I am more interested in such a title. I want to know why a computer can be operated by blowing air. This is something I have never thought of. This way I will be very interested in clicking to view this news. By comparison, we can find that the "blowing operation" is actually the one that most easily arouses our curiosity. This is the core of the new technology. This is also the core content of this news. Of course, sometimes truncation is necessary, otherwise the entire website will look messy. The general solution now is to add a "title" attribute to the link. When I encounter such a title with unclear semantics, I usually hover the mouse to view the text in the prompt area to obtain more complete title information. This will help me decide whether to click on the news. But unfortunately, the title attribute in the Youai.com title link is the same as the title content, which greatly reduces the significance of the title attribute. When designing, of course we try to display the title as completely as possible. If it is not possible to display the title in full due to special reasons, we should make the title attribute as complete as possible. Also, although CSS truncation is flawed in Firefox, I still think truncation should be done with CSS. At least this way we can get a complete HTML information document. At least we can still see the complete information content when there is no CSS. |
<<: Detailed analysis of MySQL 8.0 memory consumption
>>: IE8 compatibility notes I encountered
Recommend
Solve the problem of the container showing Exited (0) after docker run
I made a Dockerfile for openresty on centos7 and ...
How to retrieve password for mysql 8.0.22 on Mac
Mac latest version of MySQL 8.0.22 password recov...
MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution
1. Installation of the decompressed version (1). ...
javascript realizes 10-second countdown for payment
This article shares the specific code of javascri...
Two ways to start Linux boot service
Table of contents rc.local method chkconfig metho...
Why I recommend Nginx as a backend server proxy (reason analysis)
1. Introduction Our real servers should not be di...
Detailed explanation of Docker data backup and recovery process
The data backup operation is very easy. Execute t...
Using JavaScript in HTML
The <script> tag In HTML5, script has the f...
JavaScript setinterval delay one second solution
When using setinterval, it is found that it will ...
Detailed explanation of mysql basic operation statement commands
1. Connect to MySQL Format: mysql -h host address...
Exploring the Linux Kernel: The Secrets of Kconfig
Get a deep understanding of how the Linux configu...
The whole process of upgrading Angular single project to multiple projects
Table of contents Preface Development Environment...
Analyze the problem of transferring files and other parameters in the upload component of element-ui
Recently, I used vuethink in my project, which in...
The difference between html empty link href="#" and href="javascript:void(0)"
# contains a location information. The default anc...
Ubuntu Server 18.04.5 LTS Server Edition Installation and Configuration Graphic Tutorial
1. Ubuntu Server 18.04.5 LTS system installation ...