• Haupt / Merkmal

Die schnelle und schmutzige Anleitung zum Erstellen von Websites in InDesign

Wir alle wissen, dass Sie Muse, Dreamweaver oder Edge Reflow benötigen, um mit Adobe-Software eine Website zu erstellen, die nur Gesang und Tanz enthält. Aber was ist mit InDesign, wenn es um eine schnelle und schmutzige Website geht? Schließlich verfügt InDesign seit einigen Jahren über HTML-Exportfunktionen, oder?

Auf den ersten Blick fällt mir eine Reihe geeigneter Projekte für einen solchen Workflow ein. Ich habe keinen Zweifel, dass Sie das auch können. Zunächst einmal könnten Modell- und Präsentationsarbeiten von einem Designer, der dies als Hauptanwendung für den täglichen Gebrauch verwendet, leichter in ID erstellt werden.

Während die Komplexität die ganze Aufmerksamkeit auf sich zieht, ist die Tatsache, dass es viele Websites im Web gibt, die einfach sind und einige Überschriften sowie Kunst- und Körpertexte enthalten - dies wäre eine weitere gute Übereinstimmung. Und wer hat Sie nicht von einem Kunden gebeten, Marketingmaterial zu erstellen, bei dem die Inhalte sowohl für den Druck als auch für das Web bestimmt sind?

Und wenn Sie aufgepasst haben, hat Adobe ID in den letzten Jahren immer mehr Multimedia- und Interaktivitätsfunktionen hinzugefügt. Zugegeben, diese Ergänzungen waren offen auf ihre anderen Exportoptionen ausgerichtet - EPUB, Flash, SWF - aber es lässt vermuten, dass InDesign in seiner HTML-Ausgabe wahrscheinlich leistungsfähiger wurde, oder?

Na ja, vielleicht auch nicht. Ich habe es versucht und hier ist, was passiert ist ...

Einrichten

Ich habe ID eines Morgens in dieser Woche mit einem großen Lächeln im Gesicht und einer heißen Tasse Kaffee an meiner Seite hochgefahren. Ich war alle bereit, mit diesen Export-HTML-Tools zu spielen, die ich zuvor gesehen hatte, hatte aber nie Zeit zum Spielen. Ja, ich war aufgeregt. Außerdem, so nahm ich naiv an, würde dies ein Kinderspiel werden, da es diese Optionen schon so lange gab, dass sie inzwischen gut poliert sein müssen, oder? Ja, na ja ... vielleicht auch nicht.

Ich habe InDesign CC geöffnet und wähle Datei> Neu ...> Dokument ( Strg /. Cmd + N. ), und genau dort sehen Sie eine Option unter dem Einblendmenü 'Absicht' für die Verwendung im Web.

Wählen Sie es aus, und es gibt uns einige grundlegende Webseitenkriterien, die für uns ausgefüllt wurden, sowie eine Option für andere standardmäßige Webseitenabmessungen. Obwohl sich die Standardeinstellung von 800 x 600 sehr um 2007 anfühlt, habe ich mich für diesen Test entschieden, in der Hoffnung, dass dies die Erstellung mehrerer Formatversionen etwas erleichtert. Das Leben ist ein Kompromiss, oder?

Ich fing dann an, eine Testseite zu erstellen, die mir niemals Designpreise einbringen würde, aber ich wollte nur einige grundlegende Seitenelemente auf eine Seite werfen und exportieren, um zu sehen, was ich bekommen würde.

Wie Sie auf dem Bild sehen können, habe ich eine Zeile mit nicht systembezogenem Text, zwei Felder, eines mit einem Bild und das andere mit einer festen Füllfarbe sowie eine Stiftwerkzeugform, eingefügt. Ich habe auch ein paar Navigationssteuerungsschaltflächen eingefügt, um zu sehen, ob sie funktionieren würden.

Zum ersten Mal Pech

