Unsere Ideen für Ihr Projekt

Jobportal goes mobile

Heute mobil - morgen mobiler

Noch immer können viele Webseiten nur vom heimischen Desktop-PC wirklich gut bedient werden. Die Optimierung der eigenen Webseite für Mobilgeräte wird jedoch immer wichtiger, wie der Trend zu mehr Smartphone und Tablets auch unter dem Weihnachtsbaum 2013 wieder zeigt.  Sei es einfach nur das Schauen nach neuen Mails, der kurze Blick in die sozialen Netzwerke, die Termin-Planung für den restlichen Tag oder bei der Jobsuche durch die Job-Portale stöbern. Dessen war sich auch unser Kunde, die element GmbH, bewusst und wollte seinen Nutzern von Mobilgeräten eine bessere Bedienung ermöglichen.

Alt und Neu

Die Desktopansicht neben der Mobilansicht der element-Webseite

Das bis dahin bestehende Job-Portal der element GmbH war vollständig auf Desktop-Browser ausgerichtet. Dies zeigt sich vor allem im feststehenden Ablauf für die Bewerbung und auch in der Interaktivität des gesamten Auftritts. Der ein oder andere Leser wird mit dem Smartphone schon eine interaktive Webseite mit Hover-Effekten, Lightboxen und weiteren dynamischen Funktionen besucht haben. Dort ist wahrscheinlich aufgefallen, dass diese Elemente mit dem Gerät nur schwer zu handhaben sind. Wie wird diese Interaktivität also mit den Anforderungen des mobilen Nutzers kombiniert? Bei neuen Web-Präsenzen kann dies bereits zu Projektstart berücksichtigt werden. Aber was ist bei bestehenden Präsenzen und Diensten möglich? Eine vollständige Neuentwicklung ist aufgrund der Kosten für den Kunden eine große Hürde. Doch lässt sich mit der richtigen Technologie in der Basis auch eine geeignete Lösung finden, die auf bereits vorhandenem aufbaut.

Job-Portal in neuem Gewand

Für die Erweiterung von bestehenden Anwendungen gibt es viele Möglichkeiten. Eine davon nutzt MVC.

MVC, die Abkürzung für Model-View-Controller, ist erst einmal keine Technologie, sondern wird in der Softwareentwicklung in der Regel als Architektur- oder Entwurfsmuster bezeichnet. Die Hauptaufgabe dieses Musters ist die klare Strukturierung komplexer Softwaresysteme, von der höchsten Ebene bis ins kleinste Modul. Hierbei werden sowohl Daten, Modellierung und Logik ("Model" und "Controller") als auch die Darstellung ("View") voneinander getrennt. Ziel von MVC ist der flexible Softwareaufbau, der sowohl nachträgliche Änderungen als auch Erweiterungen erleichtert. Zudem wird durch diese Trennung die Wiederverwendbarkeit einzelner Komponenten stark gefördert. Das bei element im Einsatz befindliche Web-Framework Grails verwendet genau dieses Muster zur Strukturierung und bietet somit eine lose Kopplung zwischen den einzelnen Komponenten. Inhalt, Funktionalität und Design sind vollständig voneinander getrennt.

Schemadarstellung des MVC-Prinzips

Im Prinzip war es daher nur notwendig, die View-Komponente der Web-Anwendung, bestehend aus HTML, CSS und JavaScript, auszutauschen bzw. zu erweitern. Für das Job-Portal wurde eine separate View-Komponente entwickelt, die vollständig auf die Bedürfnisse der Nutzer von Mobilgeräten zugeschnitten ist. Die bisherigen interaktiven Elemente und Effekte des Job-Portals sind ausschließlich in der bestehenden View-Komponente definiert. Es ist also sehr einfach, diese auszutauschen und in einem neuem Gewand zu präsentieren, das auf die optimale Darstellung der Inhalte auf Mobilgeräten ausgerichtet ist.

