alps hypertexte

Was ist Webdesign, was ist Frontend-Entwicklung?

Der Begriff "Webdesign" wird oft schwammig für alle Arten von Tätigkeiten verwendet, die etwas mit der optischen Website-Entwicklung zu tun haben. Ich unterscheide folgendermaßen:

• Webdesign, ist jede Tätigkeit, die das Design des Aussehens und der Interaktion einer Website betreffen.
• Frontend-Entwicklung ist die konkrete Umsetzung eines Designs in übliche Codes, wie HTML, CSS, JavaScript, ActionScript etc.

Beide Tätigkeiten können relativ unabhängig voneinander ausgeübt werden, wobei es nur Vorteile hat, wenn der Webdesigner Ahnung von Frontend-Entwicklung und umgekehrt hat. Deshalb sind die meisten Berufstätigen Webdesigner und Frontend-Entwickler. Es gibt aber auch Menschen, die nur Designer sind und ihre Designs nicht in eine funktionierende Website umsetzen können und auch umgekehrt.

Was ist ein "Profi"?

Die Berufsbezeichnungen "Webdesigner" oder "Frontend-Entwickler" sind nach 13-15 Jahren ihrer Existenz immernoch nicht geschützt. Das heisst salopp, jeder der irgendwie eine Webseite gemacht hat, kann sich so nennen. Deshalb gibt es zuweilen große Unterschiede zwischen "Frontend-Entwicklern/Webdesignern" und "professionellen Frontend-Entwicklern/Webdesignern". Wenn man 3-4 Blog-Designs entwickelt hat, ist man noch lange kein Profi (so schön die Designs auch sein mögen). Auch wenn man seit 10 Jahren seine eigenen Web-Projekte betreibt, ist man nicht zwangsläufig ein Profi. Professionelle Webentwicklung ist, wenn man

• Web-Projekte unterschiedlicher Größenordnung (vor allem die ganz großen wie Portale, Community-Sites mit User-Generated-Content)
• nach festem Budget und Zeitrahmen
• in Entwickler-Teams mit Grafikern, Backend-Entwicklern, Projekt-Managern usw.
• für Web-Browser wie IE6, IE7, IE8, IE9, Firefox2/3/4, Google Chrome, Safari und Opera
• nach heutigen Maßstäben und Webstandards

... entwickelt und damit seinen Lebensunterhalt bestreitet.

Was ist das Schwierige an professioneller Frontend-Entwicklung?

... fragt sich unweigerlich jeder Privat-Kunde, wenn er zum ersten mal von unseren Stundensätzen hört.

Im Artikel How Much Should a Web Design Cost? vom Jahre 2006 schreibt der Autor, dass ein einfaches Weblog-Design bei ihm bei 1.500 USD anfängt. Ohne Logo- oder spezielles Icon-Design, der einfachsten Form. Und er verweist auf Kollegen, die dabei deutlich höhere Preise anbieten. Quantitativ gesehen handelt es sich bei einem Blog-Design dieser Art meist nur um 2-3 Seiten (auch Templates genannt) mit Styles für die Startseite, Einzelansicht eines Blogeintrags + Kommentarsektion und das Archiv.

Im Vergleich zum Jahre 2006 sind die Anforderungen an einen professionellen Frontend-Entwickler heute im Jahre 2010/2011 sogar gestiegen. Es gibt mehr Möglichkeiten und Effekte, die die Begierden des Kunden wecken, aber der Internet Explorer 6 muss immernoch unterstützt werden (siehe Antworten/Kommentare bei einer aktuellen Reddit-Frage). Dieser Spagat wird zunehmend schwieriger, so dass wir schon davon Träumen, den IE7 nicht mehr zu unterstützen. Einige kapitulieren schon vor diesem Spagat und sagen schlicht "Pah, den IE6 unterstütze ich nicht mehr und wenn, dann lasse ich mir das extra bezahlen", andere haben diesen Luxus nicht.

Und hiermit sind wir schon am Kern der Schwierigkeit dieses Berufs. Frontend-Entwickler entwickeln nicht, wie Anwendungsprogrammierer oder Backend-Entwickler in einer bestimmten Programmier-Umgebung oder einem Compiler/Interpreter. Die Beherrschung der Code-Sprachen HTML, CSS oder JavaScript, macht Frontend-Entwickler nicht automatisch praxistauglich. Sie entwickeln für unterschiedliche Interpretationsumgebungen, von denen halbjährlich eine neue hinzukommt, die beachtet werden müssen. Während z.B. derzeit in meinen Verträgen eine Unterstützung für IE6, IE7, IE8, Firefox2/3, Google Chrome, Safari und Opera zugesichert wird, wartet im Hintergrund die Veröffentlichung von IE9 und Firefox 4 (und sicher noch weitere).

Und jetzt kommt das, was private Endkunden meist nicht wissen: standardisiertes HTML, CSS, JavaScript wird nicht von allen Browsern gleich interpretiert.

Selbst wenn man jeden Teil der Spezifikation von HTML, CSS und JavaScript im Schlaf auswendig zitieren könnte, könnte man damit keine praxisfähigen Webseiten basteln. Man muss auch die zum Teil subtilen Interpretationsunterschiede und Fehler der verschiedenen Browser kennen und sie umschiffen.

