Ein Banner, das am Desktop gut aussieht, funktioniert nicht automatisch auf dem Smartphone. Bei der mobilen Bildanpassung geht es um konkrete Prüfpunkte: Wird das Hauptmotiv abgeschnitten? Sind Texte auf kleinen Displays noch lesbar? Verlangsamt die Dateigröße das Laden? Stimmt die Darstellung nach dem Austausch im Backend mit dem Frontend überein? Das hat wenig mit Ästhetik zu tun, sondern ist eine Checkliste, die vor der Veröffentlichung abgearbeitet werden muss.
Warum „sieht gut aus“ als Kriterium nicht ausreicht
Das Seitenverhältnis von Desktop- und Smartphone-Displays unterscheidet sich stark. Dasselbe Bannerbild wird auf einem breiten Bildschirm vollständig angezeigt, auf einem schmalen jedoch oft an den Seiten abgeschnitten oder gestaucht. Die Version, die der Designer am Desktop freigibt, und die, die der Nutzer auf dem Smartphone tatsächlich sieht, sind möglicherweise nicht dasselbe Bild.
Erschwerend kommt hinzu, dass Banner oft Text und Buttons enthalten. Am Desktop erscheint die Schriftgröße passend, auf dem Smartphone ist sie möglicherweise zu klein zum Lesen, oder ein Satz wird durch Zeilenumbrüche unschön getrennt. Wenn man nur nach „sieht die Seitenvorschau gut aus“ urteilt, bleiben solche Probleme vor der Veröffentlichung unentdeckt.
Deshalb sollte das Kriterium für mobile Bildanpassung nicht „sieht es gut aus“ lauten, sondern „sind die Kerninformationen auf schmalen Displays noch vollständig, klar und ladbar?“
Diese Darstellungsprobleme vor der Veröffentlichung prüfen
Erstens: Position des Hauptmotivs. Zeigen Sie das Banner in Smartphone-Breite in der Vorschau an und prüfen Sie, ob zentrale Elemente wie Personen, Produkte oder Logos nicht aus dem Bild fallen. Wenn das Motiv an den Seiten liegt, sollte man einen neuen Zuschnitt erwägen oder das Motiv mehr zur Mitte verschieben.
Zweitens: Text im Bild. Wenn das Banner Werbetexte, Aktionszeiträume oder Button-Beschriftungen enthält, prüfen Sie einzeln, ob diese in Smartphone-Breite vollständig sichtbar sind und nicht abgeschnitten oder unleserlich umgebrochen werden. Text ist Teil des Bildes und lässt sich nicht so einfach ändern wie HTML-Text. Deshalb lieber weniger Text einbauen als zu viel.
Drittens: Position von Buttons und Links. Manche Banner haben klickbare Bereiche direkt im Bild. Nach dem Zuschnitt für Mobilgeräte kann ein Button halb abgeschnitten sein, sodass Nutzer ihn nicht treffen. Testen Sie vor der Veröffentlichung tatsächlich auf dem Smartphone, ob der Klickbereich noch vorhanden ist.
Viertens: Übergang zwischen Bild und Hintergrund. Wenn die Bildränder nicht mit der Seitenhintergrundfarbe übereinstimmen, können auf dem Smartphone deutliche Farbblöcke oder weiße Ränder entstehen. Solche Probleme sind am Desktop nicht immer erkennbar.
Dateigröße und Ladeverhalten mitprüfen
Die mobile Netzwerkumgebung ist deutlich komplexer als ein Büro-Breitbandanschluss. Das Banner ist oft das größte Bild auf der Seite. Ist die Dateigröße nicht kontrolliert, sieht der Nutzer beim Öffnen der Seite möglicherweise zuerst eine leere Fläche, während das Bild langsam lädt.
Die Vorgehensweise: Exportieren Sie das Bild zunächst in der tatsächlichen Anzeigegröße, statt ein überdimensioniertes Bild hart zu verkleinern. Exportieren Sie in einer Breite, die der Anzeigebreite nahekommt, damit das Smartphone nicht ein Bild herunterladen muss, das viel größer als der Bildschirm ist. Beim Format eignen sich für Fotos komprimierte Formate mit kleinerer Dateigröße; für Inhalte mit transparentem Hintergrund oder einfachen Grafiken können Formate verwendet werden, die Transparenz unterstützen. Welches Format konkret gewählt wird, hängt von den vorhandenen Tools und der Backend-Unterstützung ab.
Schauen Sie nach dem Export selbst auf die Dateigröße. Ist sie deutlich zu groß, komprimieren Sie erneut. Achten Sie beim Komprimieren darauf, dass Texte nicht unscharf werden, besonders bei kleinen Schriftgrößen im Bild. Zu starke Komprimierung beeinträchtigt die Lesbarkeit direkt.
Häufig übersehene Schritte beim Banner-Austausch im Backend
Viele Probleme entstehen nicht in der Designphase, sondern beim Austausch im Backend. Die Redakteurin oder der Redakteur erhält ein neues Bild, lädt es hoch, speichert es – und schaut es sich nicht noch einmal auf dem Smartphone an. Das Ergebnis: Im Frontend wird noch das alte Bild angezeigt, oder das neue Bild ist verzerrt.
Für den Austausch empfiehlt sich diese Reihenfolge: Zuerst prüfen, ob die Abmessungen des neuen Bildes den Backend-Vorgaben entsprechen. Nach dem Hochladen nicht nur die Backend-Vorschau betrachten, sondern die Frontend-Seite tatsächlich auf dem Smartphone öffnen. Wenn die Darstellung stimmt, prüfen, ob die Links im Bild noch klickbar sind und die Ziel-URLs korrekt sind. Abschließend den Browser-Cache leeren oder ein anderes Gerät verwenden, um sicherzustellen, dass nicht das zwischengespeicherte alte Bild angezeigt wird.
Wenn das Backend unterschiedliche Banner für verschiedene Geräte unterstützt, muss jeweils geprüft werden, welches Bild auf Desktop und Smartphone angezeigt wird. Vermeiden Sie, dass auf dem Smartphone noch die große Desktop-Version verwendet wird.
Die Prüfung als festen Ablauf etablieren
Mobile Bildanpassung nur dann zu prüfen, wenn man zufällig daran denkt, führt leicht zu Lücken. Sicherer ist es, sie als festen Schritt in den Veröffentlichungsprozess aufzunehmen: Nach dem Hochladen des Banners die Frontend-Seite auf dem Smartphone öffnen und die Punkte Hauptmotiv, Text, Buttons, Dateigröße und Links durchgehen. Erst wenn alles passt, gilt die Veröffentlichung als abgeschlossen.
Wenn mehrere Personen im Team für die Redaktion zuständig sind, können diese Prüfpunkte in eine Veröffentlichungs-Checkliste aufgenommen werden – wer austauscht, prüft auch. So wird auch bei Personalwechsel nicht allein aufgrund von „sieht gut aus“ veröffentlicht.
Beim nächsten Banner-Austausch lohnt es sich, nicht sofort über die Optik zu urteilen, sondern zuerst die Seite auf dem Smartphone zu öffnen, die genannten Punkte durchzugehen und dann zu entscheiden, ob Anpassungen nötig sind.