Mit der Konzentration auf das Wesentliche können auch andere Aspekte des mobilen Surfens gut unterstützt werden. So wurde durch Reduktion der Grafiken und Entfernen nicht benötigter JavaScript-Bibliotheken eine Verringerung der Ladezeiten erreicht. Der Fokus auf den relevanten Inhalt, die Job-Angebote, wurde durch Umpositionierung von Inhalten verstärkt. Für den mobilen Nutzer weniger wichtige Inhalte wie Impressum u.a.m wurden an das Seitenende verschoben oder finden sich nun in Untermenüs.

Bei der Umsetzung dieser neuen View-Komponente wurden auch die Erfahrungen zum Response Web Design (RWD) genutzt, um immer eine optimale Darstellung bieten zu können (siehe "Viele Wege führen ins Internet").

Durch Verwendung des Java-Frameworks Grails mit seinem MVC-Ansatz war es uns möglich, diese Erweiterung zeitnah, kostengünstig und effizient umzusetzen. Es waren weder Änderungen an der Funktionalität notwendig, noch mussten Inhalte in irgendeiner Weise erneut gepflegt werden. Schlicht und ergreifend der gleiche Inhalt in neuer Verpackung.

Bin ich mobil oder nicht?

Die Mobilversion wird parallel zur Desktop-Variante angeboten. Damit besteht natürlich die Frage, welche von beiden aktiviert werden soll. Zur Lösung haben wir uns für die Variante der sogenannten m-Dot-Domain entschieden, statt pur auf RWD zu setzen. m-Dot-Domains dürften unter anderem von den großen Webportalen wie Amazon, eBay oder auch Spiegel in Form des vorangestellten "m." bekannt sein. Aus "element.de" wird nun für die mobile Version also "m.element.de". Nicht zwingend jeder Nutzer des Portals weiß jedoch, dass diese Subdomain existiert, also sollte es in der Verantwortung der Anwendung liegen, dem Nutzer die optimale Darstellung auszuliefern.

Die Unterscheidung zwischen Mobil- und Desktop-Besucher war früher einfach über die Auflösungen des verwendeten Geräts möglich. Doch in Zeiten von iPad und Samsung Galaxy-Smartphones mit HD-Auflösungen ist dies kein verlässliches Mittel mehr. Abhilfe schafft hierbei das sogenannte "Useragent-Sniffing". Dieser Mechanismus analysiert die beim Aufruf übertragene Browser-Kennung und weitere Eckdaten und gibt mit großer Sicherheit Auskunft darüber, ob der Besucher diese Seite mit einem Mobilgerät ansurft. Und auch hierfür hat sich unsere Kerntechnologie Grails als hilfreich erwiesen, bei dem wir den Mechanismus mit einem verfügbaren Plugin abbilden konnten.

Für den Smartphone- oder Tablet-Nutzer stellt sich zu Beginn des Portal-Besuches nur eine essentielle Änderung ein: er wird auf die Mobilvariante umgeleitet. Und für den Fall, dass doch die Desktop-Version gewünscht ist, kann er über eine Link zur Desktop-Version die Ansicht einfach wechseln.

Flexibilität durch Technologie

Mit der frühzeitigen Wahl der richtigen Technologie eröffnen sich sehr viele Möglichkeiten. Bei dieser Umsetzung hier erlaubte ein einfacher Austausch der Darstellung das Erschließen eine neue Nutzergruppe. Der flexible Austausch der View-Komponente eröffnet viele weitere Möglichkeiten. Für das Speichern von Job-Angeboten kann der Nutzer ein PDF abrufen, das ebenfalls über eine View-Komponente im System generiert und bereitgestellt wird. Auch ein RSS-Feed wäre zum Beispiel ein denkbarer Anwendungsfall für den Einsatz von View-Anpassungen. Und durch die flexible Erkennung des Gerätes ist es sogar möglich bisher noch nicht veröffentlichte Geräte zu unterstützen.

Ob PDF, Desktop- oder Mobilvariante: der Fantasie sind keine Grenzen gesetzt.