Webdesign: Wenn der Titel nicht vollständig angezeigt werden kann
|
<br />Ich habe mir heute die neu gestaltete Website ChinaUI.com angesehen und finde, dass sie immer schöner wird. Diese Änderung ist in der Tat ziemlich groß. Ich habe es mir morgens kurz angesehen und dann geschlossen. Als ich es abends wieder öffnete, stellte ich ein Problem fest. Mit anderen Worten, der Titel wird aufgrund der Breite des Designs nicht vollständig angezeigt. Es scheint, als würde der Text mithilfe eines Programms abgeschnitten. Ich glaube, dass viele Websites bereits mit dieser Situation konfrontiert waren. Aus optischen Gründen muss der Text gekürzt werden, um der optischen Gesamtwirkung der Website zu entsprechen. Normalerweise verwenden wir zwei Methoden zum Abschneiden: Eine besteht darin, bei der Ausgabe im Hintergrund vorab eine bestimmte Anzahl von Zeichen festzulegen. Eine andere Methode besteht darin, den gesamten ausgegebenen Inhalt mithilfe von CSS oder JS optisch auszuschneiden. Bevor es Standards für Webseiten gab, wurde zur Lösung dieses Problems grundsätzlich die erste Methode eingesetzt, und diese wird auch heute noch häufig angewendet. Der Vorteil dieser Methode besteht darin, dass die Anzahl der Wörter genau gekürzt werden kann. Der Nachteil kann jedoch darin bestehen, dass der Ausgabeinhalt unvollständig ist, da die Kürzungsarbeiten im Hintergrund abgeschlossen wurden. Der zweite ist ein Taschenspielertrick, der mit CSS oder JS erstellt wurde. Inhalte über einer bestimmten Länge ausblenden. Um den gewünschten visuellen Effekt zu erzielen, besteht der Vorteil darin, dass der gesamte Dateninhalt erhalten bleibt. Der Nachteil kann darin bestehen, dass der von Nicht-IE-Browsern erfasste Text nicht perfekt ist. Beispielsweise kommt es bei Firefox häufig zu dem peinlichen Phänomen, dass die Hälfte eines Wortes abgeschnitten wird. Die Frage, die ich stellen möchte, lautet: „Wird die Unvollständigkeit des Titels die Motivation des Benutzers zum Klicken beeinflussen?“ Ich wage eine solche Aussage: Die Unvollständigkeit des Titels wird die Motivation des Benutzers, auf die Informationen zu klicken, stark beeinflussen. Wir werden hier zur Analyse eine Schlagzeile von Youai.com verwenden. Auf der Website gibt es eine Schlagzeile mit dem Text „ Amerika erfindet eine neue, atemberaubende Benutzeroberflächentechnologie “, die jedoch mechanisch abgeschnitten wurde. Wird unsere Neugier angesichts eines solchen Titels geweckt? Natürlich ist das möglich. Aber unser Verständnis könnte so aussehen: „Die Vereinigten Staaten haben eine neue Technologie für Benutzeroberflächen erfunden und prahlen damit … Das sind Fake News. Vielleicht prahlen die beiden Unternehmen damit.“ Wenn das der Fall ist, dann habe ich kein Interesse an dieser Art von Klatschnachrichten. Der vollständige Titel müsste jedoch lauten: „ Die Vereinigten Staaten haben eine neue Benutzeroberflächentechnologie erfunden, mit der ein Computer durch Luftblasen bedient werden kann .“ Mich interessiert eher ein solcher Titel. Ich möchte wissen, warum ein Computer durch Luftblasen bedient werden kann. Das ist etwas, worüber ich nie nachgedacht habe. Auf diese Weise werde ich mit großem Interesse darauf klicken, um diese Neuigkeiten anzuzeigen. Im Vergleich dazu stellen wir fest, dass es tatsächlich der „Blasvorgang“ ist, der unsere Neugier am stärksten weckt. Dies ist der Kern der neuen Technologie. Dies ist zugleich auch der Kerninhalt dieser Nachricht. Natürlich ist manchmal eine Kürzung notwendig, da sonst die gesamte Website unordentlich aussieht. Die allgemeine Lösung besteht nun darin, dem Link ein „Titel“-Attribut hinzuzufügen. Wenn ich auf einen Titel mit unklarer Semantik stoße, bewege ich normalerweise die Maus darüber, um den Text im Eingabeaufforderungsbereich anzuzeigen und umfassendere Titelinformationen zu erhalten. Dies hilft mir bei der Entscheidung, ob ich auf die Nachrichten klicke. Leider ist das Titelattribut im Youai.com-Titellink dasselbe wie der Titelinhalt, was die Bedeutung des Titelattributs erheblich reduziert. Beim Designen versuchen wir natürlich, den Titel so vollständig wie möglich anzuzeigen. Wenn es aus besonderen Gründen nicht möglich ist, den Titel vollständig anzuzeigen, sollten wir das Titelattribut so vollständig wie möglich gestalten. Auch wenn die CSS-Kürzung in Firefox fehlerhaft ist, bin ich dennoch der Meinung, dass die Kürzung mit CSS erfolgen sollte. Zumindest können wir auf diese Weise ein vollständiges HTML-Informationsdokument erhalten. Zumindest können wir auch ohne CSS den kompletten Informationsgehalt sehen. |
<<: Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs
>>: Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind
Artikel empfehlen
MySQL-Tutorial: Datendefinitionssprache (DDL), Beispiel, ausführliche Erklärung
Inhaltsverzeichnis 1. Einführung in die Grundfunk...
Reiner CSS-Code zum Erzielen eines Drag-Effekts
Inhaltsverzeichnis 1. Beispiel für Drag-Effekt 2....
js native Wasserfall-Flow-Plugin-Produktion
In diesem Artikel wird der spezifische Code des n...
Eine kurze Analyse von MySQL-Verbindungen und -Sammlungen
Join-Abfrage Eine Join-Abfrage bezieht sich auf e...
js zur Realisierung von Login- und Registrierungsfunktionen
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker
Inhaltsverzeichnis Tomcat mit Docker installieren...
So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen
Inhaltsverzeichnis einführen Implementierungsschr...
So verwenden Sie CSS-Attributselektoren zum Spleißen von HTML-DNA
CSS-Attributselektoren sind großartig. Sie können...
MySQL 5.7-Clusterkonfigurationsschritte
Inhaltsverzeichnis 1. Ändern Sie die Datei my.cnf...
Beispielcode zur Konvertierung von http in https mit nginx
Ich schreibe gerade ein kleines Programm. Da die ...
Verwenden Sie die mail()-Funktion von PHP zum Senden von E-Mails
Senden von E-Mails mit der Mail-Funktion von PHP ...
Vollständige Schritte zum Bereitstellen einer Front-End- und Back-End-getrennten Nginx-Konfiguration
Vorwort Es ist ein Klischee. Hier werde ich über ...
Detaillierte Erklärung des Docker-Bereitstellungstutorials für Jenkins-Anfänger
Dieser Artikel stellt Jenkins+Maven+SVN+Tomcat üb...
Gängige Methoden zur Optimierung der Docker-Imagegröße
Die Docker-Images, die wir normalerweise erstelle...
Praktisches MySQL + PostgreSQL Batch-Insert-Update insertOrUpdate
Inhaltsverzeichnis 1. Baidu-Enzyklopädie 1. MySQL...