Nils Hörrmann Nils Hörrmann https://nilshoerrmann.de 2012-09-25T15:40:00+02:00 Zeitsprung. Interview mit Alexander Rutz 3377 2012-09-25T15:40:00+02:00

Unsere Umgebung verändert sich. Mal unmerklich, mal ganz offentlichtlich. In seinem Projekt Zeitsprung bringt Alexander Rutz das Gestern und Heute der Stadt Weimar fotografisch zur Deckung.

Wie entstand die Idee zu den fotografischen Zeitsprüngen durch Weimar?

Nachdem ich bereits zehn Jahre in Weimar wohnte, habe ich zufällig erfahren, dass eine ganze Häuserzeile, die ich immer als historisch betrachtet hatte, eine Rekonstruktion aus den späten Achzigerjahren war. Das war die Initialzündung einmal genauer hinzuschauen, was alles in der Stadt vernichtet worden ist. Dabei fiel mir auf, dass nicht nur die Nazibauten und der Krieg, sondern auch die rigorosen „DDR-Sanierungen“ durch Abriss große Lücken in die Stadt gerissen haben. Ich wollte mehr darüber erfahren und begann, historische Fotos von Weimar zu sammeln.

Beim Anblick der alten Aufnahmen fragt man sich immer sofort, wie das wohl heute aussieht. Da habe ich mich an die Vorher-nachher-Überlagerungen erinnert, die es zu verschiedenen Themen im Netz gibt, und versucht die historischen Motive aus gleicher Perspektive nachzuschießen. Das klappt bei manchen Motiven auf Anhieb, bei manchen ist es zum Verzweifeln.

Daraus ist die Idee zur Zeitsprung-Webseite geboren, die seitdem langsam aber sicher wächst.

Auf Twitter hast Du angedeutet, dass auch andere Ideen der Umsetzung im Raum standen, wie 3D-Rekonstruktion oder 4D-Zeitschieber. Was war der ausschlaggebende Punkt für den Einsatz der Schiebebilder?

Der Grundantrieb des Zeitsprungprojektes ist der Wunsch, die Bilder, die Veränderungen, im Prinzip die Vergangenheit an sich, auf eine neue Art erfahrbar zu machen. Die Vorher-nachher-Überlagerungen waren ganz pragmatisch die unkomplizierteste Methode, schnell zu schönen Ergebnissen zu kommen. Die Schiebebilder funktionieren sehr intuitiv und es gab auch ein paar fertige Skripte dazu im Netz, die ich mittlerweile aber durch ein einfacheres Konzept ersetzt habe.

Die anderen Ideen kamen erst später dazu, als aus den wenigen Bildern und Karten langsam mehr und mehr wurden. Diese sind allerdings zumeist sehr viel aufwändiger zu realisieren. Das vielleicht spannendste potentielle Projekt wäre, die gesamte Stadtentwicklung in einem zeitlich animierbaren Stadtmodell von ca. 1820 bis in die Gegenwart umzusetzen. Das grenzt jedoch an eine Lebensaufgabe, selbst wenn man Vollzeit daran arbeiten würde. Auch als 2D-Stadtplan ist das denkbar, was wesentlich einfacher umzusetzen, aber zugleich weniger anschaulich wäre.

Ein anderes, etwas kleiner gestecktes Projekt könnte die 3D-Rekonstruktion eines nicht mehr vorhandenen Stadtviertels sein. Das hat bereits jemand anderes mit der von den Nazis zerstörten Jakobsvorstadt versucht, leider ist er nicht zu erreichen, und ich kann nicht herausfinden wie weit er tatsächlich gekommen ist.

Wie findest Du die Fotos, die den Ausgangspunkt Deiner Gegenüberstellungen bilden?

Ich habe anfangs erst einmal versucht, Material zu benutzen, welches frei verwendbar ist, zum Beispiel historische Postkarten. Der Hunger nach mehr Bildmaterial hat mich (über die Vermittlung des befreundeten Fotografen Alexander Burzik) zum Stadtarchiv Weimar geführt. Der Leiter des Stadtarchivs Dr. Jens Riederer war von Anfang an sehr hilfsbereit und so habe ich die Möglichkeit bekommen, in einer sehr großen Schatzkiste zu fischen, wovon ich bisher nur sehr wenig tatsächlich für die Zeitsprünge genutzt habe. Dazu kommen diverse bei Flickr gefundene Bilder. Dort konnte ich mich jeweils direkt mit den Urhebern absprechen, die eigentlich immer sehr nett und entgegenkommend waren. Eine weitere Quelle sind eigene Bilder aus der näheren Vergangenheit, sowie nicht zuletzt die schönen Bilder des Weimarer Fotografen Claus Bach, die er netterweise zur Verfügung stellt.

