Wir haben uns nicht lumpen lassen und unsere Webseite einem Facelifting unterzogen. Doch nicht nur im Design hat sich was getan! Hier haben wir für euch einmal zusammengefasst, auf was wir beim Redesign wert gelegt und welche Spielereien wir uns für euch überlegt haben.

 

Was war für uns besonders wichtig bei der Neugestaltung unserer Webseite?

Der Fokus lag ganz klar auf Performance und Übersichtlichkeit. Wie in der Grafik zu sehen ist, waren die Kategorien „Performance“ und „Progressive Web App“ bei unserer alten Homepage verbesserungsbedürftig. Zwar war unsere bisherige Seite nach 2 Sekunden bereit für Interaktionen, doch bis alle Assets geladen waren, vergingen weitere 10 Sekunden. Durch das lange Nachladen war der Pagespeed im Test entsprechend schlecht. Es war uns ein Bedürfnis diesen Misstand mit unserer neuen Webseite aus der Welt zu schaffen und Top-Werte zu erzielen. Ohne Verlust unserer SEO-Performance, konnten alle weiteren Werte im Test verbessert werden. Unsere ehemaligen Schwachstellen konnten somit enorm gesteigert werden. Mit gerade einmal 1,11 Sekunden Ladezeit gehört unsere Startseite zu den Top-Adressen.

Ergebnisse des Lighthouse-Audit in Google Chrome
Ergebnisse des Lighthouse-Audit in Google Chrome

Durch welche Features wird unsere so gute Performance erreicht?

Für unsere statische Seite nutzen wir Gatsby. Dieser Generator erstellt Static Sites auf der Basis von React-Komponenten. Und das bringt viele Vorteile mit sich! Die Ladegeschwindigkeit der Hauptseite und den darauf verlinkten Seiten reduziert sich aus vielen verschiedenen Gründen. Die wichtigsten für uns sind die folgenden:

  • Offline-Funktion (Offline-Verfügbarkeit der Homepage)
  • Prefetching (Vorladen der verlinkten Unterseiten, während noch auf der Startseite gesurft wird)
  • Page-Caching (Inhalte bereits besuchter Seiten werden lokal gespeichert um bei zukünftigen Besuchen schneller geladen werden zu können)
  • Progressive image loading (Anzeigen von Platzhaltern für Bilder, bis diese vollständig geladen sind. Das Herumspringen der Seite wird dadurch vermieden.)
  • Responsive image loading (Laden der Bilder in der für die Browsergröße notwendigen Größe.)
  • Inlines critical CSS (CSS für „above the fold“ content wird Inline im HTML mitgeliefert)

Dank der Verwendung von Gatsby konnte unsere Performance wie oben zu sehen verbessert und nahezu perfektioniert werden. Ebenfalls wurde die Dateigröße sämtlicher verwendeter Bilder so klein wie möglich gehalten.

Unser zweiter Fokus lag, ganz nach dem Motto „weniger ist mehr“, auf der Übersichtlichkeit der Inhalte. Die Unterseiten sollten allesamt einladend, aber nicht überladen sein aber auch die persönliche Note durfte nicht fehlen. Diese Note spiegelt sich zum einen in den vielen unternehmenseigenen Bildern, zum anderen in den kleinen Spielereien wieder.

 

Ihr fragt euch welche Spielereien wir meinen?

Cookie-Banner und 7METER17-Logo

Da wäre zunächst beim erstmaligen Laden unserer Homepage das farbenfrohe Cookie-Banner. Die ganzen Banner seit dem Inkrafttreten der DSGVO finden wir eher öde bis nervig. Daher haben wir etwas Farbe und Unterhaltung in das Ganze Thema gebracht. Das Banner selbst erstrahlt in allen Farben, die die Regenbogenpalette bereithält. Auf der linken Seite haben wir dann noch Nyan Cat zur Party eingeladen.

Cookie-Banner mit Nyan Cat
Cookie-Banner mit Nyan Cat

Ist euch im Hintergrund von Nyan Cat das 7METER17-Logo aufgefallen? Ihr habt richtig gesehen. Das Logo schwebt auf und ab und entsprechend verändert sich auch der Schatten darunter.

Direktkontakt

Wer schon einmal in unserem Menü war, wird bemerken, dass das Kontaktformular nicht mehr zu finden ist. Dieses haben wir entfernt. Dafür wurde unser Dringlichkeitsregler allerdings ein wenig getunt. Wird der Regler nach links oder rechts bewegt, verändert sich der darunterliegende Text und vor allem der Button, über den ihr direkt Kontakt zu uns aufnehmen könnt. Sollte euer Anliegen an uns von höchster Dringlichkeit sein, ist der Button entsprechend völlig am „durchdrehen“.

 

Was gibt es sonst noch Erwähnenswertes bei uns?

Referenzen

Auf der Start- und den Unterseiten findet ihr eine Kachelwand mit unseren Referenzen. Darauf bekommt ihr schnell einen Überblick über die Top-Namen, die in der Vergangenheit bereits auf uns gebaut haben. Dazu zählen unter anderem Start-Ups, mittelständische Unternehmen, E-Commerce-Händler und Agenturen. Auch die deutschen Top-Agenturen konnten wir bereits von uns überzeugen.

Übersicht Referenzen
Übersicht Referenzen

Offene Stellen

Außerdem neu dabei: unsere Job-Seite. Hier informieren wir euch jederzeit über die offenen Stellen bei uns im Unternehmen. Zu jedem Job erhaltet ihr eine detaillierte Übersicht wer wir sind, was wir machen, wen wir suchen und was auf dich zukommt, wenn du dich bei uns bewerben solltest. Aktuell sind wir übrigens auf der Suche nach Entwicklern!

Übersicht Jobs
Übersicht Jobs

 

Wir freuen uns sehr über unsere neue Webseite und sind darauf gespannt wie ihr sie findet! Schaut einfach mal vorbei!