Fehlende Bilder von Live-Server im Entwicklungs-System anzeigen

Wenn man an einem bestehenden Projekt arbeite, das bereits live gegangen ist, dann ist es manchmal notwendig, dass man sich den aktuellen Stand einer Datenbank vom Live-System holt, um lokal Dinge zu testen. Aber wie sieht es mit den Mediendateien aus, die in der Zwischenzeit dazu gekommen sind und die schnell mehrere Gigabyte an Größe umfassen? Nun, oft wird man auch diese benötigen, vor allem, wenn man am Design arbeitet. Aber wie hält man diese auf dem aktuellen Stand mit der Live-Seite? Die gute Nachricht: das ist gar nicht notwendig und in diesem Blogbeitrag möchte ich euch zeigen, wie man es anders lösen kann.

Nehmen wir also an, dass ich euch gerade eine aktuelle Kopie der Live-Datenbank in euer lokalen Entwicklungs-System gespielt habt. Dann werden wahrscheinliche einige Bilder nicht angezeigt, da ihr ja die URL in der Datenbank auf die lokale Domain geändert habt und diese Bilder lokal nicht gefunden werden können. Ihr könntet auch nun natürlich mit dem Live-System verbinden und alle Bilder synchronisieren, was aber schnell viele Megabyte oder Gigabyte benötigt. Wenn ihr gleichzeitig an mehreren Projekten arbeitet, habt ihr sehr schnell denn Platz auf eurer Festplatte verbraucht. Ihr könnt aber auch einfach den gesamten Uploads-Ordner inklusive aller Unterordner (oder zumindest alle mit den hochgeladenen Mediendateien) löschen und sie stattdessen von der Live-Seite laden lassen.

Fehlende Dateien vom Live-Server laden

Falls ihr in eurer lokalen Entwicklungsumgebungen einen Apache Webserver einsetzt, müsst ihr hierzu lediglich folgende Zeilen in eure .htaccess eintragen:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^wp-content/uploads/(.*) https://xyz.com/wp-content/uploads/$1 [R=302,L]
</IfModule>

Diese Zeilen fügt man ganz oben in der .htaccess Datei vor allen anderen Angaben ein.

Wie es funktioniert

Der Apache Server prüft über die beiden RewriteCond, ob die Datei oder der Ordner, der angefragt wird, nicht existiert. Sollte dies der Fall sein greift die RewriteRule, die alle Aufrufe von Dateien im Ordner wp-content/uploads auf die Live-Seite umleitet.

Es werden also alle Bilder, die nicht lokal vorhanden sind, vom Live-Server abgerufen. Ist bei diesem das Caching richtig eingestellt, passiert dies in der Regel auch nur einmal pro individueller URL.

Somit kann man nun alle Bilder auch auf der lokalen Umgebung sehen, ohne diese vorher runterladen zu müssen. Man kann die Bilder sogar lokal über die Medienübersicht bearbeiten. Sobald man die Datei speichert, wird die Originaldatei sowie die anderen Bildgrößen im lokalen System abspeichert. Diese Änderungen werden aber natürlich nicht wieder ins Live-System zurückgespielt. Man kann hiermit aber schnell und gefahrlos lokale testen.

Einige Einschränkungen

Diese Technik funktioniert in den allermeisten Fällen. Falls der Webserver nicht bei der Generierung des HTML-Codes allerdings prüft, ob die Datei auch wirklich lokal vorhanden ist, dann scheitert es, denn in der Regel passieren solche Prüfungen auf die Existenz von Dateien über eine PHP-Funktion, die dann die Datei nicht finden kann, da unser Trick über den Webserver umgesetzt wird.

Da aber oft eher nur Dateien auf Existenz geprüft werden, die nicht im Uploads-Ordner, sondern in den Ordnern der Themes und Plugins gespeichert sind, sollte das kein allzu großes Problem darstellen. Im Zweifel müsstet ihr dann solche Dateien doch runterladen. Diese zu finden könnte aber etwas knifflig sein.

Eine weitere Einschränkung ist die Notwendigkeit einer Verbindung zum Webserver. Wenn man lokal entwickelt hat man ja in der Regel den Vorteil, dass dies auch ohne Internetverbindung möglich ist. Ich schreibe auch oft meine Blogbeiträge, wenn ich etwas im Zug unterwegs bin, wo die Internetverbindung häufiger abbricht. Falls ihr also Dateien unbedingt für die lokale Entwicklung benötigt, müsste ihr sie wohl doch synchronisieren.