Wie gehst Du bei Deinen Neuaufnahmen vor? Die Deckungsgleichheit der Motive spielt ja eine wichtige Rolle.

Ich suche mir daheim die Motive aus und lade Sie auf meinen iPod. Dann versuche ich, vor Ort den passenden Standpunkt zu finden. Entscheidend dabei ist es, Überlagerungen von Vorder- und Hintergrund des Bildes zu finden. Wenn man dann beispielsweise am rechten Bildrand eine Überlagerung gefunden hat, muss man idealerweise am linken eine weitere finden und sich so lange entsprechend bewegen, bis es dort auch passt. Das gleiche gilt für oben und unten. Oft schieße ich dann eine Reihe Bilder, damit ich daheim etwas Auswahl habe, wenn es nicht so ganz stimmt. In besonders schwierigen Fällen drucke ich mir das Bild etwas größer aus, da der iPod als Referenz schon etwas klein ist. Besonders hilfreich ist es, die Brennweite des Originalbildes zu kennen. Wenn man diese auf das Äquivalent einer modernen Kamera umrechnet, kann man mit einem Zoomobjektiv die entsprechende Brennweite einstellen. Wählt man dann den ungefähren Bildausschnitt des Originalbildes, so hat man schon relativ genau den Abstand des Originalfotografen zum Bild. Danach muss man dann wieder nach den besagten Überlagerungen schauen.

Wie sind die Reaktionen in Weimar auf das Projekt?

Durchweg positiv. Der Bekanntheitsgrad ist noch relativ gering, aber die Seite ist immerhin schon auf der offiziellen Stadtseite Weimars verlinkt. Leider halten sich die meisten Besucher mit Kommentaren bisher zurück, ich würde mir etwas mehr Diskussion wünschen. Vielleicht nimmt das aber zusammen mit dem generellen Bekanntheitsgrad zu. Ich muss auch wieder regelmäßiger neue Zeitsprünge einsetzen, das schleift in letzter Zeit leider etwas.

Welcher städtebauliche Umbruch ist für Dich persönlich in Weimar interessanter: die Zerstörungen der Stadt durch den Krieg oder die Veränderung der Stadt in der Nachwendezeit?

Ich finde das eigentlich alles gleichermaßen spannend. Weimar hat da viel zu bieten.

Da wären erst einmal die historischen Stadterweiterungen, besonders zur Gründerzeit. Dann die einschneidenden Bauten des Nationalsozialismus, die den Weimarern den nördlichen Teil des Jakobsviertels mitsamt einem Teil des Asbachgrünzuges geraubt haben. Das ist vielen heute gar nicht mehr bewusst. Auch das Hotel Elefant wirbt mit „klassischem Charme“, ist aber von den Nazis abgerissen und als kompletter Neubau im NS-Stil mitsamt „Führerwohnung“ 1936/37 neu errichtet worden.

Dann die Zerstörungen im zweiten Weltkrieg, die vergleichsweise begrenzt waren, aber doch einige zum Teil immer noch vorhandene Schneisen in die Stadt gezogen haben. Das Nationaltheater (in dem die erste Deutsche Verfassung entstand) zum Beispiel brannte völlig aus und sogar Goethes und Schillers Wohnhaus wurden schwer beschädigt.

In der DDR wurden dann viele Häuser mangels Sanierungsexpertise und Material zerstört und nur teilweise als Neubau in alter Kubatur wieder hergestellt. Es hat mich besonders erschreckt wie viele Lücken dadurch entstanden sind, die ich eher dem Krieg zugeschrieben hatte. Ein großer Teil der restlichen Jakobsvorstadt, und nicht zuletzt fast das gesamte Bornbergviertel, sind dem Abriss oder langsamen Verfall zum Opfer gefallen. Kurz vor der Wende ist sogar noch das Parkhotel, ehemaliges Wohnhaus von Johann Sebastian Bach und Geburtshaus seiner Söhne, abgerissen worden. Das ist bis heute ein Parkplatz.

Das ganze endete dann leider auch nicht vollständig mit der Wende. Auch in den Neunzigern wurden einige erhaltenswerte Gebäude für Neubauten abgerissen. Prominentestes Beispiel ist vielleicht der Abriss der ohnehin schon entstuckten „HEKA“ am Theaterplatz. Dafür steht hier nun ein modernes Einkaufszentrum.

