Man kennt’s vielleicht: Euer Art Director hat sich eine Woche lang konzeptionelle, kreative und vor allem optische Gedanken über den neuen Look eures neuen A-List-Kunden gemacht und ganz fabelhafte Screens des neu zu gestaltenden Webportals gemacht.
Jetzt müsst ihr mit Eurem Sinn für’s Technische ran und das, was eben in der Präsentation noch so wundervoll aussah, einigermaßen sinnvoll in HTML pressen. Euch klingelt immernoch in den Ohren, dass der Projektleiter irgendetwas von einem megaverbreiteten CMS erzählt hat, es euch aber schon kalt den Rücken herunterläuft wenn ihr an die alte 1-Punkt-Krumm-Version der GDLib auf euren Servern denkt und obendrein letzte Woche im SEO-Vortrag irgendetwas von wegen semantischem HTML (?) und dem Focus auf H1, H2, Hx Überschriften erzählt wurde.
Und schon ist er da, der Albtraum: Überschriften und Texte in nicht standardkonformen Fonts.
Doch es gibt andere Probleme, über die ihr euch den Kopf zerbrechen müsst. Seit einiger Zeit sind Scripte in der Entwicklung, die o.g. Rahmenbedingungen umgehen können ohne sie direkt nachhaltig zu beeinflussen.
In der Theorie geht es darum, entsprechend markierte Textstellen nach dem Laden im Browser auszutauschen. In meinen beiden u.g. Beispielen erfolgt der Austausch bzw. das Ausblenden der im HTML vorgesehenen Inhalte durch JavaScript oder CSS gegen Flash-Filme, in denen bekanntlich jeder Font integriert werden kann, oder gegen via einer umfangreich getesteten Library gerenderten GIF- oder PNG-Dateien – ebenfalls gegen viele beliebige Schriftschnitte.
sIFR 2.0: Rich Accessible Typography for the Masses
Link. Mach das ganze in einer Kombination aus JavaScript und Flash. Mittlerweile seit 2005 auf dem Markt (Version 3 gibts als Beta) hat sich das Tool sicher relativ gut etabliert. Soweit ich weiß ist die Unterstützung der Community nicht ohne und es gibt entsprechende Erweiterungen für diverse CM-Systeme, darunter auch Typo3.
Vorteile:
- Alle Fonts, die sich in Flash einkompilieren lassen, werden unterstützt
- Mit den aktuellen Flash-Playern ist markieren und Copy & Paste der enthaltenen Texte möglich
- Originale, im HTML-Markup platzierte Texte bleiben erhalten -> Suchmaschinenfutter
Nachteile:
- Das JavaScript ist nicht das kleinste – auf Rich Media Websites inkl. Prototype und Scriptaculous durchaus zu bedenken
- Bei häufigem Vorkommen auf der Seite kann das ressourcenhungrige Flash schmalere Prozessoren schon einmal zum Kochen bringen
- Ohne Flashplayer keine Pracht. So bleiben vor allem mobile Geräte (z.B. das iPhone) ohne installierten Flash-Player ausgesperrt (es werden ja die alternativ immer noch vorhandenen Texte dargestellt)
- Umbrüche durch dynamische Spaltenbreiten (z.B. auf schmalen Displays) sind nicht abbildbar
PHP + CSS Dynamic Text Replacement
Link 1, Link 2. Heute bin ich auf eine weitere Möglichkeit gestoßen: Das o.g. Script ersetzt Inhalte nach dem Laden schlicht durch CSS. Mittels dem Output-Buffer von PHP werden die wie auch immer von einem CMS generierten Seiten nachträglich nach speziellen, vorher definierten Tags durchsucht. Für jedes gefundene Element wird dabei ein Bild generiert und eine passende Zeile CSS geschrieben. Im Browser werden der enthaltene Text des Elements auf display:none gesetzt und dasselbe Element via CSS mit dem Bild z.B. als Hintergrund angereichert.
Vorteile:
- Kaum ladeintensiv, da ausschließlich mit CSS und kleinen Bilddaten gearbeitet wird
- Darstellbar in jedem gängigen Browser – auch auf mobilen Screens
- Sogar Links bleiben anklickbar, ebenfalls werden bestimmte unterschiedliche Formate wie z.B. fett oder kursiv beachtet
- Originale, im HTML-Markup platzierte Texte bleiben erhalten -> Suchmaschinenfutter
Nachteile:
- Kein Copy & Paste
- Die zugrundeliegende Grafikbibliothek muss mit dem gewählten Font klarkommen, zudem erfordert der PHP-Buffer 1. einiges an programmiererischer Kenntnis, 2. ein paar tiefergehende Servervoraussetzungen
- Umbrüche durch dynamische Spaltenbreiten (z.B. auf schmalen Displays) sind nicht abbildbar
- Ich kann mir vorstellen, dass auch hier GD hie und da zickt
Anregungen, Ergänzungen und alternative Scripte gerne in den Kommentaren.
Post von Sebastian Gerhards
Alle Artikel von Sebastian Gerhards | Homepage/Blog | Sebastian auf Twitter folgen, direkt kontaktieren.
Bei PHP + CSS kommen mir auf den ersten Blick bedenken was die SEO-Tauglichkeit angeht. Per display: none ausgeblendete Überschriften und Texte werden von Google erkannt und evtl. als Manipulation gewertet.
Ich würde dem Art Director dann auch trINKR empfehlen. Macht lockerer, worauf mann dann erklären kann, dass nur echte h1 100%ig funktionieren. Toll aussehende Überschriften können gar nicht so gut konvertieren, um einen Besucherverlust von 1% wett zu machen.
Keep it simpel erinnert mich an das Thema meines nächsten Blogposts, gleich mal draft zapfen, ups, anlegen.
Hmmm,
also ich gebe mittlerweile jQuery gegenüber spcript.aculo.us den Vorzug. Mit jQueryUI (http://ui.jquery.com/) ist es mindestens genauso gut geiegnet Animationen zu erstellen und erlaubt durch die Plugin-Architektur viel kleinere JS-Pakete, da nur Teile der Bibliothek geladen werden die gebraucht werden. jQuery selbst erlaubt aucht schon grundliegende Animationen. Das ganze minified/packed und jQuery alleine schlägt mit 15kb zu Buche. Prototype mit script.aculo.us sind afaik irgendwas um die 130kb.
Nur so als Tipp