Explorer Magazin für kleine Geräte

oder: Der Wahnsinn geht weiter, das Magazin wird "responsiiiiiiieeeeeef" ...

Durchgefallen ...Nachdem wir das Layout des Explorer Magazins im Mai 2014 runderneuert hatten, mussten wir eine Baustelle erst einmal ausklammern:

Die Eignung des Magazins für mobile Geräte mit kleinen Bildschirmen- wie z.B. Smartphones.

Schließlich sind wir kein kommerzielles Magazin und deshalb darauf angewiesen, dass unser Sponsor den Aufwand für die Umstellung trägt ...

Natürlich konnte man das Explorer Magazin auch auf dem Smartphone lesen, aber man musste zoomen und scrollen und die Bilder ragten schon über den Rand hinaus, kurzum: Schön war es nicht!

Das Kriterium, dass man Webseiten auf allen möglichen Geräten lesbar anzeigen kann, nennt sich Responsiveness. Klingt recht simpel, will man aber "gewachsene" Webseiten derart anpassen, liegt die Tücke wie so oft im Detail und der Aufwand kann schnell ins Unermessliche wachsen.

Neben der Motivation, unseren Lesern guten Service zu bieten, trug auch Google das Seine dazu bei: Beim Google-Check fiel die Seite durch, was auf Dauer mit einem schlechteren Ranking geahndet wird.

Schnell waren die Hauptprobleme identifiziert:

  • Die Titelseite ist nicht geeignet - zu viele Informationen für einen kleinen Bildschirm: Da muss ein "Hamburger" her!
  • Viele Tabellen verschieben die Daten hin zum Unleserlichen oder zwingen den Leser zu intensivem Scrolling
  •  Bilder passen nicht immer auf das Display
  • Formulare sehen wenig gefällig aus, da die Umbrüche Felder und Fixtexte ungünstig trennen.
Irgendwie nicht praktisch auf dem Mobilgerät ... Irgendwie nicht lesbar auf dem Mobilgerät ...

Also heißt es Ärmel hochkrempeln und los geht es mit der Titelseite:

Die fixen Menüpunkte, die als grünliche Schaltflächen links angeordnet sind, werden zu einem Hamburger links oben zusammengefasst, die "Kacheln" zu den neuesten Artikeln bleiben bestehen. Test auf dem Smartphone: sieht gut aus!

Nun zu den Tabellen - dynamisch werden diese für Mobilgeräte umgebaut:

Breite Tabelle Schmale Tabelle

Ebenso wie die Tabellen werden auch die Bilder dynamisch skaliert.

Die Formulare erhalten eine Rundumerneuerung und nach all der Arbeit fragen wir Google nach seiner Meinung:

Test bestanden!

Und damit die Umstellung komplett ist, benutzt das Explorer Magazin nun auch das HTTPS-Protokoll, aber keine Angst: Links, Lesezeichen oder ähnliches müssen nicht geändert werden, der Server des Magazins leitet alles perfekt um.

Nun wünschen wir viel Vergnügen bei der Lektüre auf den Mobilgeräten - und dabei auf der Straße bitte nicht gegen Hindernisse laufen..!

©  2017 Sixta Zerlauth