Geschrieben von Christian Schnettelker

Schlagwörter: ,

DGM responsive

Der Artikel „Update der dgm-web.de“ war im Oktober 2012 der erste reguläre Eintrag in meinem Blog. Inzwischen sind mehr als drei Jahre vergangen, mein Blog wuchs auf inzwischen 176 (mehr oder weniger) interessante Artikel an und technisch hat sich bei mir in der Zwischenzeit eine Menge getan — wäre ja auch bedauerlich, wenn dem nicht so wäre.
PC-Ansicht
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.

MEDIATOR

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.

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

dgm-responsive-Notebook

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.

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, die mir u.a. im Zusammenhang mit SASS zur Verfügung stehen, 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.

Hier die Ansicht auf dem Tablet:

Tablet-Ansicht

Auch hier wieder: 38,2% Kopf, 61,8% Text – der goldene Schnitt ist schon toll. Die kleinste Ansicht ist wie immer die auf dem Smartphone:

Smartphone-Ansicht

Bei neueren Projekten steht 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 von http://web-union.de/371, 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.

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, durch die neue LTXP-Toolbox 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.

1,2,3,4…

Die Webseiten auf dgm-web.de gehörten zu meinen ältesten Projekten, ich betreue diese schon seit 2001 und dies war, wenn ich richtig gezählt habe, die inzwischen vierte Überarbeitung.

Mal sehen, was noch so alles passiert…

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

  1. Jochen Abitz schrieb:

    Hallo Christian,
    ich verfolge dein Blog erst seit kurzem, habe aber einige Beiträge sehr interessiert gelesen. Da ich gerade dabei bin, mir ein zweites Standbein als Webdesigner zu schaffen (ich komme aus dem Print-Bereich), kann ich viele Anregungen finden. Ich finde Deinen Schreibstil auch sehr frisch und offen.
    Bitte weiter so!

    Viele Grüße
    Jochen

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen und Einzeilern. Eine korrekte Rechtschreibung wird erwartet.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Die Kommentare werden moderiert, offensichtliche SEO-Kommentare nicht veröffentlicht.