Planung
Nach den ersten Skizzen auf Papier habe ich eine Wireframe im Photoshop erstellt. Dabei habe ich darauf geachtet, auf möglichst viele kleine Spielereien zu verzichten, da ich wusste, dass ich alles „von Hand“ umsetzen werde. Ich kreierte eine passende Farb-Datenbank und strukturierte den Inhalt meiner Seite. Beim Konzept habe ich mich entschieden, nicht nach dem heutigen Standard „mobile first“ zu arbeiten, da mein Portfolio bei potentiellen Arbeitgebern wohl eher im Büro am Computer angeschaut wird. Ich entschied mich also, die Gestaltung für grosse Screens zuerst zu machen und danach mit Media-Queries eine Mobile Version zu erstellen. Inhaltlich habe ich mich noch nicht bis zum letzten Prozent mit meinem Portfolio auseinandergesetzt, da in diesem Projekt klar das Programmieren an erster Stelle stand.
Umsetzung
Bevor ich mich an die Gestaltung der einzelnen Seiten machte, stellte ich sicher, dass der ganze HTML-Code sinnvoll dargestellt ist und ich somit eine funktionierende Struktur habe. Neben dem Strukturierten HML-File habe ich natürlich ein CSS-File verknüpft und auch eine JavaScript-Datei. Zuerst wollte ich komplett auf JavaScript verzichten, da ich mich aber entschieden habe, einen One-Pager zu erstellen brauchte ich einen kleinen JavaScript-Befehl, um folgendes umzusetzen: Meine gemachten Projekte, sollen bei einem Klick als Pop-Up über der normalen Webseite erscheinen. Dies musste ich mittels 20 Zeilen JavaScript erledigen. Alles andere meiner Webseite beruht auf normalem und simplem HTML und CSS.
Herausforderungen
Obwohl ich mich im Bereich von HTML und CSS nicht schlecht auskenne, hatte ich so meine Bedenken beim Projektstart. Meine Erfahrungen, eine Webseite, ohne Template und CMS aufzusetzen, hielten sich doch in Grenzen. Es gab immer wieder kleinere Probleme bei der Gestaltung, speziell der Positionierung, von verschiedenen Elementen. Oft hatte ich genau im Kopf, wie das ganze aussehen sollte, hatte aber nicht den richtigen Befehl zur Hand. Dies brauchte oft viel Zeit und Nerven.
Mit Abstand die grösste Herausforderung war es, die Webseite responsive zu Gestalten. Obwohl ich viel mit Flexboxen oder auch Grid gearbeitet habe, hat sich mein Inhalt bei der Verkleinerung der Bildschirmansicht meist nicht so verhaltet, wie ich es gerne gehabt hätte. In dieser Zeit habe ich viel Recherchier und natürlich sehr viel ausprobiert. Ich bin auch jetzt noch der Meinung, dass das einte oder andere Element noch besser für die Mobile-Version angepasst werden muss.
Learnings
Ein bestimmtes Learning möchte ich noch loswerden. Ich hatte folgendes Problem: Ich habe Media-Queries erstellt und definiert, wie sich meine Webseite verhalten soll, wenn das Browserfenster verkleinert wird – bis hin zur Mobile Grösse. In allen Browsern hat dies Funktioniert: Die Webseite in Safari, Chrome etc. haben sich bis zu einer Viewport-Breite von 400px richtig angepasst. Wenn ich aber die Webseite auf meinem Handy geöffnet habe, hat es mir dies immer in der Screen-Grösse, also der Desktop-Version, angezeigt. Dieses Problem hat mich in die Verzweiflung getrieben. Plötzlich war ich mir nicht mehr sicher, ob ich die Media-Queries richtig programmiert habe und mein ganzes Portfolio funktionierte so als geschlossenes Produkt nicht.
Lange Rede kurzer Sinn: Eine Zeile im HTML-Head Bereich hat mein ganzes Problem gelöst. Ein Dank geht, an einen Mitstudenten J
(im HTML Head platzieren, damit die Media-Queries auf dem Handy richtig angezeigt werden)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
