Sollen Webdesigner CSS oder JavaScript lernen?
So, oder ähnlich, häufig gestellte Frage, die ich kürzlich in meinem englischsprachigen Webentwickler-Blog auf DEV.to stellte: Sollten Webdesigner JavaScript lernen? oder CSS? (Should Web Designers learn JavaScript or CSS?)
Was heißt “lernen” aber konkret? Warum stellen sich Webdesigner überhaupt solche Fragen? Geht es um Kontrolle und Unabhängigkeit oder um Zusammenarbeit und besseres Verständnis? Steckt hinter der Frage gar die Angst, in Zeiten von KI den Design-Job zu verlieren, wenn wir uns nicht ständig weiterbilden?
Sollten Webentwickler (Programmierer:innen?) im Umkehrschluss mehr (Web-) Design-Fähigkeiten und den professionellen Umgang mit Figma und Illustrator erlernen?
Vielleicht sollten wir alle, Designer:innen und Entwickler:inne, ein bisschen mehr aufeinander zugehen, ohne dabei überhöhte Erwartungen und Ansprüche aufzubauen. Viel wichtiger ist es, miteinander zu reden, und unsere Kommunikation und Kollaboration zu verbessern!
Webtechnologien und andere Aspekte
Auch als Entwickler:innen gibt es immer neues dazuzulernen. Jedes Jahr kommen neue Technologien auf den Markt und bestehende verändern sich. Wir könnten Jahre damit verbringen, alles lernen zu wollen, und hätten niemals ausgelernt.
Zu denKonzepten, die Webentwickler:inen und Designer:inen gleichermaßen kennen sollten, zählen meiner Meinung nach unter anderem
- HTML (Grundwissen): sehr wichtig und gar nicht so schwer
- CSS bzw. SCSS: sehr wichtig, sehr nützlich und oft unterschätzt
- JavaScript bzw. TypeScript, sowie React, Vue, Angular, Astro u.a.: spätestens hier kommen wir in Bereiche, wo wir niemals alles wissen können;
- für WordPress, Wix, WebFlow, Shopify, Shopware, Drupal usw. gilt das selbe: es gibt immer etwas, das wir noch nicht wissen.
Ich bezweifle, dass irgendeine Entwicklerin oder ein Entwickler wirklich alles über JavaScript weiß, einschließlich aller Libraries, Frameworks und Redaktionssysteme. Anstatt immer mehr technische Details zu lernen, sollten wir unser Wissen verbreitern und wichtige Konzepte kennen und vertiefen wie beispielsweise
- Barrierefreiheit (Accessibility, abgekürzt a11y): jede Person sollte eine Website oder App nutzen können,
- Progressive Enhancement: … und das auch mit älteren Geräten und Browsern, …
- Responsive Web Design (RWD) … egal welcher Art und Größe.
- Nachhaltige Webentwicklung (Sustainable Web Development, Sustyweb): ohne Energieverschwendung
- Ladezeitoptimierung (Web Performance): ohne Zeitverschwendung
- Test-Driven Development (TDD): prüfen und nachweisen, dass alles sicher funktioniert
- Atomic Design: kleinschrittig und wiederverwendbar
- Robustheit: das Grundprinzip der Webentwicklung:
HTML und CSS, Grundpfeiler der Webentwicklung, folgen dem Robustheitsprinzip: kleine Fehler oder defekte dürfen nicht gleich das große Ganze zerstören.
Robustheit ermöglicht auch die schrittweise Einführung moderner Neuerungen, ohne dass ältere Geräte an neuen Befehlen scheitern, die sie noch nicht kennen.
Das bedeutet aber nicht, dass wir nachlässig arbeiten dürfen. Auch in CSS kann eine fehlende oder falsch platzierte Klammer dazu führen, dass etwas an ganz anderen Stellen nicht mehr funktioniert.
footer .curly-style {
display: curly; /* "curly" ist unbekannt, diese Zeile wird ignoriert */
background: blue; /* diese Zeile funktioniert fehlerfrei */
footer.footer--alternative {
background: red;
/* Hier funktioniert nichts mehr, weil weiter oben die schließende
* geschwungene Klammer fehlt. Der Folgefehler macht die Definition der
* roten Hintergrundfarbe ungültig.
*/Im obigen Beispiel wird die rote Hintergrundfarbe einer Fußzeile unwirksam, weil weiter oben eine schließende geschwungene Klammer fehlt.
Syntax Highlighting, Warnungen und Verbesserungsvorschläge
Solche Fehler lassen sich oft einfach vermeiden, wenn wir durch farbliche Hervorhebungen (Syntax Highlighting), Vervollständigungsvorschläge, und Warnungen vor ungültigen oder unwirksamen Befehlen unterstützt werden, was uns selbst mit kostenloser Open-Source-Software wie Visual Studio Code, Stylelint und ESLint möglich wird. Auch im Browser gibt es inzwischen sehr hilfreiche schlaue Hinweise, dass und warum bestimmte Dinge nicht so funktionieren, wie sie sollen.
Im folgenden Beispiel erklärt uns ein Rollover-Text, dass die Anweisung “align-items” nicht zum Zentrieren verwendet werden kann, wenn gleichzeitig “display: inline” konfiguriert wurde.
Es gibt sogar einen Hinweis, was wir stattdessen schreiben könnten. Ich hätte zwar eher zu “text-align: right” geraten, aber das ganze ist ein großer Schritt in die richtige Richtung und erleichert das Lernen sehr!
Links zum Lernen und Nachschlagen:
Es gibt viele kostenlose Tutorials und Artikel von Designern und Autor:innen wie Sara Soueidan, Lea Verou, Rachel Andrew, oder Temani Afif und (kostenpflichtige) Online_Kurse beispielsweise bei frontendmasters.com.
Warum erzählen alle etwas anderes?
Es gibt Vorlieben und meist mehr als einen Weg zum Ziel. Außerdem scheint die Web Development Community zurzeit gespalten (“The Great Divide”) in solche, die sehr stark auf JavaScript und Systeme wie React, Vue, oder Angular setzen, um Web Apps und Single Page Applications zu programmieren, während andere, auch UX-Entwickler:innen (UX Engineers) oder Creative Web Developer genannte, ihren Schwerpunkt auf die oben genannten Grundlagen, Inklusivität und Barrierefreiheit setzen.
Auch aus diesem Grund bezeichne ich mich selbst gern als “Creative Web Developer” Ingo Steinke.
Das heißt nicht, dass ich nicht mit JavaScript oder TypeScript arbeite, aber ich arbeite vielleicht ein bisschen anderes damit als manche andere und bevorzuge klassisches CSS oder SCSS zu programmieren, wenn ich die Wahl zwischen CSS und JavaScript habe.
Was sollten Web Designer (und Web-Entwickler:innen) sonst noch wissen und was nicht? Jenseits von HTML, CSS und JavaScript sollten wir von den folgenden Themen gehört haben:
- Barrierefreiheit (WCAG, EAA, Barrierefreiheitsstärkungsgesetz)
- Dateitypen und Dateiübertragung (Bilder, ZIP-Archive, FTP; SFTP)
- Versionierung (git, GitHub)
- Suchmaschinenoptimierung (SEO) and -marketing (SEM)
- Kommunikation, Kollaboration, Projektmanagement
- KI (was es kann, was nicht, und wie wir sie nachhaltig nutzen ohne Menschen auszunutzen und Energie zu verschwenden)
- Ökonomie, Betriebswirtschaft, Umgang mit Geld und Kundschaft
- Ökologie, Soziologie und Kultur — denn wir sind keine Roboter sondern Menschen und Teil einer menschlichen Gesellschaft
Ich plädiere für “devUX”: lasst uns als Web-Designer:innen und Web-Entwickler:innen zusammenhalten, besser zusammenarbeiten und mehr und früher kommunizieren.
In meinem englischsprachigen Artikel “Should Web Designers learn JavaScript or CSS?” findet ihr noch mehr konkrete Beispiele, auch zu JavaScript. In meinem Blog “Open-Mind-Culture” findet ihr sehr viel mehr lehrreichen Lesestoff, Diskussion und Unterhaltung auf Deutsch und auf Englisch.
Habt Ihr Interesse an einer Zusammenarbeit?
Kontaktiert mich über meine Website, www.ingo-steinke.de, oder über Social Media (LinkedIn, Insta, etc)!
