04. Juli 2013

Die Tücken von InDesign bei der Gestaltung von Websites / Teil 1.

InDesign ist primär ein Programm, um Druckerzeugnisse zu gestalten. Und dennoch wird es immer wieder für die Gestaltung von Websites benutzt. Wo die Stolpersteine liegen und wie man diese umgeht, erkläre ich diesem Blogbeitrag.

Ich selbst gestalte nie in InDesign, dafür kenne ich mich auch viel zu schlecht mit dem Programm aus. Rund die Hälfte der Projekte, die ich umsetze, werden von Grafikern - freischaffend oder angestellt in Design- oder Werbeagenturen - gestaltet. Und dabei setzen sie oft (oder immer öfters) auf InDesign, weil es das Tool ist, das sie am besten kennen.

Unabhängig des verwendeten Gestaltungstools baue ich bei allen Projekten das Frontend von Websites sowieso komplett von Grund auf in HTML / CSS neu auf. War Photoshop oder Fireworks lange Jahre Pflicht, ist in Zeiten von reduzierterer Grafik auch InDesign per se weniger ein Problem als auch schon.

Wer im InDesign gestaltet, sollte allerdings einige Punkte beachten:

100% sind nicht 100%. Oder «what you see is not what you get».
Erstellt man in InDesign CS6 oder im aktuellen InDesign CC ein neues Dokument, werden diverse Standardgrössen für Webdokumente angeboten. Wählt man ein gewünschtes Format und stellt die Ansicht auf 100%, dann ist das Dokument deutlich grösser das Pendant in Photoshop oder das wichtigste: im Browser. 100 Pixel werden auf einem iMac in der 100% Ansicht mit 151 Pixel am Bildschirm ausgegeben. Und jetzt?

InDesign (links) stellt in der 100% Ansicht alles grösser als Photoshop (rechts) dar.

Will man man die korrekte Ansicht, muss man die Ansicht auf auf einem iMac 27" (109 dpi) auf 66.1%, auf einem 15" MacBook Pro (110 dpi) auf 64% und auf einem MacBook Air 13" (128 dpi) auf 57.1% stellen. Am einfachsten geht dies via Doppelklick auf die Lupe in der Werkzeugsleiste. Macht man dies nicht, ist bei der Umsetzung schnell mal alles zu klein. Sind in der 100% Ansicht von InDesign Schriften in auch kleinsten Pixelzahlen bestens lesbar, sind sie es im Browser dann nicht mehr.

Da InDesign ein Programm für Print ist, stellt es eigentlich sicher, dass in der 100% Ansicht 1cm auch 1cm am Bildschirm ist. Das macht natürlich absolut Sinn für Print-Projekte. Warum dies Adobe aber in der Ansicht für Web-Dokumente nicht anders als bei Print-Dokumenten handhabt, ist mir ein absolutes Rätsel. Anscheinend entsprachen bei InDesign CS5 100% noch 100% (dies konnte ich allerdings nicht überprüfen). Warum Adobe dies beim Sprung von CS5 (oder von CS5.5) auf CS6 verschlimmbessert hat, ist unverständlich.

Ein findiger Programmierer hat übrigens ein Apple-Skript geschrieben mit dem sich InDesign CC umstellen lässt. Hier downloaden und dann im folgenden Verzeichnis ablegen:
/Library/Preferences/Adobe InDesign/Version 9.0/de_DE/Scripts/Scripts Panel/

Update / 19. November 2014:
Der Pfad für InDesign CC Version 10.1 ist wie folgt:
/Library/Preferences/Adobe InDesign/Version 10.0/de_DE/Scripts/Scripts Panel/

Mit der Option «Scale for Screen (1:1 Pixels)» erhält man die korrekten Prozentwerte.

Dieser Ordner lässt sich auch via Fenster > Hilfsprogramme > Skripte > Control-Klick auf den Benutzer Ordner > Im Finder anzeigen öffnen. Ist das Skript dort abgelegt muss man InDesign neu starten und kann dann das Skript per Doppelklick starten: «Scale for Screen (1:1 Pixels)» auswählen und dann ist die 100% Ansicht «What you see is what you get».

Es gibt nur ganze Pixel.
Ein Fehler, der mich immer wieder zum schmunzeln bringt, sind Pixel mit Kommastellen. Schriften, die als 10.3 Punkt gesetzt sind oder Linien, die mit 1.6 Punkt gesetzt sind. Oh je.

Ein Bildschirm basiert auf physischen Pixel. Pixel mit Kommastellen gibt es nicht und wird es auch nicht geben. Liebe Grafiker: Auch wenn's möglich ist: Lasst die Finger von den Kommastellen. Und ja natürlich: Adobe müsste die Benutzung von Kommastellen in einem Web-Dokument eigentlich unterbinden.

Letztlich ist InDesign eben doch ein Programm für Print-Layouts. Weitere Stolpersteine folgen in Kürze in Teil 2.