Geschrieben von Christian Schnettelker

Schlagwörter: , ,

Praxishomepage XL responsive

Erneut hat sich eine Praxis entschieden, die neuen Möglichkeiten eines an die mobile Geräte angepassten Webdesigns zu nutzen. Die im Dezember 2013 fertiggestellte Webseite für Dr. med. Dirk Pappai und Prof. Dr. med. Meinhard Schiller wurde kürzlich entsprechend überarbeitet. Hier ein paar Eindrücke.

Pappai / Schiller Notebook
Das bewährte Layout ist mehr oder weniger gleich geblieben, allerdings mit einer um eine Stufe größeren und so besser lesbaren Schriftart. Die Technik Hintergrund hat sich aber komplett geändert, sämtliche Seiten wurden neu in HTML5 und CSS angelegt.

Panorama

In Sachen „Panoramabilder“ hatte ich im Dezember 2013 schon meine liebe Not, die Aufnahmen passen aufzubereiten. In der jetzigen Fassung „reagiert“ die jeweilige Webseite mit einer Korrektur des linken Offsets, um zu gewährleisten, dass die Motive möglichst auch bei kleineren Auflösungen erkennbar bleiben und das darüberliegende Logo nicht alles verdeckt.

Erreicht wurde das über eine seiten-spezifische Anpassung der background-position, hier ein Beispiel aus http://www.hautarztzentrum-coesfeld.de/leistungen/aesthetische-dermatologie.html

<style type="text/css">
   @media only screen and (min-width: 1000px) and (max-width: 1300px) { #header { background-position:-600px top; }
   }
   @media only screen and (min-width: 650px) and (max-width: 999px) { #header { background-position:-800px top; }
   }
</style>

Die Dame im Bild wandert so in zwei Schritten nach links, wenn die Auflösung nicht mehr ausreicht.
Dropdown-Menü
Da bei der Anpassung neue Seiten hinzukamen zeigt sich das Hauptmenü nun als Dropdown-Lösung. Dadurch lassen sich die einzelnen Leistungen-Detailseiten auch ohne Umweg über die Unterseite „Leistungen“ direkt anwählen. Andererseits ist das aber auch etwas schade, gab ich mir doch soviel Mühe mit der Gestaltung der dortigen Auswahl.

Tablet-Ansicht

Die Ansicht in einem Tablet. Die linke Spalte entfällt hier aus Platzgründen, für das neue Menü ist in dieser Stufe aber noch genug Platz.

Smartphone-Ansicht

Smartphone

In der kleinsten Auflösung wären die Kopfbilder mit dem darüberliegenden Logo nicht mehr zu erkennen, daher ersetzt diese ein olivefarbener Hintergrund. So wird auch erreicht, dass das Logo auf dem „Schlautelefon“ erkennbar bleibt.

Erneut verkleinert sich das Menü automatisch zu einer anklickbaren Box links oben.

Wenn Sie sich selbst einen Eindruck meiner Arbeit machen möchten folgen Sie bitte diesem Link: http://www.hautarztzentrum-coesfeld.de/

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.