Ein Entwurf ist erst fertig, wenn er sich verändern darf
Papier hat eine feste Breite, ein Bildschirm nicht. Genau daran scheitern Entwürfe, die aus dem Printbereich kommen, und genau darin liegt das Handwerk dieser Rolle.
KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Die Stelle verlangt beides und die Ausbildung deckt meist nur eine Seite ab
Wer aus der Gestaltung kommt, liefert Entwürfe, die in einer festen Breite hervorragend aussehen und in der Umsetzung auseinanderfallen, weil die Frage offen blieb, was bei halber Breite passiert und wie ein doppelt so langer Menütitel unterkommt. Wer aus der Technik kommt, baut Seiten, die auf jedem Gerät funktionieren und typografisch nicht überzeugen, weil Zeilenlänge, Schriftgrößenverhältnis und Weißraum nie Thema waren.
Dazu kommt, dass in kleineren Häusern niemand sonst da ist. Der Webdesigner ist dort zugleich Entwurf, Umsetzung, Inhaltspflege und Ansprechperson für die Agentur, die vor drei Jahren die Seite gebaut hat. Diese Vielseitigkeit ist der Reiz der Rolle und zugleich der Grund, warum sie schwer zu lernen ist, denn es gibt keinen Kurs, der alles davon abdeckt.
Seit dem 28. Juni 2025 ist eine dritte Anforderung dazugekommen. Das Barrierefreiheitsstärkungsgesetz verlangt für bestimmte Produkte und Dienstleistungen im Geschäft mit Verbrauchern, dass sie barrierefrei angeboten werden, und dazu gehören unter anderem der elektronische Geschäftsverkehr und einige Dienstleistungen. Damit ist Barrierefreiheit von einem Qualitätsmerkmal zu einer Anforderung geworden, die in der Abnahme geprüft wird.
KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Sechs Schritte vom ersten Markup bis zur gepflegten Seite
Die Reihenfolge ist bewusst technisch zuerst. Wer mit dem Entwurf beginnt, lernt Gestaltung ohne Gefühl dafür, was sie in der Umsetzung kostet, und muss die ersten Entwürfe später verwerfen.
- 1
HTML als Struktur begreifen, nicht als Optik
Lern die Elemente nach ihrer Bedeutung: Überschriftenränge, Listen, Tabellen für Daten, Formularelemente mit Beschriftung, Bereiche für Navigation und Hauptinhalt. Wenn eine Seite ohne jede Gestaltung noch verständlich ist, stimmt die Struktur.
Geschafft, wenn: Deine Seite ergibt vorgelesen dieselbe Reihenfolge wie angesehen.
- 2
CSS von der Kaskade her lernen
Erst Fluss, Box-Modell, Vererbung und Spezifität, dann Flexbox und Grid. Wer diese Grundlagen überspringt und mit einem Framework anfängt, kann Seiten zusammensetzen und keine Fehler finden, weil ihm die Erklärung fehlt, warum ein Abstand entsteht.
Geschafft, wenn: Du kannst zu jedem Abstand auf der Seite sagen, woher er kommt.
- 3
Ein Layout ohne feste Breiten bauen
Setz auf fließende Maße, sinnvolle Mindestbreiten und Umbruch. Umbruchpunkte setzt du dort, wo das Layout sichtbar bricht, und nicht an den Maßen bestimmter Geräte, denn diese Liste ist morgen unvollständig.
Geschafft, wenn: Die Seite funktioniert bei jeder Breite zwischen Telefon und großem Monitor.
- 4
Den Entwurf im Gestaltungsprogramm anlegen
Arbeite mit Komponenten, festen Abstandsschritten und benannten Farb- und Textstilen, dann entsteht ein Entwurf, der sich umsetzen lässt. Leg von jedem Bildschirm mindestens eine schmale Fassung an, sonst verschiebst du die schwierigen Entscheidungen in die Umsetzung.
Geschafft, wenn: Die Umsetzung kann anfangen, ohne dich zu jedem Abstand zu fragen.
- 5
Barrierefreiheit prüfen, bevor jemand anders es tut
Geh die Seite einmal nur mit der Tastatur durch, vergrößer die Schrift auf das Doppelte, prüf die Kontraste und lies dir die Alternativtexte laut vor. Danach erst lohnt ein Prüfwerkzeug, denn es findet die technischen Fehler und nicht die inhaltlichen.
Geschafft, wenn: Du kannst benennen, welche Anforderungen erfüllt sind und welche offen.
- 6
In ein Redaktionssystem überführen und übergeben
Bau Inhaltselemente statt fertiger Seiten, begrenz die Gestaltungsmöglichkeiten bewusst und schreib der Redaktion in einer halben Seite auf, welches Element wofür gedacht ist. Was du an dieser Stelle nicht regelst, taucht in sechs Monaten als kaputtes Layout wieder auf.
Geschafft, wenn: Die Redaktion legt neue Seiten an, ohne dich zu fragen.
Fünf Prüfungen vor jedem Livegang
- 01 Die ganze Seite ist mit der Tastatur bedienbar und der Fokus bleibt sichtbar.
- 02 Bei doppelter Schriftgröße verschwindet kein Inhalt und nichts überlappt.
- 03 Jedes inhaltstragende Bild hat einen Alternativtext, Dekoration hat keinen.
- 04 Formularfelder haben Beschriftungen und Fehler stehen als Text daneben.
- 05 Das Layout springt beim Laden nicht, weil Bildmaße vorher feststehen.
Was du in dieser Rolle beherrschen musst
Die Rolle besteht aus vier Schichten, die aufeinander aufbauen und nicht gegeneinander austauschbar sind. Wer eine davon auslässt, merkt es erst, wenn eine Seite live ist und etwas nicht funktioniert.
Struktur vor Optik
Überschriftenebenen, Listen, Bereiche und Beschriftungen sind kein Stilmittel, sondern die Grundlage, auf der Suchmaschinen und Hilfsmittel eine Seite verstehen. Wer Überschriften nach Schriftgröße auswählt statt nach Rangfolge, macht die Seite für einen Teil der Nutzer unbrauchbar und merkt es nie.
Layout, das sich verändern darf
Fließender Satzspiegel, sinnvolle Mindest- und Höchstbreiten, Umbruch statt Verkleinerung. Wer mit modernen Layoutverfahren arbeitet, braucht deutlich weniger feste Umbruchpunkte, und die Seite funktioniert auch auf einer Breite, an die niemand gedacht hat.
Typografie am Bildschirm
Zeilenlänge, Zeilenabstand, Größenverhältnisse und Kontrast entscheiden über Lesbarkeit stärker als die Schriftwahl. Auf dem Bildschirm kommt dazu, dass jemand die Schrift vergrößert, und dein Layout muss das aushalten, ohne dass Inhalte verschwinden.
Barrierefreiheit prüfen können
Tastaturbedienung von Anfang bis Ende, sichtbarer Fokus, ausreichende Kontraste, sinnvolle Alternativtexte, beschriftete Formularfelder und Fehlermeldungen, die nicht nur farblich markiert sind. Das meiste davon prüfst du ohne Werkzeug in wenigen Minuten.
Ladeverhalten im Blick behalten
Bildformate und Bildgrößen, Schriften, die nicht das ganze Rendern blockieren, und ein Layout, das beim Laden nicht springt. Das sind Entscheidungen im Entwurf, nicht Optimierungen am Ende, und nachträglich sind sie teuer.
Mit einem Redaktionssystem umgehen
Die meisten Seiten werden nicht von dir gepflegt. Deine Aufgabe ist es, Bausteine zu bauen, mit denen die Redaktion nichts kaputt machen kann, und Vorgaben so zu setzen, dass eine zu lange Überschrift das Layout nicht zerlegt.
KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Der Alltag ist Pflege, nicht Neubau
Neue Seiten von Grund auf entstehen selten. Der übliche Auftrag heißt, eine bestehende Seite zu erweitern, eine Kampagnenseite anzulegen, ein Formular umzubauen oder das Erscheinungsbild an eine neue Vorgabe anzupassen. Das bedeutet, dass du dich regelmäßig in fremden Code einarbeitest, der nach anderen Regeln gebaut wurde als deinen, und dass Zurückhaltung dabei mehr wert ist als Gründlichkeit.
Der zweite Block ist Zuarbeit für andere. Die Redaktion braucht ein Element, das es noch nicht gibt, das Marketing braucht eine Auswertung, die Geschäftsführung fragt, warum die Seite bei einer bestimmten Suchanfrage nicht auftaucht. Diese Fragen landen in kleinen Häusern zuverlässig beim Webdesigner, weil er der Einzige ist, der die Seite kennt.
Der dritte Teil ist Bestandspflege, die niemand beauftragt: Aktualisierungen des Redaktionssystems und der Erweiterungen, Sicherungen, abgelaufene Zertifikate, tote Links, Bilder, die seit dem letzten Umbau in doppelter Größe ausgeliefert werden. Wer sich das nicht selbst in den Kalender legt, macht es irgendwann unter Zeitdruck.
Webdesigner, UX-Designer, Frontend-Entwickler und Webmaster
Der Webdesigner verantwortet, wie eine Website aussieht und wie sie aufgebaut ist, meist einschließlich Markup und Gestaltungsregeln. Der Frontend-Entwickler verantwortet das Verhalten, arbeitet mit JavaScript und einem Framework und denkt in Zuständen, Datenbindung und Tests. Die Grenze verläuft an der Frage, ob eine Seite ausgeliefert oder eine Anwendung gebaut wird, und sie ist in kleinen Häusern unscharf.
Der UX-Designer arbeitet vor beiden. Er klärt, welche Aufgabe jemand erledigen will, in welcher Reihenfolge die Schritte stehen und wie die Dinge heißen. In vielen Betrieben gibt es diese Rolle gar nicht, und dann übernimmt der Webdesigner den Teil davon, der sich nicht vermeiden lässt. Das ist üblich und wird selten bezahlt.
Der Webmaster schließlich betreut den Betrieb: Aktualisierungen, Zugriffsrechte, Domains, Postfächer, Sicherungen und die Auswertung der Zugriffe. Auch das fällt in kleinen Häusern derselben Person zu. Für eine Bewerbung lohnt es sich, im Anschreiben zu benennen, welchen dieser vier Anteile du wirklich beherrschst, weil die Stellenanzeige diese Unterscheidung fast nie trifft.
Der Weg hinein, und was Barrierefreiheit daran ändert
Es gibt keinen geschützten Zugang. Der übliche Weg führt über Mediengestaltung, Grafikdesign oder Informatik, funktioniert aber genauso aus der Redaktion, dem Marketing oder der Systembetreuung heraus. Was zählt, ist eine Seite, die live ist und die du erklären kannst, am besten eine, die jemand anderes pflegt, ohne dich anzurufen.
Die rechtliche Seite ist seit 2025 ein eigenes Verkaufsargument geworden. Für öffentliche Stellen des Bundes gilt seit Langem die Barrierefreie-Informationstechnik-Verordnung, die sich auf die europäische Norm EN 301 549 stützt, und die wiederum verweist auf die Richtlinien für barrierefreie Webinhalte des W3C. Seit dem 28. Juni 2025 gilt daneben das Barrierefreiheitsstärkungsgesetz für bestimmte Produkte und Dienstleistungen gegenüber Verbrauchern, wobei Kleinstunternehmen bei Dienstleistungen ausgenommen sind.
Für deinen Einstieg heißt das zweierlei. Erstens ist Barrierefreiheit der Teil deines Handwerks, mit dem du dich am schnellsten von Mitbewerbern absetzt, weil viele ihn bisher als optional behandelt haben. Zweitens ist er im Gespräch überprüfbar: Wer eine bestehende Seite in zehn Minuten mit der Tastatur durchgeht und drei konkrete Befunde nennt, überzeugt zuverlässiger als jede Mappe.
Was den Unterschied macht und wohin es danach geht
Die erste Weggabelung liegt bei der Frage, ob jemand Seiten baut oder Bausteine. Wer für jede Kampagne eine neue Vorlage anlegt, hat nach zwei Jahren vierzig Vorlagen und keine Übersicht. Wer stattdessen wenige Inhaltselemente pflegt und sie kombiniert, wird schneller und behält die Kontrolle über das Erscheinungsbild.
Der zweite Unterschied ist der Umgang mit Bestandscode. Die eine Person schreibt bei jedem Auftrag neue Regeln dazu, bis niemand mehr weiß, welche wirken. Die andere räumt beim Anfassen auf, benennt nachvollziehbar und löscht, was nicht mehr gebraucht wird. Nach zwei Jahren arbeiten beide an derselben Seite und die eine braucht für dieselbe Änderung ein Vielfaches der Zeit.
Danach stehen drei Richtungen offen. In die Umsetzung hinein, also Frontend-Entwicklung mit JavaScript und einem Framework, wo aus Seiten Anwendungen werden. In die Konzeption, also UX und Informationsarchitektur, wo du früher im Vorhaben sitzt. Oder in die Breite, als verantwortliche Person für den gesamten Webauftritt eines Hauses, mit Zuständigkeit für Redaktion, Auswertung, Auffindbarkeit und die Zusammenarbeit mit Agenturen.
Warum die naheliegende Zahl hier nicht passt
Die Verdiensterhebung des Statistischen Bundesamtes kennt zwar eine Berufsgattung Webadministration, und die klingt zunächst passend. Sie beschreibt aber den Betrieb von Webdiensten und Servern, also Einrichtung, Verfügbarkeit und Pflege, und nicht die Gestaltung von Websites. Diese Zahl hier zu zeigen hieße, eine Zelle umzudeuten, damit überhaupt eine Zahl auf der Seite steht, und genau das machen die Ratgeberportale, an denen wir uns nicht orientieren.
Dazu kommt, dass der Zuschnitt der Stellen in diesem Beruf besonders weit auseinandergeht. Dieselbe Bezeichnung steht für eine Person, die in einer Marketingabteilung Kampagnenseiten pflegt, und für eine, die in einer Agentur Erscheinungsbilder entwirft und umsetzt. Ein Mittelwert über beides beschreibt keine der beiden Stellen.
Nachprüfbar bleibt die Branchenebene. Das Statistische Bundesamt weist Bruttojahresverdienste Vollzeitbeschäftigter nach Wirtschaftszweigen aus, und dieser Wert schließt Sonderzahlungen wie Weihnachts- und Urlaubsgeld ein, anders als die Monatswerte der einzelnen Berufsgattungen. Was deinen Verdienst tatsächlich verschiebt, sind die Größe des Arbeitgebers, die Frage Agentur oder eigenes Haus, die Tarifbindung, die Region und der Anteil an Umsetzung, den du tatsächlich selbst übernimmst.
Dazu passende Kurse
Weil die Ausgabebreite unbekannt bleibt, führen die Kurse, in denen du ein Layout ohne Framework auf jedem Bildschirm zum Sitzen bringst an genau die Stelle, an der Entwürfe aus dem Printbereich kippen.
Damit die Seite auch vorgelesen noch verständlich bleibt, lohnt der Anfang bei den Trainings, in denen du Seitenstruktur und Auszeichnung sauber trennst .
Warum es zu dieser Rolle keine amtliche Zahl gibt
Für Webdesign zeigen wir keine amtliche Zahl, obwohl die Verdiensterhebung eine Berufsgattung Webadministration führt. Diese Zelle beschreibt den Betrieb von Webdiensten, also Einrichtung, Verfügbarkeit und Pflege, und nicht die Gestaltung von Websites. Sie hier zu verwenden hieße, eine Statistik umzudeuten, damit eine Zahl auf der Seite steht. Hinzu kommt, dass der Zuschnitt dieser Stellen extrem weit auseinandergeht, von der Pflege von Kampagnenseiten in einer Marketingabteilung bis zur vollen Verantwortung für ein Erscheinungsbild in einer Agentur. Belegbar ist die Ebene der Wirtschaftszweige, deren Bruttojahresverdienste anders als die Monatswerte der Berufsgattungen die Sonderzahlungen einschließen.
Wie sicher bist du beim Thema wirklich?
Lesen fühlt sich schnell nach Können an. Ein kurzer Test zeigt dir, was davon schon sitzt und wo sich ein Kurs lohnt. Kostenlos, ohne Anmeldung, mit einer Erklärung zu jeder Antwort.
Wo du genau das übst
Ein sehr gutes, praxisorientiertes und nachhaltiges Seminar. So sollte es immer sein. Vielen Dank.
Ein sehr guter und verständlicher Überblick über die Grundlagen im Umgang mit BricsCAD.
Alle meine Erwartungen wurden erfüllt und ich habe mich sehr gut aufgenommen gefühlt, jede Frage wurden Probleme direkt beseitigt.
Häufige Fragen
Muss ich JavaScript können?
Lohnt sich ein Framework wie Bootstrap oder Tailwind am Anfang?
Gilt das Barrierefreiheitsstärkungsgesetz für jede Website?
Brauche ich eine eigene Website als Nachweis?
Quellen
- Barrierefreiheitsstärkungsgesetz (BFSG), Gesetze im Internet
- Barrierefreie-Informationstechnik-Verordnung (BITV 2.0), Gesetze im Internet
- ETSI, EN 301 549 zu Barrierefreiheitsanforderungen an IKT-Produkte und -Dienstleistungen
- W3C, Web Content Accessibility Guidelines 2.1
- Statistisches Bundesamt, Bruttojahresverdienste nach Wirtschaftszweigen
Passt thematisch dazu
Für den Bestand, der vor der neuen Rechtslage entstanden ist, steht im Webentwicklungsbereich, wie du eine bestehende Seite Schritt für Schritt prüfst und nachbesserst .
Wenn die Seite auf dem Telefon zerfällt, hilft die Fehlersuche dazu, warum ein Layout ausgerechnet auf schmalen Geräten auseinanderfällt .
Deine Ansprechpartner
Du bist dir nicht sicher, welcher Kurs oder welches Level zu dir passt? Wir beraten dich persönlich und kostenlos.
Yves Hoppe
Weiterbildung & Beratung
Hilft dir, aus dem IT-Berufe-Programm den passenden Kurs für deinen Stand zu finden.
Norbert Jansen
Beratung & Inhouse
Plant mit dir Inhouse-Trainings, die auf eure Abläufe und euren Datenbestand zugeschnitten sind.
Von der Struktur bis zur geprüften Seite
Wer die Schichten in dieser Reihenfolge aufbaut, muss später nichts verwerfen, und genau so ist die Kursfolge bei cmt geschnitten, von der Auszeichnung bis zur Prüfung auf Barrierefreiheit.
Passt dazu
- UX-Designer werden: von der ersten Nutzerfrage bis zum klickbaren Prototyp
- Frontend-Entwickler werden: HTML, CSS und JavaScript zuerst, das Framework danach
- Webmaster: eine altmodische Bezeichnung für eine sehr aktuelle Verantwortung
- Content-Manager: verantwortlich für das, was auf der Seite steht