Die Idee
Im Modul Corporate Communication bekamen wir dieses Semester den Auftrag, zu einem Thema der 17 Nachhaltigkeitsziele der UNO, einen Beitrag zu verfassen. Dafür habe ich eine Reisebroschüre mit nachhaltigen Unterkünften in der Schweiz verfasst, die ebenfalls etwas spezieller sind. Nebst dem Ziel Nr. 13 (Massnahmen zum Klimawandel), werden dank der Initiativen und Massnahmen der einzelnen Unterkünften, weiter Ziele der UNO unterstützt. Die Broschüre ist nun auf easynachhaltig.ch publiziert. Im Modul Corporate Communication, wird jedoch nicht das Endprodukt, sonder nur das Konzept dafür benotet. Nach Absprache mit Thomas kam dann die Idee auf, die Inhalte der Reisebroschüre in eine Website umzusetzen.
Die Umsetzung
Informationen sammeln
Die Umsetzung der Idee im Modul Corporate Communication startete mit der Suche nach passenden Unterkünften. Ich habe auf Google nach verschiedenen Unterkünften gesucht, die einerseits Nachhaltig sind und andererseits etwas spezieller und einzigartig. Aufgrund des begrenzten Zeitfensters, habe ich mich schlussendlich für zehn Unterkünften in zehn verschiedenen Kantonen entschieden. Nach dem Festlegen von verschiedenen Preiskategorien, Nachhaltigkeitskriterien und dem eigentlichen Inhalt, ging die Recherche erst richtig los. Sofern möglich, nahm ich die benötigten Informationen aus der Website der jeweiligen Unterkunft. Zusätzlich habe ich mit jeder Unterkunft per Mail Kontakt aufgenommen. So konnte ich bereits gefunde Informationen ergänzen, die Informationen zu den Nachhaltigkeitskriterien sammeln und die Erlaubnis für die Verwendung der Bilder einholen. Die Infos habe ich dann ausgewertet, strukturiert und in Texte verfasst.
Layouten
Das Layout wurde im Modul Corporate Communication für ein PDF gestaltet. Dabei musste das Corporate Design von “easyNachhaltig” eingehalten werden. Die Broschüre wurde aber schlicht designed und kurz gehalten. Für die Preiskategorie und der Nachhaltigkeitskriterien habe ich zudem Icons gestaltet. Die Bilder habe ich entweder direkt von der Unterkunft oder von einer lizenzfreien Seite wie z.B “Pixabay” oder “Unsplash”. Für das Digezz-Projekt habe ich neue Farben definiert und das Layout fürs Web angepasst. Die Grundidee wurde aber übernommen.
Website erstellen
Die Website habe ich mit HTML, CSS und Javascript umgesetzt. Dabei habe ich mit der Mobile-First Methode gearbeitet. Im HTML-Dokument ist nur die Grundstruktur sowie die Startseite und die Kriterienseite eingebunden. Der Inhalt der Kantone wird über Javascript implementiert. Zur Auswahl der einzelnen Kantone habe ich ein Burgermenu erstellt. Dafür habe ich auf ein Code von MDBootstrap verwendet und dieses nach meinen Bedürfnissen und Vorstellungen angepasst. Beim Klick aufs Blatt gelangt man zurück zur Startseite. Nach dem erstellen der Mobileversion wurde das Layout mit Media Query für den Desktop angepasst. Für etwas mehr Interaktivität habe ich mich, auf der Startseite der Desktopansicht, für eine interaktive Karte entschieden. Am Ende wurde kleine Detail optimiert, ein Favicon eingefügt und die Inhalte nochmals überprüft. Das CSS habe ich am Schluss mit dem Autoprefixer so optimiert, dass es auf jedem Browser funktionieren sollte.
Schwierigkeiten
Diese Projekt war mein erstes richtige Projekt mit HTML, CSS und Javascript und stellte mich vor einige Herausforderungen. Zuerst musste ich mich wieder etwas in die Thematik einarbeiten. Das bedeutet, dass ich am Anfang der Umsetzung recht viel Zeit verloren habe, bis ich mich zurecht gefunden habe. Im Besonderen bereitete mir Javascript noch grosse Mühe.
Die Karte auf der Startseite war eine spontane Idee. Nach langer Recherche im Internet wusste ich nicht, ob ich diese Idee überhaupt umsetzen kann. Die Karte konnte ich am Ende als SVG-Datei einbinden. Die aktiven Kantone konnte ich sogar noch im Illustrator nach meinen Wünschen einfärben. Ebenfalls hatte ich das Problem, dass der Click-Event, welche ich für die einzelnen Kantone erstellt habe, nicht auf allen Browsern funktioniert hat. Die Arbeit mit solchen Dateien war mir neu. Ich musste mich einlesen und brauchte viel Nerven, bis alles so funktionierte, wie ich es wollte.
Nachdem die Website eigentlich fertig war, bemerkte ich, dass das Burgermenu auf den iOS-Geräten nur in Google-Chrome funktionierte. Aus diesem Grund habe ich am Schluss ein neues Burgermenu von Bootstrap eingesetzt. Diese musste ich dann erneut nach meinen Vorstellungen stylen und die verschiedenen Event anpassen. Doch auch damit, hat das Menu nicht funktioniert. Entweder konnte ich das Menu nicht schliessen oder nicht öffnen. Bis das Menu dann auf Desktop und Mobile richtig funktionierte, dauerte nochmals einen Moment.
Des Weiteren hatte ich einige Probleme mit dem Responsive-Design. Auf jedem Gerät sah das Layout wieder etwas anders aus. Das Endergebnis ist sicher nicht optimal. Trotzdem bin ich, für mein erstes richtiges Projekt, zufrieden damit.
Im allgemeinen bereitete es mir Mühe, bei Problemen, im Internet richtig nach einer Lösung zu Suchen. Nach was soll ich überhaupt genau suchen? Wo liegt genau mein Problem? Was für Wörter müssen in der Suche vorkommen? Das sind alles Fragen, die ich mir dabei immer wieder stellte.
Fazit & Selbstkritik
Learnings:
- Wenn man sich nicht regelmässig mit HTML, CSS und Javascript beschäftigt, vergisst man viel.
- Es gibt verschiedene Wege um ans Ziel zu gelangen, die eine Umsetzung ist schöner, die andere weniger.
- Mit Frameworks und co. existiert vieles schon und man muss nicht alles von null auf schreiben.
- Es wäre einfacher das Projekt umzusetzen, wenn das Layout bereit im Voraus mit hilfe eines Wireframes visualisiert wird.
Selbstkritik:
Ich habe mich sehr gefreut, dieses Projekt umzusetzen. Kleinere und grössere Schwierigkeiten und Probleme, setzen mich zum Teil vor grosse Herausforderungen, was mir zwischendurch die Motivation etwas nahm. Ich bin froh, dass ich die Website mehr oder weniger nach meinen Vorstellungen umsetzen konnte und bin zufrieden mit meinem Endprodukt. Trotzdem gibt es noch einige Optimierungsmöglichkeiten, welche ich aufgrund Zeitmangels nicht bearbeiten konnte. Rückblicken habe ich viel aus dem Projekt gelernt, was ich für zukünftige Projekte mitnehmen werde.
