Der m(ech)anische Comiczeichner

Im Webdesign wird Responsivität immer wichtiger. Das bedeutet, dass sich das Layout einer Webseite an das Lesegerät bzw. Browserfenster anpasst, und ist notwendig, weil der altmodische Desktop-PC mit vielen, aber ähnlichen Bildschirmgrößen seit Jahren an Marktbestimmung verliert. Leute surfen jetzt mit Smartphones, Tablets und demnächst anscheinend sogar mit Brillen und Armbändern. Auch die Webcomics müssen immer mehr die verschiedenen Bildschirmgrößen berücksichtigen. Das habe ich ja neulich schon mal angedeutet. Es gibt bereits einige Ansätze dafür. Bereits 2011 machte diese Präsentation von Pablo Defendini (Sly Mongoose) die Runde:



Defendini wischt ein bisschen über den Teil hinweg, wo man nicht nur etwas CSS beherrschen muss, sondern eine ganze Menge, und das bei jeder Seite wieder, wenn man will, dass jede ihren eigenen Charakter hat. Wenn man eher Comiczeichner sein will als Web-Designer, könnte das auf Dauer nerven. Man muss aber nicht gleich alle diese Dinge tun, um zumindest einige der “anderen” Bildschirme mit zu bedienen.

Seit ich die neue Webseite habe, versuche ich zunehmend, den Comic-Bereich als frei gestaltbaren Raum zu begreifen, statt einfach nur fest layoutete Comicseiten einzubinden. (Das kommt auch vor, aber eigentlich nur noch, wenn ich nicht genug Zeit habe.) Dabei wende ich drei grundsätzliche Prinzipien an:

1. Seiten verkleinern.

Ehrlich gesagt, ist das kein Trick, sondern eine Funktion meines Wordpress-Themas. Wenn Bilder breiter sind als der Bildschirm, werden sie entsprechend verkleinert. Das funktioniert über eine Zuweisung in der css-Datei der Webseite. Wer das haben will, lege einfach für Bilder (oder bei Bedarf für eine Klasse von Bildern) folgende Eigenschaft fest:

img { max-width:100%; }

Vorteil: Da habt Ihr praktisch keine Arbeit mit.
Nachteil: Ab einer bestimmten Bildschirmgröße abwärts kann man es nicht mehr lesen.

2. Seiten segmentieren.

Das bietet sich besonders für Strips an, wo die Bilder ebensogut neben- wie übereinander stehen könnten: Statt den Comic als eine Grafik zu exportieren, lade ich Einzelbilder oder Segmente hoch und verbinde die per html.

Bei Comicpress war dafür noch eine eigene htm-Datei nötig, die ich dann statt einer Grafik im Comicpress-Manager hochgeladen habe. Comic Easel hat hierfür zwei Felder auf der Add-Comic-Seite: HTML (Above) Comic und HTML (Below) Comic. Der “Comic”, auf den die Felder verweisen, ist die Grafik, die Du als Featured Image der Comicseite hochlädst. Das ist im Grunde nicht mal nötig, denn Comic Easel funktioniert auch, wenn über diese Funktion gar nichts hochgeladen wird, aber ich empfehle es, denn diese Grafik wird beim Verlinken in sozialen Netzwerken bevorzugt als Vorschaugrafik genutzt. Spart später Arbeit.

Ich unterteile die Seite also - zunächst im Skizzenblock - in verschiedene Segmente, die sich sinnvoll unterteilen lassen. Theoretisch könnte ich einfach Einzelbilder nehmen, aber ganz möchte ich die Kontrolle nicht abgeben. Dann lade ich alle bis auf die wahrscheinlich werbewirksamste per ftp hoch. Die wird dann das “Featured Image” des Comics, und der Rest wird mit <img>-Tags und style-Anweisungen eingebunden. Tipp: Manchmal hilft es, den ganzen Comic in einem <div>-Tag einzufassen, um ihn unter Kontrolle zu bringen.

Es folgen ein paar Beispiele. Wenn Ihr dieses Blog an einem Desktop oder Laptop lest, zieht einfach das Browserfenster etwas zusammen, bis Ihr den Unterschied seht:
Echte kriminelle Genies - Hier ist der Strip anders unterteilt als der Titel. Einfach alles in der Mitte durchschneiden ging nicht. Trotzdem ein relativ einfaches Beispiel.
Eier - Als Beispiel einer komplexeren Seite. Siehe auch die Layoutskizzen hier.
Das nächste große Ding - Eine Kombination mit dem Verkleinern von Elementen: Die Titelgrafik wird kleiner, die Einzelbilder nicht.

