von Andreina Ravani, Celia Gerber, Milena Losinger und Sybille Hofer
Idee
Während unseres Austauschsemesters haben wir alle viele verschiedene und einzigartige Erfahrungen gemacht, die wir nicht so schnell wieder vergessen werden. Als wir zurück in Chur waren, redeten wir oft gemeinsam über unsere Erlebnisse. Es kam auch immer wieder der Wunsch auf, diese mit anderen Studenten, zukünftigen Auslandsemestlern, Dozenten und dem International Office zu teilen. Und so begannen wir…
Umsetzung
Organisation
Als erstes musste geklärt werden, was sich jeder von uns unter einem Projekt über das Auslandsemester vorstellte. Schnell war klar, dass es eine Website geben soll, auf der alle vier Städte (Paris, Kopenhagen, Breda und Berlin) vertreten sind. Unsere erste Idee war es, dass International Office hinzuzuziehen, damit die Webseite nach unserem Abschluss weitergeführt werden kann und zukünftige Austauschstudenten auch die Möglichkeit haben, ihre Erfahrungen weiterzugeben. Leider ist es für das International Office nicht möglich, die Webseite weiter zu führen. Deshalb haben wir uns dazu entschieden, nicht eine Plattform für alle Auslandsemestler, sondern lediglich eine abgeschlossene Seite über unsere eigenen Erfahrungen zu entwickeln.
Inhalt
Die Website sollte informieren, Erfahrungen mitteilen und Insidertipps weitergeben. Wir sind der Meinung, dass uns das gelungen ist. Da unser Zielpublikum sowohl zukünftige Austauschstudierende wie auch Leute, die sich für Reisen und Städtetrips interessieren, sind, einigten wir uns auf die vier Kategorien: Freizeit, Leben und Schule. Die Website ist nach der klassischen Struktur aufgebaut. Je tiefer man sich in der Hierarchie der Website befindet, desto höher ist der Informationsgehalt. Auf den Städteseiten ist wenig Text vorhanden, es gibt kurze Aufmachertexte mit einleitende Formulierungen und in den Inhaltsseiten eine ausführliche Darstellung der Themen. So sind wir also den «Online-Texting-Vorschriften» gerecht worden.
From
Den Schreibstil, haben wir zwar bewusst jedem selber überlassen, doch jetzt werden die Leser manchmal in Mehrzahl, manchmal in Einzahl oder überhaupt nicht direkt angesprochen. Dies könnte in einem weiteren Schritt noch optimiert werden, indem man die verschiedenen Schreibstile und vor allem Ansprechformen besser aufeinander abstimmt.
Gestaltung
Die Website sollte schlicht, ansprechend und übersichtlich werden. Durch die vier verschiedenen Farben, ist es uns gelungen, die einzelnen Städte erkennbar und differenzierbar zu machen. Die einzelnen Blogeinträge stellen sicher, dass der Leser nicht mit einer Informationsflut überwältigt, sondern gezielt auf einzelne Themen aufmerksam gemacht wird. Im Kontrast zu den einheitlich gestalteten Stadtseiten, wurde das Design der einzelnen Beiträge von jedem selber ausgearbeitet. Damit haben wir erreicht, dass die Website von gemeinsamen Elementen zusammengehalten wird, während trotzdem jede Stadt ihren ganz persönlichen Touch behält.
Technik
Auf der Landingpage kann man eine der vier Städte anwählen und gelangt so zur entsprechenden Beitragsübersicht. Wenn man sich später für eine der anderen Städte entscheidet, kann man direkt auf der linken Seite des Headers die Stadt wechseln. Auch dort finden sich die vier Farben wieder - was viel zur Übersicht und guten Orientierung beiträgt. Auf der Startseite der einzelnen Städte sind alle Beiträge gemischt zu sehen, das sorgt für etwas Inspiration, wenn man noch nicht ganz genau weiss was man lesen möchte. Interessiert man sich aber nur für eine spezifische Kategorie, kann man diese in der Navigation anwählen. Die Möglichkeit, nur die Beiträge einer Kategorie anzuzeigen, trägt ebenfalls zur besseren Übersicht bei. Von jedem einzelnen Beitrag gelangt man via Schliessen-Button wieder zurück zur Stadtseite.
Kreativität
Nachtschichten
Teamwork
Schwierigkeiten
Teamarbeit
Auch wenn das Arbeitsklima gut ist, gibt es immer auch einige Schwierigkeiten in einer Gruppe von vier Personen. Die Teamarbeit erfordert eine hohe und oft langanhaltende Konzentration, da jedes Detail über Farbe, Position, Grösse usw. diskutiert werden will und vier unterschiedliche Meinungen aufeinander treffen. So kam es auch oft vor, dass die eine oder andere hin und wieder Kompromisse eingehen musste. Auch das Definieren der Kategorien und Eingrenzen der Beitragsthemen war nicht ganz einfach.
Zeitmanagement
Die Konzeption und Umsetzung erforderte einiges an Zeit und Koordination. Wir trafen uns fünf mal um die Situation und das weitere Vorgehen zu besprechen. Trotzdem schoben sich, aufgrund unzähliger anderer Projekte, die zeitintensivsten Arbeiten immer weiter nach hinten und wir standen schlussendlich doch noch etwas unter Zeitdruck.
Learnings
Umsetzung
Nachdem wir zu Beginn oft lange Diskussionen über kleine Details geführt hatten, merkten wir, dass trotzdem nicht alle Punkte von allen gleich verstanden wurden. Also beschlossen wir, auf eine alte Technik zurück zu greifen: Das Basteln. Wir erkannten bald, dass analoges Zeichnen und Collagieren viel schneller zu einem klaren und einheitlichen Verständnis führt und können dies nur weiterempfehlen.
Zwischenmenschlich
Obwohl man weiss, dass Gruppenarbeiten Kompromisse von jedem fordern, muss man sich immer wieder von neuem darauf einstellen. Auch bei diesem Projekt war das nicht anders. Wir empfanden es allerdings alle vier nicht als Nachteil sondern eher als persönlichkeitsbildend. Auch ein grosses Vertrauen in die Teammitglieder gehört dazu. Man muss sich darauf verlassen, dass die Arbeit sauber und termingerecht erledigt wird.
Ausbaumöglichkeiten
Natürlich ist ein Projekt immer noch ausbaufähig und man könnte Monate damit verbringen, alles perfekt zu machen. Als weiterer Schritt, wäre auch das weiterführen der Website durch zukünftige Austauschstudenten möglich. Diese würden die Verantwortung nach ihrem Abschluss wieder an ihre Nachfolger weitergeben. So würde mit der Zeit eine komplexe, sehr inhaltsreiche und umfassende Plattform von Austasuchstudenten für Austauschstudenten und Reisende entstehen. Es könnten auch die ehemaligen Austauschstudenten angefragt werden, ob ihre Erfahrungsberichte mit eingebunden werden dürfen. (technische Ausbaumöglichkeiten und Verbesserungen weiter unten bei: Umsetzung Website (Sybille))
Fazit
Allgemein
Wir haben bei diesem Projekt alle sehr viel dazu gelernt. Nicht nur was kreative und technische Dinge angeht, sondern auch viel Organisatorisches und Zwischenmenschliches. Schlussendlich konnten wir uns immer auf eine Lösung einigen und sind sehr zufrieden mit unserer Arbeit - und auch ein bisschen stolz darauf. Allerdings sind wir uns bewusst, dass es noch immer Verbesserungs- und Ausbaumöglichkeiten gibt und wir haben viele Ideen, die in einem weiteren Schritt realisiert werden könnten.
Andreina
Mir hat der Austausch mit meinen Mitstudentinnen und vor allem auch das Reflektieren meines Austauschsemesters viel Spass gemacht. Ich denke, wir waren alle sehr motiviert und haben uns auch viel Mühe und Gedanken gemacht, dass die Sache gut wird und die Digezz-Leser auch wirklich davon profitieren können. Mein Knackpunkt war das Zeitmanagement. Das Verfassen der Artikel und die Bildauswahl / -bearbeitung benötigten viel mehr Zeit, als ich gedacht habe. Darum war es – wie leider viel zu oft bei mir – knapp mit dem Einhalten der Fristen. Doch am Schluss hat alles geklappt und wir können uns über einen, aus meiner Sicht gelungenen, Digezz-Beitrag freuen, der auch für uns vier als Erinnerung an eine einmalige Zeit bleibt.
Celia
Das wiederholte Bearbeiten dieses Themas war eine emotionale Achterbahn. Beim Durchstöbern der Fotos und Videos bin ich immer wieder hängen geblieben. Das intensive erinnern machte mich glücklich und gleichzeitig ein wenig melancholisch, da ich diese Menschen auf den Fotos sehr vermisse. So bin ich zum Teil nicht so schnell vorwärts gekommen. Ich finde es toll das einige dieser Bilder nun in einem Kontext genutzt werden, und freue mich darauf, die Website immer wieder anschauen zu können und eine Runde auf der Gefühlsachterbahn zu drehen.
Ich habe mit dem Zeitmanagement versagt und viel zu spät mit meinen Beiträgen angefangen. Gerne hätte ich mehr Artikel erstellt, oder die vorhandenen mehr ausgearbeitet.
Die Zusammenarbeit mit den drei Damen hat mir sehr gut gefallen. Wir konnten ehrlich und direkt unsere Meinung sagen, somit aktive Diskussionen führen und effizient vorangehen. Ich finde die Website toll. Sybille hat mit aussergewöhnlichem Einsatz das Layout eins zu eins umgesetzt.
Milena
Ich konnte aus der Zusammenarbeit viel mitnehmen. Zum einen wie angenehm es ist, mit einem motivierten Team zusammen zu arbeiten, zum anderen habe ich mir einige neue Skills mit den Adobeprogrammen, beim Texte schreiben und Kreativsein aneignen können. Beim produzieren kam oft das Fernweh oder in dem Fall könnte man schon fast sagen Heimweh, hoch, was die Arbeit einerseits authentischer machte und andererseits erschwerte. Zudem habe ich gelernt mein Zeitmanagement zu optimieren und Arbeiten nicht auf den letzten Drücker zu machen, da diese manchmal mehr Zeit erfordern als man denkt. Ich bin mit dem Endprodukt super zufrieden und bedanke mich herzlich bei meinen Teammitgliedern und besonders bei Sybille, für die gute Zusammenarbeit und den Spass den wir hatten.
Sybille
Die Idee einen gemeinsamen Beitrag über unsere sehr unterschiedlichen Auslandsemester zu realisieren hat mich von Anfang an begeistert. Ich hatte grossen Spass daran, meine Zeit in Holland noch einmal Revue passieren zu lassen und eine Plattform zu erschaffen um meine Erfahrungen auch für Andere zugänglich zu machen. Um ehrlich zu sein habe ich mich aber am allermeisten darüber gefreut, die Website technisch umsetzen zu dürfen. Ich möchte mich an dieser Stelle herzlich bei meinen Teammitgliedern bedanken, die mir so viel Vertrauen gegenüber gebracht haben! Ich habe während dieses Projekts in vielen verschiedenen Bereichen extrem viel dazu gelernt. Sei es in der Zusammenarbeit mit dem Team, beim kreativen Prozess oder beim Einhalten der Deadlines. Und natürlich auch bei der Realisierung meiner ersten responsiven Website mit Mobile-First-Ansatz.
Umsetzung Website (Sybille)
Technologieentscheidungen
Wir haben beim ersten Treffen lange darüber diskutiert, ob ich für das Projekt ein CMS verwenden oder den gesamten Code, mithilfe eines Frameworks, selber schreiben soll. Da wir uns einerseits die Freiheit lassen wollten, die Seite genau nach unseren Vorstellungen zu gestalten und ich andererseits auch noch zu wenig Erfahrung mit dem Erstellen von Wordpress Childthemes hatte, haben wir uns dafür entschieden, den Code selber zu schreiben.
Unser Anspruch war es dabei, dass die Seite responsive wird, denn der User soll die Tipps und Erfahrungen auch unterwegs auf dem Mobiltelefon oder Tablett lesen können. Aus diesen Überlegungen resultierte die Entscheidung eine responsive Website mit Mobile-First Ansatz umzusetzen. Ich habe mich dafür entschieden mit Bootstrap zu arbeiten, da ich dieses Framework bereits etwas kannte und den Umgang damit noch mehr vertiefen wollte. Obwohl ich bei der ganzen Arbeit viel über Mobile-First und responsive Design gelernt habe, weiss ich jetzt, dass ich mir viel Zeit hätte ersparen können, wenn wir uns für ein CMS entschieden hätten. Denn alle einzelnen Beiträge direkt in HTML zu integrieren, jedes Bild einzeln zu verlinken und jedes Video separat einzubetten, kostete extrem viel Zeit und Nerven.
Eine andere Möglichkeit, mir das Leben einfacher zu machen, wäre wohl die Arbeit mit PHP und AJAX gewesen. So hätte ich nicht für jeden Beitrag eine einzelne HTML-Datei inklusive Header und Footer (die ohnehin überall gleich sind) erstellen müssen, sondern hätte gleich bleibenden Code in einzelne Dateien auslagern können. Leider habe ich mir zum Zeitpunkt des Projektstarts noch nicht zugetraut, mich dieser Herausforderung zu stellen.
Schwierigkeiten
Ich hatte immer wieder kleinere Schwierigkeiten, zum Beispiel beim einbinden der Youtube Videos und Audioplayer, beim optimieren der Bilder und beim korrekten Einbetten von GoogleMaps. Als grösstes Problem stellten sich jedoch die Captionsliders bei der Artikelübersicht auf den Stadtseiten heraus. Hier habe ich das jQuery Plugin jCapSlide zu Hilfe genommen und musste mich erst mal gut einlesen um herauszufinden wie ich die Titel, Untertitel und Captions im HTML einfügen musste. Einen kleinen Fehler hat die Seite bis zum Abgabeschluss immer noch, es ist dies die Tatsache, dass die Vorschaubilder beim ersten Laden der Seite noch nicht in jedem Browser und auf jedem Device richtig angezeigt werden. Ich habe mich bereits lange damit beschäftigt und viele verschiedene Dinge ausprobiert, habe die richtige Lösung jedoch noch nicht gefunden. Bis mir dies gelingt, kann man den Fehler umgehen, indem man einmal auf den Titel (Berlin, Deutschland usw.) klickt, dann sollten die Vorschaubilder korrekt angezeigt werden.
Learnigns
Für einen effizienteren Workflow hätte ich die Anforderungen der Website erst mit einem Profi besprechen und dabei die nötigen Technologien (CMS oder wenigstens PHP) festlegen müssen. Denn ich habe viel unnötige Zeit damit verbracht Code zu kopieren, mich mit duzenden HTML Dateien herumzuschlagen und zahlreiche Fotogalerien manuell zu erstellen.
Das Positive am ganzen «hard-coding» ist allerdings, dass ich so, viel Technisches selber herausfinden musste. Einige Dinge die ich während dieses Projekts gelernt habe sind:
- das Anwenden vom Mobile-First-Ansatz, Bootstrap Klassen und Media Queries
- der Umgang mit Bildern fürs Web (wobei ich hier noch immer nicht sattelfest bin)
- das Einbinden von Youtube Videos, Audiodateien und GoogleMaps
- das Vertiefen des Workflows mit Sublimetext
- und der Gebrauch vom «Device Mode» verschiedener Browser
Mini U-Lab
Ich habe die fertige Website einigen Freunden und Familienmitgliedern zum Test vorgelegt und deren Inputs zur Benutzerfreundlichkeit der Seite aufgenommen. Die Landingpage kam dabei sehr gut an, «Die Skylines finde ich super!» und auch der Hover-Effect, «der ist witzig und bringt leben in die Seite». Ausserdem stelle der Hover-Effect ein wichtiges, verbindendes Element zwischen Landingpage und Stadtseite dar. Es wurde geschätzt, dass die Seite ziemlich simpel gehalten ist und deshalb eine gute Übersicht bietet.
Natürlich kamen aber auch einige Verbesserungspunkte zusammen.
- Der Steckbrief sollte, wenn er einmal zugeklappt wurde, nicht bei jedem Seitenwechsel wieder aufklappen.
- Die Navigation der Kategorien sollte sichtbar bleiben während dem man sich in der Detailansicht eines Artikels befindet.
- Wenn man von einer einzelnen Kategorie aus einen Artikel öffnet und diesen nach dem Lesen wieder schliesst, sollte man sich wieder in der selben Kategorie befinden, nicht auf der Hauptseite.
- Es sollte einen Button geben, der am Ende des Artikels wieder zum Anfang der Seite führt (back-to-top Button).
- Denjenigen, die es sich nicht gewohnt sind, dass Logos und Hauptüberschriften wieder zur Startseite führen, fehlte der Home-Button zur mühelosen Navigation.
Kurz zusammengefasst: Die Seite ist ansprechend gestaltet und schnell überblickbar, es gibt aber, vor allem bei der Navigation zwischen den Artikel, noch Einiges an Verbesserungsbedarf.
Diese Feedbacks sind für mich sehr wichtig, da ich, nachdem ich so lange an der Seite gearbeitet habe, nicht mehr selber erkennen kann, ob es Dinge gibt, die fehlen oder verwirren. An dieser Stelle möchte ich mich deshalb bei den Testpersonen herzlich bedanken. Ich werde die Kritikpunkte in einem weiteren Schritt noch in die Seite einfliessen lassen.
Fazit
«Ein Semester, vier Studentinnen, vier Städte.» war für mich DAS «Learning by Doing»-Projekt schlechthin. Ich kann nun darauf zurückschauen und mich über die Dinge die ich falsch gemacht habe aufhalten, oder aber mit einem mindestens doppelt so vollen Rucksack an Skills und Tools in die Zukunft blicken und mich auf weitere herausfordernde Projekte freuen. Wer mich kennt weiss, dass ich mich längst für die zweite Option entschieden habe und mich jetzt darauf konzentriere, als erstes die Erstellung von Websites mit Content Management Systemen zu lernen.