CSS

Neue Schriften braucht das Web

iBa · 19. Juni 2011 ·

Webfonts via CSS einbinden

Erst seit kurzer Zeit gibt es die Möglichkeit, neue Schriftarten (Fonts) für Websites ebenso einfach wie standardkonform zu benutzen. Sie geben Webseiten einen individuellen Touch und machen das Web abwechslungsreicher. Je stärker sich moderne Browser mit ihren besseren Darstellungsmethoden verbreiten, desto mehr kann man mit neuen Fonts experimentieren.

Ganz simpel klappt das beispielsweise mit Google Webfonts. Die Schrift wird über die CSS-Datei in die Seite eingebunden. ~~Für meine Website hier benutze ich derzeit für die h3-Überschrift~~ die Google-Fonts Schrift Didact Gothic von Daniel Johnson (s.o.). (aktuell: Century Gothic). Der Designer charakterisiert seine Schrift so:

„Didact Gothic is a sans-serif font designed to present each letter in its simplest form. This makes it very suitable for literacy efforts.“

Eine Schrift also, die dem Inhalt maximal Raum gibt, genau richtig für Text pur.

Eingebunden wird die Schrift in der ersten Zeile im CSS mit diesem Code:

@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);

Sowie dem zugehörigen Font API Parameter: Didact+Gothic bzw. ‚Didact Gothic‘

Die „Freie Schrift“ steht unter der Lizenz SIL Open Font License, 1.1

Bereits recht verbreitet sind die DroidFonts – bei Google.com/webfonts

Fazit: Nicht alle neuen Schriften sehen immer und überall gut aus, aber rein technisch gesehen klappt es problemlos. Die größere Schriftenvielfalt trägt allerdings nicht zwangsläufig dazu bei, dass eine Webseite besser aussieht. Trotzdem verbessert sich damit der Spielraum für Grafik- und Screendesigner.

Surfstick und GPRS-Surfen

iBa · 13. April 2010 ·

GPRS-Surfen ist keine neue Sportart (Slow Surfen?;) Vielmehr hatte ich im Urlaub das zweifelhafte Vergnügen, per Surfstick via GPRS ins Internet zu schleichen – dem Internetstandard von Vorvorgestern. Das vermeintlich tolle Angebot entpuppte sich (in diesem Fall) als Flopp. Ja, es gibt solche Orte in Deutschland, die von der modernen Kommunikation in weiten Teilen abgeschnitten sind – kein Kabel in der Erde, kein Funk. Im Urlaub ist das kein wirkliches Problem, aber zum Arbeiten stell ichs mir schwierig vor. Eben las ich, dass derzeit noch rund 6 Millionen Haushalte in Deutschland kein DSL haben.

Für mich hat dieser Ausflug in die Vorzeit bestätigt, was ich für Webseitengestaltung predige: Die Startseite sollte nach wie vor nicht über 200 kb „schwer“ sein – möglichst weit darunter. Der Aufbau der Inhalte und Überschriften muss hierarchisch und übersichtlich erfolgen. Flash-Seiten sind mit solchen Basic-Verbindungen nicht nutzbar, ebenso wenig Webseiten mit vielen Bildern oder Buttons, die womöglich noch relevante Informationen enthalten. Googlemail bietet netterweise einen Link „für langsame Internetverbindungen“.

Wer wissen will, ob die eigene Webseite mit GPRS, Suchmaschinen oder Braille-Lesegeräten kompatibel ist, kann im Firefox-Browser unter „Ansicht“ einmal den Punkt „Webseitenstil/ohne Stil“ auswählen (im Internet Explorer IE: Ansicht/Format/kein Format) – das ist es so ungefähr, was man via GPRS einige (viele) Minuten lang zu sehen bekommt. Die Suchmaschinen „sehen“ übrigens auch nicht mehr als das – verblüffend oft eine komplett weiße Seite.

CSS-Design zwischen Buchdeckeln

iBa · 23. Oktober 2008 ·

Derzeit ackere ich dicke Bücher zum Thema CSS-Design durch, um meine Learning-by-Doing-Erkenntnisse auf eine solidere Basis zu stellen. Eins ist gewiss: Man spart man viel Zeit, wenn man bekannte Haken nicht doppelt schlagen muss. Ungewohnt ist es, ein Internet-Thema in gedruckter Form zu lesen – da vermischen sich zwei Medien (Online und Print), die (für mich) eigentlich nicht allzu viel miteinander zu tun haben. Dennoch hat ein Buch Vorteile, es ist haptisch;) und in jedem Fall übersichtlicher.

Leider kann man Bücher nicht nach Stichworten durchsuchen, da hilft das schönste Glossar nichts. Auf den DVDs in den Galileo-Büchern findet man ’nur‘ Beispielsoftware und –material, allerdings wird auf der Verlagsseite von Galileo eine Volltextsuche angeboten.

Das Standardwerk von selfhtml schlägt beide Fliegen mit einer Klappe: Es liegt sowohl online als auch gedruckt vor – und ist eine optimale Grundlage für alles Weitere. Das Buch „Professionelle Websites“ von self-html-Guru Stefan Münz bietet einen umfassenden Überblick über den aktuellen Stand im Webdesign. [professionelle-websites.de]

Sehr hilfreich und gut (für mich jedenfalls) ist das erst im Frühjahr 2008 erschienene Arbeitshandbuch „Modernes Webdesign“ von Manuela Hoffmann, in der bekanntermaßen schicken Aufmachung von Galileo Design. Mit diesem Buch kann man sofort loslegen, es ist sehr praxisbezogen und widmet sich in einem Kapitel ausführlich WordPress-Templates. Das Buch ist nicht nur „trockener Code“ allein, sondern behandelt außerdem die Grundlagen von Grafikdesign, vom Goldenen Schnitt über Typographie bis Farbgestaltung. Sehr empfehlenswert! [Website zum Buch: einfach-modernes-webdesign.de]

Da ich schon mal dabei bin, hab ich mir auch gleich das Galileo-Buch „Fortgeschrittene CSS-Techniken“ von Ingo Chao und Corina Rudel bestellt, ebenfalls druckfrisch von 2008. Hier allerdings wimmelt es von Code … soll ja auch so sein, okay. Allerdings gehört das für mich doch eher an den Bildschirm als zwischen Buchdeckel. Für Code-Freaks, Programmierer und Detailverliebte ist das aber sicherlich genau das Richtige. [Inhaltsverzeichnis bei: Galileo-Computing]

Das Buch „CSS & HTML Design Patterns“ von Michael Bowers (2007 engl. / 2008 dt.) greift das Thema CSS wie ein Rezeptbuch auf. Auf 500 Seiten finden sich Code-Schnipsel ohne Ende, für jedweden Einsatz (Tabellenlayouts) und jede Variation (runde Ecken;) – ein nettes Nachschlagewerk, sehr übersichtlich und praktisch. [Inhaltsverzeichnis bei: edv-buchversand]

Insgesamt sind das rund 2000 Seiten und ca. 10 kg CSS-Know-how – was für eine Monster-Lektüre!