Für diesen Umgang mit Browserunterschieden verwenden Frontend-Entwickler verschiedene Methoden. Man nennt sie Hacks, Workarounds oder einfach Methoden. Man weicht auf Techniken aus, bei denen diverse Browserfehler nicht oder seltener zum Tragen kommen oder bastelt sich umständliche "Brücken", um einen Browserfehler zu korrigieren. Denn der Kunde möchte, dass seine Website trotz dieser großen Browserunterschiede in allen möglichst identisch aussieht und sich so verhält. Auch wenn er das nicht so formuliert, ist das Geschrei groß, wenn mal ein Kunde des Kunden seine Website im IE6 besucht und ihm ein Foto schickt, das demonstriert, wie kaputt seine Website doch in diesem aussieht.

Wenn ein Frontend-Entwickler all diese Methoden und Techniken beherrscht, um eine Website in den Browsern IE6, IE7, IE8, Firefox2/3, Google Chrome, Safari und Opera gut aussehen zu lassen, entspricht das etwa dem Meistergrad oder schwarzen Gürtel im Karate/Taekwon-Do. Wenn er sich mit neuen Techniken befasst (wie HTML5, CSS3, neue JS-Frameworks oder Skriptsprachen) oder sein Wissen in den unterschiedlichen Browserfehlern und -abweichungen vertieft, erreicht er dementsprechend Großmeistergrade, wie den zweiten, dritten oder neunten Dan.

Welche Disziplinen gibt es noch?

Dieses Wissen um die verschiedenen Browserinterpretationen und die dementsprechende Entwicklung nennt man "Cross-Browser-Entwicklung". Doch das ist nur die Basis dessen, was man als professioneller Frontend-Entwickler wissen muss. Neben der Cross-Browser-Entwicklung gibt es noch Disziplinen, wie die benutzerfreundliche (Usability) oder die barrierefreie (Accessiblity) Entwicklung. Oder auch suchmaschinengerechte Entwicklung (SEO). Und meistens auch alles zusammen. Denn all diese Disziplinen haben eigene Gesetzmäßigkeiten, die sich ständig verändern/weiterentwickeln. Geht es um mobile Entwicklung, kommen zu den gewöhnlichen Web-Browsern noch die Browser auf den mobilen Geräten dazu. Bei der Barrierefreiheit diverse Screenreader und andere assistive Technologien. Bei der Entwicklung einer gewünschten "User Experience" hat man es mit der menschlichen Psychologie zu tun, die sich noch schneller und vor allem unberechenbarer weiterentwickelt.

Betrachtet man das "innere Design" des Frontend-Codes, gibt es da noch Disziplinen wie Ãœbersichtlichkeit, Schlankheit, Wartbarkeit des Codes und die allgemeine Frontend-Performance. Die Ãœbersichtlichkeit und Wartbarkeit des Codes wird für den Kunden wichtig, wenn er später für sein Projekt Änderungs- oder Weiterentwicklungswünsche in Auftrag gibt oder die Website von jemand anderem weiterentwickeln lassen möchte. Der preisliche Unterschied bei Änderungs-/Weiterentwiklungsaufträgen kann bei schlechtem Spagetti-Code um ein Mehrfaches wachsen. Die Performance einer Website hat maßgeblich etwas mit der Benutzererfahrung zu tun und hat auch Einfluss auf die Platzierung der Website in den Suchmaschinenergebnissen.

Der "menschliche" Faktor

An professionellen Webschmieden haben sich mit der Zeit gewissen Regeln beim Umgang mit Entwicklern etabliert. Entwicklung/Programmierung ist eine geistige, kreative und introvertierte Tätigkeit. Deshalb werden folgende Arbeitsbedingungen als "nicht gerade produktivitätsfördernd" empfunden:

• unklare Aufgabenstellung zu Beginn des Projekts
• nicht-rechtzeitiges Einreichen benötigter Arbeitsmittel
• Störungen/Ablenkung durch unplanmäßige Kommunikation ("wann ist das fertig?", "sieht ja schon ganz gut aus", Anrufe zu jeder Zeit etc.)
• Ändern der Anforderungen nachdem die Arbeit begonnen wurde (feature creep, 2)
• unsystematisches Herantragen von Änderungs-/Korrekturwünschen bis zu "Real-Time-Webdesign"

Web-Firmen tun gut daran, solche Faktoren zu eliminieren, um die Produktivität und Zufriedenheit der Entwickler zu steigern. Und viele geben sich auch die Mühe, das zu erreichen.

Nicht so der private Endkunde.

Der tappt in seiner Unerfahrenheit in jede dieser Fallen und "sabotiert" damit fast sein Projekt, wenn der Entwickler sich nicht ein dickes Fell, stabile Verträge und ein starkes Nervenkostüm zugelegt hat.

Also ... nochmal zum Preis

Frontend-Entwicklung ist eine komplexe Aufgabe mit vielen Disziplinen und Meistergraden, die nicht in einem 4-Jahres-Studium an einer Uni oder Fachhochschule erworben werden können. Es erfordert intensives persönliches Engagement und Opferung von viel Freizeit, wenn man es zu einem Profi bringen möchte. Und wenn man einmal soweit ist, jedes große Web-Projekt aufziehen zu können, muss man weiterlernen, damit man auch in 1-2 Jahren diesen Beruf noch ausüben kann.

Wenn man nicht gerade jahrenlang an einem sicheren Arbeitsplatz festangestellt ist, sondern sich als Freelancer betätigt und damit auch seine eigene Vertriebs-, Buchhaltungs- und Projekt-Management-Aufgaben übernimmt, bei 50-60%iger Arbeitsauslastung (der Rest der 50-Stundenwoche geht für Verwaltung, Kundenkommunikation und Aquise drauf) auch mal Urlaub machen möchte, dann kann jeder Interesierte selbst zusammenrechnen, wieviel eine Stunde Frontend-Entwicklung wert ist.