Auf Smartphones soll alles klein sein. Der Platz über demFold ist wichtig. Trotzdem soll alles erkenn- und lesbar bleiben. Das gilt nicht nur aber auch für Logos. Mit responsiven Logos lässt sich das Problem lösen.
Nicht alles lässt sich einfach verkleinern
Texte und Bildern lassen sich für responsive Design relativ problemlos an kleinere Endgeräte, z.B. Smartphones, anpassen. Kürzere Zeilen und größere Schrift sichern gute Lesbarkeit. Bilder lassen sich je nach Motiv meist proportional skalieren oder beschneiden. Das ist bei anderen Elementen, also auch bei Infografiken und besonders Logos, ist das schwieriger.
Alle Teile des Logos müssen in jeder Größe sauber und gut erkennbar dargestellt werden. Auf dem Desktop ist das auch überhaupt kein Problem. Auf Smartphones möchte man so viel Fläche, wie möglich, für Inhalte reservieren. Der Platz über dem Fold ist knapp. Hier wird es schwierig. Kompromisse sind gefragt.
Responsive Logos sind eine elegante Lösung
Die Website responsivelogos.co.uk macht anhand einiger Beispiele bekannter Marken vor, wie es funktionieren kann. Das Logo wird schrittweise vereinfacht, anstatt es nur immer weiter zu verkleinern. Als erstes erwischt es meist den Claim. Am Ende steht oft nur noch die Bildmarke ohne Namen.
Eine technisch einfache Lösung mit Mediaquerries
Technisch ist das nicht besonders anspruchsvoll. Das Logo ist meist ein Bild. Dieses kann, wie alle anderen Elemente auch, mit Hilfe der Mediaquerries nicht nur verkleinert, sondern auch ausgetauscht werden.
Aber so radikal geht es nicht immer
Einerseits bleibt die Erkennbarkeit nur bei bekannten Marken erhalten, wenn man (fast) alles weglässt. Andererseits ist es bei vielen Unternehmen ein wichtiger Grundsatz, dass das Logo absolut unverändert bleiben soll. Eigenmächtig sollte hier nichts verändert werden. Aber, vielleicht könnt ihr gemeinsam mit den Kunden darüber nachdenken, ob bei kleiner Darstellung Ausnahmen sinnvoll sind. Perfekte Darstellung auch auf kleinster Fläche ist auch wichtig.
- Mehr Infos unter http://www.responsivelogos.co.uk
so richtig responsive ist das ja nicht, das ist eher so Spriting on Logos. Ich hab mal beschrieben, wie es richtig geht: http://maddesigns.de/responsive-svg-logos-2361.html
Hi Sven,
Mir ging es gar nicht so um die Technik (ich bin Designer). Ich fand die Art und Weise, wie da mit den Logos umgegangen wird erwähnenswert und interessant.
Aber, danke für den Tipp. Das ist tatsächlich die technisch bessere und elegantere Lösung.