Einige haben es ja schon mitbekommen: Seit ein paar Wochen verändert sich das Layout dieses Blogs, wenn man ein Safari- oder Firefox-Fenster auf eine Breite von mindestens 1600 Pixeln aufzieht. Das passiert mit Hilfe von CSS3- Media Queries, hier beispielhaft dargestellt:
@media only screen and (min-width: 1600px) {
.wrapper {
column-count:2;
column-gap:24px;
...
}
}
Mit diesen Anweisungen werden die Einträge (wie gesagt: ab einer Fensterbreite von 1600 Pixeln) mit angepasster Schriftgröße zweispaltig dargestellt – für MSIE- oder Opera-Surfer hier ein Screenshot:
CSS3-Spaltensatz ist mit den aktuellen Browsern allerdings noch nicht wirklich praktikabel, da selbst minimalste Eingriffe in den Umbruch (ich erwähne in diesem Zusammenhang nur Schusterjungen und Hurenkinder) noch nicht möglich sind. In der CSS3-Spezifikation ist die Steuerung von Widows und Orphans zwar vorgesehen, wird bisher aber noch von keinem der mir bekannten Browser unterstützt. Ebensowenig wie die Anweisung, vor oder nach bestimmten Elementen einen Umbruch zu unterdrücken bzw. zu erzwingen. Safari hat dazu mitunter noch arge Probleme mit der korrekten Darstellung von mit dem Text mitfließenden floating divs, und manche Safari-Umbrüche sind logisch nicht ganz nachvollziehbar.
Ich lasse das 1600-Pixel-Multi-Column-Layout aber trotzdem eingebaut. Erstens ist esse est percipi ja auch so etwas wie eine Spielwiese, und zweitens kann man so eben ganz gut beobachten, wie sich zukünftige Browsergenerationen entwickeln.
Wer’s nicht mag, macht das Fenster einfach kleiner.
Diese Website wird immer häufiger auch von unterwegs aufgerufen. Das iPhone steht immerhin vor Linux an der vierten Stelle der aufrufenden Plattformen.
Was also lag näher, als esse est percipi zum 7. Geburtstag mobil zu machen? Nichts. Und deshalb sehen iPhone-Benutzer jetzt eine optimierte Website, ebenso wie – theoretisch, verifizieren kann ich’s mangels Telefon leider nicht – Android-Benutzer. Bildbreiten werden automatisch angepasst, die Seitenleisten rutschen unter den Content, Vimeo-Videos erhalten einen Link zur HTML5-Version (praktisch auch fürs iPad). Die Portfolio-Seite läuft noch nicht rund, aber insgesamt habe ich an der Adaption bisher auch nur wenig mehr als eine halbe Stunde gebastelt.
Insbesondere Architekten, Fotografen und Designer (nicht: Webdesigner oder Grafikdesigner mit Weberfahrung) möchten sich auf ihren Websites oft gern ein wenig abheben und bestehen auf – sofern sie denn eine haben – den Einsatz ihrer Hausschrift. Dafür gibt es verschiedene Ansätze (sIFR, Website komplett in Flash, automatische GIF-Erzeugung etc.), bei denen in meinen Augen die Nachteile bei weitem überwiegen. Besonders von reinen Flash-Websites rate ich immer ab, da sie gerade im Bereich Navigation HTML/CSS-Lösungen deutlich unterlegen sind – Stichworte: Browser-Historie, Deep-Links.
Topmoderne Überschriften
Diese Beratung führt in den meisten Fällen gottseidank tatsächlich dazu, dass auf den Einsatz von Schriftsubstitution mit Hilfe von Grafiken verzichtet und gemeinsam nach Alternativen gesucht wird. Mittlerweile unterstützen Safari, Firefox und Opera CSS3-Webfonts im True- oder OpenType-Format, so dass man sich bei der Schriftauswahl nicht mehr auf Georgia, Verdana und Co. beschränken muss (seit fast zwei Jahren werden die Überschriften in diesem Blog in der Schrift Sharedargestellt). Stellt man die Schriftdatei für den Internet Explorer zusätzlich im .eot-Format bereit, dann wird sie auch dort angezeigt.
Lizenz beachten!
Die einzige Einschränkung: Ein Font muss explizit für die Einbettung in Websites freigegeben sein. Dass schließt kommerzielle Fonts zu fast 100% aus. Dass es aber auch freie Schriften gibt, die typographischen und/oder gestalterischen Ansprüchen allemal genügen können, zeige ich in einer losen Folge – heute: Comic Zine von Blue Vinyl Fonts.
Comic Zine
Der wichtigste Satz aus der beiliegenden Lizenz:
This font is free to use in any private and commercial manner.
Wenn Sie als professioneller Webdesigner Comic Zine für eine kommerzielle Website verwendet haben, ist es in meinen Augen allerdings nur recht und billig, dem Gestalter dieser Schrift, Jess Latham, eine Kleinigkeit zu überweisen oder einen seiner Retail-Fonts zu kaufen. Das gehört sich einfach so.
Auf meinen ersten Versuch hatten sich zwar ein paar Leute gemeldet, aber nachdem ich sie mit detaillierteren Informationen versorgt hatte, hat kein einziger je wieder etwas von sich hören lassen. Meiner Meinung nach könnte man, auch wenn das Projekt offensichtlich eine Nummer zu groß für einen ist, zumindest mal eine kurze Absage mailen; aber womöglich hatte man wegen dräuender Arbeitsüberlastung für sowas keine Zeit.
Zum Thema: Für ein umfangreiches Projekt benötigen wir einen Flash-Profi. Weil es beim ersten Mal vielleicht nicht ganz klar war: Es geht nicht um ein paar Zeilen ActionScript oder ein paar Tweens – sonst benötigten wir ja keinen Profi.
Wer interessiert ist, schreibt mir einfach eine E-Mail.
Klickte man bisher auf einen Titel im Notizenfeed, landete man statt bei der verlinkten Seite beim entsprechenden Notizbucheintrag auf qxm.de. Ich hatte deshalb umständlicherweise jeder description den Notizbuchlink noch einmal angehängt. Das ist Vergangenheit, weil ich mich ein bisschen näher mit den RSS-Spezifikationen befasst und isPermaLink="false" entdeckt habe. Angenehmer Nebeneffekt: Bei Klick auf einen Notizbuch-Twitter-Eintrag gelangt man jetzt ohne Umwege über qxm.de direkt auf die in der Notiz verlinkte Seite.
Nicht, dass ich übermäßig twittern würde – ganz im Gegenteil. Aber für meine automatisierten Twitter-Meldungen bei einem neuen Blog- oder Notizbucheintrag nutze ich ab sofort nicht mehr tinyurl.com, sondern einen eigenen URL-Abkürzer. Die Problematik mit der Abhängigkeit von fremden Diensten hat man gerade erst wieder schön gesehen, als tr.im ein paar Tage abgeschaltet war.
Hinter den Kulissen
So funktioniert’s: Aus Buchstaben und Zahlen wird eine eindeutige vierstellige Kombination gebildet und zusammen mit der zu kürzenden URL in eine Datenbanktabelle geschrieben.
Beim Aufruf einer qxm-URL wird diese daraufhin überprüft, ob sie nach dem ersten Slash eine exakt vierstellige Buchstaben/Zahlenkombination enthält. Wenn ja, wird die zugehörige URL aus der Datenbank geholt und der Browser per Header-Anweisung auf den entsprechenden Eintrag weitergeleitet.
Diese Website wird immer häufiger auch von unterwegs aufgerufen. Das iPhone steht immerhin vor Linux an der vierten Stelle der aufrufenden Plattformen.
