Meine Kolleg*innen baten mich den Artikel „Responsive Design – Locker bleiben in 5 Lektionen“ von 2014 zu aktualisieren – wegen SEO, „Evergreen Optimization“, „Audience Retargeting“ und so. Aber die Grundaussage des Artikel stimmt heute noch genauso – nur, dass es nach 11 Jahre eben keine neue Erkenntnis mehr ist. Nach wie vor gilt:
Konzentriere dich auf das Gesamterscheinungsbild der Website und die Wirkung deines Artikels – und lass locker, wie einzelne Inhalte und Worte ganz genau angeordnet sind.
Während wir anfangs noch dafür werben mussten, Websites überhaupt für alle Bildschirmgrößen nutzbar zu machen, ist das zehn Jahre später zum Standard geworden. Die Grundlagen sind gelegt, jetzt folgt der nächste Schritt: Nach Responsive Design folgt Responsive Storytelling!
Der Anspruch, dass man alle Elemente eines Artikels auf allen Geräten sehen kann genügt nicht – jetzt widmen wir uns den Feinheiten! Beim responsiven Storytelling geht es darum die Wirkung einer Geschichte in klein und groß, in aufgereihter und gestapelter Form beizubehalten. Dafür schauen wir jetzt ganz genau hin.
Responsive Design – zum Ausprobieren
Am Anfang steht die Erkenntnis, dass der eigene Screen an dem wir unsere Geschichte optimal aufbereiten, nur eine mögliche Ansicht des Artikels ist – oft sieht es die Mehrheit der Lesenden ganz anders. Was sich seit 2014 zum Glück geändert hat: Inzwischen ist das responsive Testen als Simulation direkt im Browser eingebaut und im Arbeitsalltag unserer Redakteur*innen fest integriert.
Werden auch Sie Responsive-Tester:
Das funktioniert mit dieser Anleitung auf jeder Website – so können Sie leicht die Ansicht auf verschiedenen Devices simulieren.
Mit oder ohne Silbentrennungsau-
tomatik?
Beim responsiven Testen der groß gesetzten Headlines fallen stets die Worttrennungen ins Auge: ganz ohne Trennungen purzeln die Enden deutscher Wortzusammensetzungsverlängerungskunstwerke seitlich aus dem Smartphone. Mit einer vollautomatischen Trennung entstehen aber teilweise schwer lesbare Wortfrag-
mente.
Manchmal überragen lange Worte ohne Trennzeichen die Bildschirmbreite …
… oder es entstehen durch vollautomatisierte Trennungen schwer lesbare Wortfragmente.
Schnell-Lese-Elemente haben oft große Buchstaben und sind damit anfällig für eigenartige Umbrüche – aber gerade diese Elemente sollten unbedingt leicht zu lesen sein.
Die Magaziniker haben sich hier für eine automatische, der jeweiligen Sprachgrammatik folgende, Silbentrennungen entschieden – kombiniert mit regelmäßigen, manuellen Eingriffen in Einzelfällen. Locker bleiben – damit der Text stets gut lesbar ist.
Richtig groß, wenn Bildschirm-füllend
Eine Fotografie oder ein Film, die den ganzen Bildschirm ausfüllen, das wirkt tatsächlich immer großzügig. Aber eben auch sehr unterschiedlich an einem breiten Desktop-Bildschirm oder einem kleinen Handheld-Smartphone.
Die meisten Filme werden in 16:9 produziert: optimiert für eine Hollywood-Leinwand. Aber selbst wenn Ihr Bildschirm ein exakt gleiches Seitenverhältnis aufweist, fallen im Browser-Betrieb diverse Pixel für Menüleisten oben und Taskleisten unten weg: Am Ende muss der Film vertikal beschnitten werden, um den Bildschirm in der Breite komplett ausfüllen zu können.
Wenn Sie den gleichen Film auf einem senkrechten Smartphone-Screen Bildschirm-füllend zeigen möchten, fällt entsprechend seitlich mehr als die Hälfte des Inhalts weg.
Diese Erkenntnis ist kein Grund dafür, auf dieses Format zu verzichten – aber es zeigt, dass bereits beim Erstellen der einzubindenden Medien an die Responsivität beim Ausspielen gedacht werden muss. Zum Beispiel eine Diskussion wichtiger Menschen am Konferenztisch, würde mobile auf nur die Tischplatte mit gestikulierenden Händen reduziert.
Bilder responsive: Ganz klein wird groß – und umgekehrt
Selbst wenn auf das Bildschirm-füllende verzichtet wird, führt das Seitenverhältnis von Bildern zu großen Unterschieden. Weltkarten werden zum Beispiel meistens im Panorama-Format abgebildet: Am Desktop wird damit die große, weite Welt spürbar – am Smartphone auf Bildschirmbreite geschrumpft, sind europäische Länder meist nur noch wenige Pixel groß und kaum voneinander zu unterscheiden. Portraitbilder dagegen rutschen vom Desktop aus der Marginalspalte neben dem Text auf einmal als fast bildschirmfüllende Bilder in die zentrale, schmale Textspalte am Smartphone.
Auch hier gilt: Testen, testen, testen! Wenn die gewünschte Wirkung auf einem Device nicht stimmt, kann nachjustiert werden: vielleicht genügt mobile ein Ausschnitt Zentral-Europas? Oder das nur begleitende Randspalten-Bild wird ans Textende und nur mit halber Bildschirmbreite eingebunden – oder mobile einfach ganz ausgeblendet.
Mobile first? Target Group first!
Oftmals liest man, dass „Mobile first“ das Gebot der Stunde sei; also das Entwerfen und Entwickeln zuerst für Smartphones und nur sekundär für die Desktop-Nutzung. Zum einen ist das Gestalten auf dem schmalen, kleinen Screen oft herausfordernder, zum anderen haben viele populäre Websites inzwischen fast nur noch Smartphone-Besucher*innen.
Bei einigen Websites unserer Kund*innen sehen wir in unseren Nutzungsanalysen mit Matomo auch die mobilen Geräte in der Überzahl, die Mehrheit unserer Digitalmagazine aus dem B2B-Bereich werden aber nach wie vor meistens tagsüber, am Desktop-Arbeitsplatz aufgerufen und gelesen. Darum lautet unser erstes Gebot: Kenne Deine Zielgruppe!
Und dann ist da noch die Technik:
- Es lohnt sich, mit responsiv gut getesteten Formatvorlagen zu arbeiten: die CSS-Anweisungen für verschiedene Breiten sind dann erprobt und Redakteur*innen haben Erfahrung gesammelt, auf welche Feinheiten beim Content zu achten ist.
- Responsivität hat viel mit Größen und einhergehender Text- und Bildwirkung zu tun – manchmal aber geht es auch um die Bedienbarkeit: denn einen Hover-Effekt spürt man nicht ohne Maus!
- Und schließlich: wir nutzen im Code „Responsive Images“ damit aus einer hinterlegten Auswahl von Abmessungen immer nur die gerade benötigte Bild- und damit Dateigröße geladen und abgewartet werden muss.
Am Ende gilt nach wie vor: Locker bleiben!
Es gibt viele Ansichten eines Artikels und die müssen nicht alle identisch aussehen. Sie müssen aber alle gleich gut lesbar sein und die Bilder und Videos stets ihre Wirkung entfalten – denn dann wirkt Ihre Erzählung auf allen Devices!
Loading...