Ich weiß nicht mehr wo ich das genau gelesen habe, aber es ist mir ungefähr im Gedächtnis geblieben: Perfektion ist Theorie, Qualität ist Praxis. Aus dem Grund werde ich nicht weiter an der neuen Gestaltung des Weblogs rumdoktern, sondern es endlich live schalten. Ich hab gestern noch geschaut, wie lang Sieben durchgehalten hat. Im Juni wären es vier Jahre und damit länger als die meisten digitalen Anstriche im Web. Ich gebe auch zu, dass ich das alte Design doch nur schweren Herzen ziehe lasse. Es ist noch immer eine sehr solide Arbeit und seit Veröffentlichung praktisch unverändert. Diesmal wird es anders. Acht ist Experiment, dass sich lange Zeit stark verändert wird und meiner Zielvorstellung bis jetzt zu vielleicht 50% entspricht.

alles bleibt anders

Ich gebe es zu, ich tue mich noch schwer damit. Schon die Aussprache klingt fremd: responsive web design. Im direkten Vergleich jedoch, sehe ich jetzt nur die Verbesserungen. Ich selbst habe nun vier sehr unterschiedliche Geräte, um Webinhalte zu konsumieren und responsive web design ist dabei einfach der Weg des geringsten Widerstands. Meine ersten Zweifen bleiben, aber ich muss es einfach selbst probieren und mittlerweile sehe ich mehr Pros als Contras.

Für mich ist dieser Schritt, die größe Lernkurve seit Jahren. Es gibt so wenig “Inspiration” zum Abschauen. Alles was ich bisher sehe, geht mir nicht weit genug. Ich mag meine Details und nicht nur die eine Text-Spalte. Mein Ansatz diesmal muss jedoch reifen. Soll heißen ich hab noch mehr Fett abgeschnitten als früher und den Fokus noch enger gesteckt. Es gibt drei Arten von Besuchern der Seite. Die Stammleser kommen vom RSS-Reader direkt auf die Artikelseite. Die Masse der Fremden kommt über Google direkt auf den Artikel und ist dann meist wieder schnell weg. Den geringen Rest verschlägt es zu Beginn auf die Startseite und danach vielleicht noch auf eine Inhaltsebene tiefer.

Jeder der drei bekommt mit Acht eine noch reinere Erfahrung. Ich hab viele der Blog-Relikte entfernt und selbst essentielles wie Suche und Navigation sprichwörtlich ausgelagert. Mein Ansatz diesmal war so einfach wie kaum vorstellbar: ich möchte nur ein angenehmes Erlebnis beim Lesen der Artikel bieten und das auf möglichst jedem Bildschirm. Vielleicht ist zuviel rausgeflogen, vielleicht auch nicht. Mehr denn je, ist dieser Weblog für mich verändert mit der Hoffnung damit auch den Geschmack anderer zu treffen.

Don’t call it Metro / Flat-Design

“Trends are bullshit”. Webdesign hat sich in den letzten fünf Jahren durchschnittlich enorm verbessert. So richtig Grauenvolles, sieht man in der Regel auf keiner Seite mehr, die einen Leser halten möchte. Der Wert guter Gestaltung ist auch in diesem Medium endlich angekommen, aber die Geschwindigkeit der Trendsetzung und der auf den Zug auspringenden Nachahmer ist erschreckend. Ist ein Trend gesetzt, existiert Tage später das Framework dafür und Wochen später die 306te Start-Up One-Page im Einheitslook.

Microsofts und Googles Design Offensive ist für mich kalte Kaffee. Visuell ist Acht nur eine Weiterentwicklung der vor vier Jahren geplanzten Sieben Formel. Es hat keinen Namen, es ist kein Trend, es funktioniert einfach und ich muss schon schmunzeln, wenn ich Prototypen vorgesetzt bekommen, die ich vor Jahren schon in diversen Blogs, auch dem eigenen gesehen habe. Acht setzt auf keinen Trend, sondern auf meinem Instinkt und auf Iteration des Vorherigen.

Aufgabenliste

Es gibt viel zu tun. Ich kenne die unzähligen Fehler, Browserbugs, Schönheitsfehler und das Code-Chaos. Ich werde sehr viel in den nächsten Wochen verändern. Praktisch alles steht zur Frage. Erstmal werde ich inhaltlich fehlende Formate suchen und die individuellen Artikel wieder funktionieren lassen, um die Idee endlich responsiv probieren zu können. Anschließend muss ich das CSS aufräumen und vielleicht mal in anderen Browsern / Geräten testen. Ich möchte gern wieder einen Hauch mehr Javaskript-Magie, besonders auf Typo-Ebene. Was Kleines gegen Witwen.

