Best Practice: Vom Design über ein HTML Template bis zur ASP.NET MVC Anwendung
In dem Blogpost geht es um meine eigene Erfahrung in Sachen “Wie kommt das coole Design bis in die coole MVC WebApp?”. In kleineren Projekten (oder man ein absoluter Allround-Talent ist), dann macht man alles alleine, aber wenn nicht der Fall sein sollte – wie dann?
Entstehungsprozess einer WebApp
Achtung: Hier spricht ein Entwickler. Vermutlich gibt es noch andere “Phasen” – Reinzeichnung etc. – spielt für mich aber keine Rolle 
Ein etwas esoterisches Thema, aber wenn man selbst oder der Kunde endlich weiß, was er überhaupt haben möchte, kommen irgendwann tolle Konzepte was die Webanwendung so machen soll. Dann kommt ein Designer und malt im Photoshop rum und dann wird es kniffliger, denn wer setzt denn nun das ganze in HTML um? Und wer macht schreibt den nun den Code?
Webdesigner != Webentwickler
Ich seh mich selbst, wie gesagt, als “Entwickler”. Klar kann kenn ich mich mit HTML & co. aus – logisch! In größeren oder professionellen Projekten jedoch versuche ich stets einen wirklichen HTML-Ober-Guru (Webdesigner) zu bekommen. Der Grund: Gute HTML / CSS Strukturen zu schaffen ist gar nicht so einfach. Browserkompatibilität, Semantik und Wiederverwendbarkeit sind so ein paar Stolpersteine. Der HTML-Ober-Guru baut HTML Templates. Evtl. sind diese Begriffe auch X-Mal belegt, aber in meinem Kontext macht der Webdesigner fertige HTML Templates, evtl. auch bereits Javascript Sachen, aber der Webentwickler nimmt das Template und verbindet es mit der Businesslogik.
Resultat des Webdesigners:
Einfache statische HTML (mit CSS und Bildern etc.) Seiten auf den alle Seitenelemente vermerkt sind. Dabei muss noch auf ein paar Sachen geachtet werden:
- Wurden Fehlermeldungen berücksichtigt? Wo werden diese dargestellt?
- Wenn Javascripts Frameworks zum Einsatz kommen sollen, dann sollte man bereits prüfen ob diese ein Standardelement rausrendern, z.B. gibt jQuery Validation im Standardfall die Fehlermeldungen in einer bestimmten Struktur aus.
- Irgendwelche Bereiche wo “Ladeicons” für AJAX Sachen platz finden?
- Die Elemente sollten “Modular” einsetzbar sein. Idealerweise sollte es ein Formular-Style geben, den der Entwickler X-Mal wiederverwenden kann.
- Irgendwelche Overlays oder Einbindung von “externen” Diensten (Google Maps) sollte natürlich auch abgestimmt werden.
Mit was der Webdesigner arbeitet ist “eigentlich” egal – das sein Werk irgendwie unter Versionskontrolle gehen sollte wäre aber von Vorteil.
Der Grund für die simple HTML Seite: Ich kenne keinen Webdesigner der mit Visual Studio oder den Expression Produkten arbeitet und damit HTML “produziert”. Müssen sie IMHO auch gar nicht. Das Endresultat kann man prima auch mal dem Chef / Kunden schicken, weil er alle Elemente sieht. Daraus könnten sogar Klickdummies (mit entsprechenden Aufwand) erstellt werden.
Für mich noch wichtiger ist aber: Der Webdesigner kommt nie mit dem ASP.NET MVC Projekt in Berührung. Auch wenn das Markup mit Razor schöner geworden ist, steckt in den Views zum Teil ja doch etwas Köpfchen, welche Bereiche man wie in irgendwelche “Partials” auslagert – sowas kann der Webdesigner evtl. garnicht wissen.
Und wenn mal eine Designänderung gemacht werden soll?
In diesem Fall kann man jemanden die statische Webseite schicken und er soll genau in dieser Form sowas wieder mit abliefern.
Die etwas unangenehme Arbeit
Als Webentwickler muss man entsprechend das HTML Konstrukt auseinander nehmen und entsprechend in die Views verteilen – in Partials oder Masterpages etc. Ich persönlich schreibe auch gar nix mehr in die CSS rein, sondern informiere im Fehlerfall (z.B. Darstellungsproblem in Browser X) den Webdesigner und er schaut es sich anhand der statischen HTML Seite an und kann es bei sich ohne Fremdsysteme fixen und mir die fertige CSS wieder zuschicken.
Beispiel:
Als “winziges” Beispiel haben wir bei BizzBingo (Codeplex) auch eine statische Seite mit allen Elementen angelegt – die Striche im Hintergrund sind von dem eingesetzten CSS Grid Framework. Hier bin ich zwar der Webdesigner & Entwickler, aber es ist ja auch nur ein Hobbyprojekt.
Das Template ist zwar nicht sonderlich aufregend, aber als Diskussionsgrundlage für die einzelnen Seitenelemente echt hilfreich. Falls wir doch mal einen HTML-Ober-Guru für das Projekt finden, kann er sich einfach ans Werk machen – ohne MVC Budenzauber und Datenbank Gedöns. Einfach HTML.
About the author
Written by Robert Mühsig
Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.
Stefan
27. January 2011
Ich bin so einer der das HTML baut. Ich würde mich aber nicht als Webdesigner sehen, für das Design gibt es fähigere Leute.
Ich würde eher die Unterscheidung machen zwischen Front- und Backendentwicklern.
Ich kenne auch genug Projekte bei denen es nicht mit der Abgabe vom Templates vorbei war.
Grüße
René Kuss
27. January 2011
In einem Punkt habe ich doch einen etwas anderen Ansatz. Der Designer liefert bei uns nicht einfach das statische HTML ab, sondern fügt den html, css, js code direkt in visual studio ein und testet selber die Darstellung auf den unterschiedlichen Systemen. Es ist leider nicht alles MVC auf dieser Welt. Und bei Webforms werden einem immerhin noch einige Dinge in die Page mit rein gerendert die unter Umständen das Layout zerschiessen können. Daher ist es Sinnvoll das der Designer hier direkt mitarbeitet. Bei uns ist der Designer auch kein “Zulieferer” sondert arbeitet von Beginn an mit (Planung, Umsetzung, Test, etc.).
Rene Drescher-Hackel
5. February 2011
“Und bei Webforms werden einem immerhin noch einige Dinge in die Page mit rein gerendert die unter Umständen das Layout zerschiessen können”
Das habe ich aber noch nicht erlebt. Wenn man sich klar am HTML-Standart hält, kann da nix schief gehen.
Die strikte Trennung zwischen Layout und Logik verfolgt ja auch XAML – resp. Silverlight. Das gleiche sollte man auch in klassischen Webentwicklungen umsetzen.
Wichtig ist allerdings, dass Designer und Entwickler Hand in Hand arbeiten.
Auf einem Usergrouptreffen in Nürnberg brachte Thomas Müller den Begriff “Design-Developer” ins Spiel – ja, dieses Berufsbild wird sich alsbald herausbilden.