avendi-Startseite auf Desktoprechner
avendi-Mitarbeiter-Testimonial
avendi-Ansprechpartner auf Tablet
avendi: Mobildarstellung mit ein- und ausgefahrenen Quicklinks am rechten Rand
avendi-Stellenprofile auf dem Notebook
avendi: Pflege und Betreuung im Alter auf Tablet
avendi-Stellenprofile auf dem Notebook

avendi mit neuem Web­auftritt

attraktiv für Bewohner und Beschäftigte

Die Zahl der pflegebedürftigen Menschen wird in Zukunft wachsen, doch Pflegekräfte sind rar. Die avendi Senioren Service GmbH hat daher ein großes Interesse daran, die eigene Attraktivität sowohl für Beschäftigte wie auch Bewohner in den Einrichtungen einem breiten Publikum zu vermitteln. Von der Werbeagentur magenta erhält der Mannheimer Pflegeheimbetreiber daher eine von Grund auf neu gestaltete und gebaute Website in neuem Design, das für alle üblichen Geräte optimiert ist und mit dem Ziel größtmöglicher Zugänglichkeit und Offenheit entworfen wurde.

Von Beginn an war es das Ziel, die Kontaktaufnahme mit avendi einfach, direkt und niederschwellig zu ermöglichen. Teil dieses Konzeptes sind die Quicklinks am rechten Bildschirmrand. Sie bieten abhängig von der aktuellen Seite verschiedene Telefonnummern und E-Mail-Adressen bzw. eine WhatsApp-Nummer an. Ein Verweis auf Facebook fehlt auch nicht und im Karrierebereich gibt es einen direkten Link zum Bewerbungsformular – Stellenbeschreibung und Standort werden dabei gleich mitübertragen.

Auf schmalen Bildschirmen werden die Quicklinks dezent am rechten Bildschirmrand angedeutet, um nicht zu sehr im Weg zu sein.

Die Brot-und-Butter-Technik, mit der Daten für den Benutzer gespeichert werden, erfreut sich immer noch großer Beliebtheit: Cookies. Um rechtlich auf der sicheren Seite zu sein, empfehlen wir daher allen Kunden, einen Hinweis auf die Verwendung von Cookies auf Ihrer Website unterzubringen. Zu diesem Zwecke setzen wir bei avendi eine stark veränderte Version der Extension cookies ein, die im Hinblick auf die bevorstehende ePrivacy-Verordnung bereits in der Lage ist, Cookies und verwandte Technologien komplett zu blockieren und verschiedene Cookie-Kategorien zu unterscheiden.

Zugänglichkeit

Standorte und Ansprechpartner werden in der TYPO3-Erweiterung tt_address gepflegt. Diese Erweiterung erlaubt es, unterschiedliche Layouts für die Darstellung anzulegen und die Templates nach Wunsch anzupassen. So können wir mittels Bootstrap leicht eine zweispaltige Anordnung erreichen.

Große Bilder sollen Einblicke ins Leben in den Einrichtungen und ihrer Umgebung erlauben. Auf einigen Seiten sehen wir dazu Doppelslider, d.h. oben haben wir die großen Bilder und unten eine Reihe von Thumbnails. Dies erreichen wir unter Einsatz von Slick, das von Haus aus die Fähigkeit hat, Slider zu synchronisieren, außerdem unterstützt es Responsive Breakpoints zur Anpassung an verschiedene Bildschirmgrößen.

Eine der Anforderungen bestand in der Bereitstellung einer gut erreichbaren, aber unaufdringlichen Suchfunktion. Um nicht bei jedem Seitenaufruf ein Formular zu generieren, das meistens nicht benutzt wird, laden wir das Suchformular beim Klick auf das Lupen-Icon zunächst per AJAX nach. Dies ermöglicht uns außerdem den Einsatz der Caching-Extension nc_staticfilecache ohne besondere Anpassungen an der Such-Extension ke_search.

Eingebettete Inhalte

