Geschrieben von Christian Schnettelker

Schlagwörter: , , ,

Mediteam responsive

Eines der umfangreichen Projekt, in welchem insgesamt gut zwei Wochen Arbeit steckt, war die kürzlich erfolgte Umstellung der Webseiten von Mediteam Münster auf ein „Responsive Webdesign“.

Umstellung ist hier eigentlich der falsche Begriff, denn außer dem Text und einigen wenigen Bildern konnte von den alten Dateien praktisch nichts übernommen und musste alles, inklusive des internen Bereiches und des Ärzteverzeichnisses, völlig neu in HTML5 und CSS erstellt und teilweise in PHP neu programmiert werden.

PC-Ansicht

Tablet und Kindle

Farben, Aufteilung und das Kopfbild blieben im neuen Layout erhalten, es wurde insgesamt großzügiger angelegt. Völlig neu ist hingegen das Dropdown-Menü in der Kopfzeile. Bisher befand sich hier eine längere Linkliste, die jedoch an ihre Grenzen stieß.

Mit dem neuen Menü wird die Übersichtlichkeit erhöht und es hat Vorteile hinsichtlich der reduzierten Anzeigen auf Smartphones und Tablets, wo das Menü zu einem kompakten Schaltfeld schrumpft.

Tablet-Ansicht
In der Tablet-Ansicht, obiger Screenshot, entfällt wie gehabt die rechte Spalte. Obwohl, entfallen ist nicht korrekt, sie wird im unteren Bereich der Webseite angezeigt, da dort auf einigen Seiten unentbehrliche Information bzw. wichtige Schaltflächen platziert sind.

Kindle-Ansicht
Auch auf einem Kindle sieht nun alles übersichtlich aus. hier die Hompage-Galerie mit Screenshots aller erstellten Praxishomepages. Da die bisherigen Bilder teilweise veraltet und nicht in der erforderlichen Qualität vorhanden waren musste ich sämtliche Grafiken für diese Seite neu erstellen. Neu ist auch der Effekt, dass die Praxisnamen per CSS in die Bilder eingeblendet werden.

Kindle-Ansicht (Landscape)
Dreht man das Kindle um sehen die Seiten, hier das Ärzteverzeichnis, wie gewohnt aus: die rechte Spalte ist wieder da, lediglich der Text im Hauptbereich wird etwas schmaler. Das Layout orientiert sich immer an der 80/20-Regel: 80% Inhalt, 10% Rand nach rechts und links.

Smartphone-Ansicht

Smartphone

Auf einem Smartphone wird’s eng, die Anordnung der Texte, Symbole und Schaltflächen muss hier besonders gut überlegt sein. Der Screenshot zeigt das neue Dropdown-Menü, hier in komprimierter Form.

Das interne System zum Pflegen von Praxisnachrichten funktioniert übrigens jetzt auch auf dem Smartphone, allerdings macht es hier durch die beengten Verhältnisse wenig Spaß. Ich denke einmal, dass der Login und die Bearbeitung von Nachrichten nur in absoluten Notfällen am Smartphone gemacht wird.

Fazit

Die Seiten auf mediteam-muenster.de sind Anlaufstelle für die Mediteam-Mitglieder und Visitenkarte der Firma nach außen – hier hat sich auch optisch eine Menge getan. Neben den responsiven Eigenschaften ist die Schrift einen Schritt größer, Schaltflächen werden beim Überfahren elegant ein- und ausgeblendet etc..

Als die Seiten erstmalig erneuert wurden, dass war 2008, waren viele der heutigen Entwicklungen noch nicht absehbar. Das wurde jetzt nachgeholt.

Hinsichtlich Suchmaschinen gab es auch noch Potential zur Verbesserung: sprechende URLs, passend benannte Bilder für die Google-Bildersuche, alt-Tags für alle Bilder und eine flache Dateistruktur führten dazu, dass die Seiten nun einen grünen SEO-Score erreichen.

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

Kommentare

Kommentare

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.