Webentwicklung von PSD zu HTML und umgekehrt

[Windwalker]

Hallo zusammen!

dies ist mein erster Post in diesem Forum, deshalb erstmal ein Gruß in die Runde!

Nun zu meiner Frage. Ist wahrscheinlich etwas umfangreich, und wurde im Prinzip schon oft gestellt, aber ich hoffe, dass ich auf Zuhörer treffe...
Ich bin Entwickler in einer Softwarefirma, die Intranetlösungen anbietet.

Wir haben uns vor einiger Zeit von einer auf HTML/CSS/JS-spezialisierten Fremdfirma, aus einem PSD-Design unser Communications-Abteilung ein schickes, modernes HTML-Markup als Grundlage für das "Framework" unserer Software entwickeln lassen. Wir bekommen eine "Dummy-HTML-Struktur" geliefert, die genau der PSD-Vorlage entspricht.
Mit unserer Software rendern wir nun das HTML (und füllen es mit Leben), damit aus dem CSS die Styles gezogen werden und die Seite so aussieht, wie vom Design entworfen.

Nun zum Kern:
Nach und nach haben wir unser Framework weiterentwickelt. Dabei wurde das CSS modifiziert, neues HTML wird erzeugt usw...
Die PSDs unserer Designabteilung und das darauf (von der beauftragten Firma erzeugte) Dummy-HTML mit CSS entsprechen nicht mehr dem Stand unserer Software. Natürlich wird dieser Spalt zwischen Designvorlage und tatsächlicher Software nicht kleiner. :-(
Als bloßer Software-Entwickler fehlt mir hier das Fachwissen, deshalb die Frage an Euch Experten:

Wie arbeiten diese Firmen? Die bekommen von uns ein/mehrere PSDs und nach einigen Tagen erhalten wir (wie aus einer Blackbox ) dieses HTML/CSS/JS-Gerüst, was Look und Feel der Seite erzeugt.
Machen die das evtl. über Fireworks oder Dreamweaver?

Durch die ständigen Weiterenwicklungen unserer Software suchen wir nun einen Weg, wie wir Änderungen an der Software ins Design zurückführen können - damit beide Seiten weiterhin zueinanderpassen. Manchmal werden neue Entwicklungen über das Design vorgegeben, oft passiert es aber auch anders herum, d.h. wir entwicklen ein "neues Stück Software", welches im PSD dann aber fehlt.
Wir suchen hier nach einem Tool, mit welchem wir die gewünschte HTML-Struktur (DIVs, CSS-Klassen und -IDs etc.) aus dem PSD erzeugen können.

Mittlerweile habe ich schon einiges im Internet gelesen - viele Webdesigner sagen, dass solche Prozesse nur mit dem geschulten Auge eines erfahrenen Designers richtig durchgeführt werden können. Das mag sicher richtig sein. Dennoch kann ich mir nicht vorstellen, dass solche Firmen, wie die von uns beauftragte, keine Tools einsetzen.
V.a. wenn man davon ausgeht, dass eine Website stetig weiterenwickelt wird (so wie in meinem Fall).

Könnt Ihr mir hier weiterhelfen?
Jegliche benötigte Software ist im Prinzip bei uns vorhanden, nur müssen wir Design- und Softwareentwicklung irgendwie zusammenbringen...

Danke!
Sascha.

 

[Myhar]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Hallo,

ich bin mir nicht sicher, ob ich dich richtig verstanden habe:

Wie arbeiten diese Firmen? Die bekommen von uns ein/mehrere PSDs und nach einigen Tagen erhalten wir (wie aus einer Blackbox ) dieses HTML/CSS/JS-Gerüst, was Look und Feel der Seite erzeugt.
Machen die das evtl. über Fireworks oder Dreamweaver?

Wir suchen hier nach einem Tool, mit welchem wir die gewünschte HTML-Struktur (DIVs, CSS-Klassen und -IDs etc.) aus dem PSD erzeugen können.
[...]
Könnt Ihr mir hier weiterhelfen?

Du willst wissen, wie man aus einem psd eine html Seite erstellt? Am Besten nicht automatisiert. Wie will ein Programm auch wissen, wo es welche Elemente verwenden soll? Was ist ein Fett gedruckter Text, was eine Überschrift? Wie hängen die einzelnen Teile zusammen? Was sind Hintergrundbilder, was wichtige Bilder? Wie optimiere ich Sprites? etc.
Also muss man hier mit einem Texteditr seiner Wahl arbeiten (Ja, das kann auch DW sein. Nur eben nicht in der "Designansicht")


Das umgekehrte willst du auch wissen? Am Besten einfach einen Screenshot erstellen und an die richtige Stelle im Design einfügen. Wenn man es genauer braucht, nachbasteln. Automatisch wird hier nichts gehen.

 

[vincitore]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Also wie genau eure beauftragte Firma das macht, kann ich dir natürlich nicht sagen, da musst du dich direkt an die wenden.

Ich kann dir lediglich sagen wie ich es mache. Wenn ich eine PSD-Datei von extern bekomme, versuche ich das Design als ganzes in DIVS usw. erst ein mal grob zu modellieren (Anordnung, Pos. der Elemente), anschließend geh ich in die PSD-Datei und hole mir daraus entscheidende Hintergründe/Grafiken und binde die in meine Grundstruktur ein. Anschließend kommen die Schriften usw..

Ob man das nun mit DW oder einem anderen Editor macht ist dabei dem Entwickler überlassen, ich z.B. arbeite gar nicht mit einem WYSIWYG-Editor, sondern mit einem reinen Texteditor mit Previewfunktion. Dementsprechend kann man da nicht viel automatisieren (Wobei das auch bei den anderen Editoren nicht zu empfehlen ist - ähnlich wie das automatische Erstellen einer HTML-Datei durch Photoshop).

 

[fexx]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Das umgekehrte willst du auch wissen? Am Besten einfach einen Screenshot erstellen und an die richtige Stelle im Design einfügen. Wenn man es genauer braucht, nachbasteln. Automatisch wird hier nichts gehen.

Für ein solches Produkte würde ich wohl einiges an Geld ausgeben ... xD

 

[Windwalker]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Danke für Euer rasches Feedback!

An Euren Postings merke ich schon, wie sehr sich das Denken eines Entwicklers von dem eines Webdesigners unterscheidet.

Mich wunderte eben, wie Firmen, wie die von uns beauftragte psd2html.com, so schnell ein recht komplexes Design in ein Markup überführen. Aber dafür sind sie dann ja auch die Spezialisten...

Ich dachte, dass man einen gewissen Teil der HTML-Struktur (DIVs mit Klassennamen, Tables, LIs, Flowlayouts, ...) und CSS-Definitionen schon am PSD vorgeben könnte, um so grafisch das PSD in ein Markup überzuführen.

Einer unserer Use Cases ist: Ein Kunde kauft unsere Vorlage, lässt aber Farbanpassungen (und evtl. weiteres) an sein CI vornehmen.
Darauf basierend adaptiert unsere Design-Abteilung dann die PSD-Vorlage, um dem Kunden, und uns für die Entwicklung, das Design als Vorlage zu präsentieren.
Die Entwickler müssen dann nun händisch alle Anpassungen an allen relevanten Stellen ins CSS überführen, was je nach Umfang dieser Anpassungen sehr umfangreich werden kann.

Meine Hoffnung war gewesen, hier einen Workflow vom PSD zum HTML definieren zu können, um solche Anpassungen wie Farbcodes durchreichen zu können.
Quasi einen "Build-Prozess" aufzubauen - aber dafür blicke ich wohl zu sehr durch meine Entwicklerbrille.

Die Essenz, die ich Eurem Feedback entnehme, ist, dass man die Brücke vom Design zu HTML/CSS nicht wirklich mit einem Tool (von einem bloßen Editor abgesehen) schlagen kann und die Markup-Strukturen immer noch händisch im Editor definiert werden müssen.

Danke!

 

[Myhar]

AW: Webentwicklung von PSD zu HTML und umgekehrt

So ein Tool gibt es zwar, aber erstens habe ich vergessen, wie es heißt und zweitens würde ich es nicht empfehlen. Bei solchen Tools hat man immer das Problem, dass man relativ schlecht gecodete Seiten erhält. Es mag vielleichtim Browser o.k aussehen, aber sobald man zB Bilder deaktiviert, werden die Seiten schlecht. Oder, ein viel größeres Problem: Durch das schlechte Markup wird man nicht so gut bei google gefunden. Wenn du deinen Kunden sagen kannst: Kein Problem, wir machen ihnen eine Seite, aber erwarten sie nicht, dass sie über google gefunden werden, dann sind automatisierte Tools das richtige für dich.
Simple, lineare Seiten kann man vielleicht noch so umsetzen... Also eine Seite mit folgender Struktur: Überschrift, Absatz, Bild.
Sobald aber links, rechts, oben und unten noch Elemente hinzukommen (Nav links zum ausklappen, ein HG Bild über die gesamte Seitenbreite, ...) dann können diese Tools nicht gut arbeiten.

Aber was spricht dagegen, jedes Design in den ursprünglichen Farben zu entwickeln und dann einfach im CSS die Farben/Bilder anzupassen? Wenn ihr mit zB LESS arbeitet, dann muss man Farben auch nur einmal definieren und Änderungen sind in Sekunden durchgeführt.
Werden größere Änderungen durchgeführt, ist bestimmt mehr an Nacharbeit notwendig.

 

[Windwalker]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Meinst du evtl. "Sitegrinder"? Dieses Photoshop Plugin ist mir in meinen Recherchen nun schon mehrfach begegnet.
Die Auffindbarkeit durch Google ist bei uns sogar vernachlässigbar, da der Fokus auf Mitarbeiter Portalen im Intranet liegt.
Dennoch haben wir (wie von dir angedeutet), einiges an JS-Magic, d.h. ausklappende Menüs, Fancybox Overlays und weitere Ajax-basierte Features...

Letztlich ist es ja aber auch die Performance (wie schnell lädt die Seite?) und das Verhalten im Browser (Adaption auf Größe des Browser-Fensters, FF/IE/Chrome, Browser-Version, etc...), was man wahrscheinlich mit so einem Tool nicht gut abdecken kann.
So langsam verstehe ich die Schwierigkeit hier...

Myhar, du wirst lachen, aber wir haben Less schon in unseren Buildprozess integriert.

Funktioniert im ersten Stadium auch recht gut, wenn man sich erstmal auf das Customizen von Farbcodes beschränkt.

Die Schwierigkeit ist nur, dies unseren Designern zu vermitteln.
Diese sind es gewöhnt, mit der Adobe-Software das PSD zu erstellen, dieses reichen sie dann an die Fremdfirma und die zaubern uns in kurzer Zeit das Dummy-HTML mit CSS.
Da aber unsere Framework-Entwicklung immer weitergeht, sieht das Dummy-HTML zwar schön aus, passt aber schon lange nicht mehr zu dem HTML, welches unsere Software erzeugt und dem CSS, welches benötigt wird, um den Look zu erhalten.
Zuletzt war ein Kollege von mir 2 Tage damit beschäftigt, dass CSS der Vorlage an die tatsächliche Software anzupassen. :-/

Deshalb versuche ich nun einen Weg zu finden, für uns den besten Workflow zu finden...

 

[Myhar]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Ja genau, so ein Programm meinte ich. Aber viel halte ich von diesem Tool nicht (wie du sicher schon bemerkt hast). Auch, wenn es seine Daseinsberechtigung hat.
Eine Sache, die ich noch nicht verstanden habe bei deinen Ausführungen:
Du sagst, euch wird das Dummy-HTML erstellt. Wieso passt das dann nicht zu dem HTML, welches eure Software erstellt? Kann ich das so verstehen: Ihr spielt das Dummy-HTML in eure Software, welche den endgültigen Code erstellt, aber der wurde dann schon weiterentwickelt?
Wenn ja, dann könnte man es doch so machen. Hier weiß ich natürlich auch nicht, was ihr schon einsetzt ;-)
Ihr erstellt ein ursprüngliches Dummy-File und anhand dessen eine erste Version. Ab dem Zeitpunkt braucht ihr für das Projekt kein Dummy File mehr sondern arbeitet in einem svn-System. Dort könnt ihr verschiedene Versionen (Branches) von einem Projekt anlegen und einzelne Mitarbeiter können an einzelnen Teilen der Seite arbeiten. Allerdings braucht ihr hierfür auch (mindestens) einen Mitarbeiter, welcher am HTML/CSS arbeitet. Designänderungen werden dann also nur noch in das laufende Projekt eingefügt aber nicht in das ursprüngliche Template. Gibt es ein neues Projekt, welches auch das Selbe Template benötigt, dann wird im svn ein neues Projekt angelegt und der jetzige Stand kopiert. So in etwa könnte man es doch machen?

 