Insgesamt finde ich besonders interessant wie sich kleine Details verändern. Sei es aufgrund von Sanierungen oder einfach der voranschreitende Zerfall von Fassaden. Also Veränderungen die man mit dem Auge nicht wahrnehmen kann, die aber durch einen „Zeitraffer mit zwei Einzelbildern“ erfahrbar werden.

Wenn Du fünf Jahre weiterdenkst, was wünscht Du Dir für die Zeitsprünge?

Vor allem, dass sie weiter wachsen und gedeihen und irgendwann mal eine breit gefächerte Übersicht über die Stadt und Ihre Geschichte zeigen. Dazu würde ich mir eine lebhafte Diskussion wünschen. Vielleicht könnten die Zeitsprünge sogar einmal zusätzliche Blickwinkel bei Diskussionen zu aktuellen Themen der Stadtentwicklung, wie zum Beispiel dem geplanten neuen Bauhaus-Museum, liefern.

Vielen Dank für das Gespräch, Alexander

Alexander Rutz, gebürtig aus Northeim kommend, studierte in Weimar Produktdesign und Visuelle Kommunikation. Das Projekt Zeitsprung ist unter zeitsprung.animaux.de verfügbar. Mehr von und über Alexander Rutz gibt es auf seiner Webseite animaux.de oder auf Twitter.

Die Verwendung des Bildmaterials auf dieser Seite erfolgt mit freundlicher Genehmigung von Alexander Rutz. Ihm sind alle Rechte vorbehalten.

Eine Reise durch die Zeit 3374 2012-09-01T16:57:00+02:00

Meist ziehe ich gedankenlos meine Kreise durch die Stadt, den üblichen Trampelpfaden folgend. Trotzdem gibt es Orte, an denen ich mich schon öfter gefragt habe, wie das hier eigentlich zu Großvaters Zeiten ausgesehen haben mag. Mit der historisch-synoptischen Karte Braunschweig wird diese Frage zu einer faszinierende Reise durch Zeit und Stadtraum.

Stadtgeschichte hat mich schon immer interessiert, vor allem die bauliche, architektonische Veränderung die ein Ort im Laufe der Geschichte durchlaufen hat. Wie haben sich Straßenverläufe geändert? Wie wurde die Struktur einer Stadt durch die Zerstörung und den Wiederaufbau nach dem Zweiten Weltkrieg beinflusst? Würde ich mich noch zurechtfinden, wenn ich 100 Jahre in der Zeit zurück reisen könnte?

All dies waren Fragen, die ich mir schon als Kind in meiner Heimatstadt stellte. Als ich zum Studium nach Braunschweig gezogen bin, kannte ich die Stadt nicht. Meine Eltern haben hier ebenfalls studiert, doch erst im Laufe der Jahre begriff ich, dass Braunschweig auch die Geburtsstadt meines Großvaters, den ich nicht kennengelernt habe, ist. Als ich vor ein paar Jahren Fotos und Karten vom meinem Onkel für das Familienarchiv vermacht bekam, musste ich schmunzeln, wie sich ungeahnt Lebenswege verschiedener Generationen kreuzen können.

Historisch-synoptische Karte Braunschweigs

So fand ist es sehr spannend, als ich durch Zufall vor einigen Monaten die historisch-synoptische Karte der Braunschweiger Innenstadt entdeckte, die das Braunschweig meines Großvaters mit meinem Braunschweig zusammenführt.1 Das Kartenwerk umfasst drei Pläne:

  • den handgezeichneten Originalplan von 1938 (also vor der Zerstörung 1944)
  • den aktuellen Plan von 2010 sowie
  • die Übereinanderlegung beider Stadtgrundrisse

Wie der Begleittext erläutert, wurde für die Zusammenführung der beiden Stadtanlagen auch die Karte von 1938 vektorisiert und anhand baulicher Fixpunkte (Braunschweig, die Stadt der Kirchen) zur Deckung gebracht. Dabei wird zur Abgrenzung der beiden Zeitebenen Grün für die alte und Magenta für die derzeitige Straßenführung verwendet, wodurch unveränderte Anlagen und Pazellenaufteilungen durch die Überlagerung beider Farben dunkel hervorstechen. Es zeigen sich etliche Fixpunkte im Kern der Stadt, die in Struktur und Charakter erhalten geblieben sind: der Altstadtmarkt, der Burgplatz oder der Hagenmarkt. Aber auch massive städteplanerische Eingriffe im Übergang zwischen Alt- und Neustadt werden deutlich: Der Radeklint wurde verlagert und durch die Verbindung von Celler Straße und Langer Straße neu ausgerichtet. Genau der Bereich, der zu meinen festen Laufrouten auf dem Weg in die Stadt gehört. Würde man mich hier, hundert Jahre in der Zeit zurück, aussetzen, ich wäre sicherlich orientierungslos. Zwar gibt es immer wieder Punkte, die gleich sind, aber zwei Meter weiter ist nichts mehr so, wie ich es kenne.

