Portfolio Optimierung

Mein programmiertes Portfolio ist nun seit einem halben Jahr online – und damit kamen auch ein paar unschöne Dinge zum Vorschein. In dieser Optimierung kümmere ich mich um nervige Spam-Nachrichten, die individuelle 404-Fehlerseite, das Bildformat der Zukunft und weitere Kleinigkeiten.

Eigentlich sollte Freude herrschen, sobald eine E-Mail im Postfach aufpoppt, die vom Kontaktformular der eigenen Portfolioseite stammt. Doch seit meine Homepage live ist, befinden sich dort vor allem eines: Spam-Nachrichten! Erstaunt darüber bin ich nicht, denn das Formular verfügt über keinen Spamschutz, wie man das zum Beispiel bei WordPress mit den Plugins kennt. Für die Bots stellt das natürlich ein gefundenes Fressen dar, so dass ich folgende Schritte unternommen habe:

1. mailto in separatem File

Der erste und einfachste Schritt ist, seine E-Mail-Adresse auf der ganzen Webseite zu verschleiern. Hierfür musste ich lediglich eine neue php-Unterseite erstellen und die jeweiligen :mailto-Verlinkungen im HTML durch die der php-Seite ersetzen. Im php-File wird in zwei Zeilen Code die E-Mail-Adresse ausgegeben.

Vorteil: Die Besucherinnen und Besucher merken nichts davon und es gibt keine Einbusse der Performance.

2. Das Honeypot Prinzip

Der zweite Schritt ist etwas komplexer aber trotzdem gut umzusetzen. Hierfür erstellte ich ein zusätzliches Eingabefeld im Formular, das allerdings mit CSS direkt ausgeblendet wird. Den Bots ist egal, wie viele Felder auf der Seite angezeigt werden, da sie direkt auf den Code zugreifen und im HTML-Code ist dieses Feld ja weiterhin ersichtlich. Sobald also die Bots das versteckte Feld ebenfalls ausfüllen, wird die Nachricht als Spam erkannt und die Übertragung nicht ausgeführt.

Vorteil: Auch hier merken die Nutzenden nichts davon.
Nachteil: Die Bots werden schlauer und umgehen das Prinzip teilweise.

3. Spam-Filter

Nach einer Testphase stellte sich heraus, dass nicht alle Bots auf den Honeypot-Trick hereinfallen oder bereits fortgeschrittene KI besitzen. Lange habe ich mir überlegt, welche Variante zusätzlich in Frage kommen würde, ohne dass die Performance und Usability der Seite zu stark beeinträchtigt werden. Ein Captcha, wo man zum Beispiel in einem Bildergrid alle Autos finden muss, kam für mich nie in Frage, da ich nicht von Dritten (z.B. Google) abhängig sein möchte.

Schlussendlich entschied ich mich für einen Keyword-Filter. Hierfür überprüfte ich die bereits erhaltenen Spam-Nachrichten in meinem Postfach nach Schlüsselwörtern, die besonders häufig verwendet werden. Wörter wie Viagra, Casino, Bitcoin, Sex, Traffic oder SEO kamen sehr oft vor und werden mit grosser Wahrscheinlichkeit auch nicht in einer professionellen Anfrage über mein Kontaktformular verwendet.

Den Anti-Spam-Filter habe ich mit dem Honeypot kombiniert. So wird in einer if-else Abfrage zuerst überprüft, ob die Mitteilung eine dieser Schlüsselwörter enthält. Danach wird gecheckt, ob das unsichtbare Feld ausgefüllt wurde. Falls nicht, wird die Nachricht erfolgreich übermittelt, falls doch, endet der Prozess mit einer Fehlermeldung.

Sollte nun doch eine echte Anfrage in einer Fehlermeldung enden, habe ich die Folgeseite mit einer kurzen Nachricht ausgestattet und auf die direkte Anfrage per E-Mail hingewiesen.

Vorteil: Die Usability ist gegeben, da keine Rätsel gelöst oder Captchas ausgefüllt werden müssen. Der Code ist nachvollziehbar und die Keywords lassen sich jederzeit anpassen.
Nachteil: Wie bereits erwähnt, können echte Nachrichten dem Filter zum Opfer fallen. Aufgrund des Zwecks meiner Homepage, wird das allerdings selten bis nie der Fall sein.

404 Seite

Eine Error-Seite sieht man nicht gerne, aber wenn es dann doch mal passiert, soll sie wenigstens schön, funktional und vielleicht auch humorvoll sein. Die Idee und Konzeption zu meiner 404-Seite entstand im Minor Interaktionsdesign. Nun habe ich das Design mit den animierten Pixelgrafiken umgesetzt.

Das Ergebnis kannst du dir hier ansehen: 404 Seite

Next-Gen Bildformate

Schon mal was von WebP gehört? Das ist ein von Google entwickeltes Bildformat, das in letzter Zeit immer mehr an Beliebtheit gewinnt. Der grosse Vorteil von WebP liegt darin, dass die Bilddateien bei geringem Qualitätsverlust stärker komprimiert werden können, wie das beispielsweise bei JPG der Fall ist. Seit nun auch Safari als letzter grosser Browser dieses Format unterstützt, wollte ich die Bilder auf meiner Seite entsprechend anpassen.

Photoshop unterstützt dieses Format leider noch nicht. Ein Plugin war nötig, um die Bilder als WebP abzuspeichern. Das Resultat kann sich allerdings sehen lassen. Die Bilder sind bei guter Qualität kleiner und laden spürbar schneller.

Doch was ist, wenn jemand mit einer älteren Browserversion oder einem nicht unterstützen Browser die Seite besucht? Genau dann kommt ein Fallback auf JPG zum Einsatz. Kann also das Bild mit WebP-Format aus einem bestimmten Grund nicht geladen werden, verweist der Fallback automatisch auf das JPG-Bild.

Weite Anpassungen

• Navigation Mobile
• Portfolio Erweiterung
• Performance / Accessibility / Best Practice / SEO Optimierung über Lighthouse

Das optimierte Portfolio kannst du dir über diesen Link ansehen!

(mou)