Vektorisierend – Die neue ep-3-Internetseite

Ein neues Jahr – eine neue Internetseite. Natürlich nicht ganz neu, aber komplett überarbeitet. Neue Gestaltung und neues Fundament. Und natürlich an den neuesten Stand der Erfahrung und Technik angepasst. Und weil es sonst niemandem auffallen würde, geht es in diesem Beitrag um die kleinen Besonderheiten der neuen Seite.

Vektoren statt Raster

Das Hintergrundbild, Logo und alle Illustrationen und Icons sind keine üblichen Rastergrafiken mehr (wie z.B. JPG oder PNG) sondern Vektorgrafiken (SVG). Nach Jahren des Wartens unterstützen nun alle modernen Webbrowser dieses neue Bildformat. Und das hat eine Reihe von Vorteilen:

• Hochauflösende Bildschirme, wie sie in modernen Smartphones und Tablets mittlerweile Standard sind, zeigen Vektorgrafiken immer knackig scharf an. Da Vektorgrafiken eine praktisch unendliche Genauigkeit haben, kann man unsere Webseite zum Beispiel beliebig vergrößern: Illustrationen und Text bleiben stets absolut scharf.
• Vektorgrafiken kann man in jeder beliebigen Größe auf der Internetseite verwenden, vom kleinsten Icon bis zur riesigen Illustation.
  

• Die Dateigröße von Vektorgrafiken beträgt selbst bei sehr umfangreichen Abbildungen nur ein Bruchteil von dem, was normale Bilder benötigen – das sorgt für schnellere Seiten und glücklichen Mobilfunk.
• Da SVG-Grafiken im Kern XML-Dateien sind, können sie prinzipiell sowohl client- als auch serverseitig sehr einfach verarbeitet werden. Zudem lässt sich die Dateigröße für die Übertragung noch weiter komprimieren, zum Beispiel per GZIP-Kompression.

Selbstverständlich sind Vektorgrafiken nicht die Lösung aller Probleme:

• Fotos lassen sich nach wie vor besser als JPG- oder PNG-Dateien speichern.
• Zwar sinkt der Datenverbrauch beim Herunterladen und Zwischenspeichern erheblich, dafür wird der Prozessor bei der Anzeige stärker gefordert, da er aus den Vektorinformationen ein neues Bild rendern muss.
• Ältere Webbrowser unterstützen SVG-Grafiken wenig oder gar nicht. Dies betrifft insbesondere den Internet Explorer in Version 8 und älter (welcher aber ohnehin kaum mehr unterstützt wird).

Fazit: Für Logos, Illustrationen, Icons und (stilisierte) Layout-Elemente sind SVG-Grafiken ein wahrer Segen.

Und sonst so?

Die weiteren Verbesserungen sind weniger spektakulär: Umsetzung mit WordPress, und damit Zusammenführung von Internetseite und Blog (bisher getrennt), Kompilierung aller CSS-Dateien (inklusive Bootstrap) in eine einzige, optimierte Datei (Stichwort LESS). Kompromissloser Einsatz modernster HTML5- und CSS3-Techniken.

Dazu die übliche Kost von qualitativen Webseiten: Komplett responsiv, passt sich also von Smartphone bis Tablet an jede Bildschirmgröße an (erwähnten wir schon wie praktisch SVG ist?). Zudem sorgfältig durchgeführte Optimierungen für den Ausdruck. Seitlich mitlaufendes Menü. Nach Bedarf nachladende Projektbilder (Stichwort Lazy Loading). Verpackt in ein sauberes, einfach zu erweiterndes und verwaltendes WordPress-Theme.

Achja, und zweisprachig ist sie auch geworden.

Bitte lesen Sie unsere Hinweise zum Datenschutz bevor Sie diese Buttons nutzen