[fexx]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Nur der Vollständigkeit halber ... gab es nicht auch mal einen Online PSD2HTML Generator?! Weiß aber nicht wie der heißt und zweifle auch die Qualität an... ;-)

Ein SVN System würde ich übrigens auch empfehlen.

 

[Windwalker]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Hi Myhar,

die Sache ist ein bisschen komplizierter:
wir entwickeln für einen Java Application Server, d.h. unsere Software sind im Browser laufende Java Enwicklungen, die in die Frameworkseite (im Endeffekt auch in Java entwickelt) eingebettet werden. Das Ganze sind dann Anwendungen für ein Firmen-Intranet.
Das von mir "Dummy-HTML" genannte 'Zeug', ist zum einen aus Vorlage der PDSs unserer Designer entstanden, in dem es von psd2html.com in HTML übergeführt wurde (natürlich in Kommunikation mit uns. Wir haben denen gewisse Wünsche an die HTML Struktur gegeben).

Das "Dummy-HTML" ist für uns also nur eine Schablone, die Bildchen und Lorem-Ipsum-Texte enthält. Wir haben diese HTML-Struktur dann in die Renderer unserer Software übergeführt und erzeugen dort, wo Platzhalterbildchen und Lorem-Ipsum-Texte sind, dynamische Inhalte, die aus dem Backend geladen werden. Hierzu werden jeweils mehrere Komponenten aus dem Backend aufgerufen.