Das einzige was nicht mehr verändert wird, ist die grundsätzliche Ausrichtung. Ich mag das alte Raster. Ich mag das mehr an Farbe, auch wenn es bei dem Blau nicht bleiben wird. Ich mag die Typo noch nicht bis ins letzte Pixel. Zuviel Chaos bei den Überschrifen, auch weil ich noch nicht geschaut, habe wie welcher Browser Zahlenwerte für font-weight unterstützt. Ich mag wieder unterstrichene Links. Warum kann ich nicht mal erklären. Langfristig werde ich den Teaser-Bildern ein neues Format verpassen. Es gibt noch viel zu tun.

raus damit

Noch so ein paar Unwesentliche Sachen. Am Anfang habe ich wie immer eine Weile alte Entwürfe angeschaut und am Ende stellt sich heraus, dass ein Bild davon maßgeblich für die aktuelle Optik verantwortlich ist. Ich glaube bisher habe ich hier wirklich nur nach Gefühl gearbeitet und mehr verworfen, als am Ende sichtbar ist. So würde ich auch mein erstes Fazit formulieren. Responsives Web Design ist Iteration, ist Iteration, ist Iteration. Ich halte es für unmöglich hier theoretisch zu arbeiten. Solche Seiten sind immer Prototyp. Noch hat niemand die Formel geknackt.

Ich bin zufrieden. Ich habe wieder Spaß an der Arbeit am Weblog und selbst alte Artikel zu lesen und zu entdecken macht Laune. Der Schnitt ist diesmal vielleicht etwas größer, aber es lohnt sich. Ich hatte kurz eine seltsame Phase an dieser Arbeit. Ich war unsicher, ob ich beim Referenz-Blick auf das alte Design, wirklich was verbessern kann. Das Ergebnis war furchtbar, genau wie das Gefühl dabei. Ich sehe mich nicht als Künstler oder Handwerker. Ich glaube das was wir machen, lässt sich schwierig mit einem Titel beschreiben. So stelle ich mir die Schreibblockade von Autoren vor. Das Gefühl, dass die eigene Jahre alte Arbeit zu einem besseren Ergebnis geführt hat, als etwas aktuell Geschaffenes, ist jedenfalls wirklich schrecklich. Ich bin zuversichtlich mit Acht nun eine Basis für meine übliche Detailverliebheit zu haben. Der Rest ist einfach.

Feedback: 9 Kommentare

Ein Weile brauche ich noch, aber meine neue Artikelseite ist soweit fertig. Damit verbunden fliegt sehr viel Unnützes raus. Übrig bleibt erstmal eine Startseite, die Artikel und ein Archiv zum Stöbern und Suchen. Für alles andere fehlt die Zeit und die Lösung. Ich muss auch erstmal die individuell gestalteten Artikel ihres Glanzes berauben, denn ich habe doch etwas mehr verändert, was die einfachen Stellschrauben unmöglich macht. Ich habe eine Lösung für viele, aber noch nicht für alle Artikel dieser Art.

Einige sehr wenige Blog-Elemente bleiben. Auch wenn mir die Link-Liste zu Artikeln des gleichen Themas Kopfschmerzen bereitet hat, was WordPress da rausschmeißt ist einfach oft inhaltlich so perfekt, dass ich mir diesen kleinen Schatz erhalten möchte, Selbst wenn ich wahrscheinlich der einzige Nutzer bin.

Mittlerweile fühlt sich die Gestaltung rund an, egal auf welchem Display. Es stimmt aber, dass sobald man detaillierter arbeitet, responsives Web Design, sehr viel harte Arbeit ist. Der Aha-Moment braucht eine Weile. Ein Design muss reifen. Geduld ist gefordert, aber es zahlt sich aus. Die Schriftgrößen stimmen und es ist ein Genuss wieder alte Artikel zu lesen. Meine Design Philosophie würde ich diesmal so beschreiben: verkrampfte Suche nach Veränderungen, um dann wieder ins alte Muster zu verfallen und noch mehr zu Entschlacken. Bei der aktuellen Gestaltung funktioniert vieles immer noch. Ich muss nicht alles verwerfen.

