Nun, da meine eigene Website steht, dachte ich mir ganz kreativ, dass ich mich zuallerst einmal genau dieser in meinem Blog widmen werde. Denn auch, wenn Websitenerstellung grundsätzlich keiner Programmierkenntnisse mehr erfordert, so haben selbst Baukastensysteme wie WordPress noch so ihre Probleme.
Doch erstmal zum Anfang. Zunächst einmal begab es sich, dass mir eine neue Aufgabe im Rahmen meiner Arbeit entgegengestellt wurde: Ich solle mich um das Initial Branding einer neuen Dienstleistung kümmern. Die Grundlagen waren bereits gesetzt: URL und WordPress-Paket waren bereits vorhanden, ein einprägsamer Name ebenfalls, was fehlte war jedoch die klare Präsenz.
So ging erst einmal das Logo-Design voran. Durch meine Erfahrung mit Grafikprogrammen wie GIMP 2.1 und Inkscape ging das relativ simpel von der Hand. Das Logo sollte eine moderne, praktikable und dennoch einzigartige Aura versprühen. Ich entschied mich für Business Yellow und ein simples Kastenprinzip, dazu einer schicken Font und etwa 30 verschiedenen alternativen Versionen, die natürlich so auch präsentiert wurden. Der Sieger war mein Initialgespür und so blieb es bei leichten Abwandlungen bei der originalen Idee.
Nun benötigte dieses Konzept natürlich eine schnittige Website, und dafür galt es, die Begrenzungen zu bedenken. Denn, und das war mir ganz bewusst, meine zuständige Kollegin war keine Webdesignerin, sondern hatte nur ganz gute WordPress-Kentnisse. Ich nahm mir also die Hauptseite der Firma und ging zu einem Anwendungsentwickler meines Vertrauens, um ihn nach Rat zu fragen. Für diejenigen, die es nicht wissen, er beschäftigt sich beruflich damit, für eine gute User Experience zu sorgen und schrieb schon eine Abhandlung über barrierefreies Website-Design, er hatte also einen Plan.
Und dieser Plan hatte natürlich ordentlich Clashes mit der vorliegenden Realität. Die Seite hatte allerlei Formatierungsfehler bei Zoom und mobiler Darstellung. Einige Schriften waren aufgrund der Hintergründe nicht einwandfrei lesbar, und die Leiste mit ihren Dropdown-Menüs war auch nicht das Gelbe vom Ei.
Vom Konzept in die Traufe
Also ran an das Drawing Board, das Ergebnis war eine beinahe exakte Replika der Vorlage, ausgebügelte Fehler und smartes Use Case Design. Weitergegeben wurde es als machbar befunden und die Anwendung konnte losgehen.
Etwas ernüchtert betrachtete ich das Ergebnis. Das Theme der alten Website sei nicht mehr verfügbar, aber aus dem vorliegenden Theme wurde einiges rausgeholt. Gut. Nach einigen zusammen erarbeiteten Anpassungen kam es dem Zieldesign immer näher.
Sprung zur eigenen Website. Um WordPress und seine Grenzen besser zu verstehen, war ich bereits dabei, meine eigene Website zu designen. Eine so klare Idee wie bei der Website der Produktdatenfabrik hatte ich nicht. Zunächst war der Plan, die ganzen Dienstleistungen zu verkaufen, die ich in meiner Freizeit für Bekannte und Kommilitonen bereits anfertigte. Lektorat, Coaching und so weiter. Doch das war nicht ganz akkurat. Schlussendlich bewarb ich mich damit mehr mit meinen Neben-Hustles als mit meiner echten Erfahrung.
Ich wollte ein spürbares und individuelles Branding. Ich halte mich selbst für einen relativ kreativen und schreibbegabten Typen, und probierte mich durch verschiedene Darstellungen durch. Ein kommerzielles Logodesign musste auch her und zack: Da war ich. Top. Gewählt hatte ich zunächst ein ganz altmodisches, beiges Design, aber das war viel zu altbacken, selbst für die größere Textmenge, die ich im Sinn hatte. Das modernere Design meiner Wahl hatte zudem einige interessante Bonusfunktionen, die ich ausnutzen würde, wie z.B. das große Logo oben über dem Rest, das ich nach einiger Beratung dann festlegte. Mein eigenes Branding war geboren.
Kehren wir zur Website der Dienstleistung zurück. Während die Frist einer Werbeanzeige runtertickete, wurden Überstunden eingelegt, um die Seite, für die ich inzwischen 12 vollständige Artikel redigiert hatte, rechtzeitig online zu bringen. Neben der Anpassung einiger Texte in gemeinsamer Absprache stand nun der Gedanke an, den man ja eigentlich als erstes bedenken sollte: Mobile Design. Und da war es, das größte Problem von WordPress.
WordPress und Responsive Design
Wie kann ein Dienst, der es seinem Kunden einfach machen möchte, eine moderne und schicke Website zu besitzen, es eben jenem Kunden so schwer machen, eine mobil angepasste Website zu designen?
Ich möchte nochmal die Wichtigkeit dessen betonen: Unsere Werbeanzeige hatte einen QR-Code. Den scannt man nicht mit seiner PC-Webcam, sondern mit seinem Handy. Der Großteil des heutigen Datenverkehrs läuft über Mobilgeräte ab (Quelle) und das muss stimmen.
Die sogenannten Gutenberg-Blöcke von WordPress, die den Standard an Textblöcken, Bildblöcken und Vorlagen bereithielten, waren darauf überhaupt nicht vorbereitet. Sie sind es immer noch nicht.
Wir hatten/haben Probleme mit der Bildskalierung, mit Überschriften und Textblöcken, die keine Lust hatten, sich an das neue Gelände des Mobilgeräts anzupassen und zahlreiche andere Schwierigkeiten, wie z.B. schöne Textleisten, die beim Rauszoomen aber unempfindlicherweise in die Unendlichkeit und noch viel weiter reichten. Einige dieser Probleme bestehen Stand aktuell immer noch.
Auf meiner eigenen Website gab es inzwischen ein gleiches Problem. Die Überschriften hatten eine Farbe, die in dem Thema selbst festgelegt wurde. Nun konnte man solch ein Thema, das man sich ausgewählt hatte, aber nicht so leicht editieren. Nun waren aber selbstverständlich all meine Texte zu dunkel, da ich mich, auch wegen des gefundenen Brandings, für ein augenentspannendes Dark Theme entschieden hatte. Was sollte man also tun?
Der Lichtschein aus dem CSS-Himmel
Ja, man musste nun doch wieder Dinge programmieren bzw. Kenntnisse in diesem Bereich besitzen. Sollte nicht eigentlich genau das verhindert werden? Warum können nur Themes, die sich dann selbst als Premium-Theme bewerben und den ganzen Gutenberg-Katalog in den Schlund der Hölle werfen, damit umgehen? Ist es Geldgier? Mindere Eigenleistung? Ich weiß es nicht.
Was ich weiß, ist, dass ich erneut froh sein konnte, völlig abseits meines Studiums und meiner sonstigen Hobbies auch mal Hobbyentwickler gewesen zu sein. Halleluja für Kenntnisse in Java, Ruby, Delphi und HTML. Auch wenn der CSS-Editor störrisch war, habe ich das gemacht, was jeder gute Entwickler in meinem Bekanntenkreis tut: Schlau gegoogelt.
Da WordPress schon durch 300 Versionen und zahlreiche Überarbeitungen gegangen ist, war natürlich auch das wieder anstrengend. Der 14. Code, der mir dann versprach, dass meinem anonymen Seelenverwandten mit dem selben Problem damit erfolgreich geholfen wurde, verhalf dann auch mir.
Jetzt besitze ich einen globalen Text in weißer Farbe auf dieser Website, und Sie, werte Leserin oder Leser, können tatsächlich etwas sehen! Der Preis dafür ist lediglich, dass ich meine Text nach fertiger Bearbeitung gänzlich in weiß markieren muss, und nur noch mit einem Browserplugin für einen Dark Mode erkennen kann, da man diese selbst mit CSS nicht zuverlässig überschreiben kann ohne ein Code-Tohuwabohu zu erzeugen.
Was die Website der Produktdatenfabrik angeht (Link übrigens hier), so konnte ich zumindest aushelfen, indem ich pseudo-responsive Workaround-Methoden genutzt habe, damit Überschriften und Titel nicht mehr vom Handyscreen wegrennen, zumindest, wenn dieser eine gewisse Größe unterschreitet.
Mein Fazit: Es wäre sicherlich auf starreren Konkurrenzseiten wie z.B. SquareSpace leichter mit dem Responsive Design geworden, dafür kann WordPress sonst ganz viel, und die Seiten sehen nicht alle exakt gleich aus. Das erfordert aber harte Arbeit, und so langsam verstehe ich, warum WordPress, obwohl es ja so einfach zu nutzen sei, als Skill auf dem Lebenslauf steht.
PS: Ich schreibe mir dann bald mal WordPress auf meinen Lebenslauf.
PPS: Natürlich möchte ich nicht den funktionierenden Code der zweiten Google-Seite vorenthalten. Also danke an die verzweifelten Seelen da draußen, die so gelitten haben wie ich. Cheers.
html {
font-size: 6px;
}
@media (min-width: 900px) {
html {
font-size: 10px;
}
}h1, h2, h3, h4, h5, h6 {
color: #FFFFFF;
}
.entry-title a {
color: #FFFFFF;
}
h1.entry-title {
color: #FFFFFF;
}
Steven Angelo Levy 