Personalisieren Sie es!

Verbessern Sie die Benutzererfahrung der Website, beginnend mit verbesserter Zugänglichkeit und personalisierter Anpassung. Verbesserungen der Zugänglichkeit erweitern nicht nur das Publikum und verbessern die Erfahrung aller Benutzer (nicht nur für Menschen mit Behinderungen), sondern bringen auch SEO -Vorteile.

In ähnlicher Weise ist die Anpassung der Präferenzabfrage auch eine hervorragende Möglichkeit, ein personalisiertes Erlebnis zu bieten, sodass Benutzer komfortabler und bequemer sind.

prefers-reduced-motion Präferenz-Abfrage ist ein gutes Beispiel. Diese Präferenz bedeutet, dass Benutzer Weberlebnisse ohne ausgefallene und schnelle Animationen bevorzugen. Sie können Stile schreiben, die diese Präferenz unterstützen und Medienabfragen für Benutzer schreiben, die diese Präferenz nicht so einstellen, dass sie eine "lebendigere" interaktivere Erfahrung bietet.

Eine weitere zu berücksichtigende Präferenz ist die Farbschemas des Benutzers. Während die meisten Websites in den letzten Jahren standardmäßig helle Themen verwenden, insbesondere wenn sie nachts Webseiten durchsuchen, war die Nachfrage nach dunklen Themen hoch. Die Bereitstellung von benutzerdefinierten Themen, die den Benutzerpräferenzen übereinstimmen, ist eine weitere Möglichkeit, die Benutzererfahrung zu verbessern.

Sie können dies effizient tun, indem Sie CSS für benutzerdefinierte Eigenschaften verwenden und diese benutzerdefinierten Eigenschaftenwerte anhand der Medienfunktion prefers-color-scheme anpassen. Wenn Sie gemeinsame Werte wie Hintergrund, Text und Hervorhebung verwenden, können Sie alle Werte an einem Ort aktualisieren.

Vergessen Sie nicht, auch color-scheme zu verwenden, um automatisch einige Themenkonvertierungen des Browsers zu erhalten. Durch das Einstellen dieser Eigenschaft wird der Browser angegeben, welche Farbthemen (hell, dunkel oder beides) auf der Seite unterstützt werden. Der Browser konvertiert wiederum automatisch Formularsteuerungen und Browser -Benutzeroberflächen (z. B. Bildlaufleisten) in das richtige Thema:

In dieser Demo schaltet ich die Schriftart, auch wenn ich keine Textfarbe für mein Farbthema verwende, da ich color-scheme: light dark in :root den Browser mithilfe von Hell- und Dunklen Themen mitzuteilen, die Schriftfarbe automatisch von schwarz nach weiß.

Sie können Ihr dunkles Thema in der Rendering -Panel von Chrome Devtools testen, ohne die Systemeinstellungen zu ändern. Dieses Bild zeigt den dunklen Modus der Houdini.Wen -Website:

Ein weiterer Vorteil des Erstellens dunkler Themen besteht darin, den Benutzern die Batterie zu sparen. Eine Pixel 6 -Laborstudie ergab, dass dunkle Themen 11% des Stromverbrauchs für OLED -Bildschirme sparen.

Daher respektieren Sie jetzt die Zugangsanforderungen, Vorlieben und Akkulaufzeiten Ihres Benutzers, was eine großartige Möglichkeit ist, Ihre Website benutzerfreundlicher zu gestalten.

Das obige ist der detaillierte Inhalt vonPersonalisieren Sie es!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!