Dies bringt mich zu einer Idee:

Projekt Zeitreise

Zweifellos können wir nicht in der Zeit reisen, aber virtuell können wir Orte wieder auferstehen lassen. In zweidimensionaler Ebene macht Alexander Rutz dies beispielsweise auf anschauliche Weise mit seinem Projekt Zeitsprung für die Stadt Weimar. Es gibt unzählige Stadtfotos des alten Braunschweigs, der Nachkriegsstadt und von heute: Warum gibt es eigentlich kein historisches Streetview? Panoramaansichten bekomme ich ja heute sogar (fast live) vom Mars, warum also nicht aus der Vergangenheit meiner Stadt? Natürlich bedürfte es Fantasie und Kreativität, fotografische Lücken zu schließen und Farbigkeiten zu finden, aber ansonsten wäre die Schaffung solcher historischen Ansichten technisch möglich.

Ich fände dies auf jeden Fall ein sehr spannendes Projekt, das Stadtgeschichte und Stadtentwicklung anschaulich machen würde. Dies nur einmal laut gedacht.


  1. Die Karte kostet zur Zeit 23,50 € und kann bei Graff bestellt werden, bei Borek am Dom waren einige Exemplare vorrätig. 

Symphony Factory 3372 2012-08-22T19:27:00+02:00

Vor Kurzem kündigte Allen Chang im Symphony-Blog an, wie sich die Webseiten des Content-Management-Systems weiterentwickeln sollen. Ein Baustein ist Symphony Factory, ein Design-Framework für das Netzwerk an dem Johanna und ich in den kommenden Wochen arbeiten werden.

Symphony ist seit langem das Redaktionssystem unserer Wahl, wenn es um die Einrichtung von Webseiten geht. Sowohl die Einfachheit und Flexibilität des Backends als auch die Verwendung von XML und XSLT haben sich für uns immer wieder bei der Umsetzung teils komplexer Seitenkonzepte geholfen. Deshalb freut es uns, dass wir nun die Gelegenheit haben, die verschiedenen gestalterischen Ansätze des Symphony-Netzwerk in einem neuen Design zusammenzuführen. Symphony Factory ist konzeptuell vergleichbar mit Twitters Bootstrap oder Zurbs Foundation, allerdings wird das Layout speziell auf Symphony und seine Satellitenseiten zugeschnitten sein.

In diesem Zusammenhang haben wir vergangene Woche erstmals den Versuch gestartet, ein solches Projekt durch die Symphony-Community zu finanzieren. Ein Schritt der wohl bedacht sein musste, denn die Erarbeitung von Symphony Factory wird viel Zeit in Anspruch nehmen, gleichzeitig wollten wir aber auch nicht unsere normalen Preise ansetzen. Schließlich handelt es sich um ein Open-Source-Projekt und diese Art der Projektfinanzierung ist innerhalb der Symphony-Community noch nicht etabliert. Es galt also abzuwägen, und so ist unser erstes Ziel, 2.000 Euro zu erreichen. Die Kampagne läuft seit vergangenem Freitag und wir können uns schon über einige großzügige Zuschüsse freuen (insbesondere Soario ist in diesem Zusammenhang zu danken). Noch ist die geplante Summe nicht erreicht, doch es ist nicht mehr weit, so dass wir uns über weitere Unterstützer freuen würden: pledgie.com/campaigns/18062. Jede kleine Unterstützung bringt das Projekt voran.

In den kommenden Wochen werden wir im englischsprachigen Teil dieser Webseite, den Fortschritt des Projektes dokumentieren. Weitere Kurznotizen werden wir auch auf dem Twitter-Account unseres Büros veröffentlichen.

Vielen Dank für die Unterstützung!
Wir freuen uns auf das Projekt und das Ergebnis.

„Liebes Tagebuch …“ 3368 2012-08-22T08:19:00+02:00

Um ehrlich zu sein: Tagebuchschreiben ist nicht mein Ding. Allerdings, und das ist mein Problem, ich würde gerne Tagebuch schreiben. Im letzten Urlaub habe ich es nun erneut versucht und mit Day One Fotos und Kurzgeschichten digital festgehalten.