Vorteile:: Richtig angewandt, funktioniert diese Methode bis zu einer ziemlich kleinen Bildschirmbreite. Sie liefert außerdem eine ansprechende Vorschaugrafik für soziale Netzwerke gleich mit, und wer sich Gedanken um Raubkopien macht: Alleine dass die Kopisten nicht den ganzen Comic beim Hotlinken einer Datei zu fassen kriegen, dürfte einige abschrecken.
Nachteile:: Es erfordert viel Gefriemel und oft mehrere Versuche, bis alles wirklich sitzt. Und wer auf virale Verbreitung hofft: Dass man beim Hotlinken nur einen Teil des Comics zu greifen kriegt, wird viele Leute abschrecken.

3. Elemente austauschen.

Das mache ich manchmal, wenn ich auf allzuviel Gefriemel keine Lust oder dazu keine Zeit habe. Ich exportiere brav den ganzen Comic als eine Datei und lade sie hoch, versehe sie aber mit einer CSS-Klasse, die das Element nur bis zu einer bestimmten Bildschirmgröße anzeigt, und verweise mit einer komplementären Klasse, die danach “übernimmt”, auf eine alternative Ansicht. Die Klassen definiere ich dann in der css-Datei des WordPress-Themas. Das sieht dann etwa so aus:


@media (max-width:700px) {
.futsch700 { display:none; } }
@media (min-width:701px) {
.flutsch700 { display:none; } }

Übersetzung: Elemente der Klasse “futsch700” werden nur bei Bildschirmbreiten ab 701px angezeigt, Elemente der Klasse “flutsch700” ausschließlich darunter.

Ein einfaches Beispiel ist diese Conny-Van-Ehlsing-Seite, die ich für größere Bildschirme in die Breite layoutet habe und die dann bei kleineren einfach durch eine Standardseite ersetzt wird. (Das ist auch ein Beispiel, wo ich keine Zeit hatte, für die kleinen Bildschirme noch was Besonderes zu gestalten.)
Ein komplexeres Beispiel ist der Cartoon von gestern. Statt einfach das ganze Bild zu ersetzen, habe ich es dreigeteilt - die linke obere Ecke des Bildes ändert sich nicht und liefert auch das Vorschaubild. Die Sprechblasen, die je nach Bildschirm zur Seite oder nach unten gehen, und eine Fortsetzung des Bildes in die jeweilige Richtung kommen dafür, je nach Bildschirmauflösung, dazu. Okay, ich hätte auch ebensogut zwei ganz verschiedene Bilder machen können, und vielleicht wäre das sogar werbewirksamer gewesen, aber ich wollte das einfach mal ausprobieren.

Vorteil: Diese Methode, erst recht in Kombination mit Methode 2, ist im Prinzip unendlich variabel. Du kannst jedem Bildschirm und Endgerät eine eigene Ansicht zuweisen, bis hin zu Downloadlinks oder Lupenfunktionen für die ganz kleinen.
Nachteil: ... Vorausgesetzt, Du hast so viel Zeit. Denn diese vielen Versionen müssen alle einzeln layoutet und hochgeladen werden.


Das Problem dabei, Webcomics responsiv darzustellen, ist natürlich das Originallayout, das dabei flöten geht. Ein Comic-Seitenlayout ist eine gezielte räumliche Anordnung von Elementen, die aufeinander verweisen, und wenn sich die räumliche Anordnung ändert, ändert sich oft auch die Aussage. Die originalgetreue Wiedergabe einer Comic-Seite im Netz wäre also einfach ein Abbild der Seite in Bildschirmauflösung, vielleicht zerschnitten, damit sie ins Fenster passt, das man auf Anhieb sieht, oder gleich als scrollbare Anordnung von mehreren Seiten untereinander. Aber irgendwann erreicht man einfach den Punkt, wo eine einzige Darstellung entweder zu klein zum Lesen ist oder (wenn man bei der kleinen anfängt) ins Monströse geht.

Ich denke, mittelfristig kommen wir nicht drum herum, für verschiedene Nutzergruppen verschiedene Angebote zu machen. Im Moment habe ich noch viel Spaß dabei, diese kleinen Layoutexperimente durchzuführen. Irgendwann wird es vielleicht Pflicht. Dann habe ich hoffentlich Routine.