Inhalt diktiert alles. Inhalt ist das neue Spaltenraster für responsives Design. Lesbarkeit, Hierarchie, Bedienbarkeit bestimmen alles. Wann, wie, welche Break-Points? Die Frage ist überflüssig, denn der Inhalt diktiert die Grenzen. Was mich noch stört, aber sich nicht so einfach lösen lässt, ist der Effekt, dass Lesbarkeit in theoretischen Display Größen leidet. Da existiert diese Grauzone am Rande der Break-Points, die einen Absatz dann mal viel zu weit respektive eng laufen lassen.

Von der Farbigkeit bitte nicht täuschen lassen. Ich möchte etwas mehr Farbe ins Spiel bringen, aber ich bin noch nicht sicher wie genau. Meine Idee bisher, ist Header und Footer farblich zu hinterlegen, je dem Thema angepasst. In der Theorie toll, in der Praxis vielleicht noch einen Hauch zu verspielt für meinen Geschmack. In den nächsten drei Wochen bin ich unterwegs, mal schauen wie viel Zeit mir zum Tüfteln bleibt, die Lust ist jedenfalls gerade größer denn je.

Was die Performance betrifft, werde ich wie beim Design Schritt für Schritt verbessern. Mein Ziel ist auf jQuery zu verzichten. Es existieren gute und schlankere Alternativen, wie zum Beispiel Zepto.js. Grundsätzlich sehe ich aktuell nur zwei Baustellen für Javaskript. Ich hasse Witwen bei Überschriften und responsive Videos brauchen einen zusätzlichen Container, den ich bei alten Artikeln eben nachträglich hinzu basteln muss. Die anderen bisherigen Spielereien fliegen erstmal raus.

Feedback: 3 Kommentare

Als ich angefangen habe Weblogs zu lesen, da war das Bild noch ein eher exotischer Inhalt. Mit Movable Type kam das Weblog für die Masse, aber selbst damit war Text noch der zentrale Inhalt. Mit der Zeit, erhielt der durchschnittliche Artikel jedoch den kleinen Bruder an die Hand: geboren war das Teaser Bildchen. Ich weiß noch wie beeindruckt ich von diesem kleinen aber feinen Detail ich war, dies bei Ben in Verwendung zu sehen. Jeder Eintrag war um ein kleines Symbolbild ergänzt. Wie wunderbar war das bitte?

Heute sind wir soweit, dass jedes CMS nativ Unterstützung für diese kleinen Bilder bietet, nur klein sind sie auch nicht mehr wirklich. Heute ist es in vielen Fällen Standard, zum Text auch ein Bild angeboten zu bekommen. Auch ich habe dieses Element eingeführt und genau das macht mir bei der Neugestaltung ein paar Probleme.

Altlasten

Immer wenn ich an dieser Seite arbeite, schaue ich zurück. Was ist bisher passiert? Welche alten Hürden gilt es zu überspringen? Warum habe ich damals diese Lösung gewählt? Ich persönlich bin Fan der Symbolbildchen, auch deshalb habe ich diese damals genau an der Stelle prominenter plaziert, wo ich sie zum ersten mal gesehen habe. Dieser Ansatz funktioniert, aber leider aus diversen Gründen doch nicht bei mir. Die Gründe sind eindeutig.

Mein erste Hürde ist offensichtlich. Nicht jeder meiner Artikel hat ein Bild und selbst wenn, dann variiert die Größe. Schlechte Voraussetzungen, um ein Element zentral in verschiedensten Formaten zu präsentieren. Auch deshalb hat sich diese Idee als Sackgasse entpuppt. Meine Teaserbilder werden bleiben was sie sind: nettes Beiwerk, mehr aber auch nicht.

small, medium, large

Alles eine Frage des Formats. Mittlerweile hinterfrage ich ich das Quadrat als universelles Format für ein Bild dieser Art. Im Zusammenspiel mit dem eigentlichen, kompletten Inhalt – meist Text – wünsche ich mir heuteneher ein Querformat. Mal schauen wie ich mich langfristig aus dieser Falle befreien kann.

Das Problem der so unterschiedlichen Größen, werde ich mit der einzigen, praktischen und heute zur Verfügung stehenden Methode für möglichst flexible Bilder. Epische Größe und brutale Kompressionen erledigen die undankbare und langweilige Aufgabe. Ich habe einen Grenzwert für die durchschnittliche Artikelseite, was die zu ladenden Daten betrifft. Die Teaser werden dabei eine Schlüsselrolle spielen. Fakt ist, wenn ein Artikel solch ein Bild beinhaltet, wird es immer geladen und angezeigt, mal weniger und mal mehr prominent.