Worin ich immer gut war ist Sammeln: Ich finde es toll, später in Erinnerungskisten zu kramen und dabei alte Fahrkarten oder Eintrittskarten zu finden. Meist fallen mir dann die Geschichten drumherum wieder ein, aber eben nicht immer. Ein Tagebuch wäre dann hilfreich. Kurz vor der Abreise in den Familienurlaub stieß ist durch Zufall in einem Tweet von Manuela Hoffmann auf die aktualisierte Mobilversion von Day One, das ich bisher nur als Desktop-App kannte. Ein neuer Versuch.

Day One bietet auf dem iPhone eine schlichte, gestalterisch ansprechende Oberfläche, die mit einigen netten Clous das Herz höher schlagen lässt. Die großen Buttons, die die App einleiten, laden zum schnellen Schreiben und Fotografieren ein, darunter befinden sich die thematischen und kalendarische Übersichten. Das Interface ist dabei so angelegt, dass die Einstellungen erst beim nach oben Ziehen sichtbar werden: wunderbar unaufdringlich.

Das Tolle an Day One ist, dass der Platz zum Schreiben zunächst so wirkt, als ob nicht mehr als ein Tweet hineinpassen würde (prima, Tweets schreiben kann ich) und doch gibt es keine Zeichenbegrenzung (noch besser, dann wird der Eintrag auch einmal länger). Schön sind zudem die Einbindung des aktuellen Ortes und Wetters, Informationen, die insbesondere beim späteren Stöbern sehr interessant sein können. Der Editor unterstützt Markdown, auch wenn wir die dazugehörige Formatierungsleiste erst beim zufälligen Wischen über den Screen entdeckt haben. Als einziges Manko erwiesen sich die langen Ladezeiten bei Fotografieren – warum dieser Vorgang den Ablauf der App verzögerte war für mich nicht ersichtlich, zumal es sich um eine Standardfunktion des Telefons handelt.

Day One scheint tatsächlich wie eine Offline-Version von Path und doch bietet es zwei Synchronisierungsoptionen: iCloud und Dropbox. Auf unserer Reise haben wir uns für Letzteres entschieden, da wir problemlos verschiedene Geräte der Familienmitglieder mit einem gemeinsamen Dropbox-Account verknüpfen und so ins selbe Tagebuch schreiben konnten. Dies hatte den – und hier komme ich auf den Anfang zurück – angenehmen, anspornenden Effekt, dass ein kleiner Wettstreit entstand, wer schon etwas oder gar am meisten eingetragen hatte. Nichts ist besser, um Schreibfaulheit zu überwinden!

Day One gibt es auch für das iPad und den Mac, allerdings lassen diese Versionen entweder die Schlichtheit der iPhone-App vermissen (iPad) oder sind schlicht auf dem falschen Gerät: wer schreibt schon Tagebuch auf seinem Arbeitsrechner (Mac)?

Day One für das iPhone kann ich allen verzweifelten Tagebuchmuffeln nur herzlich empfehlen. Uns hat es zu einer tollen Urlaubsdokumentation verholfen.

Von Tratschtanten und Stiller Post 3365 2012-02-21T14:49:00+01:00

In den letzten Tagen ist viel von Meinungswechsel und Kehrtwende die Rede: „Nun also doch Gauck als Präsident“. Interessant fand ich zu beobachten, wie zügig sich zeitgleich die Meinung auf Twitter zu ändern schien: von contra Wulff zu contra Gauck.

Konkret ging es um den Vorwurf, Herr Gauck stünde im Widerspruch zu so ziemlich allen der sogenannten Netzgemeinde wichtigen Themen. Mich hat das ein bisschen verwundert, es ging mir etwas zu plötzlich, denn ich habe Joachim Gauck bisher als abwägenden Menschen wahrgenommen. Seltsamerweise verbreitete sich die auf Twitter gestartete Welle auch unreflektiert in den klassischen Medien beziehungsweise ihren Onlineablegern. Kurz darauf stieß ich – wieder über Twitter – auf einen Beitrag von Patrick Breitenbach auf dem Blog der Karlshochschule, der diese Entwicklung aufgriff und beleuchtete:

Als sich gestern im Laufe des Tages solche Schlagzeilen gegen Gauck mehrten, machte ich aus meiner Verwunderung eine Tat: Ich begab mich auf die Suche nach den jeweiligen Originalquellen, denn die einzigen Artikel, die immer wieder als Quelle zum Beleg und Unterfütterung der Anti Gauck Aussagen verwendet wurden, waren eben die, die eine Quelle fragmentarisch interpretiert haben und sie nicht 1:1 in voller Länge wiedergaben. Oder anders formuliert: Ich vermisse bei diesen Artikeln den Satz davor und den Satz danach, denn der Kontext eines Gespräches ist schon wichtig, um sich ein Gesamtbild des Themas zu verschaffen, gerade wenn Aussagen aus einer Rede oder einer Podiumsdiskussion entnommen werden.

