Nerd-Warnung vorweg
Die Stammleser der @netznotizen und die, die mich persönlich kennen, wissen es: Publishing war noch nie so einfach und preiswert wie heute. Smartphone, Mobile Computing und dem werten weltweiten Netz sei Dank. Stand bei mir Print-Publishing in den letzten 20 Jahren im Vordergrund, so schlägt das Herz heute für digitale Medien. Viel bequemer als Printmedien können sie auf Mobile Devices, Smartphone, Tablets und eReadern konsumiert werden. Einiges habe ich in Planung für den Sommer und die Zeit danach. Und dafür brauche ich eine gute Möglichkeit, Inhalte schnell und einfach in HTML formatieren und zu gestalten.
Wer von Ihnen hier mitliest und sich zwar gut mit der Verwendung von Internet, Bloggen, SocialMedia, etc. auskennt, jedoch noch nie ernsthaft einen Blick unter die Motorhaube von Internetseiten getan hat, könnte jetzt zum Beispiel gut ein Eis essen oder woanders weiterlesen. Es wird nämlich ziemlich nerdig im Folgenden, und bevor Sie die @netznotizen gleich aus dem Feed-Reader kicken, lesen Sie lieber temporär Themen von allgemeinem Interesse, z.B. warum Gefrierbeutel und Feuchttücher die größten Errungenschaften der modernen Zivilisation sind, oder über die globale und lokale Bedeutung des einzig relevanten Zitats von Ex-Bundeskanzler Gerhard Schröder (»Ich will da rein«). Über solche Dinge schreibe ich demnächt auch wieder, versprochen.
Persönliches Rahmenwerk
Eine individuelle Sammlung von CSS-Anweisungen und JavaScript-Funktionen. Braucht man nicht, gibt es doch galore im weltweiten Netz. Doch, brauche ich. Ziemlich intensiv habe ich mich in der letzten Woche mit HTML5 und CSS auseinander gesetzt, verschüttetes Wissen aufgefrischt und mir ein kleines individuelles Framework zusammengestrickt, so dass ich Texte und Bilder schnell nach meinen Erfordernissen formatieren kann. Zudem kann ich jetzt grafische Elemente einfach herzaubern, ohne immer wieder Ränder und Positionierungen neu zu definieren und die CSS-Anweisungen neu schreiben oder zusammenzukopieren zu müssen, die dann z.T. noch recht unterschiedliche Bezeichnungen haben, in die ich mich dann jedesmal wieder neu reindenken muss.
Also: Ich habe ein großes CSS-File erstellt, das so ziemlich alle Formatierungs- und Positionierungs-Situationen mit – zumindest von mir – leicht merkbaren Abkürzungen enthält. Mit fast allen denkbaren Rahmen-Effekten, Schatten und runden Ecken, bis das Quadrat zum Kreis wird. Sprechblasenartige Formen für Überschriften, Rotationsmöglichkeiten, etc. inklusive. Diese Formatierungen kann ich schnell und einfach mit mehreren CSS-Klassen zuweisen. Ohne Google, Suchen, Rauskopieren und Anpassen. Definitiv ist jetzt das Erstellen Buttons und Formen mit Photoshop vorbei, anachronistisch ist es sowieso seit langem.
Einen Nachmittag habe ich mich mit zueinander passenden Farben beschäftigt, mehrere Farbpaletten zusammengestellt und diese als CSS-Klassen in die Stylesheet-Datei eingetragen. Damit werden zusammenpassende Farben jetzt per CSS-Klassen hergezaubert und die nervige Recherche nach Farben, die hinsichtlich Farbton, Sättigung und Helligkeit gut harmonieren, entfällt vielleicht noch nicht ganz, jedoch zunehmend. Für die Realisierung von Gestaltungsrastern mit möglichen vertikalen Teilungen bis 12fach gibt es Anweisungen zur Längen- und Ränder-Formatierung in allen möglichen Vielfachen. Ergänzt wird meine Sammlung durch Standard-Elemente aus üblichen JavaScript-Frameworks, wie zum Beispiel den per Mausklick oder Fingertouch ausklappenden oder reduzierbaren Inhaltbereichen. Oder dem klassischen Akkordeon-Effekt oder Registerkarten, mit denen schnell verschiedene Inhalte aufgeklappt werden können.
Ich hab‘ es also jetzt, mein ultimatives Stylesheet. Die CSS-Datei hat inzwischen mehrere tausend Zeilen und ist gute 600 KB groß. Alle CSS-Klassen sind so angelegt, dass sie responsive Darstellung bei unterschiedlicher Displaygröße (Monitor, Tablet, Smartphone, Reader) ermöglichen. Ein paar CSS-Klassen gibt es zudem, die es via Media-Queries ermöglichen, dass Textbereiche oder andere Elemente bei Darstellung auf schmalen Smartphone-Displays sich aus dem Gestaltungsraster lösen und auf der ganzen Seitenbreite angezeigt werden. Im Grunde genommen habe ich für die zahlreichen CSS-Klassen eine kleine Meta-Sprache entwickelt, die genau meine Bedürfnisse erfüllt.
Zufrieden. Bin ich noch nicht ganz, denn einiges muss noch ergänzt werden. Im Groben steht das Personal Framework jedoch und ist sicher ein guter Schritt in Richtung effizienteres Arbeiten.
Wofür des Ganze? Nun, einige eBooks, Web-Apps, Apps per Phonegap und Internet-Projekte sind in Planung. Außerdem für HTML-Email-Useletter.
Entstauben – Dust me, Baby
Entfernen überflüssiger CSS-Anweisungen
Ganz sicher ist ein 600 KB großes Stylesheets zu groß für ein kleines, schlankes responsives HTML-Projekt, das ggf. auch bei schmaler Edge-Verbindung vom Smartphone sicher aufgerufen werden soll. 500o CSS-Anweisungen, von denen nur 30 gebraucht werden? Wie erfährt man jetzt, welche 30 das sind (außer man notiert sie sich manuell), und wie kann man die überflüssigen aus der CSS-Datei schnell herauslöschen? Dazu gibt es ein Firefox-Plugin namens →Dust-Me Selectors. Schnell reduziert sich die CSS-Datei auf wenige Zeilen – und kann sogar direkt ins HTML kopiert werden, wenn man zum Beispiel ein Single-File-Konzept verfolgt für schnelle, schlanke Web-Apps.
Freeware – Der Link zum Testen und Runterladen
Nein, den gibt es nicht. Nachmachen, heißt die Devise. Zumindest für alle, die nicht nur Gelegenheits-HTML-Kreateure sind und Inhalte etwas anspruchsvoller formatieren möchten. Überlegen Sie, was Sie genau für Ihre Projekte brauchen und erstellen Sie sich eine CSS- und eine JavaScript-Sammlung. Dazu dann eine Dummy-HTML-Datei in der alle Formate enthalten sind, für die schnelle Übersicht. Alle Klassen und IDs benennen Sie so, dass es für Sie gut mnemonisch ist und schnell im HTML-Code geschrieben ist.
Nerdig genug?
Herzlichen Glückwunsch. Sie sind kein Programmierer und haben diesen Beitrag trotzdem bis zum Ende gelesen. War es denn jetzt nerdig genug?