Sans Forgetica – Eine Schrift, die du nicht vergisst

Level: Anfänger
Sprachen: HTML, CSS

Forscher der RMIT University haben eine Schriftart entwickelt: Sans Forgetica.

Bei dieser Schriftart, welche auch als Webfont verfügbar ist, fehlen Teile der Buchstaben. Dies erschwert das lesen, sorgt aber laut der Forscher auch dafür, dass der gelesene Text nicht so schnell vergessen wird.

Sans Forgetica ist unter anderem als Chrome Extension verfügbar, die mit ein wenig Fummelei Textpassagen in der Schriftart darstellt.

Rezensenten im Chrome Store merken allerdings an, dass das „W“ einem „A“ zum verwechseln ähnlich sieht und dass das Plugin eher schlecht als Recht funktioniert.

Hier siehst du die Sans Forgetica Schrift in Aktion.
Wenn alles funktioniert, wirst du diesen Absatz nicht mehr so schnell vergessen.

Die Schrift ist, wie du siehst, wirklich nicht einfach zu lesen. Daher braucht der Nutzer viel länger, um eine Textpassage zu lesen und zu verstehen. Während das im Alltäglichen Gebrauch wohl eher sinnlos ist, kann die Schrift sicherlich sinnvoll eingesetzt werden, um den Nutzer dazu zu zwingen, den Inhalt einer Seite oder auch nur wichtige Auszüge im Gedächtnis zu behalten.

Ob durch diese Schrift zum Beispiel die Absprungrate einer Seite erhöht wird, habe ich nicht getestet, ich gehe aber davon aus. Deshalb sollte sie tatsächlich nur begrenzt und selektiert eingesetzt werden. So oder so ist die Schriftart aber sehr interessant und lädt zum experimentieren ein.

Wie soll das funktionieren?

Hinter der Idee der Schriftart steckt das psychologische Phänomen der wünschenswerten Erschwernisse beim Lernen. Während normale Schriften den Forschern zufolge eher weniger Effektiv sind, um Informationen dauerhaft zu vermitteln, setzt Sans Forgetica genau hier an: Vermittelte Informationen können durch die schwere Lesbarkeit besser im Gedächtnis behalten werden. Ob dies wirklich funktioniert, kann nur ein Langzeit-Test zeigen.

Schriftart integrieren

Um die Schriftart in einer bestimmten Passage zu integrieren, muss diese nur heruntergeladen, wieder auf den eigenen Server hochgeladen (im Beispiel in assets/fonts) und wie folgt in die Passage eingebracht werden:

<style>
@font-face {
  font-family: Sans-Forgetica;
  src: url('assets/fonts/SansForgetica-Regular.otf');
.wichtigerabsatz {
  font-family: 'Sans-Forgetica', Fallback, sans-serif!important;
}
</style>

<p class="wichtigerabsatz">
Wichtiger Absatz
</p>

Um die Schrift auf der ganzen Seite einzubauen (was werde ich, noch die Entwickler selber empfehlen), muss die Schrift importiert werden und dann auf das ganze Dokument (den „body“) ausgeweitet werden:

@font-face {
  font-family: Sans-Forgetica;
  src: url('assets/fonts/SansForgetica-Regular.otf');

body {
  /* Hier ist es durchaus sinnvoll, ein Fallback einzubauen,
  zwingend erforderlich ist es aber nicht */
  font-family: 'Sans-Forgetica', Fallback, sans-serif;
}

Browser Kompatibilität

✔︎✔︎✔︎✔︎✔︎

Dark Mode in CSS realisieren

Website wird von einem hellen Thema auf ein dunkles verstellt

Level: Anfänger
Sprachen: CSS

Mit macOS Mojave kam der Darkmode auf den Mac, mit dem das ganze System in einem dunklen Farbton erscheint.

Entwickler für macOS können Ihre Anwendungen bereits seit der Mojave Beta an den Darkmode anpassen. Auch einige Websites, wie zum Beispiel YouTube, bieten bereits die Möglichkeit an, ein Darkmode-Theme zu nutzen.

In einer der nächsten Versionen von Safari wird auch ein neues CSS media querie namens „prefers-color-scheme:“ eingeführt.

Update: Mit der neuesten Version von Safari, 12.1.2, ist der Darkmode auch hier verfügbar.

Update: Mit der soeben veröffentlichten iOS-Version 13 findet der Darkmode auch Einzug auf das iPhone. Ob dieser in Zukunft auch auf Android-Geräten funktionieren wird, muss sich zeigen. Klar ist nur, dass der Darkmode ab jetzt einer großen Masse an Mobil-Nutzern zur Verfügung steht.

Icon von Safari Technology Preview

Dies kann man über den Entwickler-Browser, Safari Technology Preview, bereits jetzt testen und die eigene Website für den Darkmode startklar machen. Ich habe cldsi.de bereits angepasst und musste aufgrund des einfach gehaltenen Designs nur wenige Änderungen vornehmen.

Seite an den Darkmode anpassen

Ich verwende ein WordPress Theme, welches die verwendeten Farben als Variablen am Anfang des Dokuments definiert:

:root {
  --bg-color: #eaeaea;
  --fg-color: #000; 
}

Um nun ein spezielles Farbschema für den Darkmode zu definieren, setze ich folgende Zeile ein:

/* Dark-Mode ansprechen */
@media (prefers-color-scheme: dark) {
  :root {
    /* Farben anpassen */
    --bg-color: #000; 
    --fg-color: #FFF;
  }
}

Und schon funktioniert die Seite im Darkmode!

Zusätzliche Anpassungen

Wie @mdo richtig anführt, sind Bilder (vor allem Screenshots) meist deutlich zu hell im Darkmode und zerstören somit die gesamte User-Experience. Um das zu ändern, ist folgender Code von Nöten:

@media (prefers-color-scheme: dark) {
  img {
      opacity: .75;
      transition: opacity .5s ease-in-out;
   }
   img:hover {
      opacity: 1;
   }
}

Hiermit werden Bilder leicht transparent gemacht, ihnen wird also auch Helligkeit entzogen. Bei Hovern über ein Bild, wird dieses wieder rückgängig gemacht.

Browser Kompatibilität

✔︎✔︎✔︎✔︎✖︎

Aktuelle Liste: https://caniuse.com/#search=prefers-color-scheme

Google Fonts DSGVO-konform einbinden

Level: Anfänger
Sprachen: HTML

Noch immer verunsichert die DSGVO einige Entwickler, als auch deren Kunden. Immer wieder hört man, dass Website-Betreiber abgemahnt werden, weil sie Google Fonts nutzen.

Das liegt daran, dass Nutzerdaten, wie zum Beispiel die IP zwangsläufig an die Server von Google weitergeleitet werden, welche wahrscheinlich in den USA stehen, wenn eine Google Font eingebunden ist.

Dafür gibt es aber eine ganz simple Lösung. Anstatt die Schrift einfach über den von Google vorgegebenen Weg einzubetten, laden wir diese herunter:

Noch einfacher funktioniert das mit diesem Tool.

In unserem Beispiel wird die Schrift dann als Ordner heruntergeladen. Darin befinden sich nun alle verschiedenen Stile der Schriftart (wenn wir vorher nicht unter „Customize“ nur bestimmte Stile ausgewählt haben):

Diese müssen nun auf den Server hochgeladen werden, am besten in einen Ordner wie assets/fonts.
Nun müssen die Schriften nur noch im Stylesheet (vor allen anderen Styles) eingebunden werden:

@font-face {
  font-family: Roboto-Light;
  src: url(assets/fonts/Roboto-Light.ttf);
}

Ich binde hier nur die Robot-Light ein. Solltest du mehrere verschiedene Schriftarten oder Schriftstile verwenden wollen, musst du diese alle einzeln einbinden.

Abschließen benutzen wir die Schrift (hier richten wir auch ein Fallback ein, falls der Browser die Schrift nicht benutzen kann oder sie falsch rendert):

body {
  font-family: 'Roboto-Light', Fallback, sans-serif;
}

Solltest du bereits Google-Fonts nutzen, kannst du auch einfach das bereits eingebundene Stylesheet herunterladen, auf deinen eigenen Server laden und dann die URL anpassen.

Google verbietet dies, soweit ich herausgefunden habe, nicht.

✔︎✔︎✔︎✔︎✔︎

Altlasten abwerfen: Internet Explorer Unterstützung beenden

Level: Anfänger
Sprachen: HTML

Der Internet Explorer, eigentlich egal in welcher Version, bereitete Webentwicklern immer wieder Sorgen.

So gibt es heute fast keine Seite, die nicht mit einem

<!--[if lt IE 9]>
 Sonderregeln für Internet Explorer "less than" Version 9
<![endif]-->

Kommentar ausgestattet ist. Sieht man sich aber an, dass der Internet Explorer nur noch ca. 1% des weltweiten Traffics ausmacht (siehe W3Counter) und nach meinen Erfahrungen praktisch nur noch im Notfall genutzt wird, kann man seinen Code ohne Bedenken nun um diese „Kommentar-Befehle“ reduzieren.

Auf einer der Seiten, welche ich verwalte, die allerdings nicht als Repräsentativ gilt, ist die Nutzung des Internet-Explorers sogar eine absolute Ausnahme:

Von rund 15.000 Besuchern (mitunter auch Bots) nutzten im letzen Monat nur 8 den Internet Explorer. Das entspricht gerade einmal 0,053% der User. Für diesen minimalen Anteil an Nutzern immer wieder zu testen, Änderungen auch an alte Versionen des Internet Explorers anzupassen und auf User-Feedback zu warten, lohnt sich einfach nicht.

Selbst der Internet Explorer 11 sollte laut Microsoft Mitarbeitern nicht mehr genutzt werden, auch wenn dieser weiterhin mit Sicherheitsupdates versorgt wird.

Ich empfehle aber vor allem die Anpassungen für <= IE9 zu entfernen.
Dafür müssen nur alle

<!--[if lt IE 9]><![endif]-->

Kommentare aus dem Quellcode entfernt werden.

Um die Website nicht komplett in den alten Browsern zu zerschießen, reicht es, die HTML5shiv-Bibliothek (Download von GitHub) in die Seite einzubinden:

<!--[if lt IE 9]><script src="/js/html5shiv.js"></script><![endif]-->

Alle anderen Anpassungen für den Internet Explorer können dann gelöscht werden. Dies gilt natürlich nur, wenn HTML5 und seine Komponenten auch genutzt werden.

Achtung: Natürlich sollte weiterhin gegen alle Versionen von Microsoft Edge getestet und entwickelt werden! Auch kann Beenden der Unterstützung eines älteren Browsers zu einem User-Verlust führen. Prüfe daher deine Statistiken genau, bevor du die Internet Explorer Unterstützung beendest.

Hierzu noch ein passender Artikel, warum man den Internet Explorer nicht mehr unterstützen sollte: Why you should stop supporting IE10, IE9 and IE8.