Ein interessantes Stück Recherchearbeit. Darauf Bezug nehmend gibt es mittlerweile ähnliche Beiträge bei Cicero und Spiegel Online, das ein schönes Fazit findet:

Die deutschsprachige, digitale Öffentlichkeit – Netzgemeinde wie Online-Medien – muss sich in Teilen einen Vorwurf machen lassen, den sie mit Vorliebe Dritten vorhält: mangelnde Online-Kompetenz. In diesem Fall fehlende Kenntnis darüber, wie einer der wichtigsten Bausteine des Internet, das Zitat, richtig zu verwenden ist. Abraham Lincoln wäre sehr enttäuscht.

Genau so, wie man „den Medien“ sagen muss, dass „Internet“ oder „Youtube“ als Quellenangabe nicht reichen, muss man „dem Netz“ auch sagen, dass ein Tweet noch keine Wahrheit macht. Twitter ist wahrlich wie Stille Post und wir alle wissen, wie viel dabei am Ende vom Anfang übrig bleibt. Aber wenn wir dann auch noch retweeten, ohne die Dinge zu hinterfragen, sind wir die Klatsch- und Traschtanten des Stadtteils.

Netz hin oder her, wir sollten alle das Nachdenken nicht vergessen.

A flexible inline block 3355 2012-02-06T17:49:00+01:00

When working on this website, we stumbled upon an unexpected problem: How should we create the text highlighting in our headers giving each line a larger padding to the right? It took us a while, but in the end we found a clever solution.

The problem resulted from a static mockup that looked quite simple. We wanted the markup to be simple as well and as semantic as possible, so we started with just a paragraph:

        <p>
    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit 
    non mi porta gravida at eget metus.
</p>

p {
    padding: 5px 45px 0 9px; 
}

      

But there was a problem.

Bild

Using display: block didn’t work: while it respects a given padding, it creates a single big box and doesn’t apply to lines.

Bild

Using display: inline didn’t work either, as it just creates a single line of text. So we thought: display: inline-block to the rescue! But that didn’t change the situation. We had to add additional markup for each line to get things working:

        <p>
    <span>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis </span>
    <span>vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum </span>
    <span>at eros. Donec id elit non mi porta gravida at eget metus.</span>
</p>

p span {
    padding: 5px 45px 0 9px;
    display: inline-block;
    margin: 4px 0 0; // needed to separate the lines
}

      

This finally worked perfectly.

Making it more complicated

Nevertheless, we had another requirement: our site knows two states – a wide and a narrow one, applied responsively based on the windows size (just give it a try and resize this window). So a line was no longer a line: what might be single line in the wide version could become one and a half lines in the smaller version. We needed to add more span elements to our highlighted paragraph. This led to a new problem: every few words, for each span, the padding - needed at the beginning of the line - was repeated. Sure enough this was not what we were after.

Bild

Bild

The solution

To get rid of the newly introduced gaps, we added a matching negative margin to the right of all spans, hence removing the left padding. This nearly made everything work as needed: no gaps between lines and everything wrapping nicely when resizing the window. But the left padding we just removed was now also missing at the beginning of the lines.

Bild

What saved us was a rather neat idea: we added a pseudo element before each span. By positioning this element absolutely without specifying the top but setting a left coordinate, it automatically aligned at the beginning of each line:

        p span::before {
    width: 9px;
    height: 34px;
    display: inline-block;
    content: " ";
    position: absolute;
    left: 0;
    margin-top: -5px;
}

      

Job done! And this is what the different layers look like when relocated by a few pixels:

Bild

Post scriptum

A few quick responses on Twitter:


@nilshoerrmann <span>That</span><span>makes</span><span>very</span><span>ugly</span><span>code</span>. <span>Unmaintainable.</span>

Eric Eggert, @yatil


This is true – the described method makes the markup harder to read. But in our case maintenance is not a big problem because we have a simple XSL template that generates the needed markup on the fly. I’ll post more on this later this month.


@nilshoerrmann @yatil I made something similar with display: inline: dabblet.com/gist/1753471 This way you don’t have to markup each line.

Dennis Frank, @freshmango


Really nice. But this gets extra bonus points as it also solves the problem of a larger right padding:


@nilshoerrmann dabblet.com/gist/1753540 /cc @yatil

Dennis Frank, @freshmango


Fancy!

Ein Jahr Büro für Web- und Textgestaltung 3351 2012-02-06T14:50:00+01:00

Vor anderthalb Jahren begann das Projekt Selbstständigkeit, vor einem Jahr folgte die Gründung des Büros für Web- und Textgestaltung. Nun gibt es einen überarbeiteten Inter­net­auf­tritt, der uns und unsere Projekte vorstellt: hananils.de.