Was ich bekam, war ein Durcheinander (und ich spreche gerade nicht über das Design). Sie können im ersten Beispielbild einer Webseite sehen, dass das ausgefüllte Feld und das Stiftwerkzeugelement nicht einmal angezeigt wurden. Aber es braucht mehr als das, um mich abzuschrecken. Ich habe es erneut versucht. Hmmm ... und wieder.

Ich dachte, wenn das Feld mit dem JPEG-Bild angezeigt wird, kann das Einfügen eines Felds in das Stiftwerkzeugelement dasselbe bewirken. Deshalb habe ich in Photoshop ein JPEG mit einem Quadrat von 1 Pixel erstellt und es per Drag & Drop eingefügt. Erfolgreich! Dies hat funktioniert und im nächsten Bild der gerenderten Website können Sie dies sehen.

Leider können Sie jetzt auch jetzt sehen, dass sich die Elemente nicht an den richtigen Positionen befanden. Ich habe versucht, eine signifikante Verbesserung zu erzielen.

Ich habe es dann in der gerade veröffentlichten Version versucht InDesign CC 2014 .

Sie können in diesem Bild sehen, dass die Exportoption in dieser Version einige Verbesserungen hatte. Es wurde das Feld für die feste Füllung gerendert und das andere Stiftwerkzeugelement mit einem Verlauf gefüllt. Aber das Layout war immer noch sehr falsch.

Falsche Richtung

Mir wurde klar, dass ich dieses Recht nicht einhalten würde, und es würde sicherlich nicht so einfach und schmerzlos sein, wie ich zuerst angenommen hatte. Deshalb habe ich mich in diesem engen Bereich von Experten beraten lassen. Zu meiner Überraschung gab es im Internet kaum Informationen zu diesem Thema, bis ich auf einen sehr talentierten Designer mit ernsthaften technischen Problemen namens Michael Murphy stieß.

Murphy war so freundlich, sich Zeit zu nehmen, um mit mir über dieses Thema zu sprechen, über das er vielleicht mehr weiß als jeder andere. In der Tat kann man wahrscheinlich mit Sicherheit sagen, dass er dies wie bei seinen anderen visuellen Kreationen zu einer hohen Kunst gemacht hat. Er konnte viel Licht in dieses Thema bringen und teilt dies in einer Reihe von zwei von lynda.com veröffentlichten Kursen zu diesem Thema ausführlich mit.

Die Kurse sind InDesign CS6 zu HTML und InDesign für Webdesign .

Wie man es richtig macht

Murphy erklärte: 'Bei der Umnutzung von InDesign-Inhalten als HTML gibt es zwei integrierte Exportpfade: EPUB (entweder festes Layout oder Reflowable in CC 2014) oder HTML. Beide Ziele erfordern die konsistente Verwendung von Stilen (Zeichen, Absatz und Objekt) in Ihrem Projekt und dass alle Stile mit einem HTML-Äquivalent verbunden sind (z. B. das p-Tag für Absätze, h1, h2, h3 usw. für Überschriften). und em oder stark für kursiv bzw. fett). Mit diesen können Sie die Struktur und Organisation Ihrer Inhalte beibehalten, nicht jedoch deren Erscheinungsbild.

'InDesign kann CSS sowohl für EPUB als auch für HTML generieren. Das CSS InDesign generiert jedoch Bestrebungen, die Einstellungen beizubehalten, die Sie auf ein Drucklayout (z. B. ein Buch oder einen Zeitschriftenartikel) angewendet haben, und es gibt zu viele Unterschiede zwischen den druck- und bildschirmbasierten Leseerlebnissen, als dass dies optimal wäre Ergebnisse.

'Aus diesem Grund ist es unwahrscheinlich, dass Sie von Anfang bis Ende fertig werden, ohne unter der Haube zu basteln und zumindest in das CSS, wenn nicht in das HTML-Markup selbst, einzusteigen.'

Er erklärte weiter, dass normalerweise der HTML-Code, den Sie aus InDesign erhalten, am nützlichsten ist, wenn Sie über ein vorhandenes CSS verfügen, auf das Sie abzielen (z. B. ein für EPUB-Projekte verwendetes Boilerplate-CSS oder ein von Ihrer Site verwendetes CSS oder sein Inhaltsverwaltungssystem).