Feedback: 1 Kommentar

Konstantin hat mich mit seinen Kommentaren, dran erinnert, vielleicht mal etwas mehr zur Überarbeitung zu notieren, auch während des Prozesses. Wo stehe ich derzeit? Ich habe mein Grundraster, eine lange Liste mit kleinen Details für später, eine übersichtliche Liste mit Elementen die komplett rausfliegen, ein paar Screenshots und – ganz wichtig – eine genaue Vorstellung was ich nicht möchte. Was fehlt ist der Rest.

Hier ist der erste Fakt. Es ist unmöglich, dass ich alle Kleinigkeiten mit einmal überarbeite. Dafür ist mein Anspruch zu hoch und die Seite inhaltlich zu fragmentiert. Wenn ich nach langer Zeit mal wieder auf das CSS schaue, da muss ich mich schon wundern, welcher Anfänger da am Werk war. Ordnung schaffen ist der einfachere, spätere Teil, aber es scheitert von an den Grundlagen.

Ich schmeiße sehr viel raus. Am Ende wird außer einer Start- und Artikelseite nicht viel bleiben, aber die wenigen Sachen, die müssen makellos sein und deshalb suche ich seit Monaten nach dem perfekt einzelnen Absatz. Oh ja, ich verbringe Ewigkeiten damit nur eine kleine Sammlung von Sätzen gekonnt in Szene zu setzen. Meine erste Zeile HTML und CSS habe ich 98 geschrieben als die Premium Seite tolle Splashpages mit “Diese Seite ist optimiert für eine Auflösung von 800×600 Pixeln und Netscape Navigator” aufwarten konnten. Web Design seit dem war sehr lange Zeit ziemlich genaue Kontrolle und es fällt mir durchaus schwieriger dies abzugeben.

Zwei Punkte dazu. Selbst der heißeste responsive Webscheiß, sieht in jedem Browser, auf jedem Gerät, auf jeder Version, auf jedem Display anders aus. Mein Ziel ist es einfach nur, dass es überall nach meiner Seite aussieht und sehr gut lesbar ist. Dieses Sehr gut Lesbar ist schon eine Herausforderung. Zeit für verrückte Wissenschaft¹.

Schrift

Ich tue mich noch schwer damit, einen gewissen Grenzwert bei der Schritgröße zu überschreiten. Ich bin überzeugt davon, auch dieses mal mit Standard Systemschriften für normalen Artikeltext auszukommen. Diese Schriften sind jetzt nicht für epische Größen vorgesehen. Momentan sehe ich eine Hierarchie von 15 (small screen), 16 (medium screen) und 17 (large screen) Pixeln. Wenn ich noch höher gehe, werden die Buchstaben vieler bekannter Displayfonts unglaublich fett und wirken nicht mehr “balanciert”. Hinzu kommt, dass Fonts bei gleicher Größe teilweise sehr unterschiedlich groß wirken. Apropor Größen und Einheiten.

Momentan herrscht ein Einheiten Chaos, wie es CSS noch nie gesehen hat: px, em, rem, %. Die Wahrheit ist, dass (CSS) Pixel, die eben keine Systempixel sind, immer funktioniert haben und auch weiter funktionieren. High-DPI Displays und Geräte nehmen einem die Arbeit ab, die sich viele zu Unrecht auf Stylesheet Seite machen. Meine Lösung ist einfach. Ich definiere eine Basis-Einheit von 10 (CSS) Pixeln und faktorisiere diese als em-Einheit. Ich habe genug Geräte angeschaut und damit noch auf keinem eine Überraschung erlebt. Was mir noch fehlt ist das Testen auf einem Konsolen / Fernsehbrowser, aber wer sowas benutzt, der muss nicht dafür belohnt werden. Trend geht eh zum Zweit-Display

Heute, spätestens morgen will ich eigentlich das Design einer einzelnen Artikelseite rund haben. Der Rest wird dann einfach, aber dieser verflixte Textabsatz, der schafft mich noch. Irgendwas ist immer. Ich wär schon froh bei der Frage Serifen oder nicht, eine eindeutige Antwort zu finden. Serifen sehen dann irgendwann doch wieder schick aus, oder ich hab mich hier nur satt gesehen?

Feedback: 5 Kommentare