Funktioniert es auch mit anderen Entwicklungsumgebungen?

Das Gleiche ist auch bei der Verwendung des nginx-Servers in der lokalen Entwicklung möglich. Da man aber beim nginx nicht einfach eine Datei im Verzeichnis der WordPress-Installation verwenden kann, müsste ihr folgende Zeilen in die nginx-Konfiguration hinzufügen:

location ~ ^/wp-content/uploads/(.*)$ {
        try_files $uri @missing;
}
location @missing {
	return https://xyz.com$uri;
}

Fazit

Man sollte immer mit einer lokalen Kopie einer Website ändern, wenn man daran entwickelt. Diese auf dem aktuellen Stand zu halten ist allerdings sehr zeitintensiv. Durch den Wegfall der Synchronisation von Mediendateien kann aber sehr viel Zeit und vor allem Speicherplatz eingespart werden.

Bewegungen auf einer Webseite für eine bessere Barrierefreiheit reduzieren

Dies ist mein zweiter Beitrag zum #FokusBarrierefreiheit Themenmonat Januar. Heute möchte ich über ein eher wenig bekanntes Thema zur Barrierefreiheit berichten. Viele von euch wissen vermutlich, wie man eine Website für Menschen optimiert, die visuelle Beeinträchtigungen haben oder blind sind. Aber es gibt auch andere Beeinträchtigungen und heute möchte ich auf eine weniger bekannte aufmerksam machen.

Motion-triggered vestibular spectrum disorder

Die beste Übersetzung, die mir einfällt wäre “Schwindelgefühle bei bewegten Animationen”. Das Thema ist wir gesagt eher unbekannt, kann aber für betroffene erhebliche gesundheitliche Folgen haben. Sie können zu einem vestibulären Anfall (epileptischen Anfall) führen. Daher sollten Animationen, Effekte und Bewegungen vermieden werden.

Selbstverständlich können Animationen und Effekte einen Webseite bereichern und zu einem tollen Erlebnis beitragen. Aber möchten man Menschen wirklich durch diese Animationen gesundheitlich schädigen? Sicher nicht. Was kann man also tun, um mit diesem Problem umzugehen. Zuerst einmal sollte man sich darüber informieren. Ich habe leider keine deutschsprachigen Beiträge hierzu gefunden, kann aber die Artikel von Mozilla und A List Apart empfehlen. Es gibt noch einige andere Elemente einer Webseite, die einen solchen Anfall auslösen können, aber ich möchte mich heute darauf konzentrieren, wie ihr mit ein wenig CSS-Code die Animationen auf einer Webseite reduzieren könnt.

Die “prefers-reduced-motion” Media-Query

Glücklicherweise unterstützen euch viele moderne Browser und Betriebssysteme, eine Webseite weniger gefährlich zu gestalten. Ihr könnt einfach die prefers-reduced-motion Media-Query verwenden und eure Animationen mit dieser verschachteln. Sollte jemand, der eure Seite besucht eine entsprechende Einstellung gesetzt haben, werden Animationen nicht mehr abgespielt. Oder aber ihr verwendet die Media-Query, um damit zuvor gesetzte Animationen zu deaktivieren. Mehr zu der Media-Query findet ihr in einem englischsprachigen Artikel von CSS-Tricks.

Als Beispiel für eine Animation könnt ihr euch mal die aktuelle Startseite des WordCamp Europe 2020 ansehen. Hier wird dsa Logo durch eine Animation aufgebaut. Selbst wen diese Animation keine schnellen und großen Bewegungen enthält, so könnte es dennoch sein, dass Menschen mit einer solchen Beeinträchtigung lieber ein statischen Logo bevorzugen würden.

Das Design-Team hat es geschafft, das Logo alleine mit reinem HTML und CSS zu erstellen. Die Animation war aber nicht in die angesprochene Media-Query gesetzt worden. Wenn man nun also einfach alle Animationen ausschaltet, würde das Logo dar nicht erst sichtbar werden. Wie können wir das Problem also stattdessen lösen?

Die Animation “vorspulen”

Eigentlich ist die Lösung super einfach. Wir suchen uns alle Elemente der Animation heraus und verringern die Verzögerungen und die Dauer auf null Sekunden, womit das Logo sofort sichtbar wird. Der Code sieht also wie folgt aus:

@media (prefers-reduced-motion: reduce) {
    .wceuicon *,
    .wceuicon:before,
    .wceuicon:after,
    .wceu-logo-text * {
        animation-delay: 0s !important;
        animation-duration: 0s !important;
    }
}

Mit diesen wenigen Zeilen Code haben wir effektiv die Animation “deaktiviert” und die Webseite damit barrierefreier gemacht.

Reduzieren der Animation

Eine andere Lösung wäre eine Reduzierung der Animation. Ein problematischer Teil des Logos ist vermutlich der “blinkende Cursor” und die “einfliegenden Punkte”. Wir könnten also eine Animation erstellen, bei der die Punkte und der Cursor einfach an der endgültigen Position einfach erscheinen und die Animation sehr langsam abspielen lassen. So haben wir noch immer eine Animation, aber eben mit einer starken Reduzierung der Bewegungen.

Testen der Media-Query

Ihr werdet euch nun vermutlich fragen, wie ich diese neue Media-Query testen könnt. Viele moderne Betriebssysteme haben eine entsprechende Einstellung. Mozilla hat eine gute Übersicht zu den unterstützten Browsern und Betriebssystemen und erklärt, wo man die Einstellung findet. Auch auf der Google Developer Platform findet ihr nützliche Tipps zu der Media-Query und wie man sie testet.

Windows 10

Falls ihr Windows 10 verwendet, dann findet ihr die Einstellung unter “Systemsteuerung | Erleichterte Bedienung | Center für erleichterte Bedienung | Erkennen von Bildschirmobjekten erleichtern”:

Hier aktiviert ihr einfach die Checkbox “Alle nicht erforderlichen Animationen deaktivieren (wenn möglich)”. Diese Einstellung reduziert nicht nur die Animationen, sondern auch in anderen Programmen, die diese Einstellung unterstützt. Nachdem ihr die Einstellung übernommen habt, müsst ihr die Seite mit der Animation neu laden. Ihr solltet nun die optimierte/reduzierte Version sehen.

Android 9

Ich habe eine solche Einstellung auch auf meinem Smartphone gefunden. Sucht hier einfach nach “Bedienungshilfen” in den Einstellungen. Dort solltet ihr dann einen Schalter “Animation entfernen” finden.

Ähnliche Einstellungen findet ihr auch unter macOS und auf dem iPhone. Leider konnte ich auf meinem Arbeitslaptop mit Manjaro-Linux keine solche Einstellung findet. Wenn ihr wisst, wo diese zu finden ist, lasst es mich bitte wissen!

Fazit

Eine Webseite komplett barrierefrei zu machen ist sehr schwierig, da es viele Aspkete zu beachten gibt und manche nicht so bekannt sind wie andere. Wenn es aber darum geht, hier Prioritäten zu setzen, dann solltet ihr immer damit anfangen, was Menschen potentiell schaden könnte. Danach könnt ich euch mit den anderen Aspekten beschäftigen. Ich kann hierzu auch den englischsprachigen Vortrag von Sarah Brodwall auf dem letzten Accessibility Club Summit Berlin empfehlen.

Ich hoffe, ihr habt einen neuen Aspekt zur Barrierefreiheit kennengelernt und ich konnte euch überzeugen, es auf eurer Webseite einzusetzen. Falls ihr es schon kannten und eine Animation angepasst hat, dann hinterlasst bitte einen Kommentar, damit andere davon lernen können.

Ein paar einfache Schritte, um die Navigation barrierefreier zu machen

Ein neues Jahr, ein neues Blog-Projekt.  Torsten Landsiedel  hat seine Idee von regelmäßigen Blogbeiträgen wiederbelebt. Dieses Mal muss aber nicht jede Woche ein neuer Beitrag geschrieben werden, sondern es reicht ein Beitrag alle zwei Wichen aus, sowie ein Kommentar, ebenfalls alle zwei Wochen aus. Da ich schon in den vorherigen Projekten immer mit dabei war, lasse ich es mir natürlich auch dieses Mal nicht nehmen. Aber wie auch zuletzt, werde ich wieder zweisprachig bloggen. In der einen Woche in Englisch und dann in der Folgewoche mit dem gleichen Thema in Deutsch. So kommen also hoffentlich in diesem Jahr je 26 englische und deutsche Beiträge dazu.

