Die empfängliche Hochschul-Website

Responsive Design, ein Begriff, der auf einen Artikel auf A List Apart von Ethan Marcotte im Mai 2010 zurückzuführen ist. „Kalter Kaffee“, könnte man meinen, doch dass Responsive Design mehr ist als nur ein Gimmick für die äußere Hülle einer Website, möchte ich am Website-Relaunch einer Medienhochschule darstellen.

Zunächst zum Kunden: „Die DEKRA | Hochschule für Medien ist eine staatlich anerkannte […] Fachhochschule mit Sitz in Berlin-Friedrichshain. Sie bietet […] drei Bachelor-Studiengänge mit dem Abschluss Bachelor of Arts“. Die Zielgruppe sind demzufolge frisch gebackene Abiturientinnen und Abiturienten mit dem Wunsch, „irgendwas mit Medien“ zu machen.

Design, das

Doch zurück zum Thema: Was bedeutet nun Responsive Design? Beginnen wir mit dem zweiten Teil, dem Design. Das ist einfach. Irgendwas mit Gestaltung eben. Nur noch mal eben einen Blick ins Wörterbuch geworfen. Oh, dict.cc kennt allein für das englische Substantiv 19 deutsche Bedeutungen. Welche davon ist nun die Treffendste?

Absicht, die

Die Hochschule trägt mit der Marke DEKRA einen etablierten, weltweit bekannten Namen im Namen und erbt damit auch viele der Eigenschaften des Mutterkonzerns aus Stuttgart. Im hart umkämpften Markt der Medienhochschulen, gerade im Großraum Berlin, mag dieser Teil der Markenstrahlkraft ein Vorteil sein. Im Gegensatz dazu steht der Name aber eben auch für konservative Werte, die am Medienstandort Berlin, der pulsierenden Stadt, deplatziert aufgefasst werden können. Herausforderung incoming!

Warum taugt die alte Website denn nicht mehr? Die wachsende Anzahl an mobil surfenden Nutzern verlangte nach einem besseren Bedienkonzept für die kleinen Endgeräte. Responsive Design sollte uns dieses Problem lösen. Dass der offizielle Support für TYPO3 4.5 bereits im März 2015 auslief, unterstrich also nur die Notwendigkeit Hand anzulegen.

Entwurf, der

Begrifflich kommen wir meiner, zugegebener Maßen, stark durch Photoshop und Architektur beeinflussten Definition von Design, die irgendwas zwischen dem Oberflächlichen und einem durchdachten Unterbau darstellt, mit der Übersetzung ‚Entwurf‘ deutlich näher.

Der Entwurf und das damit verbundene erste Herantasten an das Projekt geschah durch Wireframes. Schnell haben wir Papier und Bleistift gezückt, um das Thema greifbarer zu machen. Bereits in dieser frühen Phase wurde das Verhalten der Website auf verschiedenen Endgeräten bedacht.

Gestaltung, die

Ach ja, das Naheliegende: die Gestaltung. Dennoch gar nicht so leicht. Natürlich bringt der Großkonzern aus Stuttgart seine eigenen Corporate-Design-Richtlinien mit. „DEKRA, wie TÜV“. Na zum Glück hat sich die junge Wilde, die Nach-Berlin-Gezogene, die Tochter des Mutterkonzerns aus Baden-Württemberg seit langer Zeit einen Freiraum im engen CD-Korsett der DEKRA erarbeitet. Weiterhin Grün und Orange, aber mit viel Weißraum, mit Fokus auf den Inhalten. Nicht ohne Grund ist die Hauptnavigation auf großen Bildschirmen auf der rechten Seite, und somit entgegen der typischen Lesegewohnheit, platziert.

Konstruktion, die

Ein Begriff, den ich mit dem Ingenieurwesen in Verbindung bringe. Ich denke an Konstruktionszeichnungen auf Millimeterpapier. Mir kommt die Hochglanzbroschüre eines Rennboliden mit Straßenzulassung in den Sinn. So in etwa würden wir wohl die Konstruktion in solch einem Folder bewerben.

„Die DEKRA | Hochschule für Medien, basierend auf eine Karosserie auf Basis von TYPO3 6.2, welches Solidität mit dem Siegel Long Term Support Version zertifiziert bekommt. Das Chassis, ein Dreigespann, bestehend aus MariaDB, das als wachsamer Wächter über die Datensätze herrscht, der Skriptsprache PHP, die als niemals müdes Aggregat der Website Dynamik verleiht und dem auf Höchstleistung getrimmten nginx als Webserver. Für die Benutzerschnittstellen kommen feinste, dem User schmeichelnde Oberflächen, wie Modal-Dialoge, auf Basis neuester Erkenntnisse in den Bereichen JavaScript und CSS-Präprozessoren, zum Einsatz.“

Ziemlich dick aufgetragen. Nicht unser Stil, also die Hochglanzbroschüre schnell wieder zu und weiter im Text.

Ausführung, die

Nun im Gegenzug ziemlich pragmatisch. In der Ausführung muss man immer pragmatisch denken.

Solch eine Ausbildung an der DEKRA | Hochschule für Medien kostet nicht gerade wenig Geld. Um diese Dienstleistung an den Mann zu bringen, braucht es Vertrauen. Vertrauen, das die Marke DEKRA bereits mitbringt und wir gut erkennbar, oben links, platziert haben. Vertrauen, das wir durch eine permanente TLS-Verschlüsselung aber noch weiter herausarbeiten wollten. Klar, Verschlüsselung kostet Ressourcen, aber bei Weitem nicht so viel, wie immer behauptet wird.

