Pixelbrechende Gestaltung
Eigentlich hatte ich vor einen Blogeintrag zur Smashing Conference zu schreiben. Es war eine empfehlenswerte Veranstaltung mit dem persönliches Fazit als imaginären Arschtritt zum Weiterbasteln der eigenen Website. Das Geniale, niemand scheint bisher das Thema responsives Web wirklich gekonnt im Griff zu haben. Alle experimentieren und suchen den heiligen Gral. Also Ärmel hoch gekrämpelt und rein in die Texteditor, bewaffnet mit Taschenrechner, Papier, Stift und ganz viel Ambitionen.
Die Lösung vom festen Rahmen, macht den Prozess für mich weniger zum klassischen Design, und mehr zum Verhaltensforscher für visuelle Elemente und ich fange wieder wirklich im Urschleim an. Zwei Punkte liegen derzeit im Fokus. Zum einen Lesbarkeit und das neue flexible Grundraster. Bei Lesbarkeit viel mir auf, wie wenig durchdacht und intuitiv relative Größen im CSS sind, die dabei noch auf dem Buchstaben als Einheit basieren sollen. Wäre es nicht genial, wenn man einfach bestimmen könnte, dass ein Block Schrift immer genau so bemaßst, dass X-Anzahl an Zeichen pro Zeile existieren? Mittlerweile merke ich, dass min- und max-Größen für Schrift durchaus sinnvoll wären, denn viele alter Formel funktioneren nur noch in der Theorie.
Momentan bin ich bei einer Dreier-Staffelung für Schriftgröße und Raster. Die genauen Breakpoints sind noch recht weich, dafür muss ich vorher noch die größte Baustelle lösen, nämlich die Frage, wie ich alte individuell gestaltete Artikel möglichst elegant in neue Formen gieße. Fest steht, dass ich hier keinen Spielraum habe, Schrift zu verändern, ohne nicht jeden einzelnen Artikel noch einmal zu überarbeiten. Insofern sehe ich eher eine statische Lösung wie bisher, für ältere Artikel dieses Typs. Sieht am Ende nicht so schlimm aus, wie es vielleicht jetzt klingt.
Dr. Single or: How I Learned to Stop Worrying and Love the 1-Column Layout
Mein größtes Problem bisher, bleibt bestehen. Responsives Web Design bringt eine ganz einheitliche Ästhethik mit sich, welche Variation bei Gestaltung mehr und mehr einschränkt. Schon jetzt sieht jedes Weblog dieser Art völlig gleich aus. Warum wird schnell klar, wenn man sich die Feinheiten von Lesbarkeit anschaut. Momentan schaue ich, wie ich die best mögliche Lesbarkeit für möglichst jedes Dislplay bieten kann und dabei eröffnen sich schnell die engen Grenzen.
Die wirkliche Herausforderung sind im Prinzip nur Tablets und was ich jetzt so sehe, stimmt mich wenig optimistisch. Im Prinzip sind Tablets für Lesbarkeit auch nur größere Smartphones, soll heißen mehr als eine Spalte Inhalt funktioniert praktisch überhaupt nicht. Platz, den ich beim klassischen Desktop Design optional füllen kann, existiert bei Touch-Devices überhaupt nicht. Jedes Pixel ist so wertvoll, dass man es immer füllen oder leerlassen muss. Eine Randspalte für Optionales? Völlig unmöglich. Zwar ließen sich Lösungen finden, mehr Varation bei der Text-Bild-Gestaltung zu benutzen, aber dafür bräuchte ich neue CSS Klassen in alten Artikeln, was keine Option ist.
Die erste Lektion bisher ist somit einfach. Mit Präzision und Kontrolle, geht ganz klar auch Variation verloren. Responsives Design erfordert – sofern man sich an etablierte Muster der Nutzung hält – Abstriche bei der eigentlichen Gestaltung. Insofern ist entscheidend was man überhaupt als Inhalt anbieten möchte. Je weniger Variation auch beim Inhalt, umso einfacher der Schritt weg von einem festen Rahmen.
Der aktuelle Stand sieht so aus, dass ich Schriftgrößen soweit festgeklopft habe und nun mit einem neuen Grundraster teste. Auch hier haben mir Tablets einen Strich durch die Rechnung gemacht. Ich bin erschrocken, wie wenig Spielraum man hier hat, wenn es darum geht eine größere Menge Text angenehm konsumierbar zu machen, aber so ist es nun mal und daran werde auch ich mich gewöhnen müssen. Als nächstes werde ich mir ein paar Artikel vornehmen und schauen, ob man diese irgendwie auch in allen kleineren Formaten funktionieren lassen kann.
Bei all dem Schimpfen über die wirklich sehr eng gesteckten neuen Grenzen, es macht wirklich Spaß, mal echte neue Probleme zu lösen. Zusammengefasst? Auch ich such nun den heiligen neuen Gral.
6 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>Was ich auf dem Tablet sehr angenehm finde, sind Webseiten oder auch native Apps die ein anpassen der Schriftgröße erlauben. Als Beispiel kann ich etwa die SpiegelOnline App nennen, bei dieser Stelle ich die Größe der Schrift immer auf +1, wenn ich einen Artikel lese.Diese Möglichkeit wünsche ich mir auch auf manchen Webseiten. Ein verstellen der Schriftgröße ohne das Design zu beeinträchtigen.Ich probiere ja auch gerade mit einem flexiblem Layout bei meinem Fotoblog und was ich feststelle, ist dass diese Designs immer auf einer hohen Auflösung viel Leerraum erzeugen. Desweiteren suche ich noch nach einer eleganten Lösung um Bilder flexibel in der Größe anzupassen. Ich möchte dabei nicht das große Bild laden, und es dann nach Bedarf zu schrumpfen.Ich denke fast da bietet mir CSS & HTML keine zufriedenstellende Lösung, und ich werde das Problem vielleicht doch mit JavaScript angehen.
Was bleibt denn dann noch von der individuellen Artikelgestaltung bzw. von den individuell-gestaltenten Artikeln?
Die halten mich derzeit noch davon ab, ein noch einfachereres cross-mediales Layout zu entwickeln.
@Benjamin Wie ich den Platz bei hohen Desktop Auflösungen geschickt fülle, ist noch offen. Der große Unterschied ist am Ende eine Frage des Formats, denn Desktop ist heute Breit- und Mobile zu 90% Hochformat.
@ben_ Ich mache den Schritt nur unter den zwei Bedingungen, dass 1) die alten Layout-Artikel weiter funktionieren und 2) neue Artikel der Art möglich sind. Meine Lösung dafür ist relativ einfach. Sobald ein Leser die passende Auflösung besitzt, wird das zusätzlich CSS für den Artikel geladen und die Variablen für Schrift und Raster auf die alten fixen Werte gesetzt. Die alten Artikel sind dann vielleicht im Gegensatz zum Rest mit einer festen Größe bemaßt, aber immerhin in ihrer ursprünglichen, als auch in der abgespeckten Form anschaubar.
Hmm … ist das denn der Sinn der Sache? Ich frage, weil ich es wirklich nicht weiß. Weist die Responsive-Entwicklung nicht eher in eine ganz andere Richtung? Sind Responsive und Individuelle Gestaltung nicht eher widersprüchlich, oder wenn nicht, müsste man individiuelle Gestalltung in ihren Formen nicht gleich responsiv denken, gestalten?
Sicher richtig für Neues, aber Bestehendes? Wegschmeißen, neu überarbeiten oder lieber in alter Form verfügbar machen? Da wähle ich lieber die letzte Option, besonders wenn es so einfach ist, wie zwei Variablen fix zu definieren.
Mein Eindruck bisher: die Frage ist noch das geringste Problem, denn diese habe ich für mich mittlerweile schon beantwortet.
Ich bin gerade über ein WordPress Theme gestolpert, welches sowohl responsive ist, als auch sehr designlastig. ISt inspiriert von Window Metro Style.http://themeforest.net/item/metropress-expressive-wordpress-theme/full_screen_preview/2337037Ich finde es ist ein gutes Beispiel, was doch noch möglich ist.