Icon-Font mit IcoMoon erstellen

Font-Bibliotheken wie font-awesome und glyphicons sind sehr praktisch aber oft auch überdimensioniert, wenn man nur ein paar Icons verwenden möchte. Für diesen Fall kann man mit IcoMoon seinen eigenen Icon-Font erstellen.

icomoon-bild_im_blogpost

1. Seite aufrufen und IcoMoon App auswählen

icomoon-icon-erstellen-ideesign-koeln-auswahl

Zunächst muss die Seite icomoon.io aufgerufen werden. Oben rechts auf der Seite wechselt man zur IcoMoon App, mit der man seinen eigenen Font erstellen kann.

2. Icons hochladen oder aus anderen Fonts auswählen

icomoon-icon-erstellen-ideesign-koeln-iconauswahl

Über „Import Icons“ wählt man seine selbst erstellten Icons von seinem Rechner aus. Die Dateien müssen im SVG Format vorliegen, damit IcoMoon sie versteht. Enthaltene Schriften sollten unbedingt in Pfade umgewandelt sein, da sonst Darstellungsfehler entstehen können und auch die Dateigröße zu groß ist.

Möchte man keine eigenen Icons verwenden, kann man sich aus den verschiedenen kostenlosen Fonts wie FontAwesome, ElegantIcons oder LineIcons seine Icons individuell zusammenstellen und sich so seinen eigenen Wunsch-Font bauen.

Als nächstes auf „Generate Fonts“ klicken, um den Font zu erstellen und weitere Einstellungen zu tätigen.

3. IcoMoon Font: Einstellungen

icomoon-icon-erstellen-ideesign-koeln-download-einstellungen

Bevor man den Download-Button klickt, kann man mit Klick auf das Zahnrad rechts daneben weitere Einstellungen vornehmen.

 icomoon-icon-erstellen-ideesign-koeln-options

In den Einstellungen kann man Klassennamen vergeben oder Attribut-Einstellungen für CSS (Klassen-Pre- und Postfix) ändern. Das kann nützlich sein, wenn man mehrere Sets benutzt. Icomoon erstellt aber auch schon von Haus aus sinnvolle Bezeichnungen, wenn sie denn eindeutig benannt wurden. So wird, wenn das Icon „star.svg“ (wie in unserem Beispiel) heißt, auch die vergebene CSS-Klasse von IcoMoon zur späteren Verwendung diesen Namen enthalten. Nach dem Prinzip: „prefix-iconname-postfix“.

4. Dateien aus dem Download

Nach dem Download erhält man eine Anzahl von verschiedenen Dateien. Die wichtigsten für den direkten Gebrauch sind die Schrift-Dateien im Ordner „Fonts“ und die style.css, die man nachher in sein eigenes Webprojekt einbinden muss. Die Angaben zur Einbindung des Fonts kann man aus der style.css in sein eigenes Stylesheet übernehmen, den Ordner Fonts legt man einfach neben seinem Stylesheet ab.

Wie man dann den Webfont benutzt, ist in der Stylesheet-Datei selber erläutert.

icomoon-icon-erstellen-ideesign-koeln-dateien

Viel Spaß mit dem eigenen Icon Font!

mmenu – Das flexible Off-Canvas Menü

Es gibt viele Möglichkeiten Menüs mobil darzustellen. Ein äußerst erfolgreiches Prinzip ist das Off-Canvas Menü, das von außerhalb in den Screen geflogen kommt. Das jQuery Plugin mmenu bietet vielseitige Optionen für ein kreatives, responsives Menü.

mmenu_responsive_offcanvas_menu-ideesign_koeln-post_img

Was bietet das Javascript Plugin?

Mit dem mmenu ist es möglich, aus dem aktuellen Menü ein off-Canvas Menü zu erstellen. Mit an Bord sind professionelle Animationen, Farbwahl, mehrere Ebenen. Es kann so gut wie alles eingestellt werden, um es den eigenen Anforderungen anzupassen. Es kann festgelegt werden, von welcher Seite es in das Sichtfeld rutscht oder welche Animationen im Menü zu sehen sind. Zudem kann es aussehen wie eine App-Auswahl, wie man sie z.B. vom mobilen Betriebssystem Android kennt. Es kann ein komplettes Suchverzeichnis erstellt werden, ähnlich einem Telefonbuch, sodass der Nutzer einfach den Menüpunkt finden kann, den er braucht. Der Kreativität für dieses Plugin sind beinahe keine Grenzen gesetzt, sofern man weiß, welche Einstellungen getätigt werden müssen.

Nutzer kennen Off-Canvas

Das wichtigste an dem Menü ist seine Benutzerfreundlichkeit. Das Off-Canvas Menü ist ein bewährtes Prinzip, das aus der Welt der nativen Apps übernommen wurde und Webseiten genau so wirken lassen kann. Somit sollte jeder Nutzer, der mit Smartphones vertraut ist, das Menü einfach verstehen und sich direkt zurechtfinden können. Zudem bietet es eine gelungene Abwechslung zu den teilweise unübersichtlichen und zu oft verwendeten Drop-Down Menüs mobiler Webseiten.

Kosten (Stand September 2016)

Derzeit kostet die kommerzielle Lizenz für ein einzelnes Projekt für das mmenu jQuery Plugin 7.50$. Für eine unlimitierte Anzahl an Installationen kostet die kommerzielle Lizenz 50$. Damit bekommt man für sein Geld Einiges geboten, denn das Plugin bietet eine einfache Integration in bereits bestehende CMS Systeme durch seine relativ simple Syntax. Außerdem steht es direkt als WordPress Plugin zum Download bereit.

Download

Wenn man sich einen Eindruck des Plugins machen möchte, kann man es auf der Webseite des Herstellers in Aktion sehen, herunterladen und kostenlos ausprobieren.

Zum Plugin

5 Tipps für eine schnellere Webseite

In Zeiten von HighSpeed-Internet und mobilen Endgeräten möchte man nicht lange auf Informationen warten oder unnötig Datenvolumen verbrauchen. Abgesehen davon ist die Ladegeschwindigkeit einer Webseite ein Google Ranking-Faktor. Wir geben 5 Tipps, wie man die eigene Webseite schneller macht. 

5-tipps-fuer-schnellere-webseite-ideesign-koeln

Nutzer lesen das Internet nicht wie ein Buch, sondern suchen sich gezielt ihre Informationen. Deshalb sollten diese möglichst schnell und einfach gefunden werden. Da sind einige Sekunden Wartezeit bis zum Aufbau einer Webseite eine gefühlte Ewigkeit und die Absprungraten von langsamen Webseiten entsprechend hoch. Wir haben ein paar der einfachsten Möglichkeiten zusammengetragen, Webseiten zu entschlacken und die Ladegeschwindigkeit zu erhöhen. Wer direktes Feedback haben will, ob seine Seite schneller geworden ist oder wie der aktuelle Status der Seite ist, kann sie auf Google Pagespeed Insights testen.

1. Dateien reduzieren und zusammenlegen

Jede Zeile Code, ob CSS, HTML, PHP oder andere, müssen vom Server und dem Browser des Nutzers verrechnet werden. Je mehr Code, desto länger dauert es, bis eine Webseite für den Nutzer vollständig angezeigt wird. Deshalb ist es wichtig, Dateien möglichst klein und präzise zu halten. Leerzeichen und Absätze, die zwar die Übersichtlichkeit des Codes verbessern, sind der Performance der Seite abträglich.

Eine Webseite lädt schneller, je weniger Anfragen ein Browser an einen Server stellen muss. Für jede eingebundene Datei wird eine Anfrage gestellt. Daher ist es naheliegend, am Ende der Entwicklungsarbeiten gleiche Dateitypen in einer Datei zu vereinen und diese dann zu minimieren. Wichtig ist dabei, dass man nur die Dateien zusammenlegt, die an einer ähnlichen Stelle oder zur selben Zeit auf der Webseite geladen werden sollen. So sollte man z.B. JavaScript-Dateien im Footer der Seite einbinden, damit sie nach dem Rendern der gesamten Seite geladen werden. Das Minimieren kann man mit seinem Code-Editor oder mit einem Online-Tool wie minifycode.com erledigen.

2. Bilder optimieren

Bilder sind die Teile einer Webseite, die die Ladegeschwindigkeit am meisten strapazieren können. Am besten werden sie verlustfrei mit einem Programm komprimiert. Die kostenpflichtigen Programme wie Adobe Photoshop und Affinity Photo (Mac) eignen sich mit ihrer vielseitigen Bildbearbeitung und differenziert einstellbaren Kompression sehr gut für den Webbereich.  Im kostenlosen Segment bieten sich als Alternativen Gimp (Windows & Mac) und Paint.NET (Windows) an. Darüber hinaus gibt es Online-Tools, mit denen man die Dateigröße von Bildern reduzieren kann. Es empfiehlt sich eine Kompression ohne sichtbare Bildfehler.

Kostenpflichtig:
Adobe Photoshop (Windows & Mac)
Affinity Photo (Mac)

Kostenfrei:
Gimp (Windows & Mac)
Paint.net (Windows)
JPEGmini Lite (Mac)

Online:
compressor.io
fotosverkleinern.de

3. Daten serverseitig komprimieren

Ein weiterer Punkt bei der Speed-Optimierung einer Webseite ist die serverseitige Komprimierung von Daten. Unkomprimierte Dateien brauchen länger, um geladen zu werden, wodurch das Nutzer-Erlebnis leidet. gzip oder deflate sind Kompressionsalgorithmen für den Server. Sie komprimieren die Dateien auf dem Server, bevor sie vom Browser des Nutzers geladen werden. Um das zu erreichen, muss die .htaccess Datei auf dem Server dahingehend angepasst werden, dass dieser die Inhalte der Webseite komprimiert an den Browser des Besuchers übergibt. Vorausgesetzt, der Server unterstützt die Komprimierung von Dateien. Für einen Apache-Server funktioniert die Kompression mittels DEFLATE mit folgendem Code:

Die Angabe „AddOutputFilterByType DEFLATE“ gibt an, dass ein gewisser Dateityp mit dem „DEFLATE“ Algorithmus komprimiert werden soll. Die Angabe „text/html“ definiert hier speziell, dass Text im HTML-Format komprimiert werden soll. Diese Angabe kann durch verschiedene Dateitypen ersetzt werden. Im angelegten Fall wurden svg+xml Bilder mit der „AddType“ Angabe als Dateityp hinzugefügt, da dies standardmäßig nicht der Fall ist.

Eine ausführliche englische Anleitung dazu findet sich hier. Für einen IIS-Server gibt es bei Microsoft eine deutsche Anleitung.

4. Skripte in den Footer und asynchron laden lassen

Zunächst sollten sämtliche Skripte in den Footer, damit sie gemäß der DOM-Struktur nach den HTML-Elementen geladen werden. Es gibt aber auch Angaben, um alle Skripte und CSS-Angaben im Header-Bereich zu lassen und trotzdem die Performance nicht zu beeinträchtigen. Durch eine einfache Angabe in der Einbindung lassen sich Skripte, die von anderen Webseiten kommen, asynchron laden. Das bedeutet, die Skripte werden erst geladen, wenn der Rest der Webseite bereits geladen wurde. Denn sollte die Quelle des Skripts lange für eine Antwort brauchen oder ist nicht erreichbar, würde das die Webseite erheblich verlangsamen. Daher kann folgender Code für Skripte benutzt werden, die von anderen Webseiten hinzugeladen werden sollen. Diese Angaben stellen für moderne Browser (IE ab Version 10) kein Problem dar und sollten wie gewünscht ausgeführt werden.

1. Das „async“ – Attribut

Die Angabe „async“ lässt externe Skripte gleichzeitig mit der Seite laden, sodass sich die Webseite vollständig aufbauen kann, während das Skript lädt. Wichtig dabei ist die Angabe „async“ (ohne Anführungszeichen) hinter der Pfadangabe des Skripts.

2. Das „defer“ – Attribut

Die Angabe „defer“ lässt Skripte erst ausführen, nachdem die Seite geparst wurde. Damit ist die Seite bereits nutzbar, nur das Skript wird noch hinzugeladen. Das eignet sich eher für Skripte, die nicht sichtbar ausgeführt werden. Skripte, die essenziell für die Nutzerführung sind, empfehlen sich mit „async“ zu laden und/oder in den Footer zu packen.

5. Webhosting-Paket überprüfen und ggf. Provider wechseln

Viele Provider bieten für Beträge unter 10 € pro Monat das klassische Shared-Webhosting. Das bedeutet, dass die eigene Webseite auf einem Server mit sehr vielen anderen Kunden liegt. Je nach Größe des Providers und des gebuchten Pakets können das durchaus ein paar hundert Kunden sein, mit denen man sich einen Server teilt. Das wiederum bedeutet, dass die Leistung des Servers durch alle darauf enthaltenen Webseiten geteilt werden muss. Wenn dann zufällig dreihundert WordPress-Installationen auf diesem Server vorhanden sind, geht das natürlich zu Lasten meiner eigenen Website-Performance.

Die hochpreisigen Shared-Webhosting-Pakete zeichnen sich in der Regel dadurch aus, dass sie einerseits zusätzliche Leistung bieten (mehr E-Mail-Adressen, mehr Speicherplatz, mehr FTP-Zugänge, etc.), aber oft auch eben dadurch, dass sie auf Servern liegen, die deutlich weniger Kunden verwalten müssen, als die aus dem Niedrigpreis-Sektor. Und das mündest zwangsläufig in eine bessere Performance.

Nicht alle Provider weisen darauf hin, wie viele Kunden sie parallel auf einem Server verwalten. Und die Angabe ist natürlich auch nicht immer gleichbedeutend, da nicht jeder Kunde für eine Ressourcen-intensive Webseite steht. Aber es gibt durchaus Hoster, die ihre Paketpreise mit solchen Angaben ergänzen, bzw. lohnt es sich durchaus, beim eigenen Provider anzurufen, das zu erfragen und ggf. ein Upgrade durchzuführen.

Fazit

Nicht erst seitdem Google den PageSpeed offiziell als Rankingfaktor eingeführt hat, ist es wichtig, die Ladegeschwindigkeit der eigenen Webseite zu überprüfen und ggf. zu optimieren. Das Komprimieren von Dateien und Bildern ist dabei der erste Schritt. Das asynchrone Laden von JavaScript-Dateien und die serverseitige Komprimierung erfordern sicher ein wenig mehr als reines Basiswissen. Aber für alles gibt es gute und kostenlose Online-Tools, die einem dabei helfen, die Nutzerfahrung durch Erhöhung des PageSpeeds zu verbessern. Und wenn alles nicht hilft, hilft ja vielleicht der Wechsel zu einem anderen Hoster.