Redesign gkag

Ich habe den Auftrag bekommen ein Redesign für gkag zu machen. Dafür habe ich zwei Layout Versionen erstellt und eine davon später umgesetzt. Die Website ist ein Onepager und wird ohne CMS gemacht also mit html & css.

Layout

Vorheriges Design

Inspiration

video austesten

Inspirations Bilder

Layoutversionen

Skizze v1

Layout v1

Überlegung: fullscreen video von Blubberblasen im Wasser (im psd nur ein Bild)
Kritik MK: guter Aufbau aber mit den Farben etwas tiefer gehen (footer dünkler) - mehr Kontrast in den Boxen

Anpassungen

  • mit einem Farbton & Schwarz/Weiss arbeiten - mehr tiefe (heller/dünkler)
  • evtl Schriftschnitt anpassen, eher dünner (ähnlicher zu Logo)
  • mehr Abstand & Leerraum
  • Logo evtl etwas kleiner

Final v1

Skizze v2

Layout v2

Favorit - Thematik
Auch möglich - Thematik

Überlegung: headerbild - evtl Wasserrohr/ Wasserhanen (verschiedene Farben ausprobiert)
Kritik MK: grössen Hirarchie beachten, allgemeiner Aufbau der Informationen nicht sinvoll (ebenfalls bei v1), eher unstabil daher evtl. Rahmen oder Box nutzen

Anpassungen

  • Aufbau ändern damit der content linksbündig besser funktioniet
  • Titel über/ unter headerbild
  • Content evtl zweispaltig
Favorit

Anpassungen 2

  • Weniger harter Übergang - Logo & Klein, fein und unabhängig
  • Grössenhirarchie Logo & Klein, fein und unabhängig
  • zentriert & durch headerbild unterbrochen
  • h1 etwas kleiner
kleinere Schriftgrössen

Anpassungen 3

  • Logo & Text darunter sieht zu ähnlich aus
  • Differenzieren durch Farbe

Final v2

grüne Version ausgetestet

Umsetzung

Die Website wurde mit html und css umgesetzt. Daführ habe ich eine Vorlage erhalten wobei ich aber trozdem noch vieles ändern und hinzufügen musste. Die Umsetzung hat sehr gut geklappt jedoch war es sehr ungewohnt mit css zu arbeiten da im typo3 immer mit scss gearbeitet wird. Daher war das css etwas unstrukturiert. Dies habe ich mit Kommentaren versucht besser zu ordnen.

Bei den Browsertests habe ich ich noch einige Fehler entdeckt und diese angepasst.

 

Email verschlüsseln html css

Der Kunde wollte das er keine Spamnachrichten oder ähnliches durch die Verlinkung der Email erhält. Florian hat dafür eine Verschlüsslung fürs html & css improvisiert. Normalerweise ist die Verschlüsslung eifacher durch die Vorlage.

html:

<a class="mail" href="#" data-nosnippet="1"

                  ><span data-a="lorenz.guyer" data-nosnippet="1"></span>

                  <span data-nosnippet="1">@gkag.ch</span

                  ><span data-a="@" data-nosnippet="1"> </span

                  ><span data-a="gkag.ch" data-nosnippet="1"></span>

                </a>

css:

.mail > span[data-a]::after {

  content: attr(data-a);

}

.mail > span:not([data-a]) {

  display: none;

}

js:

<script>

      let links = document.querySelectorAll("a.mail");

      links?.forEach((link) => {

        link.addEventListener("click", (e) => {

          e.preventDefault();

          let children = link.querySelectorAll("[data-a]");

          let mailto = [];

          children?.forEach((child) => {

            mailto.push(child.dataset.a);

          });

          window.location.href = "mailto:" + mailto.join("");

        });

      });

    </script>

 

Browsertests

Da die Website nicht getestet werden kann wenn sie nicht öffentlich ist habe ich den ganzen www Ordner in den fileadmin der alten gkag Website geladen. Dadurch konnte die Website aufgerufen werden und somit auch getestet.

https://www.gkag.ch/fileadmin/www/index.html

Schwierigkeiten Browsertests:
  • Abstand Boxen - ich hatte die Boxen mit gap getrennt. Jedoch hatt dies meist nicht funktioniert und ich habe statdessen margin eingefügt.
  • Logo Impressum/Datenschutz - in den genannten Seiten wurde das Logo nicht angezeigt im Firefox. 
  • Abstand h1 Impressum/Datenschutz - der Abstand war ab ca. 500px nicht mehr korrekt.
  • Schriftgrösse h1 ab 480px wurde nicht richtig angezeigt daher habe ich es noch stärker angesprochen.