Wer heute den Relaunch einer Website plant, kommt um Responsive Webdesign nicht mehr herum. Es ist mittlerweile schon Standard, Websiten so zu entwickeln, dass sie sich flexibel an die jeweiligen Ausgabegeräte anpassen.
Flexibel anpassen
Damit Headerbilder, Fotos, Grafiken und Icons auch auf den hochauflösenden Retina-Displays von Apple perfekt aussehen, sollten sie in der doppelten Größe (ausgehend von der Desktop-Version) eingebunden werden. Programmiert wird das dann so, dass sie je nach Ausgabegerät kleiner bzw. größer skaliert werden. Vom Prinzip her ganz einfach und unkompliziert. Große Grafiken verursachen jedoch auch eine höhere Ladezeit. Außerdem ist die Entwicklung einer Website ein dynamischer Prozess. Während der Programmierung müssen manchmal nachträgliche Änderungen des Layouts gemacht werden. Insbesondere wenn die Website über sehr viele Icons und Buttons verfügt, kann das recht aufwendig werden. Denn jede einzelne Grafik muss angepasst und ausgetauscht werden. Zudem hat eine große Anzahl von Grafiken auch negative Auswirkungen auf die Ladezeit einer Website.
Besser und schärfer
Mit sogenannten Icon-Fonts kann man dieses Problem minimieren. Sie werden über das @font-face-Attribut eingebunden. Wie der Name schon sagt, handelt es sich hier um Schriftarten und nicht um Bilder. Und das bringt Vorteile. Icon-Fonts sind – wie Schriften auch – vektorbasiert, die Darstellung auflösungsunabhängig und die technische Implementation einfach. Icon-Fonts werden wie „normale“ Schriften behandelt, d. h. sie können mit CSS flexibel verändert werden. Der Browser muss nur eine Schrift-Datei und nicht viele einzelne Icons laden. Das reduziert die Ladezeiten. Ohne größeren Aufwand lässt sich die Farbe im CSS modifizieren, was man sonst mit einem Bildbearbeitungsprogramm tun müsste. Auch sind Icon-Fonts viel besser zu skalieren und mit Effekten wie z.B. Schatten zu versehen. Mit einer kleine Änderung im CSS können so für die gesamte Website Layoutanpassungen vorgenommen werden. Allerdings können Icon-Fonts bisher nur einfarbig dargestellt werden.
Unsere Empfehlungen für kostenlose Icon-Fonts:
... und auch mehrfarbig [Update 7.4.2015]
Icon-Fonts dürfen nun auch bunt sein. In diesem Page-Beitrag wird erklärt, wie das geht.