Wer Authentifizierung ohne Verschlüsselung durchführt, macht sie falsch!

Ole Michaelis, Software-Architekt bei Jimdo

responsive, more responsive, most responsive

Design lässt also nicht so einfach mit einem Wort beschreiben. Nun kommen wir aber zum geflügelten Wort, was benutzt wird, als sei es im Netz einfach herunterlad- und in eine Website installierbar. Diesen Zahn müssen wir unseren Kunden in letzter Zeit häufig ziehen. Eine Website responsive zu machen ist deutlich mehr als auf ein bestehendes Stylesheet ein bisschen Zaubertinte zu träufeln. Es erfordert intensive Gedanken über die Verwendungsarten der Website.

Nur fünf (aber immerhin) Adjektive findet dict.cc als Übersetzung für responsive. Na dann los …

ansprechbar

Gutes Stichwort: Gesetzlich vorgeschrieben ist eine persönliche Beratung bevor die Immatrikulation an der Hochschule durchgeführt werden kann. Genau hier liegt eine große Stärke der DEKRA | Hochschule für Medien. Nicht nur an den festen Terminen, die auf der Website kommuniziert werden, sondern im Grunde jederzeit sind die Mitarbeiter auf dem Campus, der Ehrenbergstraße 11-14 in Berlin-Friedrichshain, ansprechbar. Ein fast familiärer Flair ist den Fluren der Hochschule zu entnehmen. Mit den freundlichen Mitarbeiterfotos im Team-Bereich bringen wir das zum Ausdruck.

Dazu gehört natürlich auch, dass wir Telefonnummern entsprechend ihrer Semantik auszeichnen, damit sie mit dem Smartphone direkt angewählt werden können, um so die Mitarbeiter der Hochschule ansprechbar zu machen.

zugänglich

Für verschiedenste Endgeräte zugänglich gemachte Inhalte. Das ist das Kernstück des Responsive Designs. Wie bereits angedeutet ist das gar nicht immer so leicht. In der Web-Entwicklung kann man viel simulieren. Am Ende weiß man aber erst, wenn man es ausprobiert, ob es wirklich gut funktioniert und so haben wir im Laufe der Zeit einige Geräte zusammengetragen, die in unserem Device Lab eine Anlaufstation zum Ausprobieren darstellt.

reagierend

Uns ist wichtig, dass Websites nicht nur einmalig „on load“ die Ansicht für ihr Endgerät optimieren, wofür sich viele prominente Beispiele im Internet finden, sondern jederzeit reagieren, z. B. durch Drehen des Tablets, vom Breitformat in das Hochformat oder das Verändern der Fenstergröße des Browsers. So passt sie sich, an der Navigation gut zu erkennen, jederzeit den Gegebenheiten an.

antwortend

Nicht einfach nur antwortend, sondern auch schnell antwortend, sollte eine Website unserer Meinung nach sein. Nicht wenige Forschungen belegen, dass eine langsame Website zu größeren Absprungraten führt als bei Websites mit schnellen Reaktionszeiten. Bei der mobilen Nutzung fallen Unterschiede in diesem Bereich noch gravierender ins Gewicht und so war uns klar, dass wir auf Performance ausgelegte Soft- und Hardware setzen müssen, um einem Software-Monster, wie TYPO3, Beine zu machen. Die Reduzierung genutzter Ressourcen sind daher ebenso selbstverständlich wie die Verwendung eines schnellen SSD-Servers. Tools, wie Grunt, helfen wiederkehrende Aufgaben, wie Verkleinerung und Zusammenfassung von Bild-, CSS- und JavaScript-Dateien, mit geringen Kosten umzusetzen.

empfänglich

Das Adjektiv wirkt zunächst etwas Fehl am Platz und so formt es auch den kuriosen Titel dieses Artikels. Unserer Interpretation nach sind Modal-Dialoge, die ohne Seiten-Laden Eingaben zur Kontaktaufnahme, der Suche oder des Online-Campus, einer Art Intranet für die Studenten/-innen, entgegennehmen, ganz klar empfänglich. Die Modal-Dialoge überdecken die eigentliche Website und unterdrücken ablenkende Design-Elemente. Der Blick richtet sich auf das Wesentliche und das wartet darauf, benutzt zu werden.

Schlussfolgerung

Natürlich habe ich einige Übersetzungen sehr wörtlich genommen, aber spannend ist es dennoch, zu erkennen, wie hinter Responsive Design eben nicht nur ein Begriff der Gestaltung steckt, der beschreibt wie sich eine Benutzeroberfläche an verschiedene Bildschirmgrößen anpasst. Stattdessen steht der Terminus für einen roten Faden, der sich durch die vielen Phasen einer Website-Entwicklung zieht und dabei überall für ein Umdenken beim Erfüllen der verschiedenen Anforderungen sorgt. Wir finden, dass uns die Umsetzung dieses Denkansatzes bei der Website für die DEKRA | Hochschule für Medien gelungen ist und sind stolz, zum dritten Mal das Vertrauen des Kunden erhalten zu haben.

www.dekra-hochschule.de

Patrick Baber

Als erfahrener Programmierer löst Patrick jeden Gordischen Knoten, findet die geeignete Methode und entwickelt damit flexible Software-Systeme.