Mit Sicherheit kontrovers

Ein Blog, der Sicherheit kontrovers diskutiert.

„Mit Sicherheit kontrovers“ ist ein Blog der Gesellschaft für Sicherheitspolitik e. V. und dient dem Austausch von Informationen rundum das Thema Sicherheitspolitik.

Auftragslage

Unser Projekt startete im Sommer 2021. Wir erfuhren, dass der Blog zu diesem Zeitpunkt bereits seit ca. einem Jahr in Bearbeitung war, jedoch leider nicht mehr vorrangig. Der Grund dafür war, dass der damalige sog. Grafiker des Programmier-Teams nicht zeitgemäß ablieferte und darüber hinaus kein zufriedenstellendes User Interface (UI) erstellen konnte. Probleme gab es im Layout vor allem mit dem Responsive Design, also dem Interface für mobile Versionen (Smartphone, Tablet, etc.). Für das Blog-Projekt wurde vom damaligen Dienstleister ein eigenes CMS (Content Management System) in React (eine Programmiersprache) geschrieben, in dem die Artikel-Ersteller (in diesem Fall die GSP selbst) die Beiträge und auch Fotos und andere Tools hochladen können. Nun mag sich der ein oder andere Leser denken: „Wieso wurde ein komplett neues CMS programmiert, wenn man in Zeiten von Typo3, Contao, WordPress, u. a., auf fertige CMS setzen könnte?“. Darauf haben wir leider keine Antwort, denn z. B. WordPress zu verwenden wäre für den Kunden in der Handhabung einfacher, aber vor allem auch kostengünstiger in der Erstellung gewesen. Unser Auftrag war es nun im ersten Schritt, den unzuverlässigen „Grafiker“ des Teams zu ersetzen und das User Interface in schnellster Zeit anzufertigen und für mobile zu optimieren. Ziel war dabei auch, die bis dato vorhandene Blog-Struktur nicht zu sehr zu verändern, sodass die involvierten Programmierer des bereits beauftragten Teams keinen Mehraufwand haben.

Logo

Neben der Gestaltung des User Interfaces des Blogs sollten wir das Logo erstellen. Der Auftrag war eindeutig, dennoch hatten wir Freiheiten: Das Logo sollte zum vorhandenen Logo der GSP passen, bzw. erkennbar sein, dass es eine Tochter der GSP ist. Einheitlich für Logos der GSP ist ein horizontales Logo mit Bildmarke auf der linken und zweizeiligem Text auf der rechten Seite. Hier gab es zwei Entwürfe:

Es wurde sich für den zweiten Entwurf entschieden.

Bei der Gestaltung eines Logos geht es nicht darum, wie viel man reinquetschen kann. Weniger ist mehr! Und warum? Weil minimalistische Designs einfach besser im Gedächtnis bleiben.

Aber was macht diese minimalistische Kombination so besonders? Nun, es ist eine Kombination aus Wort und Bild, die das Beste aus beiden Welten vereint. Das Bild allein könnte verwirrend sein, aber das Wort gibt ihm Bedeutung. Das Wort allein könnte langweilig sein, aber das Bild gibt ihm Schwung.

Das Ergebnis ist ein Logo, das sowohl professionell als auch einprägsam ist. Es ist leicht zu erkennen und zu merken, und das ist es, was wir bei der Gestaltung eines Logos anstreben.

Also, wenn du jemals in der Notwendigkeit eines Logos bist, denke minimalistisch. Am Ende des Tages geht es darum, im Gedächtnis deiner Kunden zu bleiben. Und wenn du uns brauchst, um dir dabei zu helfen, sind wir hier, um dich zu unterstützen, das perfekte Logo zu gestalten!

UI des Blogs

Nun, wir haben uns hier ordentlich ins Zeug gelegt, um das User Interface (UI) des Blogs zu optimieren. Wir haben uns auf Adobe XD, Adobe Photoshop und Adobe Illustrator gestürzt wie die drei Musketiere auf ihr Schwert. Und weißt du was? Es hat sich gelohnt! Mit Adobe XD haben wir das perfekte UI Design erstellt – oder auch Screendesign genannt –, das dann als Vorlage für die Programmierung verwendet wurde. Und damit das Ganze auch auf mobilen Geräten einwandfrei aussieht, haben wir uns was Besonderes einfallen lassen: Die Kategorien-Spalte verschwindet in der mobilen Version und die Bilder, die links neben dem Artikel standen, erscheinen über den Artikeln als „Karte“. Warum? Weil wir kreativ sind, Baby! Aber Spaß beiseite, wir wussten nicht, wie viel Zeit-Budget die Programmierer noch hatten, um unser Design auch wirklich umzusetzen (Anfang dachten wir an eine Masonry-Struktur der Blogübersicht – ähnlich wir bei unser Blogübersicht). Also haben wir uns auf das Wesentliche beschränkt und eine vereinfachte Navigation eingebaut. Als Font haben wir die schicke Roboto Sans gewählt. Und das Ergebnis? Schau selbst!