Es muss nicht immer kompliziert sein: In den meisten Anwendungsfällen ist es nicht mehr erforderlich, Videos in zahlreichen Formaten auf dem eigenen Server vorzuhalten. Ein Videohoster wie YouTube kümmert sich um technische Details wie beispielsweise sich über die Jahre ändernde Unterstützung verschiedener Video-/Audio-Codecs. Der Kunde freut sich, weil die Videos über Jahre funktionieren, der Entwickler freut sich, weil er keine obskuren Fehler suchen muss.

„Zur Bereitstellung von Videos ist es meist sinnvoll, einen Videohoster wie YouTube zu nutzen, der mit technischen Neuerungen Schritt hält.“

Joel Schmidt, Web-Entwickler

Die Einbindung von einzelnen Videos oder Playlists erfolgt einfach per Iframe. Auch wenn Videos nur für einen eingeschränkten Empfängerkreis gedacht sind, lassen sich Videos bei YouTube ablegen; man muss lediglich ihre Sichtbarkeit einschränken, sodass nur jemand, der den richtigen Link kennt, das Video sehen kann (bei Bedarf lässt sich dies verbinden mit zugriffsbeschränkten Bereichen auf TYPO3-Seiten). Nur, wenn bereits die Weitergabe eines Videos an den Videohoster aus rechtlichen oder anderen Gründen nicht möglich ist, muss darauf verzichtet werden.

Die Zeitschrift a-Team (mit kleinem a, aber genügend Action) ist die Mitarbeiterzeitschrift von avendi. Sie wird auf Issuu gehostet und per Iframe eingebunden.

Formulare und Filter

Die Formulare wurden mit Powermail gelöst. Dabei gab es eine Reihe von Herausforderungen.

Eine Herausforderung war die Abbildung von Kategorie-Datensätzen auf Dropdown-Felder, in denen der Besucher dann bspw. einen Empfänger für seine Nachricht aussuchen kann. Die E-Mail-Adressen können vom Kunden in den Kategorie-Datensätzen gepflegt werden. Nach dem gleichen Prinzip wird das Bewerbungsformular aus News-Tags automatisch befüllt; legt der Kunde einen neuen News-Tag im richtigen Ordner an, gibt es eine neue Job-Kategorie im Formular.

Zu einem guten Formular gehört auch die korrekte Validierung. Diese erfolgt Client-seitig mit Parsley und Server-seitig natürlich noch einmal in PHP. Die Dropdown-Menüs sind mit Chosen in der jQuery-Variante gelöst worden, um überall das gleiche Design zu ermöglichen.

Weil viele Formulare erst weit unten auf einer Seite erscheinen oder oft gar nicht genutzt werden (wie das Suchformular), werden die meisten bei Bedarf per AJAX nachgeladen, beispielsweise wenn der Benutzer so weit nach unten scrollt, dass er das Formular demnächst sehen wird.

Für das Bewerbungsformular war die Möglichkeit gewünscht, sich mit Xing anzumelden, damit einige Daten schon vorausgefüllt sind und die Schwelle zur Bewerbung noch niedriger wird. Dazu bietet Xing eine API, mittels der man die Daten holen und zumindest einen Teil der Formularfelder abdecken kann.

Für jede (Sub-)Domain ist jeweils ein Consumer Key zu beantragen, der dann im JavaScript für den Xing-Button zur Identifikation dient.

Wir verwenden die TYPO3-Erweiterung news für eine Reihe von Nachrichtlisten. Um mehrere dieser Plug-ins unabhängig voneinander auf der gleichen Seite anzeigen und auch durchblättern zu können, wird auf AJAX zurückgegriffen.

Der Stellenangebotsfilter macht sich news-Tags und Kategorien zunutze; alle Stellenbezeichnungen sind Tags, alle Standortangaben Kategorien, die auch für andere Zwecke noch genutzt werden.

Bei der Auswahl von Kriterien gibt es eine kurze Bedenkzeit von unter einer Sekunde, in der man womöglich ein weiteres Kriterium anklicken kann (bei jedem Klick wird der Timer zurückgesetzt). Dann wird die passende Liste mit Stellenangeboten geladen. Der Filter kann jederzeit geändert oder zurückgesetzt werden.

„Das Kommunikations­ziel entscheidet über Konzept, Umsetzung und Medium.“

Matthias Tamm
Werbekaufmann, Geschäftsführer