Themenmonat Barrierefreiheit

Simon Kraft startet das neue Jahr ebenfalls mit einem kleinen Blog-Projekt. Er hat den Januar zum Themenmonat für Barrierefreiheit erklärt und alle, die Blogbeiträge, Podcasts oder Videos produzieren dazu aufgerufen, sich mit dem Thema zu beschäftigen. Unter dem Hashtag #FokusBarrierefreiheit sollen diese dann gesammelt werden. Dies ist also mein erster von zwei Beiträgen zu diesem wichtigen Thema, das mir persönlich sehr am Herzen liegt. Es werden im Laufe der Jahre aber vermutlich noch ein paar folgen.

Barrierefreie Navigationen

In diesem ersten Blogbeitrag im Jahr 2020 möchte ich euch zeigen, die ihr mit ein paar einfachen Schritten euere Website-Navigation barrierefreier machen könnt, sollte sie es nicht bereits sein. Der Fokus liegt hier vor allem auf der Bedienbarkeit mit Tastatur.

Verbessert die visuelle Barrierefreiheit

Die Navigation ist vermutlich das wichtigste Element einer jeden Website. Sowohl Menschen mit voller, als auch solche mit eingeschränkter Sehkraft finden die meisten Inhalte eurer Seite über die Navigation. Daher sollte die Navigation für alle “visuell barrierefrei” sein. Das betrifft nicht nur Menschen, sondern auch technische Hilfsmittel wie etwa sogenannte Screenreader.

Versteckt die Untermenüs nicht

Wird ein Screenreader verwendet, dann können nur solche Elemente vorgelesen werden, die auch „sichtbar“ sind. Wenn also ein Untermenü über eine CSS-Regel ausgeblendet wird, dann sind diese Menüpunkte für Menschen die Screenreader und anderen Hilfsmittel verwenden nicht sichtbar.

Versteckt sie anders

Für eine klassische horizontale Navigation wird oft eine CSS-Regel verwendet, die in etwa wie folgt aussieht (hier am Bespiel des Yoko Themes von Elmastudio):

#branding #mainnav ul ul {
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#branding #mainnav ul li:hover > ul {
	display: block;
}

Das Untermenü wird hier standardmäßig ausgeblendet. Bei einem “Hover” wird die display Eigenschaft dann auch block geändert, wodurch das Untermenü sichtbar wird.

Stattdessen kann man aber die Elemente einfach aus dem Viewport, dem sichtbaren Bereich, heraus verschieben, so dass die Elemente auch nicht mehr von Menschen gesehen werden können, aber weiterhin von Screenreadern:

#branding #mainnav ul ul {
	display: block;
	opacity: 1;
}
#branding #mainnav ul li:not(.focus):not(:hover) > ul {
	position: absolute;
	left: -999em !important;
	opacity: 0 !important;
}

Mit diesem Code zeigen wir Untermenüs immer an. Wir verschieben sie aus dem sichtbaren Bereich heraus und machen sie transparent – also ebenfalls “unsichtbar” – solange der Hauptpunkt nicht fokussiert ist und nicht die CSS Klasse focus hat.

Stelle einen Fokus-Style bereit

Damit eine Navigation wirklich mit der Tastatur bedient werden kann, ist es nicht nur wichtig, dass alle Menüpunkte erreicht werden können. Es muss auch visuell erkennbar sein, an welcher Stelle der Navigation man sich mit der Tastatur gerade befindet.

Leider deaktivieren sehr viele Themes global die outline Eigenschaft für alle Elemente. Man kann nun also zur Lösung entweder die outline wiederherstellen oder aber den focus Zustand genau so stylen wie den hover Zustand. Für das Yoko Theme würde das wie folgt aussehen:

#branding #mainnav ul li a:focus,
#branding #mainnav ul li a.focus {
	background:#F0F0F0;
	color: #999;
}

Wir setzen hier den Style sowohl für den focus Zustand, als auch für Elemente mit der Klasse focus, was uns im zweiten Schritt helfen wird.

Verbesserung der Barrierefreiheit bei Benutzung der Tastatur