In dieser Situation können Sie einfach die erforderlichen Verbindungen zwischen Ihren InDesign-Stilen und ihren jeweiligen HTML-Tags und CSS-Klassen herstellen. Diese Optionen finden Sie in den Export-Tagging-Bereichen der Dialogfelder 'Absatz-, Zeichen- und Objektstiloptionen'. Stellen Sie sich bei Objektstilen jedes Objekt vor, auf das ein Stil als DIV in Ihrem HTML-Code angewendet wird, und kennzeichnen Sie es entsprechend.

Kalte, harte Wahrheiten

Während der EPUB-Export vorhersehbarer ist, versucht der Web-Export immer, ein sich bewegendes Ziel zu erreichen. Der HTML-Export von InDesign bietet Ihnen daher keine einfache webfähige Ausgabe Ihres Drucklayouts. Sie erhalten nur Ihre Inhalte - Text und Bilder in der gewünschten Reihenfolge - mit dem entsprechenden HTML-Markup für die Wiederverwendung im Web. Trotz dieser Einschränkung ist der Pfad schneller und weit weniger repetitiv als manuell, insbesondere wenn Sie die Formatierung und Hierarchie bereits in InDesign festgelegt haben.

'Zum Beispiel', erklärt Michael, 'exportiere ich jeden Monat einen ganzen Monat lang Zeitschriftenartikel aus ihren InDesign-Layouts nach HTML, um sie auf der Website des Magazins zu veröffentlichen.' Mit Export-Tagging, das in die Stile in meinen Vorlagen integriert ist, ist der Prozess schnell, relativ sauber und eliminiert sich wiederholende Arbeiten und potenzielle menschliche Fehler aus der Gleichung. Die volle Nutzung der Funktion hängt letztendlich von realistischen Erwartungen und der Bereitschaft ab, die erforderlichen Vorbereitungen für Ihre Dokumente, Vorlagen und Stile zu treffen. '

Also ja, es kann gemacht werden und gut gemacht werden. Es ist nur so, dass man systematisch vorgehen und einen guten Workflow einrichten muss. All dies bedeutet, dass es sich nicht um ein einfaches einmaliges Projekt handelt. Dies ist am besten für Benutzer geeignet, die über eine angemessene Menge wiederkehrender Inhalte verfügen, die ins Web gebracht werden müssen, sowie für ein Content-Management-System oder einen Workflow, der dies unterstützt.

Verwenden eines Plugins

Was ist also mit einem Plugin? Schön, dass du gefragt hast! Wenn all diese Informationen oben Ihren Kopf ein wenig drehen lassen, sind Sie nicht allein. Für Nicht-Techniker gibt es die Alternative, ein Plugin namens In5 von zu verwenden Ajar Productions . In5 fügt eine zusätzliche Exportoption mit dem Namen 'HTML mit In5 exportieren ...' direkt unter dem Export hinzu, der sich nativ in ID befindet.

Die Optionen im Dialogfeld von In5 entsprechen denen der nativen Version sowie zusätzlichen Abschnitten wie SEO. Das Ergebnis ist, wenn alles gut geht, eine sehr benutzerfreundliche Webseite und Website. Dies ist eine großartige Option, insbesondere in einem Nischenbereich, in dem es nur wenige Optionen gibt.

Fazit: Es wäre schön, wenn InDesign das Schweizer Taschenmesser wäre, von dem ich gehofft hatte, dass es es ist. Adobe arbeitet hart daran, uns diese Tools zur Verfügung zu stellen. Aber wie Michael Murphy mir sagte, sind die Unterschiede zwischen den beiden Formaten Print und Web so groß, dass die Lücke schwer zu schließen ist.

Wörter: Lance Evans

Lance Evans ist Creative Director von Graphlink Media . Er hat Bücher über 3D geschrieben und die 3DNY-Seminare für Apple und Alias ​​produziert .