Der zentrale Gedanke unserer Seite war es, zwei Bereichen eine Bühne zu schaffen:

  • Unseren Projekte, denn Sie sind das, was wir machen.
  • Unseren Ideen, denn Sie sind der Grund warum wir so arbeiten, wie wir es tun.

Da alles möglichst kompakt dargestellt werden sollte, haben wir uns für einen kombinierten Seitenaufbau entschieden, der die Projekte oben und die Texte unten zeigt – unser Kontakt dient als Schieber zwischen beiden Teilen und soll einen zunächst unauffälligen, dann überraschenden Übergang beider Ebenen ermöglichen. Die Umsetzung ist ein kleines Experiment, denn die Zweiteilung des Layouts baut sich über das Scrollen der Seite auf: URLs müssen dynamisch geändert, Inhalte bei Bedarf nachgeladen werden. Ein mehrseitiges Layout versteckt sich auf einer einzigen Seite, und kommt doch ohne Hash-URL à la Twitter aus (#!).

Bild

Das Experiment hat Spaß gemacht, auch wenn – wie immer – die Feststellung gilt, dass man sich selbst der schlechteste Auftraggeber ist.

Wer Interesse hat, wie wir die Seite technisch umgesetzt haben, kann einen Blick in den Quelltext werfen. Wir sind für Fragen und Anregungen offen.

Wer Lust auf eine eigene Seite bekommen hat, kann uns kontaktieren. Wir machen gerne noch eine.

Symphony Extensions 3343 2012-01-22T19:39:00+01:00

In case you are using Symphony, you certainly know Subsection Manager and Date and Time, two extensions I have been developing over the last years. Both have moved to a new home at Github.

But maybe you have not used Symphony yet, or haven’t found an excuse to use it lately. If you have not already fallen in love with XSLT and the simplicity of the backend, you’ll have to check it out now in order to try these two extensions:

Subsection Manager

Bild

Symphony offers an easy way to create sections and model the fields the way you like. Nevertheless, from time to time you need to connect the content of two sections: you might have an articles section you’d like to link images to, or you are building a books section you’d like to connect with authors. With a default Symphony install, you can use select boxes or Selectbox Link Fields to create these connections, but you will not be able to see and manage all your content at once. Subsection Manager tries to solve this problem by providing an inline management of another section’s content. By adding the Subsection Manager field to your parent section, you can integrate another section as a subsection. The subsection’s entries can be managed through the inline interface as well as the regular Symphony section entry list. You can opt for inline editing only by simply hiding the specified section from the menu.

As of version 2.0, this extension bundles a second field type: Subsection Tab. It provides a tabbed interface of subsection entries that is well-suited to manage multilingual content. All tabs are static and have to be set up in the field settings.

Subsection Manager is now available under its new address at github.com/hananils/subsectionmanager.

Date and Time

Bild

Date and Time offers an easy interface providing a calendar widget that helps creating multiple dates and date ranges. The field respects the system settings and displays date and time accordingly. Nevertheless, it is capable to read and understand all relative date formats known to PHP 5.

It’s now available at github.com/hananils/datetime.

Both extension are released under MIT license and available for free. If you’d like to contribute, feel free to fork the source and send a pull request.

If you are using one of the two extensions as submodules in your projects, check out this excellent guide by Nils Werner over at symphonyextensions.com which also covers moved sources.

Das neue Lesen: The Guardian 3336 2012-01-21T16:10:00+01:00

Im vergangenen Herbst brachte der britische Guardian seine Zeitung auf das iPad. Reichlich spät könnte man meinen, doch die Macher haben sich mit gutem Grund Zeit gelassen: die App ist die erste Tageszeitung auf dem iPad, die mich wirklich überzeugt.

Die iPad-Version startete mit einer großzügigen Testphase bis Anfang dieses Jahres, so dass es möglich war, sich wirklich über einen längeren Zeitraum einen Überblick zu verschaffen. Die Gestaltung ist modern, dem Gerät angemessen, sie versucht nicht die Zeitung aus Papier nachzuahmen. Und dennoch geht der visuelle Stil des Guardians nicht verloren, was insbesondere auf die bekannte Schrift- und Farbwelt zurückzuführen ist. Artikel sind als Seiten nebeneinander angeordnet, die Texte selbst scrollbar – wunderbar!

Eine ausführliche Besprechung der App mit Bildern und Hintergründen gibt es beim Ministry of Type. Dort bringt es Aegir Hallmundur auf den Punkt:


Die Einfachheit und Gradlinigkeit der Guardian-App wird für eine ganze Weile (ähnlich wie die iPhone-Version zuvor) Inbegriff dessen sein, wie die Dinge gemacht werden sollten.

ministryoftype.co.uk


Digital Reading: The Guardian 3349 2012-01-21T16:10:00+01:00

Last autumn, British newspaper The Guardian released its own iPad app. Quite late as one could say, but the developers took their time for a good reason: in my eyes, this is the first truly convincing daily newspaper app created for the iPad.

The iPad version came with a generous testing period that ended early this year, making it possible to really get an overview over a longer span of time. The app’s design is modern, fits the device and does not try to imitate the paper version. Nevertheless, the Guardian’s visual style is maintained by sticking to the well-known colour scheme and font selection. All articles reside on pages side by side, the content itself is scrollable - wonderful!

A detailed review of the app with screenshots and background information has been posted by the Ministry of Type. Aegir Hallmundur summarises it perfectly:


The simplicity and straightforwardness of the Guardian app is (like its iPhone version before it) going to stand for quite a while as the acme of how these things should be done.

ministryoftype.co.uk


Pictos Server 3333 2012-01-21T14:40:00+01:00

Gute Icons zu erstellen ist eine hohe Kunst. Ein gelungenes Set, das sich seit Jahren großer Beliebtheit erfreut, ist Pictos von Drew Wilson. Jeder, der auch nur ein bisschen im Netz surft, wird es zumindest auszugsweise schon einmal gesehen haben. Nun gibt es ein neues Angebot, das die Icons als personalisierbaren Webfont bereitstellt: Pictos Server.

Ähnlich wie bei den Webschriftanbieter Typekit oder Fontdeck werden die Icon-Schriften über einen kurzen Code-Schnipsel in eine Webseite eingebunden. Dabei lassen sich die integrierten Icons gezielt auswählen. Für Webdesigner eröffnet dies neue Möglichkeiten, denn Icon-Fonts verbrauchen wenig Speicherplatz: sie laden schneller als statische Grafiken und lassen sich zudem ohne Qualitätsverlust skalieren. Einen interessanten Beitrag gab es hierzu in der Adventszeit von Jon Hicks zu lesen, der sich für eine Einbindung die neuen data-Attribute zu Nutze machte. Auch wenn, wie Eric Eggert in einer Antwort deutlich machte, noch einige Probleme zu lösen sind, entwickeln sich die Möglichkeiten von Webicons in eine interessante Richtung.

Grundsätzlich stellt sich die Frage, für wen sich der Service von Pictos Server lohnt, denn mit 49 $ für das Einsteiger- und 99 $ für das Profipaket empfinde ich die Preise derzeit noch als sehr teuer. Wie viele Icons verwendet eine durchschnittliche Seite schon? Wenn das Einbinden von ein paar Icons am Ende genau so viel kostet, wie die vollständige Schriftbibliothek von Typekit, werden die meisten mit Sicherheit weiterhin auf angepasste Pixelgrafiken zurückgreifen. Pictos macht sich mit seinen Vektor- und Pixelsets selbst Konkurrenz. Es bleibt abzuwarten, ob sich hier langfristig preislich noch etwas tut.

Nachtrag vom 25. Januar 2012: Das ging schnell – nun gibt es auch ein zusätzliches Starterpaket für 19 $.

Pictos Server 3348 2012-01-21T14:40:00+01:00

The fine art of creating professional icons is only mastered by a handful of people. Drew Wilson is one of those few: he created Pictos, an icon set that has been very popular over the last years. Anyone surfing the web will have come across it to at least some extent. Now there is a new service available that provides the icons as personalised web fonts: Pictos Server.

Similar to web font hosters like Typekit or Fontdeck, the icon fonts will be included as short code snippets. The service also offers options to bundle only a selection of needed icons. This opens up new options for web designers, because icon fonts use less disk space: they load faster than static graphics and they can be scaled losslessly. In this matter, Jon Hicks published an article about using fonts to add icons to websites by making use of the new data attributes just before Christmas. Even if there are still a few problems to be solved as Eric Eggert pointed out in response to that article, things are moving into an interesting direction.

For me there is only one general question: who is Pictos Server aimed to? With $49 for the basic and $99 for the pro plan, subscriptions are still quite expensive in my eyes. How many icons need to be served to a common website? If you need to pay as much money for only a few icons as you would for the entire Typekit library, I guess many people will stick to customized pixel graphics. With its vector and pixel sets, Pictos is competing itself. Let’s see how prices will change over time.

Update, January 25th 2012: That was fast – there’s now an additional personal plan for $19.