Neben dem ganzen hippen Design Kram einer neuen Version des Weblogs, schaue ich gerade sehr penibel, wo und wie man noch mehr an der Performance Schraube drehen kann. Eine der erste Stellen meines Weblogs sind hier die vielen eingebettenen Filmchen, meistens von YouTube. Wer sich mal angeschaut hat, was da so alles unter der Oberfläche geladen wird, noch bevor man überhaupt den Gedanken gefunden hat, auf Play zu klicken, der findet schnell sehr viel unnötigen Ballast, den YouTube einem da schickt.

Auf mobilen Geräten habe ich mir das noch nicht genau angeschaut, was auch schwieriger ist, da hier der interne Mediaplayer gefüttert wird und nicht wie so oft auf Desktop Browsern Flash. Trotzdem ist der Grundgedanke bei Media Embeds irgendwie sehr verbesserungswürdig. Zeit daran etwas zu ändern.

Ein paar Lösungen existieren schon. Ich glaube Squarespace hat hier versucht etwas zu verbessern, aber ein Blick auf das HTML und ich bastle lieber meine eigene Lösung. Die Grundidee bleibt gleich. Statt direkt das Embed beim Aufrufen der Seite zu rendern und damit alle nötigen Daten vorzuladen, obwohl sie eventuell überhaupt nie gebraucht werden, bereitet man einen Platzhalter vor, der auf Klick erst dann das eigentliche Embed / iFrame oder was auch immer bastelt.

Was wird genau gebraucht? Im Falle von YouTube eine ID, sowie die Breite und Höhe des Embeds. Eventuell wäre auch eine Vorschau hilfreich und genau sowas bietet YouTube auch nativ für jedes Video an. Mein bisheriger HTML5 Quellcode Entwurf sieht wie folgt aus:

<figure>
  <span class="movie-embed">
    <img data-width="590" data-height="332" data-iframesrc="http://www.youtube.com/embed/Adgp0v_mfTk?autohide=1&showinfo=0&autoplay=1" src="http://img.youtube.com/vi/Adgp0v_mfTk/hqdefault.jpg">
    <figcaption>Video Abspielen</figcaption>
  </span>
</figure>

Ich hab lange überlegt, ob ein figure-Tag hier semantisch vertretbar ist und die Frage für mich mit Ja beantwortet. Noch besser, durch das Caption bekomme ich ein zusätzlichen Knoten, den ich später noch zum Play-Button wandeln werde. Der Rest ist CSS und ein etwas Javascript eines Kollegen. Auf Klick der Caption, liest man die data-Attribute des Bildes aus und baut damit den iFrame. Der Rest ist CSS, aber was zum Teufel sucht dieses span-Tag dort? Jetzt kommen wir zu meinem Lieblingsteil des Artikels.

Responsive Fubar

Zwar existieren viele aufgeblähte Javascript- aber nur eine recht solide CSS-Lösung für responsive Videos. Ich verwende diesen Ansatz schon auf der Portal-Seite vom Film des Tages. Die Sache bröselt aber wie ein morscher Baum in sich zusammen, sobald ich richtig responsiv auslassen möchte. Das Problem mit nur einem Container-Knoten? Die Höhe ist zwar relativ bemaßt, aber nach dem Rendern eben doch ein fixer Wert. Ändert man nun die Margins respektive die Breite, so behält er die Höhe jedoch fix bei, womit das Seitenformat nicht mehr stimmt. Das Video behält eine konstante Höhe, jedoch eine flexible Breite.

Durch den zusätzlichen Knoten löst sich das Problem, weil die Breite des eigentlichen Film-Knotens, nicht mehr manipuliert wird, somit skalieren beide Seite immer proportional korrekt. In meinem Fall ändere ich nur das figure-Tag. Das span passt sich dann automatisch an, hier anzusehen.

Ein paar Dinge noch dazu. Ja, jQuery komplett zu laden, ist überhaupt fraglich geworden, aber für einen Prototypen passt es noch. Dass YoTube solche Optimierungen nicht nativ anbietet, ist bei einem Mutterkonzern, der sich so Performance verschworen hat echt merkwürdig. Das Endergebnis? Die Testseite mit zwei unterschiedliche Filmen, einmal mit meiner Lösung und einmal Standard YouTube Embed Code. Die Zahlen sprechen für sich:

Doch nur die halbe Wahrheit

