Webdesign kann so frustrieren!

Mit einem * markierte Wörter werden unten im Glossar erklärt

Ich verzweifle! Naja nicht ganz aber diese Webseite frustriert mich.
Mit Sicherheit denken das noch millionen andere Webdesigner und Webdeveloper. Aber es ist ja wahr! Vorgestern war ich noch völlig Stolz ein professionelles Theme* gekauft zu haben, heute versuche ich mit allen Wegen und Mitteln das Design ordentlich anzupassen. Im Prinzip ist es tatsächlich nicht schwer und durchaus machbar… würden nicht zig verschiedene Plugins* aufeinander treffen.

Zu viele Köche verderben den Brei
Daran ist durchaus was dran. Während des Studiums haben wir immer wieder eingetrichtert bekommen:

Arbeitet ordentlich!

Kommentiert euren Quellcode* bis ins kleinste Detail!

Und VORALLEM NICHT! wirklich NIEMALS! Hardcoden*!!

Hardcoden… das ist das Stichwort. Denke ich. Die Sache ist die:
Man stelle sich vor, man habe zwei Primäre Farben. Einmal ein sanftes Grau und ein leuchtendes Magenta. Nachdem ich mein neues Theme eingerichtet habe, waren all meine Buttons in einem schön, untermalten Magenta. Super! Nun habe ich jedoch mein erstes Plugin installiert. Soweit so gut… bis ich die erste, dazugehörige Seite sah.

Was ist das !?

Die Seite beinhaltet drei Buttons und wirklich jeder dieser Buttons, sah gottverdammt anders aus?! Der eine war etwas dunkel Magenta, der andere halb transparent (Ich mein halb transparent?! WIESO?!) und der dritte hatte eine andere Schrift. Und woran hat es gelegen?

Ja, woran hat es gelegen? Das fragste’ dich immer, woran es gelegen hat. Da sitzte’ vorm Fernseher, guckst das und denkste: Was ist das los in Russland? Und dann fragst du dich auf einmal schon wieder, woran es gelegen hat.

Torsten “Knippi” Knippertz – Bericht über www.watson.de

Dieser Moderator bringt es auf den Punkt. Wo zum Teufel war der Designer wenn man ihn mal brauchte? Damit ihr mal nachvollziehen könnt, WAS mir so genau ein Dorn im Auge war, hier ein kleiner Screenshot:

Hinweis: Die folgenden Produkte auf den Screenshot sind übrigens aus reinen Testzwecken entstanden. NICHTS davon ist real!

Lasst mich mal zusammenfassen, was haben wir denn hier? Einen Button wie ich ihn mir überall Wünsche (oben links), einen halbtransparenten Button, dessen Schrift man gar nicht lesen konnte, sowie einen Button dessen Hintergrundfarbe dunkler ist wie der Rest und dessen Schrift sich deutlich vom Rest unterscheidet. Hinzu kommt noch, dass das Inputfeld* für den Gutschein viel zu kurz ist und nicht mit dem Button in einer gleichen Größe ist. Moment, da fällt mir auf, der Button ganz rechts unterscheidet sich auch noch mal erheblich in der Größe. (Jetzt spalten sich wahrscheinlich die Meinungen: Die Einen die es nicht sehen und die Anderen die solch einen scharfsinnigen Blick haben wie ich *sarkasmus*)

Ich habe den SWE-Unterricht (Softwareengeneering) nie so ganz verstanden. Die uns angepriesenen Inhalte waren doch von sich aus logisch und nachvollziehbar. Wie beispielsweise EINHEITLICHE Buttons! Nun hatte ich auf jeden Fall die meiste Arbeit, jeden dieser Buttons noch mal einzeln anzupassen. Wie gut, dass es dafür CSS* gibt.

In meinen eigenen Projekten finde ich CSS super easy und durchaus nützlich. Nun heißt es jedoch irgendwie an den Klassenamen* der Buttons zu kommen… Das ist super einfach (leider jedoch) blickt man da nicht mehr durch:

.woocommerce input#submit[class*=alt]:hover, .woocommerce input.button[class*=alt]:hover, .woocommerce a.button[class*=alt]:hover, .woocommerce button.button[class*=alt]:hover, .woocommerce input#submit.alt.disabled:hover, .woocommerce input.button.alt.disabled:hover, .woocommerce button.button.alt.disabled:hover, .woocommerce a.button.alt.disabled:hover, .woocommerce input#submit[class*=alt]:focus, .woocommerce input.button[class*=alt]:focus, .woocommerce a.button[class*=alt]:focus, .woocommerce button.button[class*=alt]:focus, .woocommerce input#submit.alt.disabled:focus, .woocommerce input.button.alt.disabled:focus, .woocommerce button.button.alt.disabled:focus, .woocommerce a.button.alt.disabled:focus, .woocommerce input#submit[class*=alt]:active, .woocommerce input.button[class*=alt]:active, .woocommerce a.button[class*=alt]:active, .woocommerce button.button[class*=alt]:active, .woocommerce input#submit.alt.disabled:active, .woocommerce input.button.alt.disabled:active, .woocommerce button.button.alt.disabled:active, .woocommerce a.button.alt.disabled:active, .woocommerce input#submit[class*=alt], .woocommerce input.button[class*=alt], .woocommerce a.button[class*=alt], .woocommerce button.button[class*=alt], .woocommerce input#submit.alt.disabled, .woocommerce input.button.alt.disabled, .woocommerce button.button.alt.disabled, .woocommerce a.button.alt.disabled

Ich mein wie zur Hölle soll man da den Überblick bewahren und explizit diesen einen Button ansprechen? Hätte man nicht einfach sagen können, jeder Button sieht gleich aus? Und da fragt man sich schon wieder woran es gelegen hat.

Ich weiß nicht ob ich nicht zu Unrecht dem Plugin die Schuld gegeben habe, Fakt ist jedoch: Webdesign frustiert (manchmal)


Glossar Alphabetisch
Bitte… klärt mich auf, wenn ich es selbst nicht richtig beschreibe 🙂

* CSS – Cascade Stylesheet eine Formatierungssprache zum gestalten der Homepage
* Hardcoden – Einen Programmcode schreiben mit fest definierten Werten, welche nicht flexibel (vom Nutzer) ausgetauscht werden können oder sich automatisch anpassen.
* Input – So nennt man das Eingabefeld z.B. für den Gutscheincode, oder auch für Kommentare
* Klassename – Damit werden Elemente wie z.B. Buttons “markiert” um sie im CSS wiederzufinden
* Plugin – Eine Erweiterung geschrieben von Nutzern für WordPress (Kostet einen meistens die Seele)
* Theme – Ein Webseiten-Design von WordPress
* Quellcode – Der vom Browser angezeigte HTML-Code einer Webseite

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.