Viele Schriftarten enthalten alle Icons die du brauchst – also warum nutzt du sie nicht?

♥ ☶ ᚓ

Emoticons sind aus sozialen Netzwerken längst nicht mehr wegzudenken. Sie werden vor allem dafür genutzt, Gefühle auszudrücken, etwas was durch Wörter häufig schwer auszudrücken ist. Oder sie untermahlen Geschriebenes, u.a. auch um Missverständnisse des Textes zu umgehen.

Aber nicht nur beim Austauschen von Nachrichten sind Icons hilfreich. Für die User Experience sind Symbole ein wichtiger Bestandteil. Ein ☰ öffnet ein Menü, ein 🔎 führt eine Suche aus und mit einem ♥ favorisiere ich etwas.

Oh, hast du gesehen, wie ich Icons sogar hier im Artikel verwendet habe? Und das ging ganz einfach. Und damit kommen wir zum eigentlichen Thema dieses Artikels. 〠

Ich benutzte dafür keine Icon-Library wie FontAwesome. Für das 〠 zum Beispiel habe ich nur folgendes als HTML geschrieben: 〠
Damit habe ich einfach nur den Unicode für dieses Symbol benutzt. Denn eine Menge Icons haben — genauso wie Buchstaben und Ziffern — einen eigenen Unicode.
Vorraussetzung dafür, dass das Symbol auch angezeigt wird, ist dass die verwendete Schriftart dieses auch enthält.

Finde Icons mit Graphemica

Graphemica sucht Icons im Unicode basierend auf Stichwörter.

http://graphemica.com/

In der Suchleiste gibst du einfach ein was du brauchst. Auf der Detail-Seite zu einem Icon findest du dann die nötigen HTML-Codes zum Einbinden auf deine Seite.

Das „Thin Design“-Phänomen

„Dünn“ als Schönheitsideal existiert nicht nur bei bei Menschen, sondern seit geraumer Zeit auch in der Typografie.
Die Variante „Light“ einer Schriftart ist mittlerweile Standard.

Der Trend geht in diese Richtung, weil Bildschirme immer hochauflösender werden. In Zeiten von 4K und Retina Displays haben UX-Designer deutlich mehr Möglichkeiten Dinge auszuprobieren, die zuvor noch undenkbar waren.

„Thin Design“ scheint ein Teil davon zu sein. Und es beschränkt sich nicht nur auf die Typografie. Wer in letzter Zeit die Design-Entwicklungen von Microsoft (Windows 10) und Apple (OS X, iOS) verfolgt hat, wird feststellen, dass auch Symbole vom Schlankheitswahn betroffen sind.

Hier mal ein Beispiel, das ich auf der Apple-Website gefunden habe:
Screenshot

Wo kann ich „Thin Design“ einsetzen – wo nicht?

Als UX-Elemente halte ich „Thin Design“ für eine angebrachte Sache. Sowohl für Typografie, Symbole, aber auch für andere Controls, wie Buttons, Eingabefelder, Trennlinien.
Linien sollten aber möglichst vektorbasiert erzeugt werden und nicht beispielsweise als Bitmap, um eine Skalierbarkeit zu ermöglichen. Es besteht nämlich die Gefahr, dass die Linien dadurch verschwinden könnten. Bei Webdesign könnten Thin-Elemente beispielsweise per CSS (Border) oder SVG erzeugt werden.

Unangebracht halte ich Thin Design allerdings beim Logo-Design. Ein Logo muss universell einsetzbar sein und eine starke und selbstbewusste Darstellung haben. Besteht eine Bildmarke nur aus dünnen Linien, kann es schnell untergehen, wenn nicht sogar verschwinden. In Fließtexten bieten sich „leichte“ Schriftarten auch nicht an, weil dadurch die Lesbarkeit beeinträchtigt werden kann.

Beim Redesign der Nachrichten-Feeds auf Startmon.com habe ich mich auch mal am „Thin Design“ orientiert.
Du kannst es betrachten, wenn du auf https://startmon.com/ gehst und dann bei „Nachrichten-Feeds“ unten links auf den Maximieren-Button klickst.

Screenshot

Colorganize: Verändertes Logo und geplante Windows App

Colorganize

Colorganize wurde nun komplett auf HTTPS umgestellt. Außerdem wurde das Logo aktualisiert.

Um den Service noch nützlicher zu machen, plane ich eine Windows App. Mit Hilfe von CefSharp soll Colorganize in einem eigenen Fenster geöffnet werden und bequem von der Taskleiste aus gestartet werden können.

In Kürze dazu mehr.

Colorganize.com »

Traffic verringern: JavaScript-Dateien kombinieren

Für das Kombinieren und Minimieren von JavaScript-Dateien, habe ich UglifyJS2 auf GitHub gefunden.

Das ist ein Node.js-Modul. Um es zu verwenden, muss also Node.js installiert sein.

Um UglifyJS2 zu installieren, tippe Folgendes in ein Konsolen-Programm ein (ich benutze gerne PowerShell):

npm install uglify-js -g

Navigiere anschließend mit cd zu deinem Projekt-Ordner.

In meinem Beispiel sieht mein Projekt-Ordner so aus:

  • js
    • jquery.js
    • main.js
    • search.js
  • css
  • index.html

Führe nun diesen Befehl aus:

uglifyjs js/jquery.js js/main.js js/search.js -o js/script.min.js

Zuerst kommt der Befehl uglifyjs, anschließend die zu kombinierenden Dateien (durch Leerzeichen getrennt). Das -o steht für „Output“ und kennzeichnet die Ausgabe-Datei. In diesem Fall js/script.min.js.

Wichtig bei der Eingabe ist auch die Reihenfolge der Dateien.

Anschließend müsste unser Ordner so aussehen:

  • js
    • jquery.js
    • main.js
    • search.js
    • script.min.js
  • css
  • index.html

Und aus:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/search.js"></script>

wird:

<script type="text/javascript" src="script.min.js"></script>

Erweiterungen für Entwicklungsumgebungen?

Brackets Branding
Für Brackets habe ich ein passendes Plugin gefunden: JSCompiler2

Durch eine Konfigurations-Datei können somit auch die Ein- und Ausgabe-Dateien gespeichert werden, sodass für eine Neu-Kompilierung nur noch ein Knopfdruck nötig ist. Ziemlich praktisch also.

Für NetBeans scheint es nichts dergleichen zu geben. Für PHPStorm lässt sich UglifyJS anscheind einrichten: https://www.jetbrains.com/phpstorm/help/minifying-javascript.html


Ich habe auch einen Artikel über das Kombinieren von CSS-Dateien geschrieben: Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Wer in einem Web-Projekt viele verschiedene CSS- und JavaScript-Bibliotheken verwendet, wird feststellen, dass sich im Quellcode eine Menge HTTP-Anfragen anhäufen können:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap-theme.css">
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap-fileinput/css/bootstrap-fileinput.css">
		<link rel="stylesheet" type="text/css" href="./css/main.css">
		<link rel="stylesheet" type="text/css" href="./css/home.css">
	</head>

	<body>
		...
	</body>
</html>

Die feine Art ist das nicht. Der Browser muss so bei jedem Seitenaufruf jede einzelne Datei abklappern. Je nach Internet-Leistung des Besuchers kann das eine Weile dauern.
Und jede Millisekunde, die der Nutzer warten muss, ist eine Gefahr, dass dieser die Seite wieder verlassen will.

In diesem Artikel möchte ich ein paar Tipps geben, wie ihr CSS-Dateien kombinieren könnt, sodass der Browser nur noch jeweils eine Datei abfragen muss.

Los geht’s: CSS-Dateien mit LESS verbinden

LESS ist ein CSS Pre-Prozessor. LESS-Dateien beinhalten erweiterten CSS-Code, welcher anschließend durch einen Compiler zu einer normalen CSS-Datei kompiliert wird.

LESS-Dateien können mehrere LESS-Dateien importieren. Die kompilierte CSS-Datei sieht dann so aus, als hätte ich einfach die einzelnen Codes hintereinander eingefügt.

Beispiel

./less/main.less

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}

./less/home.less

#nav li#home {
	font-weight: bold;
	background-color: orange;
}

./less/style.less

@import url("main.less");
@import url("home.less");

LESS-Compiler generiert CSS

./css/style.css

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}
#nav li#home {
	font-weight: bold;
	background-color: orange;
}

CSS-Datei minimiert

./css/style.min.css

body{font-family:Arial,sans-serif;font-size:14px;color:#000}#nav li#home{font-weight:700;background-color:orange}

Bei vielen CSS-Dateien macht das auf jeden Fall Sinn. Für viele Entwicklungsumgebungen und Code-Editor gibt es passende Plugins, welche aus LESS-Dateien automatisch CSS-Dateien generieren. Unter anderem für Brackets, Visual Studio oder auch NetBeans.

In dem Beispiel habe ich die style.css außerdem noch minimiert (zu: style.min.css). So schrumpft auch nochmal die Größe der End-Datei. Auch hierfür gibt es entsprechende Plugins. Mit CSS Minifier geht das auch online.

Vorher / nachher

Wenn wir das auch noch mit unseren CSS-Frameworks machen wird aus:

<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./lib/bootstrap-fileinput/css/bootstrap-fileinput.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="./css/home.css">

schnell das hier:

<link rel="stylesheet" type="text/css" href="./css/style.min.css">

Was beachtet sei: Drch die Kombinierung ändern sich auch die Verweise. Bei Bootstrap bespielsweise müssen dann die Verweise zu den Font-Dateien geändert werden.
Öffne dafür die bootstrap.less und ersetze alle ../fonts/ durch ../lib/bootstrap/fonts/.

JavaScript-Dateien kombinieren

Gut, die Stylesheets haben wir somit auf eine Datei reduziert. Doch auch bei den JavaScript-Dateien auf einer Seite kann sich einiges ansammeln.

In einem seperaten Artikel möchte ich darauf eingehen, JavaScript-Dateien zu kombinieren.
Der Link wird dann hier angefügt.

Photoshop-Tutorial: Pipetten-Werkzeug außerhalb verwenden

Diese Methode erspart euch einige Copy-Paste-Vorgänge von Farb-Codes.
Mit dem Pipetten-Werkzeug von Photoshop könnt ihr auch ganz einfach Farben von anderen Fenstern auswählen.

Video direkt auf YouTube ansehen.