Was im Desktop Chrome so enorm performanter wirkt, lässt sich nur teilweise für einen mobilen Browser anwenden, da hier was eingebettete HTML Media Daten betrifft, einiges doch anders läuft. Beispiel? Das Autoplay im mobilen Browser? Viel Glück dabei. Der Media Player ist hier auf HTML Ebene überhaupt nicht einfach ansprechbar. Im Endeffeckt, muss ein Nutzer, dann zwei- statt nur einmal den Play-Button berühren. Autoplay für iOS/Android ist zeitweise über hässliche Hacks zwar möglich, aber keine Alternative für mich, insofern muss man damit leben.

Ich bin noch am Überlegen ob ich zukünftig solche Embeds nutzen möchte. Die Performance ist ein schon ziemliches Todschlagargument dafür. Das Formatproblem mit dem zusätzlichen Knoten zu lösen, stört mich allerdings noch sehr. Hinzu kommt, dass sowas wieder keinem Standard entspricht und ich nicht weiß, ob YouTube einen solchen Ansatz nicht irgendwann mal nativ anbietet.

Natürlich spart man mit so einem Ansatz auch keine echten Requests, aber das initiale Laden einer Seite, die ein Media Embed enthält, fühlt sich schneller an, gerade auch wenn man in Betracht zieht, dass nicht jeder Besucher der Seite, überhaupt so ein Embed anschaut.

Feedback: 0 Kommentare

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.

Feedback: 6 Kommentare

Style Tiles. Klingt irgendwie viel zu prägnant für einen hippen Trend, vielleicht auch weil es nur eine moderne Bezeichnung für eine uralte Formel ist? Style Tiles sind also ein neu aufgelegtes Corporate Design Rezept, für eine neue digitale Welt der Gestaltung. Der dazugehörige A List Apart Artikel erklärt es besser. Ich muss zugeben, für eine digitale Welt mit rasant wachsender Display- und Auflösungsvielfalt, ist dieser Ansatz unglaublich effektiv und auch mein Werkzeug für eine kommende Version des Weblogs. Die Methode hilft ungemein beim Reduzieren, selbst wenn kaum mehr etwas zum Reduzieren vorhanden ist. In meinem Fall sind die einzelnen Komponenten schon vorhanden. Ich nutze hier drei konstrastreiche Farben: Schwarz, Weiß, Rot und ich habe ein Logo, dass sich so schnell auch nicht verändern wird und in allen Kombinationen der Farben funktioniert.

Style Tiles bieten meiner Meinung nach den besten Ansatz um die Bruchstellen für ein responsives Design zu finden. Weniger das Display diktiert, sondern das Design. Es fühlt sich an, wie mit einem Raster zu arbeiten, die meisten Probleme lösen sich automatisch von selbst, wenn man sich an die Regeln hält. Für mich ist das irgendwie die beste Schule was völlig dynamische Gestaltung betrifft. Ob und wie sich das Ganze dann technisch umsetzen lässt und ob ich nicht besser an manchen Stellen die Gestaltung der Technik unterodne, ist wieder eine ganz andere Frage. Ich finde es nur ziemlich beeindruckend, wie man hier mit einfachsten Mitteln, ein sehr mächtiges Werkzeug in die Hand bekommt. Style Tiles lösen nicht alle Probleme, aber sie lassen klar weniger überhaupt entstehen.

Feedback: 1 Kommentar

Es beginnt also. Endlich verwässert der Begriff High Resolution noch mehr und zwar da, wo die meisten Recher stehen. Auf der einen Seite freue ich mich, auf der anderen Seite sehe ich mehr Probleme als Vorteile. Wer mit dem neuen iPad mal nicht optimierte Inhalte konsumiert, der freut sich über Retina Matschbilder. Sicher erkennt man keine Pixel mehr, aber bei hochskalierten, interpolierten Bildmaterial, spielt das auch keine Rolle mehr. Pixel oder Matsch. Dazwischen wird es noch lange Zeit nichts geben.

Einer muss immer der Erste sein. Nur Apple kann so einen neuen Weg gehen. Ich fürchte jedoch, die Macher von digitalen Inhalten, sind noch lange nicht bereit für so eine Generation von Displays. Selbst Display Schriften, werden noch lange brauchen, bis sie ihren passenden Platz gefunden haben. Am Ende ist es diese Bild von Diablo 3 auf dem neuen Apple Spielzeug, dass mich lockt. Spiele in dieser Auflösung sind sowohl Fluch als auch Segen. Wer sich Reviews aktueller GPUs anschaut, weiß wie schlecht diese bei steigenden Aufösungen skalieren. Ich bezeweifle sehr, dass selbst ein Diablo nativ mit so einer Auflösung angenehme 60+ Frames bieten kann…oh und offensichtlich ist meine Vermutung schon bestätigt. Selbst GPUs sind noch nicht für eine Zeit nach 1080p vorbereitet.