In den meisten Navigationen wird der hover Zustand verwendet, um ein Untermenü einzublenden. Wenn man sich aber mit der Tastatur durch die Seite navigiert, dann wird dieser Zustand nicht aktiviert und CSS-Regel werden nicht aktiv. Um die Navigation also besser benutzbar zu machen, verwenden wir ein wenig JavaScript, um eine CSS-Klasse focus hinzuzufügen, wenn/solange ein Hauptmenüpunkt oder ein Untermenüpunkt fokussiert ist:

( function() {
	var container, menu, links, i, len;
	var navigationContainerId = 'mainnav';
	var menuItemFocusedClass  = 'focus';

	container = document.getElementById( navigationContainerId );
	if ( ! container ) {
		return;
	}

	menu = container.getElementsByTagName( 'ul' )[0];

	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += ' nav-menu';
	}

	// Get all the link elements within the menu.
	links = menu.getElementsByTagName( 'a' );

	// Each time a menu link is focused or blurred, toggle focus.
	for ( i = 0, len = links.length; i < len; i++ ) {
		links[i].addEventListener( 'focus', toggleFocus, true );
		links[i].addEventListener( 'blur', toggleFocus, true );
	}

	/**
	 * Sets or removes .focus class on an element.
	 */
	function toggleFocus() {
		var self = this;

		// Move up through the ancestors of the current link until we hit .nav-menu.
		while ( -1 === self.className.indexOf( 'nav-menu' ) ) {

			// On li elements toggle the class .focus.
			if ( 'li' === self.tagName.toLowerCase() ) {
				if ( -1 !== self.className.indexOf( 'focus' ) ) {
					self.className = self.className.replace( ' focus', '' );
				} else {
					self.className += ' focus';
				}
			}

			self = self.parentElement;
		}
	}
} )();

Wenn ihr dieses Snippet einsetzt, könnt ihr einfach das id Attribut des Containers der Navigation und die CSS-Klasse, die ein fokussiertes Element bekommen soll, in den Zeilen 3 und 4 eintragen. Das Snippet kommt auch ganz ohne Bibliotheken wie jQuery aus und sollte in jedem Theme funktionieren, das die normale WordPress Navigation und keine zusätzlichen JavaScript-Optimierungen für die Navigation verwendet. Es handelt sich bei dem Snippet um eine geringfügig an Version des _s Themes.

Wenn ihr diesen Snippet zu eurer Seite hinzufügt, kann durch alle Haupt- und alle Untermenüpunkte unter Verwendung der Tab-Taste vorwärts und rückwärts navigiert werden.

Bonus: Verbesserung der Benutzerbarkeit auf Tablets

Ein weiteres typisches Problem beim Einsatz des hover Zustands in einer horizontalen Navigation ist der Umstand, dass es einen solchen auf mobilen Geräten wie etwa Tablets nicht gibt. Klickt man also auf einen Hautptmenüpunkt, wird kurzzeitig das Untermenü sichtbar, die Seite wird aber sofort auf den angeklickten Hauptmenüpunkt wechseln.

Wir möchten aber, dass beim ersten Klick auf den Menüpunkt das Untermenü sichtbar wird und erst beim zweiten Klick der Link unter dem Hauptmenüpunkt aufgerufen wird. Hat ein Hauptmenüpunkt keine Untermenüpunkte, dann soll bereits der erste Klick zu der entsprechenden Seite führen. Das kann mit folgendem zusätzlichen Snippet erreicht werden:

( function() {
	var container;
	var navigationContainerId = 'mainnav';
	var menuItemFocusedClass  = 'focus';


	container = document.getElementById( navigationContainerId );
	if ( ! container ) {
		return;
	}

	( function( container ) {
		var touchStartFn, i,
			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

		if ( 'ontouchstart' in window ) {
			touchStartFn = function( e ) {
				var menuItem = this.parentNode, i;

				if ( ! menuItem.classList.contains( menuItemFocusedClass ) ) {
					e.preventDefault();
					var menuItemLength = menuItem.parentNode.children.length;
					for ( i = 0; i < menuItemLength; ++i ) {
						if ( menuItem === menuItem.parentNode.children[i] ) {
							continue;
						}
						menuItem.parentNode.children[i].classList.remove( menuItemFocusedClass );
					}
					menuItem.classList.add( menuItemFocusedClass );
				} else {
					menuItem.classList.remove( menuItemFocusedClass );
				}
			};

			var parentLinkLength = parentLink.length;
			for ( i = 0; i < parentLinkLength; ++i ) {
				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
			}
		}
	}( container ) );
} )();

