Geschrieben von Christian Schnettelker

Schlagwörter: , ,

Diabetes Münster

Mein diesjähriges Sommer-Großprojekt ist nun abgeschlossen und online gestellt, es handelt sich um die komplette Neuerstellung der Webseiten des Zentrums für Diabetes und Gefäßerkrankungen in Münster.

Diabetes Münster / Praxis
Die ursprünglichen Webseiten waren stark überaltert und nicht an mobile Geräte wie Smartphones und Tablets angepasst. Zwar hat die bisher mit dem Webdesign betreute Firma eine überarbeitete Version vorgeschlagen, das neue Layout fand in den Augen der Verantwortlichen aber keinen Gefallen.

Nachdem mich Dr. Rose kontaktiert hatte erstellte ich unverbindlich einen alternativen Layoutvorschlag, welcher ohne größere Änderungen schließlich akzeptiert und in monatelanger Arbeit ausgearbeitet wurde.

Das Ergebnis ist seit letzten Montag im Netz zu sehen.

Diabetes Münster / Institut
Der neue Auftritt ist, wie sein Vorgänger, in drei Bereiche mit jeweils einer speziellen Farbe aufgeteilt:

  • Diabetes-Praxis (Blau)
  • Institut für Diabetesforschung (Lila)
  • Diabetes-Sportstudio (Grün)

Die Farben waren vorgegeben, in den jeweiligen Bereichen sind jetzt die Überschriften, Schaltflächen und Design-Elemente wie Trennstriche jeweils passend gefärbt.

Diabetes Münster / Sportstudio
Zentrales Gestaltungselement der Seiten ist eine sich über die volle Fensterbreite erstreckende Bilderzeile. Diese wurde dergestalt angelegt, dass die linke Kante des mittleren Bildes immer mit der linken Kante des Menüs, der Überschrift und des Textes auf einer Linie liegt.

Die Bildzeile ist ab 1600 Pixel Bildschirmbreite besonders groß und verkleinern sich stufenweise im Rahmen der jeweils zur Verfügung stehenden Breite.

Auf der Startseite von Praxis, Institut und Sportstudio laufen die Motive als Bildwechsel durch, auf den Unterseiten geschieht das nicht. Hier können die Bilder aber von Hand mittels der „Touchscreen-Wischtechnik“ und der Maus bewegt werden.

CMS

Als neues Content-Management-System löst eine aktuelle Version von Joomla das bisher verwendete Typo3 ab. Für einige Unterseiten habe ich spezielle Joomla-Komponenten über component-creator.com erstellt, welche die Seitenpflege deutlich vereinfachen:

und der aufwändige Trainingsplan auf http://www.diabetes-muenster.de/sportstudio/trainingsplan.html.

Trainingsplan

Dieser stellte durch die Spalten eine besondere Herausforderung da. Jeweils rechts muss in der ersten Spalte die Zeiten stehen, gefolgt von Spalten der Wochentage, je nachdem, wieviel Platz vorhanden ist.

Die Wochentagsspalten dürfen aber nun nicht beliebig verkleinert werden, damit der Text noch lesbar bleibt und nicht zu weit nach unten umgebrochen wird. Also müssen Spalten ggf. nach unten verschoben werden, wobei wieder eine führende Spalte mit den Zeiten notwendig ist.

Hier die Ansicht auf einem Notebook, drei Wochentage (Montag, Dienstag und Mittwoch) sind sichtbar:

Trainingsplan Notebook
Die nächsten Wochentage (Donnerstag und Freitag) mit führender Zeiten-Spalte werden sichtbar, wenn man weiter nach unten scrollt:

Trainingsplan Notebook (unten)
Auf dem Tablet im Landscape-Modus reicht der Platz nur noch für zwei Wochentags-Spalten, also Montag und Dienstag:

Trainingsplan Tablet (Landscape)
Im Portrait-Modus wird es noch etwas enger, es ist jeweils nur ein Wochentag sichtbar:

Trainingsplan Tablet (Portrait)
Die Anpassung war knifflig, zeigt aber sehr schön, welch‘ tolle Möglichkeiten das responsive Webdesign bietet.

SEO

Leider musste ich feststellen, dass die bisher beauftragte Firma einige SEO-Fehler hinterlassen hatte. Unter anderem war auch der berühmte Home-Fehler dabei, hier in Form des unheimlich informativen Eintrags „Startseite“ im Seitentitel.

Auch gab es bisher keinerlei „sprechende URLs“, alles wurde suchmaschinen-unfreundlich über dynamische Parameter gesteuert. Es verwundert also nicht, dass der SEO-Score einen gewaltigen Sprung von bescheidenen 42% auf einen sehr guten Wert von 88% machte.

Dies alles sollte sich mittelfristig durch höheren Positionen in den Suchmaschinen-Ergebnissen bemerkbar machen.

Kommentare

Kommentare

  1. Pascal schrieb:

    Eine sehr schöne Seite mit überzeugendem Farbkonzept. Besonders das responsive Menü über mehrere Ebenen gefällt mir in der mobilen Ansicht.

    Verwundert mich, dass man tatsächlich auch mal schöne Websites, hinter denen Joomla werkelt, entdecken kann.

    - Pascal

    • Aha, noch einer, der aufgeblieben ist, um die US-Wahl zu verfolgen.

      Vielen Dank für das große Lob. Das Layout hat mit Joomla jedoch wenig zu tun, es wurde in HTML gestaltet und dann zu einem Joomla-Template umgewandelt.

      Ich halte es für die große Stärke von Joomla, dass dies relativ einfach möglich ist und daher hatte ich mich vor drei Jahren auch auf dieses CMS festgelegt. Wenn andere nicht so gelungene Seiten betreiben ist das demnach nicht das Problem von Joomla.

      Allerdings hat es auch seine Schwächen, z.B. der Update-Prozess und einige seit Jahren nicht gelöste Ärgernisse wie die Artikel-ID in der URL, wenn eine Seite nicht im Menü aufgeführt wird. Das „ideale“ CMS muss wohl erst noch erfunden werden.

Kommentar schreiben

Aufgrund neuer rechtlicher Bestimmungen habe ich die Kommentarfunktion meines Blogs vorübergehend deaktiviert und muss Sie vorerst bitten, Kommentare per Email an mail [at] manoftaste.de zu senden.