So ist dieses neue MacBook mehr Blick in die Zukunft, als in die Gegenwart, denn die Vorzüge eines solchen Display, sind heute noch nicht wirklich zu genießen. Für einen solchen Kaufpreis jedoch, hätte ich gern weniger Nachteile.

Feedback: 0 Kommentare

Es folgt mein nüchterner Eindruck zum Thema: “Oh Shit, ich hab Media Queries entdeckt!”

Responsives Web Design, ist Design, ist Produkt, das es zu verkaufen gilt, ist am Ende nur Oberfläche. Kein mauer Inhalt, wird besser, nur weil er plötzlich angenehm auf dem Telefon zu lesen ist. Warum wir heute so viel drüber lesen, hören und sehen müssen, wird schnell klar, wenn man die Autoren anschaut. In der Regel wird hier nur Werbung für die eigene Dienstleistung gemacht, aber das ist nichts Neues.

Richtig ist, dass langsam aber sicher unser altes Maß für das Handwerk fällt. Der Pixel ist tot. Lang lebe der neue Pixel. Diese neue Herausforderung, finde ich toll, denn es erschafft eine neue zusätzliche Ebene, welche die Guten von den Schlechten trennen kann. Ob das eintreffen wird, bleibt abzuwarten. Was ist das Ziel? Web Design ist das Aufbereiten von Inhalten für den Konsum. Nun findet der Konsum, eben nicht mehr nur auf wenigen Formaten, mit einem Interface statt. Es ergeben sich neue zusätzliche Vorraussetzungen, die sich in den meisten Fällen nur zu 80% mit den bekannten populären Werkzeugen, lösen lassen. Die entscheidenden 20% jedoch, sind aktuell noch in keinem Framework und in keinem Tutorial festgehalten. Gut so.

Zwei Dinge werden in keinem der bisherigen Texte erwähnt. Noch immer fehlt für meinen Geschmack ein wirklich detailiertes Vorzeigebeispiel. Der Grad an Details sinkt erschreckend, wenn man seine Inhalte für einer Armee von Displays funktionieren lassen möchte. Gut ist, dass die Mär von Cross-Browser Pixelperfektion endlich stirbt. Gut ist, dass Responsiv der noch kleinere gemeinsamer Nenner ist. Schlecht ist: Variation bei Gestaltung sinkt noch schneller, als zur Hochzeit des Minimalismus. Klar wird niemand mehr Details entwickeln, die nur für einen Bruchteil potentieller Nutzer funktioniert. Sowas ist nur kurzsichtiger Fortschritt.

Am Ende entscheidet Gott sei Dank noch der Inhalt selbst. Seien wir ehrlich, wenn der Inhalt gut ist, besiegt er selbst das übelste Design. Zwar ist es Folter auf dem Smartphone zum Beispiel in Foren zu lesen, aber ich tue es trotzdem, weil es keine Alternative gibt. Die Grundregel vom Inhalt als oberste Priotität, hebeln auch Media Queries zum Glück nicht aus. Verteufeln werde ich dennoch kein responsives Web Design, ganz im Gegenteil.

Ich stecke Knie tief im Thema, aber alles bisher nur reine Theorie. Ich entwickle mein Raster zwar schon weiter und passe es an die neuen Gegenbenheiten an, möchte aber warten, bis auch Desktops Displays mit DPI Werten jenseits der 300 bekommen. Eine Erkenntnis aber bisher? Das einzig wahre cross-Browser, cross-Device, cross-UI Maß? Der Buchstabe. Es ist ziemlich absurd einfach, wie sehr Lesbarkeit den semi-komplizierten Rest diktiert. Die Frage ist, wie man den perfekten Wert für alle möglichen Geräte individuell ermittelt. Dafür existiert noch keine Lösung.

Responsives Web Design steckt noch in den Babyschuhen. Die Zahl der noch nicht, oder nur halbherzig gelösten Probleme, deklassiert die Anzahl der genommenen Hürden. Für mich ist es spannender, die noch stehen Hürden zu nehmen. Bei einer völlig neuen Entwicklung sind Media Queries aktuell nicht mehr zu ignorieren. Ein bestehendes Konstrukt aber auf Biegen und Brechen um Media Queries zu ergänzen, halte ich noch immer für eine fragwürdige Praxis und erinnert mich an Homers geniale Erfindung der Makeup Flinte.