Wie du siehst, wurden viele der Funktionen des UI nicht umgesetzt oder nur teils. Das UI ist nun kein Meisterwerk, aber es funktioniert. Ein weiteres Problem nahte jedoch:

Landingpage und SEO

Ohje, da hatten wir aber ein Problemchen! Das ganze CMS wurde vom anderen Dienstleister in React geschrieben und aus irgendeinem Grund konnten Suchmaschinen den Blog nicht indexieren. Das ist doch Mist, wenn niemand die tollen Beiträge der GSP in der Google-Suche findet!

Aber keine Sorge, wir sind nicht tatenlos geblieben. Nach vielen Gesprächen mit dem Auftraggeber und den Programmierern haben wir beschlossen, eine Landingpage zu erstellen, die dann von den Suchmaschinen indexiert werden kann. Easy peasy, oder? Okay, vielleicht doch nicht so easy, denn die Landingpage und der Blog laufen auf unterschiedlichen Domains und Servern und sind in verschiedenen Programmiersprachen geschrieben. Aber hey, wir lassen uns doch von ein paar technischen Hürden nicht unterkriegen!

Also haben wir eine clevere Lösung gefunden. Wir haben einen iFrame erstellt, der die „Tablet-Version“ (wegen der Pixelbreite) des neuesten Beitrags „streamt“ und ihn auf der Landingpage als Vorschau präsentiert. So können wir sicherstellen, dass die Leser:innen auch immer auf dem neuesten Stand sind und den aktuellen Beitrag direkt auf der Landingpage sehen können.

Okay, es wird ernst! Der Blog steht, ist indexierbar und sogar SEO-freundlich. Aber jetzt müssen wir ihn auch noch bekannt machen! Und wer wird für diese Mission gebucht? Richtig, Kopf & Hand! Wir haben den Auftrag erhalten, Anzeigen für die ES & T zu gestalten – einer Fachzeitschrift für Sicherheitspolitik. Ja, du hast richtig gehört! Wir bewerben den Blog in einer Zeitschrift für Sicherheitspolitik! Aber keine Panik, wir sind bereit für diese Herausforderung!

Anzeigenerstellung

Neugestaltung des Blogs

Leider bemerkten wir im Laufe der Zeit, dass das CMS auf React sehr viele Fehler hatte, sodass wir uns von dieser Technologie verabschieden mussten. Wir haben den Blog also auf WordPress „neugebaut“. Wir haben das Beste aus der Situation gemacht und unseren neuen Blog richtig aufgepimpt, heißt intuitiver und für die GSP leichter bedienbar entwickelt!

Wir haben uns ins Zeug gelegt und Vorlagen erstellt, damit selbst Laien ganz einfach Blogbeiträge erstellen können. Und das Beste daran ist, dass das Design immer gleichbleibend ist. Damit das Ganze noch besser wird, haben wir auch noch filterbare Kategorien integriert, um die Navigation durch die verschiedenen Kategorien noch einfacher zu gestalten.

Aber das ist noch nicht alles! Wir haben auch ein Ajax-Suchfeld integriert. Du fragst dich jetzt bestimmt, was das ist? Ganz einfach: Ajax steht für „Asynchronous JavaScript and XML“ und bedeutet, dass die Suchergebnisse direkt auf der Seite angezeigt werden, ohne dass man auf eine separate Suchseite weitergeleitet wird. Das spart Zeit und ist super bequem. Wir sind wirklich stolz auf unser neues Suchfeld und hoffen, dass es dich genauso begeistert wie uns!

Die neue Blogübersichtsseite mit dem aktuellen Beitrag in der Hero-Section macht einfach einen guten Eindruck. Besonders praktisch ist, dass die Besucher:innen jetzt auf den ersten Blick sehen, worum es im Blog gerade geht. Das macht neugierig und weckt das Interesse, weiterzulesen.

Das ist noch nicht alles: Mit den filterbaren Kategorien haben wir die Navigation durch die Beiträge stark vereinfacht. Die Leser:innen können jetzt ganz einfach die Beiträge finden, die sie am meisten interessieren und das Ajax-Suchfeld ist dabei ein Gamechanger. Keine nervigen Ladezeiten mehr, keine Umleitung auf eine andere Seite – alles passiert jetzt direkt in Echtzeit. Das spart den Leser:innen wertvolle Zeit und sorgt für ein besseres Nutzererlebnis.

Kurz gesagt: Wir haben den Blog fit für die Zukunft gemacht und die GSP ist bereit, dich als Leser:in mit kontroversen Inhalten zu begeistern. Also lehne dich zurück, schnapp dir eine Tasse Kaffee und genießt die neuesten Beiträge der GSP – auf dem aufgefrischten und verbesserten Blog!

Willst du auch einen Blog haben, der so professionell und ansprechend ist wie der, der GSP? Wir helfen dir gerne dabei! Egal ob du ein Unternehmen oder eine Privatperson bist, wir erstellen dir einen Blog, der deine Leser:innen begeistert und dich zum Star der Blogosphäre macht. Kontaktiere uns und wir zeigen dir, wie es geht und was dabei alles zu beachten ist!

Hast du Fragen oder Anmerkungen, dann nutze gern die Kommentarfunktion!