Wie die verschiedenen Inhalte auf einer Seite im Browser zusammengesetzt werden, das macht unser "Framework". Hier ist z.B. auch die Navigation enthalten. An unserem Framework haben wir ständig weiterentwicklet. D.h. da mal ein bisschen was am CSS geändert, hier mal ein DIV dazu, dann mal eine neue Komponente eingebaut, die neue Inhalte rendert etc.

D.h. das HTML-Gerüst, wie es mal von psd2html kam, wurde stetig weiterentwickelt und passt schon lange nicht mehr nahtlos zu unserer "Realität".
Bei einem CSS von ~4000 Zeilen kommen da schon einige Abweichungen zusammen...

Diese Veränderungen wollen wir nun in unserer Designvorlagen zurückführen.
Damit die Designs, die wir für Kunden als Vorlagen für den Intranet entwerfen, auch komplett dem entsprechen, was sie erhalten werden.

Ich hoffe, das macht's ein bisschen klarer...

 

[Myhar]

AW: Webentwicklung von PSD zu HTML und umgekehrt

zum einen[/I] aus Vorlage der PDSs unserer Designer entstanden, in dem es von psd2html.com in HTML übergeführt wurde (natürlich in Kommunikation mit uns. Wir haben denen gewisse Wünsche an die HTML Struktur gegeben).