Das Snippet reagiert auf das ontouchstart Event und stellt die notwendigen Anpassungen für eine Drop-Down-Navigation auf mobilen Endgeräten bereit.

Fazit

Es ist nicht wirklich schwer eine Navigation barrierefrei zu machen. Man muss lediglich ein wenig das CSS anpassen und etwas JavaScript verwenden. Am besten setzt man das Ganze in einem Child-Theme um. Man kann die Anpassungen aber auch als Verbesserung am Originaltheme melden, damit alle, die das Theme einsetzen, davon profitieren. Für das Yoko Theme habe ich die Lösung mal als Plugin zusammengefasst, das alle Verbesserungen enthält. Versucht es doch mal selbst! Installiert euch das Yoko Theme und versucht auf der Seite nur mit dem Keyboard zu navigieren. Installiert und aktiviert dann das Plugin und versucht es erneut. Testet ebenfalls mal die Navigation mit einem Tablet, indem ihr die Geräte-Emulation eures Browsers verwendet.

Im Anschluss solltet ihr mal euer eigenes Theme testen. Ist es bereits barrierefrei? Falls nicht, könnt ihr es mit den hier vorgestellten Techniken einfach barrierefreier machen? Sollte euer Theme ein sogenanntes “Hamburg-Menü” verwenden, dann schaut euch mal den gesamten Code des _s Themes an, das ein solches Menü mit Untermenüs sehr gut bedienbar und barrierefrei umsetzt.

Direktanruf von Website ermöglichen

In meinem letzten Blogbeitrag habe ich darüber geschrieben, wie man Icon-Web-Fonts anpassen und optimieren kann, um Social-Media-Icons zur Website hinzuzufügen. In dem beschriebenen Projekt ging es darum, ein Icon hinzuzufügen, mit dem direkt ein Anruf gestarten werden konnte.

Protokoll für den Anruf von einer Website

Um es jemandem zu ermöglichen, eine Nummer direkt anzurufen, muss man diese einfach in einen normalen Link setzen und hierbei dann das tel Protokoll verwenden. Ein solcher Link sieht dann wie folgt aus:

<a href="tel:+49-12-3456789">012 / 3456789</a>

In diesem Beispiel habe ich einen Ländercode für Deutschland verwenden. Das ist technisch nicht unbedingt notwendig, es ermöglicht es aber, den Anruf auch dann zu tätigen, wenn sich die Person, die den Link klickt, nicht im Inland aufhält. Zur besseren Lesbarkeit können Bindestriche verwendet werden, man kann den Link aber auch als +49123456789 schreiben. Im Linktext kann ein beliebiges Format verwendet werden oder alternative auch ein beliebiger Text wie etwa Rufen Sie uns an, genau wie auch bei jedem anderen Link.

Was passiert, wenn der Lin angeklickt wird?

Auf einem mobilen Endgerät wird in der Regel automatisch die Nummer angerufen oder aber nach der Auswahl einer App gefragt, sollten mehrere Apps installiert sein, mit denen man einen Anruf tätigen kann (wenn etwa die Standard Telefon-App und Skype installiert sind).

Und wie verhält sich ein Desktop-Browser?

Selbst auf einem Desktop-Browser kann ein solcher Link verwendet werden. Klick man ihn mit einem Linksklick an, würde es im Chrome Browser wie folgt aussehen:

Wenn man also ein Smartphone mit dem eigenen Profil verbunden hat, kann man die Telefonnummer an sein Smartphone schicken lassen. Alternativ kann man eine andere App auswählen.

Bei einem Rechtsklick auf den Link ist es ebenfalls möglich, die Nummer an das Smartphone zu schicken. Die Auswahl einer anderen App ist hier leider nicht möglich:

Alternative Protokolle

Das tel Protokoll funktioniert mit normalen Anrufen auf mobilen Endgeräten und dem Desktop. Auf mobilen Endgeräten kann man auch oft eine alternative VoIP App wie etwas Skype verwenden. Aus dem Desktop wird Skype leider nicht angeboten. Möchte man aber über Skype angerufen werden, muss man stattdessen das callto Protokoll verwenden.

Weiterhin gibt es noch das sms und fax Protokoll, die aber nur von sehr wenigen Browsern unterstützt werden.

Fazit