Feedback: 4 Kommentare

Der eigentllich rein narzistische Grund? Ich fand es immer ganz mies, mal unterwegs jemandem einen Artikel des eigenen Weblogs zu zeigen. Klar sehen die gezoomten individuell gestalteten Artikel auch im Daumenkino Format ansehnlich aus, aber lesbar ist anders. Gleichzeitig war ich beruflich etwas angefixt vom mobilen Internet. Die Neugier in Bezug auf neue bzw. andere Möglichkeiten war dann am Ende auch zu groß, drum gibt es offiziell ab heute, inoffiziell seit einigen Tagen, ein mobile Version der Webseite. Das mobile Theme ist auch manuell im Browser zu triggern. So sieht die mobile Version aus und mit ähnlichem Link geht’s wieder zurück ins große Format.

Ich finde es herlich, mal abseits des Desktops zu gestalten, besonders weil ich viele Probleme wieder finde, die ich glaubte vor vielen Jahren zu letzten mal lösen zu müssen. Für mich kam nur eine Herangehensweise in Frage. Statt mit einem riesigen Wasserkopf an zusätzlichem CSS und hippen Media-Queries, die große Version in eine kleine Form zu pressen, möchte ich eine völlig separate, neue Basis für eine mobile Version. Grundlage hier ist Mobile Press. Anschließend habe ich mein Sieben Theme kopiert und alles gelöscht, was ich als nicht notwendig für einen mobilen Konsum einschätze. Die mobile Version bietet nur zwei Seiten-Ebenen. Eine Startseite und ein Template für die Arikel-Ansicht. Alles andere ist Balast, denn mobil existiert wieder ein verlorengegangenes Gestaltungsmittel: Performance.

Es gibt zwei Arten von mobilen Seiten, jene die einfach funktionieren und die man mehr als einmal nutzt und alle anderen. Ich finde es zum Teil absolut lächerlich, wie schlecht viele mobile Seiten einfach sind, selbst bei denen, die behaupten die Weisheit mit Löffeln gefressen zu haben. Meine Lösung, ist die Lösung die ich mir von vielen Seiten erhoffe, dort aber nicht finde.

Alles im groben Abriss. Videos und Bilder skalieren entsprechend der Auflösung respektive des Formats. Klickflächen sollten nicht mikroskopisch klein sein. Artikelansicht wechselt zwischen Portrait- und Landscape-Format. Alles was ich als funktionales Fett eines Weblogs betrachte, ist in der mobilen Version entfernt. Keine Suche. Keine Archive. Keine individuell gestalteten Artikel. Keine Layoutgalerie. Einige Seiten werden ich sicher noch anpassen. Auf jeder Seite findet sich ein Link zum einfachen Wechsel in die “vollausgestattete” Desktopvariante der Seite. Kurzum: alles was man braucht ist da und lässt sich einfach konsumieren. Den Rest vermisse ich in diesem Format nicht.

Ich bin für den ersten Blick zufrieden, auch wenn ich viele Baustellen sehe. Typografisch ist viel zu optimieren, skalierende Bilder sind ein echter Performance-Fresser, aber am Ende denke ich einige Hürden einfach aber solide gelöst zu haben. Es gibt wenige Seiten, die überhaupt nicht mehr funktionieren. Sogar rudimentäre Layoutveränderungen beim Wechsel des Formats sind drin. Dies wird eine neue spannende Baustelle für mich, die zwar auf keinen Fall die Desktop-Variante ersetzen, aber doch ergänzen kann. Immerhin kann ich die eigene Seite endlich mal im Hosentaschenformat präsentieren, ohne sagen zu müssen: “Achja die mobile Version kommt bald.” Getestet auf iPhone 3 und 4, sowie diversen Android Smartphones, wobei mein Referenzgerät hier das Samsung Nexus S ist. Auch Opera Mini scheint im Emulator alles wie gewollt funktionieren zu lassen. Es ist eine “Don’t call it Beta”-Beta. So und jetzt das HTML weiter anpassen, das CSS aufräumen, das Javascript entschlacken und sich weiter über die doch sehr eingeschränkten Stellhebel für die Typo freuen/ärgern.

Feedback: 2 Kommentare