Ein Komplott:

Das Web 2.0, CSS und die Smartphone-Industrie haben sich gegen »PSD to HTML« vereint.

Zwar gibt es noch immer »PSD2HTML« Tutorials, How-To’s, Tools und Firmen die eine Website nach einem Photoshop-Design erstellen zu Hauf im World Wide Web. Auch eine Suche nach den einschlägigen Keywords liefert über 29 Millionen Ergebnisse.

Aber wenn es doch so populär ist, wieso behaupte ich dann, dass »PSD to HTML« umgebracht wurde?

Um von vorn zu beginnen – Was ist »Photoshop to HTML«?

Im Grunde handelt es sich dabei nur um einen Arbeitsablauf, bei dem im ersten Schritt ein Designer mit Photoshop ein Layout erstellt, welches im zweiten Schritt zu Code, also HTML, CSS und Javascript, konvertiert wird.
Detailliert läuft das dann folgendermaßen ab:

1. Erstelle einen hochauflösenden, pixelgenauen Entwurf in Photoshop, der exakt so aussieht, wie die spätere Seite aussehen soll.

2. Mit dem sogenannten Slice-Tool, wird die Website in Bilder zerlegt und dann exportiert.

3. Die exportieren Grafiken werden mit HTML und CSS zusammengesetzt.

Viele Firmen nutzen diesen Prozess um im Team Hand-in-Hand arbeiten zu können. Ein Designer erstellt das Photoshop Mockup und übergibt es dem Web-Entwickler.

War PSD to HTML jemals eine gute Idee?

Allerdings. Dieser Workflow zählte lange Zeit zu den besten Wegen Websites zu erstellen. Zwei Gründe sprechen dafür:

Bevor alle Browser die vielen neuen Features unterstützten, die CSS (Schatten, Runde Ecken, usw) mitbringt, war es nötig die Effekte mit Photoshop zu erstellen. So konnten Designer Schatten und abgerundeten Ecken als Bilder speichern, die dann per HTML zusammengesetzt wurden.
Viel entscheidender allerdings ist der folgenden Punkt. Es gab eine Zeit, in der das Internet ausschließlich am Desktop genutzt wurde. Alle Websites waren auf 1024×768 Pixel festgelegt, was absolut in Ordnung war.

Angesichts dieser Gründe ist es also vollkommen nachvollziehbar, dass Photoshop zu den primären Design-Tools gehörte.

Was ist verkehrt an »PSD2HTML«?

Ein so junges Medium und die insgesamt rasante Entwicklung des Internets fordern ein ständiges Anpassen an aktuelle Gegebenheiten um nicht auf der Strecke zu bleiben. Nachfolgend deshalb die, in meinen Augen, wichtigsten Punkte, die dazu geführt haben, dass »Photoshop to HTML« der Vergangenheit angehört.

Responsive Web Design

Mittlerweile gibt es unzählige internetfähige Geräte mit ebenso unzähligen und verschiedenen Auflösungen: Smartphones, Tablets, Desktop-Rechner, Laptops und sogar Fernseher. Es gibt also nicht mehr nur die eine Auflösung, auf die man sich als Designer konzentrieren kann. An der Stelle erkennt man schnell, dass Photoshop als pixelbasierendes Programm keine Grundlage für flexible Webseiten sein kann.
Praktisch: Die Seite www.screensiz.es listet tabellarisch alle populären Geräte und deren Auflösung auf.

CSS Design

Neue Funktionen in CSS sind mittlerweile allgemein verfügbar und nahezu jeder Browser unterstütz diese. Die angesprochenen Effekte, wie Schatten & Co. werden so im Browser generiert und müssen nicht vorher in Photoshop erstellt werden.

Web 2.0

Das Internet ist erwachsen geworden. Von Web-Designer wird erwartet, dass sie sowohl mit Ästhetik, als auch HTML und CSS umgehen können.
Darüber hinaus gibt es zunehmend bessere Tools und Workflows, die einem die Arbeit erleichtern. An dieser Stelle sei das CSS Framework Bootstrap erwähnt, welches das Designen im Browser verbessert und vereinfacht. Und immer mehr dieser Tools entstehen und sind für jedermann verfügbar.

Ist Photoshop tot?

Natürlich nicht. Photoshop ist nach wie vor ein wichtiges Hilfsmittel beim Webdesign. Es ist großartig um Pixel-Grafiken zu bearbeiten und webgerecht zu exportieren. Auch gibt es weiterhin viele Situationen in denen ein Photoshop-Entwurf äußerst sinnvoll ist: z.B. als Hilfsmittel in der Kommunikation mit dem Kunden oder wenn es darum geht in einem großen Team zusammen zu arbeiten.

Meine Tipps für einen entspannten Workflow:

1. Inhalte der Website mit dem Kunden abklären

2. Design mit Grafiker/Designer/Programmierer gemeinsam skizzieren

3. Detaillierten Entwurf für den Kunden erstellen (z.B. mit Photoshop)

4. Skizze und Entwurf im Team besprechen und ToDo’s verteilen

5. Über sich hinauswachsen

Schlussendlich bleibt noch zu sagen, dass jeder seinen eigenen Workflow besitzt und das viele Wege zu der perfekten Website führen können.

Wir setzen deshalb neben einigen Tools zur grafischen Bearbeitung unter anderem auf das CMS WordPress, dass durch hohe Flexibilität und Anpassbarkeit einen perfekten Arbeitsablauf ermöglicht.

Weitere Infos zu WordPress finden Sie hier: WordPress; Kennen Sie Johannes Gensfleisch?