Möchte man es jemandem ermöglichen sehr einfach eine Telefon zu starten, dann sollte man einen solchen Link auf der eigenen Website anbieten. Einen sehr guten Überblick darüber, wie sich verschiedene Browser verhalten liefert CSS-Tricks (Englisch). Warum versuchst du es nicht einfach mal auf deiner eigenen Website aus, falls du bisher noch keinen solchen Link hast?

Icon-Web-Fonts für deine Bedürfnisse optimieren

Auf so gut wie jeder modernen Website findet man Icons. Sie werden sehr oft genutzt, um auf Social-Media-Profile zu verlinken. Oft werden diese Icon-Fonts bereits mit den WordPress-Themes mitgeliefert. Ich verwende mittlerweile für selbst geschriebene Themes in der Regel SVG-Symbole anstalle von Icon-Web-Fonts. Aber wenn man ein Themes nur ein wenig anpassen möchte, dann sind Web-Fonts eventuell doch die bessere Wahl.

Web-Fonts lokal laden

Viele laden Web-Fonts mittlerweile aufgrund der DSGVO lokal. Zu diesem Zweck werden sie meistens runtergeladen und ins Child-Theme integriert. Dies ist die perfekte Gelegenheit, sich darüber Gedanken zu machen, welche Icons man wirklich braucht. Icon-Fonts für Social-Media-Profile sind ein sehr gutes Beispiel dafür, wieso man die Schrift vielleicht anpassen möchte.

Eine Icon-Web-Font anpassen

Nehmen wir die beliebte Schriftart Font Awesome als ein Beispiel. Sie enthält 1544 Icons, 433 dafür für Markenlogos und Social-Media-Icons. Aber braucht man wirklich alle davon? Falls nicht, würde es sich anbieten, nur die Icons zu laden, die man wirklich benötigt. In einem SVG Sprite könnte man überflüssige Symbole einfach löschen, in einer Web-Font ist das etwas schwieriger.

Online-Service für die Anpassung von Schriften

Für ein Projekt stand ich vor der Aufgabe ein Social-Media-Profil zu verlinken, zu dem die im Theme enthaltene Schriftart kein passendes Icon zur Verfügung stellte. Ich habe mich also dafür entschieden, hier Font Awesome einzusetzen. Auf der Suche nach einer Möglichkeit nur einige Icons zu nutzen, bin ich auf die Seite Fontello gestoßen. Hier kann man aus einer Vielzahl an Icon-Web-Fonts auswählen und eine davon ist Font Awesome.

Auf der Website kann man sehr einfach über zwei Suchfelder nach dem Namen einer Schriftart oder dem Namen der Icons suchen. Durch Mehrfachauswahl kann man die benötigten Icon markieren. Hier sollte man eventuell auch gleich Icons auswählen, die man in Zukunft auch noch brauchen könnte.

Auf einem weiteren Tab kann man die Namen der Icons oder den Unicode für die resultierenden Dateien festlegen. Dann lädt man die Datei mit der Auswahl herunter, die die Schrift in verschiedenen Formaten sowie das notwendige CSS enthält.

Viel Bandbreite einsparen

Aber lohnt sich das alles? Font Awesome verwendet 3 Dateien für verschiedene Icon-Typen in jeweils 5 Formaten. Die woff2 Dateien haben insgesamt 165kB. Hinzu kommen noch 57kB für das minifizierte CSS.

Für das beschriebene Projekt benötigte ich aber nur 9 Icons und die woff2 Datei hatte lediglich 4kB. Hinzu kamen noch 2kB CSS (unminifiziert), welche auf 1kB (minifiziert) reduziert werden kann.

Insgesamt können also 2 Dateien/Requests und fast 98% Bandbreite (217kB) eingespart werden.

Optimiere deine Schriften!

Wie du als sehen kann, bietet die Optimierung von Icon-Fonts ein großes Potential Bandbreite einzusparen und deine Seite schneller laden zu lassen. Der einzige Nachteil ist, dass man die Schrift manuell erweitern muss, wenn man neue Icons benötigt.

Wenn man Google Fonts verwendet, kann man über den text Parameter sehr einfach definieren, welche Zeichen man benötigt. Leider findet man bei Google Fonts keine Icon-Web-Fonts und ich konnte auch keine andere Seite finden, die eine ähnliche Funktion anbietet. Solltet ihr eine solche Seite kennen, hinterlasst bitte einen Kommentar mit dem Tipp.