[...]

Ich hoffe, das macht's ein bisschen klarer...

Ja, es ist klarer. Bis auf: Gibt es zum einen auch ein "zum anderen"? Bzw. so wie ich das verstehe ist das andere der Teil, den ihr abändert.

Aber trotzdem sehe ich hier nicht viel merh Möglichkeiten, als das benötigte Extra-Zeug immer in Beide Varianten einzubauen. Bzw. zusätzliche Elemente, welche noch nicht im Design vorhanden sind, per Screenshot an die richtigen Stellen zu platzieren?
Dass es gerade in einer Firma, wo laufend Veränderungen gemacht werden, dies nicht unbedingt simple ist, ist mir klar. Wer kümmert sich darum, dass Design + Endprodukt zusammenpassen? Jemanden dafür anstellen? Nein, da wohl zu kostspielig. Kann das jemand zusätzlich übernehmen, ohne dass seine jetzige Arbeit darunter leidet? Das ist auch selten der Fall.

Aber beide Aufgaben (psd nach html und umgekehrt) würde ich nicht automatisiert erledigen lassen. Einfach aus dem schon genannten Grund, da das Endergebnis nicht wirklich sauber sein wird. Und gerade als Firma, die ein Produkt verkauft, sollte das wohl ein Punkt sein, den man beachten sollte. Auch, wenn es so billig wie möglich sein muss.

 

[Windwalker]

AW: Webentwicklung von PSD zu HTML und umgekehrt

Das "zum anderen" sollte (in meinen Gedanken) lauten:
"Zum einen ist das Dummy-HTML aus den PSDs der Designer entstanden, zum anderen aus dem Feedback der Entwickler zu den von psd2html gelieferten Entwürfen".

Danke für deine ausführliche Antwort, genau so eine Diskussion, wie diese hier hatte ich mir erhofft!
Ich habe diese Woche noch eine Abstimmung mit unserer Communicationsabteilung, um zu überlegen, wie wir Design und Entwicklung auf dem gleichen Stand halten. Zwischen Design und Entwicklung ist bei uns in der Firma offensichtlich noch ein Gap, den ich hier versuche, ein wenig zu überbrücken.
Uns Entwicklern fehlt es an Verständnis für in Hinblick auf Webdesign von der "Designer-Perspektive" aus. Siehe z.B. diesen Thread, und wie er mir ein wenig Eure Arbeit aufzeigt.
Auf der anderen Seite fehlt es unseren Designern leider an Verständnis für HTML, CSS etc. Das habe ich festgestellt, als ich mal einem Designer Firebug zeigte und er auf einmal begeistert damit rumspielte und dynamisch CSS änderte Er kannte das nicht...

Aber ich habe nun schon ein paar Einblicke erhalten.
Danke!