LAYOUTGEFLÜSTER
40% aller Besucher hatten ein Smartphone oder Tablet in der Hand, als sie in den vergangenen 12 Monaten eine Bildungsportal-URL aufriefen. Das waren 1,12 Millionen. Doch Redaktionsmitglieder gehen meist nur mit dem großen Schreibtisch-Computer auf ihre Seiten. Zu leicht vergisst man beim Texten und Layouten, dass die Mobil-Ansicht Inhalte anders präsentiert als die Desktop-Ansicht.
Ein schneller Check am PC, wie es auf Mobilgeräten aussieht – geht das? Ja, das ist völlig unkompliziert und nur einen Tastenhieb entfernt.
Unser „Responsives Design“ stellt sich von allein auf unzählige Endgeräte-Modelle ein:
- Der Bildlauf ist länger, die Zahl der Spalten schrumpft,
- Seitenelemente wie Menüs oder Kacheln werden automatisch anders arrangiert,
- manches wird kleiner oder erhält eine andere Gestalt,
- manches wird an andere Stellen verschoben, etwa von der Seite nach ganz unten.
Drücken Sie auf Ihrer Tastatur oben rechts auf die Funktionstaste F12. Damit öffnen Sie die Entwicklerwerkzeuge. Das funktioniert in fast allen gängigen Webbrowsern wie Chrome, Firefox oder Edge.
Rechts oder unten erblicken Sie Programmcode-Zeilen. Aber es muss Sie jetzt nicht interessieren, wie Programmierer damit den Seiten-Code prüfen, Fehler jagen und Dinge testen. Stattdessen kümmern Sie sich um die Anzeige links oder oben. „Bildschirmgrößen testen“ heißt ein Knopf in der Entwickler-Menüleiste bei Firefox, „Geräteemulation umschalten“ bei Edge, oder „Device Toolbar“ bei Chrome. Meist öffnet sich die Anzeige automatisch.
Sie sehen nun eine Emulation: Ihr PC tut jetzt so, als sei er ein Telefon oder Tablet. Der Web-Browser zeigt Ihnen nun an, was Besitzer eines Apple iPhone, Google Pixel oder Samsung Galaxy sehen. Oder die eines Tablets wie Microsoft Surface Pro oder iPad Air. Ihnen steht ein ganzer Gerätekatalog zur Verfügung. Auch Zoomfaktor und Quer- oder Hochkant-Format stellen Sie nach Belieben ein.
Grafisch anspruchsvoller sind Browser-Erweiterungen, die um die jeweilige Bildschirmansicht das zum Modelltyp passende Gerätegehäuse anzeigen. Das nennt man ein Mockup und sieht hübscher als als die nackte F12-Funktion und hilft der Fantasie etwas auf die Sprünge. Solche Plugins finden Sie leicht, wenn Sie in Ihrer Suchmaschine nach „Emulator“ oder „Simulator“ fahnden, natürlich passend für den von Ihnen verwendeten Browser. Ein Beispiel unter vielen ist „Mobiler Simulator“ für Chrome, ein datenschutzfreundliches Tool aus Frankreich. Ein paar Dutzend Android- und Apple-Smartphones, mehrere Tablets und sogar Smartwatches gehören dazu, wobei nicht alle in der Gratisversion enthalten sind.
