Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Marketing

Responsive Icons: The next big thing?

Responsive Icons. (Bild: Iconic.)

Responsive Icons beheben ein Art-Direction-Problem, über das du dir wahrscheinlich noch gar nicht im Klaren bist. Sind Responsive Icons wirklich das nächste große Ding oder eher unnötige Spielerei? Wir verraten dir unsere Einschätzung.

Icons sind das Mittel der Wahl, wenn es darum geht, eine Methode zur Visualisierung in Interfaces zu wählen. Die erste Herausforderung, die mit dem Einsatz von Icons einhergeht, war das Handling der Auflösung. Um auflösungsunabhängig und effizient arbeiten zu können, bieten sich Icon-Fonts und SVG-Grafiken als optimale Lösung an. Ein Problem gehen diese sonst sehr flexiblen Lösungen aber noch nicht an: die Icon-Größe.

Sind unsere Icons nicht längst responsive?

Moment mal! Wir können doch auflösungsunabhängig arbeiten, oder? Ja, das geht – aber mit Einschränkungen. Zwar können wir Icons in den oben genannten Formaten verlustlos hoch- und runterskalieren, eines geht aber aufgrund der Pixel-Struktur unseres Medium verloren: die Details.

Es gibt wunderschöne Vektor-Icons mit plastischer Detailvielfalt, die einen bleibenden Eindruck hinterlassen. Skaliert man diese Icons auf eine kleinere Größe – sagen wir auf Favicon-Format – verlieren sie jegliche Wirkung und werden im schlimmsten Fall unverständlich und somit kontraproduktiv. Man könnte argumentieren, dass diese Icons die falsche Wahl sind und ein Symbol in jeder Größe funktionieren muss. Das Design muss so aufgebaut sein, dass diese detaillierten Icons dazu passen. Falsch sind diese Behauptungen nicht. Und als Webworker ist man sowieso daran gewöhnt, um die technischen Begebenheiten herum zu entwickeln und schwer umzusetzende Design-Ansätze zu abstrahieren.

Im Sinne des Fortschritts sollte aber auch die Gegenfrage erlaubt sein: Warum sollten wir ein Universal-Symbol für alle Viewport-Größen nutzen oder unser Design an der Wahl der Ikonographie ausrichten?

Was responsive Icons anders machen

Responsive Icons, realisiert mit einer Icon Font
Responsive Icons, realisiert mit einem Icon-Font. (Grafik: Iconic)

Glücklicherweise müssen wir das nicht. Responsive Icons sind die Lösung für dieses Art-Direction-Problem. Was kompliziert klingt und an das leidige Thema der Responsive Images erinnert, ist in Wirklichkeit jedoch nur halb so wild. Das Prinzip hinter Responsive Icons ist das gleiche wie beim Responsive Webdesign. Für verschiedene Viewport-Größen werden unterschiedliche Icons definiert, die mit CSS-Klassen im Dokument eingebunden werden können. Das sollte für jeden Webworker ohne Probleme mit einigen Media-Queries und Icons beziehungsweise Icon-Sprites realisiert werden können.

Responsive Icons mit Icon-Fonts

Mit responsiven Icon-Fonts können noch interessantere Ergebnisse erzielt werden. Durch verschiedene Schriftschnitte (font-weight) können unterschiedliche Icons für die jeweiligen Einsatzszenarien angelegt und bequem via CSS gesteuert werden. Das Projekt Iconic demonstriert eindrucksvoll, wie ein Icon mit Hilfe dieser Technik dem Einsatzzweck entsprechend abstrahiert oder mit Details versehen werden kann.

Responsive und interaktive Icons mit SVGs

Iconic geht jedoch noch einen Schritt weiter. Mit SVG können Icons ebenfalls in unsere Projekte eingebunden werden. Je nach Einbindungstechnik werden diese Icons dann mit JavaScript editierbar und können zu interaktiven Alleskönnern mutieren. Es ist nicht länger nötig, unterschiedliche Grafiken für die Anzeige von Zustandsveränderungen anzulegen und Unmengen an Daten über die Leitung zu jagen. Das Icon wird mit der Programmlogik einfach entsprechend angepasst. Snap.svg ist ein spannendes Framework, das diese Möglichkeiten bietet.

Editierbare SVG-Icons
Screenshot: SVG-Icons können mit CSS und/oder JavaScript individuell verändert werden. (Grafik: Iconic)

Durch den Einsatz von SVGs werden Icons noch flexibler. Anders als Icon-Fonts lassen sich SVG-Icons beispielsweise individuell einfärben. Statt komplette Icons in einer Farbe darzustellen, ist es möglich, Bestandteile des Icons entsprechend mit CSS zu verändern.

Sind Responsive Icons die Zukunft?

