Archiv

Webdesign-Blog

13. Februar 2016

Mediation fürs Handy - DGM responsive

Vor ein paar Monaten trat Dr. Stefan Kracht, Vorstands-Vorsitzender der Deutschen Gesellschaft für Mediation an mich heran, um eine Anpassung der Webseite an die inzwischen zahlreich genutzten mobilen Geräte zu besprechen.

Screenshot der PC-Ansicht

Mein anschließend überarbeitetes Layout beinhaltet, neben besagter Anpassung an die mobilen Geräte und einem neuen Dropdown-Menü, auch wieder optische Verbesserungen: die Schrift ist eine Stufe größer und damit besser lesbar, gestalterische Elemente des MEDIATORS, dem Nachrichtenblatt der DGM, wurden übernommen. Insgesamt wirkt alles großzügiger, leichter und luftiger.

 
dgm-responsive-Notebook

Anpassung an die mobilen Geräte

Komplett neu ist das dezente blau/weiße Kopfbild. Auf dem Notebook sieht das dann so aus, siehe Abbildung.

Auch sind die Bedienelemente auf allen Seiten nun vereinheitlicht, es finden gut erkennbare blaue Schaltflächen mit FontAwesome-Symbolen statt der bisherigen Text-Links Verwendung. Das sieht besser aus und bietet auf den mobilen Geräten große Vorteile bei der Bedienung.

Der goldene Schnitt

Achten Sie einmal auf den neuen, blau/weißen Seitenkopf; dieser ist so programmiert, dass er (innerhalb gewisser Grenzen) im Verhältnis des Goldenen Schnittes zum Textbereich steht.

Simulation der Tablet-Ansicht

Das Problem mit den Kopfbildern ist meinst folgendes: auf einem PC mit großem Bildschirm sieht ein großzügiger (hoher) Kopf gut aus. Wird das Fenster jedoch in der Höhe reduziert oder die Seite auf einem Netbook mit halbierter Bildschirmhöhe betrachtet, verdeckt ein hoher Kopf zuviel vom Inhalt, sodass zu oft und umständlich nach unten gescrollt werden muss.

Bisher hatte ich das Problem meist halb-statisch mit den „Media-Queries“ in CSS gelöst; ab einer gewissen Schwelle sprang der Kopf einmalig auf eine reduzierte Höhe. Dank neuer Techniken erfolgt die Anpassung nun dynamisch je nach Seitenhöhe – vorausgesetzt der verwendete Browser lässt dies zu. Man lernt ja nie aus, ich natürlich auch nicht.

Simulation einer Smartphone-Ansicht

Smartphone (Handy)

Die kleinste Ansicht ist wie immer die auf dem Smartphone. Bei neueren Projekten steht hier nun, neben dem Symbol für ein anklickbares Menü rechts oben, die Bezeichnung „Menü“ oder „Navigation“, da es doch immer wieder Leute gibt, die in den kleinen Ansichten verzweifelt das Menü suchen.

Unicode

Im Zuge der Modernisierung wurden nicht nur alle Seiten auf HTML5 und das „responsive Webdesign“ umgestellt, jetzt liegen sowohl die Seiten, die PHP-Skripte, meine LTXP-Toolbox und die MySQL-Datenbank in der Zeichenkodierung UFT-8 des Unicodes vor.

Die Konvertierung der MySQL-Datenbank zu Unicode geschah mittels eines einfachen, aber genialen PHP-Skripts, welches nicht nur die Datenbank, sondern auch deren Inhalte konvertiert. An dieser Stelle einmal ein herzliches Dankeschön an den Autor, das hätte ich selber so wohl nicht sauber hinbekommen und wahrscheinlich alles mühsam von Hand wandeln müssen.

 

Suchmaschinenoptimierung (SEO)

Hinsichtlich Suchmaschinenoptimierung hat sich diesmal nicht ganz so viel getan, da die Seiten schon in der bisherigen Version recht gut optimiert waren. Der SEO-Score zeigt weiterhin einen sauberen (grünen) Wert von 84% an. Da jedoch einige HTML-Fehler im Mediatorenverzeichnis, die mir erst im Nachhinein aufgefallen sind, korrigiert werden konnten, wird sich die Überarbeitung wohl auch hier langfristig positiv auswirken.

Zudem haben, das hat sich denke ich inzwischen herumgesprochen, an mobile Geräte angepasste Seiten bei Google seit April 2015 einen Ranking-Vorteil.