Einige Autoren bezeichnen Responsive Icons als „The next Big Thing“. Ich würde diese Aussage etwas einschränken. Ohne Zweifel sind Responsive Icons eine tolle Sache, die unsere Möglichkeiten als Webworker zusätzlich erweitern. Sobald Sammlungen wie Iconic fertiggestellt sind und einer breiten Masse zur Verfügung stehen, öffnen sich die Techniken hinter Responsive Icons auch für wengier erfahrene Webworker. Dennoch sind Icons nur ein kleiner Bestandteil eines guten Designs. Somit revolutionieren Responsive Icons das Web bei weitem nicht so weit, um das nächste Große Ding zu werden. Einen klaren Daumen hoch erhalten die kleinen Alleskönner aber auf jeden Fall.

Was benutzt ihr? SVG oder Icon-Font?

Bitte beachte unsere Community-Richtlinien

6 Reaktionen
Joschi Kuphal

Und noch eine Ergänzung aus aktuellem Anlass – gerade gestern hat die Filament Group zusätzliche Ergebnisse ihrer Untersuchung zum Thema IconFonts veröffentlicht:

http://jk.is/7

Demnach sind aktuell etwa 370 Millionen Endgeräte im Einsatz, die IconFonts nicht oder nur unzureichend unterstützen. Keine Kleinigkeit, wenn man der Untersuchung Glauben schenkt.

Joschi Kuphal

Danke für den interessanten Themenanriss! Bringt mich auf Ideen ...

Am Rande ein Kommentar zur Fragestellung "SVG oder IconFonts?": Entgegen der landläufigen Meinung, die flächendeckende Browser-Unterstützung für SVG ließe zu wünschen übrig, nehmen sich IconFonts und SVG-Icons gegenseitig kaum etwas in Sachen Support – gerade auch auf etwas älteren oder ausgefalleneren mobilen Endgeräten (etwa ältere Blackberries unterstützen keine IconFonts – und sind noch fleißig im Einsatz).

Einen entscheidenden Vorteil aber hat SVG: Es lassen sich Fallbacks implementieren, etwa durch den Ersatz mit PNG-Icons, wenn der Browser tatsächlich kein SVG kann. Für IconFonts ist mir dagegen kein realistischer Fallback bekannt. Es gibt Tools, die aus SVG-Dateien automatisiert CSS-Icon-Kits und entsprechenden PNG-Fallbacks erzeugen, etwa das Grunt-basierte "grunticon" (https://github.com/filamentgroup/grunticon) von Scott Jehl oder "iconizr" (http://iconizr.com bzw. https://github.com/jkphl/iconizr) von meiner Wenigkeit. Wer einen Vergleich des Browsersupports von SVG und IconFonts möchte: Scott Jehl hat hierzu umfangreiche Untersuchungen angestellt: https://docs.google.com/spreadsheet/ccc?key=0Ag5_yGvxpINRdHFYeUJPNnZMWUZKR2ItMEpRTXZPdUE#gid=0

Dass Responsive Icons tatsächlich "The next big thing" werden, möchte ich doch sehr bezweifeln. Zunächst müssten weitaus wichtigere Dinge in den Griff bekommen werden, etwa Responsive Images – wo doch (überflüssige) Bilddaten den Großteil des gesamten Internet-Traffics ausmachen. Nett ist die Idee aber allemal – wenngleich ich auch nicht davon ausgehe, dass viele Projekte den Zeit- und Budgetrahmen hergeben werden, wirklich tief in die individuelle Icon-Gestaltung und -Entwicklung einzusteigen. Vielleicht lässt sich zumindest die Integration von Responsive Icons in Websites vereinfachen. Ich werde mal darüber nachdenken, ob ich in die Richtung etwas in meinen iconizr integrieren kann ...

Georg

ich sehe hier im ansatz den gleichen fehler, wie er auch bei bei typo im bezug auf responsive häufig gemacht wird. der viewpoint ist gar nicht entscheident sondern die device-gattung und der damit zusammenhängende betrachtungsabstand. ob ich jetzt ein riesengroßes samsung monster habe oder ein ganz kleines smartphone, der betrachtungsabstand und meine sehstärke bleiben identisch. und diese sind entscheident für eine gute lesbarkeit. ich wähle also für den gleichen berachtunsgabstand auch die gleiche typogröße. was sich verändert, ist die zeilenlänge, nicht aber die typogröße.

Andreas

Verstehe nicht was hier das "The next big thing" sein soll!? Wir setzen Font-Icons schon seit 1,5 Jahren produktiv ein.

Dirk

Ich denke auch, dass man es mit Responsive-Ansätze schnell übertreiben kann. Icon-Fonts, die man ja auch selber zusammenstellen kann (mit icomoon.app zum Beispiel) sind Icons für mich schon "responsive" genug und auflösungsunabhängig.
SVG wird leider noch nicht wirklich unterstützt und fällt damit komplett raus - auch wenn man sich ja nicht immer nach alten Browsern richten sollte.

Kevin

Hmm wie sieht es wohl mit Browser Komptabilität aus ?

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst