Archiv der Kategorie: Webdesign

Webfonts einbinden

Veröffentlicht am in Kategorie Webdesign

Typografie war ja in der Vergangenheit ein Stiefkind des Webdesigns. Kein Wunder, denn man konnte nur Schriften verwenden, die auf dem Computer des Benutzers installiert waren. Standardmäßig sind das sehr wenige, und dann noch unterschiedliche unter Windows, Mac und Linux. Irgendwann kamen JavaScript-Lösungen in Mode, wie zum Beispiel Cúfon, mit denen der Webdesigner den Überschriften einen anderen Font zuwies. Oft sah man auch Überschriften, die als Bild eingebunden waren – nicht wirklich optimal im Hinblick auf Ladezeiten und Suchmaschinenfreundlichkeit.

Einfacher und eleganter ist da schon die Einbindung über das @font-face-Element in der CSS-Datei. Prinzipiell kann man zwar einen beliebigen True-Type-Font vom Computer auf den Webserver hochladen und dann einbinden. Doch erstens kann nicht jeder Browser mit diesem Format umgehen, zweitens ist es unkompriert, sodass die Ladezeiten beträchtlich erhöht werden, und drittens verstößt das in aller Regel gegen Lizenzrechte.

Doch seit 2009/2010 werden verstärkt spezielle Webfonts von verschiedenen Schriftherstellern und -vertrieben angeboten. Diese nun dürfen auf den Webserver hochgeladen und per @font-face eingebunden werden – vorausgesetzt natürlich, man hat eine Lizenz erworben. Einige sind auch Freeware. Man erhält die Webfonts in verschiedenen Formaten, sodass sie mit jedem Browser und auf jedem Desktop- und Mobil-Betriebsssystem korrekt angezeigt werden. Eine Anleitung wird meist mitgeliefert.

Noch einfacher geht es mit den Google Webfonts. Hier wird nur eine einzige Zeile Code im Header der HTML-Datei benötigt. Allerdings sind nur wenige der 616 Schriften (Stand: Januar 2013) für Mengentext tauglich. Viele eignen sich höchstens für Überschriften, manche sind schlecht lesbar und einige rendern sehr unsauber. Einige Perlen sind aber durchaus darunter zu finden.

Quellen und nähere Informationen:
CSS, HTML UND JAVASCRIPT MIT {STIL}
How to use CSS @font-face
Google web fonts
MyFonts: Webfonts & Desktop Fonts

13 Design-Trends für 2013

Veröffentlicht am in Kategorie Webdesign

In dem englischsprachigen Artikel 13 Design Trends For 2013 werden die sich abzeichnenden Screen- und Webdesign-Trends für dieses Jahr vorgestellt. Oder das, was wünschenswert wäre.

Das Design wird sich wohl vom Skeumorphismus (dem Trend, moderne Technik in altem Gewand erscheinen zu lassen) und realistisch anmutenden 3D-Benutzeroberflächen weg bewegen – hin zu flachem, schlichten Design. Die Breite moderner, großer Computerbildschirme wird im Webdesign besser ausgenutzt werden, ohne aber die kleineren Mobilgeräte zu vernachlässigen. Und die Sucheingabefelder und Schriften werden größer werden. Mich persönlich haben immer schon zu kleine Schriften geärgert.

Das sind nur einige der im Artikel aufgezählten Punkte. Na ja, man darf gespannt sein.

Cupcake Ipsum

Veröffentlicht am in Kategorie Webdesign

Als Blindtext für Webseiten-Entwürfe wird ja gern das sogenannte Lorem ipsum, ein an Latein angelehntes Kauderwelsch, verwendet. Und Blindtext ist ein Platzhalter-Text, den man benutzt, wenn der echte Text noch nicht zur Verfügung steht. Um solche Texte mit einer bestimmten Anzahl von Zeichen und Abschnitten zu erzeugen, kann man Generatoren benutzen.

Und es erscheinen immer mal wieder neue Generatoren, von denen manche ziemlich verrückte Blindtexte ausspucken. Heute bin ich auf Cupcake Ipsum gestoßen, den »zucker-glasierten Lorem-Ipsum-Generator«.

Funktioniert gut! Jetzt stellt sich uns nur noch die Frage: Was sind Cupcakes? – Nun, es sind runde Törtchen mit einer Glasur oben drauf. Der Unterschied zu Muffins liegt wohl im Wesentlichen darin, dass Muffins eher kleine Brote sind, Cupcakes aber eben Törtchen. Kurz gesagt: der Teig ist anders, die Form ähnlich.

Cupcake Ipsum made by applicake.com – süüüüß!
http://cupcakeipsum.com/

HTML5-Audio erstellen

Veröffentlicht am in Kategorie Webdesign

Mit HTML5 ist es ja nicht mehr nötig, für Video und Audio auf Flash zurückzugreifen. Moderne Browser können diese Inhalte nativ abspielen. Die Quelldatei muss natürlich HTML5 sein, also in der Dokumenttyp-Deklaration muss stehen <!doctype html> und nicht etwa <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> oder so etwas.

Ich wurde kürzlich gefragt, wie man HTML5-Audio-Dateien denn nun ohne Plug-in ins CMS oder Blogsystem einbindet.

Zunächst muss man sagen, dass man die Audio-Datei in verschieden kodierten Formaten anbieten sollte, damit sie in möglichst vielen Browsern abgespielt werden kann. Die Hersteller haben sich noch nicht auf einen Standard einigen können. Mit MP3 oder besser AAC und Ogg Vorbis deckt man die meisten Browser ab. WAV als unkomprimiertes Format eignet sich nicht gut fürs Web aufgrund der gewaltigen Dateigröße und damit höheren Ladezeit. Bei Wikpedia findet man einen guten Artikel über HTML5-Audio (siehe Linkliste unten) mit einer Auflistung der jeweiligen Browser-Unterstützung.

Der MP3-Encoder vom Fraunhofer-Institut ist lizenzkostenpflichtig, daher verwendet man besser LAME. Dieser kann zu vielen Audio-Konvertierungs-Programmen als Plug-in eingebunden werden. Oder man steigt auf AAC um, das für die Verbreitung von damit kodierten Audiodateien keine Lizenzkosten verlangt. Die Rechtslage ist hier klarer als bei MP3. Und die Kompression ist besser bei einer sehr guten Klangqualität.

Zum Encodieren/Konvertieren benutze ich den schnellen fre:ac. Eine Alternative ist der Free Audio Converter von Freemake. Beide sind nur für Windows® erhältlich.

Die konvertierten Dateien lädt man per FTP auf den Server hoch. Der Quellcode zum Einbinden lautet wie folgt (das Beispiel zeigt einen angelegten Ordner »audio« in einem WordPress-Blog):

<audio controls>
<source src="/wp-content/audio/audiodatei.oga">
<source src="/wp-content/audio/audiodatei.aac">
<a href="/wp-content/audio/audiodatei.mp3" title="Audiodatei">»Audiodatei« herunterladen.</a>
</audio>

controls blendet die Steuerleiste ein, autoplay würde das Abspielen automatisch starten lassen und mit loop lässt man den Abspielvorgang ständig wiederholen. Mit source gibt man die Quelle der Audiodatei an, und mit dem Link a href kann man einen Download anbieten, der eingeblendet wird, wenn der Webbrowser kein HTML5-Audio kennt. Möglich wäre natürlich auch ein reiner Hinweistext.

Ja, und dann sollte man noch sicherstellen, dass der eigene Webserver die Dateien auch wirklich ausliefern kann. Dafür gibt man die MIME-Typen per .htaccess-Datei (im Fall des am weitesten verbreiteten HTTP-Servers Apache) bekannt:

AddType audio/aac .aac
AddType audio/mp4 .mp4 .m4a
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg
AddType audio/ogg .oga .ogg
AddType audio/wav .wav
AddType audio/webm .webm

Und, wenn wir schon mal dabei sind, gleich noch für Video:

AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

Zu bedenken ist: sehr alte Browser und alle alten Internet-Explorer (Version 8 und älter) können die so eingebundene Audiodatei nicht abspielen. Dafür müsste man doch wieder Flash anbieten. Eine andere Möglichkeit wäre noch, den Seitenbesuchern, die einen alten Internet Explorer verwenden, Google Chrome Frame anzubieten. Dies zu erläutern würde aber an dieser Stelle zu weit führen.

Quellen:
AAC
HTML5-Audio
LAME
fre:ac free audio converter
Freemake Free Audio Converter
Google Chrome Frame
HTML5 Audio — The State of Play
HTML5 Audio & Video MIME Types
und das Buch HTML5 von Peter Kröner, Open Source Press

Ein bairischer Blindtext-Generator

Veröffentlicht am in Kategorie Webdesign

Wenn man Entwürfe anfertigt, setzt man gewöhnlich an Stelle des späteren echten Textes einen sogenannten Blindtext ein. So kann man das typografische Erscheinungsbild veranschaulichen und verschiedene Schriften ausprobieren.

Der bekannteste Blindtext ist ein Pseudo-Latein, beginnend mit »Lorem ipsum dolor sit amet«, daher wird Blindtext manchmal auch »Lorem ipsum« genannt. Es gibt aber weitere Varianten, zum Beispiel die ersten Sätze von Franz Kafkas Werken, einen Mischmasch aus europäischen Sprachen, Blindtext mit Typografie-Begriffen und so weiter. Im Netz findet man einige Generatoren, wo man die Länge des Blindtextes und Anzahl der Abschnitte angeben und ausspucken lassen kann, sodass man den Text in seine Entwürfe kopieren kann.

Und jetzt gibt es sogar einen bayrischen Blindtext-Generator. Genauer gesagt: seit dem Start des 179. Oktoberfestes am 22.9.2012. Erschaffen hat ihn die aurum:media Agentur für visuelle Kommunikation in München.

Und hier ist die sehr hübsch und rustikal bayrisch gestaltete Website: Bavaria ipsum – ein bairischer Blindtext-Generator. Darauf gestoßen bin ich durch einen Artikel bei grafiker.de.

Jo mei, i mog des!

Fuß bis an den unteren Rand

Veröffentlicht am in Kategorie Webdesign

Ich hatte lange gerätselt, wie man es bewerkstelligen kann, dass ein Footer, also der Fußbereich einer Webseite, immer bis zum unteren Browserende reicht, auch wenn die Seite eine geringe Höhe hat.

Ich habe das irgendwie mit einer prozentualen Mindesthöhe des Inhaltsbereiches hingefummelt bekommen, aber gerade elegant war das nicht, denn dann hatte der Inhaltsbereich viel Leerraum bis zum Beginn des Fußbereiches. Schöner wäre es ja, wenn der dunkler eingefärbte Fuß eben direkt am Ende des Inhaltstextes begänne, aber dann nicht irgendwie »in der Luft« hinge.

Eine Lösung habe ich kürzlich bei Stadtpirat gefunden. Nico Knoll beschreibt in seinem Blog, wie man das Problem per CSS lösen kann (danke schön!). In seinem Beispiel handelt es sich um einen Footer, der sich über die gesamte Breite des Browserfensters aufspannt. Mit einem in der Breite begrenzten, mittig ausgerichteten Footer müsste es aber auch gehen. Das muss ich noch ausprobieren.

Jedenfalls habe ich den in Nicos Blog beschriebenen Trick auf der Website der Hindenburgstraße Remscheid umgesetzt. Meistens sind dort die Inhalte ziemlich hoch, sodass man scrollen muss, aber in einigen Fällen gibt es auch kurze Seiten. Wenn man einen großen Bildschirm hat (beispielsweise 1920 x 1080 Pixel), kann man den Effekt ganz gut beobachten.

PSD nach CSS?

Veröffentlicht am in Kategorie Webdesign

Es gibt Webseiten-Baukästen für den Windows-PC und es gibt Online-Dienste, mit denen man Webseiten zusammenfrickeln kann. Bekannt ist das alles unter dem Begriff »Homepagebaukasten«. Darunter gibt es viel Schund, aber auch einiges Brauchbare. Zum Beispiel lässt sich gegen Jimdo nichts sagen.

Ganz seltsam ist allerdings ein Dienst, den ich kürzlich fand und der sich psd2css online nennt. Dort wird versprochen, dass einem aus einer hochgeladenen Photoshop-Datei im PSD-Format eine schöne Webseite oder gar eine ganze Website, also ein kompletter Webauftritt, generiert wird. Neugierig, wie ich bin, habe ich den Dienst einmal ausprobiert.

Das Typische an Photoshop-Dateien sind ja bekanntlich die Ebenen, und diese kann der Dienst angeblich auch verarbeiten. Sogar so, dass aus jeder Ebene eine einzelne Webseite erstellt wird, wenn man nur die Ebenen nach einem bestimmten Muster benennt.

Doch ich habe es nicht geschafft, etwas Brauchbares daraus erstellen zu lassen. Andere Benutzer stellen sich vielleicht geschickter an – mag sein. Bei mir kam nur entweder eine leere, weiße Seite dabei heraus oder aber eine Webseite mit einem völlig zerschossenen Bild, jedenfalls, wenn ich eins mit Ebenen hochgeladen hatte. Bei einem einzigen Versuch wurde das Bild korrekt angezeigt.

Nun gut, selbst wenn jemand es schafft, tatsächlich Webseiten auf diese Art und Weise generieren zu lassen – was soll es bringen? Man hat dann entweder Webseiten, die nur aus Bildmaterial, nicht aber aus echtem Text bestehen (und wie will man dann Texte von Zeit zu Zeit ändern oder wie sollen Screenreader blinden Benutzern etwas vorlesen?); oder man muss von Hand den erzeugten Quellcode nachbearbeiten. Und in dem Fall kann man es ja gleich ganz von Hand machen.

Kurzum, ich denke, ein vollautomatischer Dienst kann einfach die Qualität echter Handarbeit nicht ersetzen. Wohlgemerkt: ich sage nicht, dass man es sich schwer machen und keine Hilfsmittel wie Frameworks oder Content-Management-Systeme benutzen soll. Ganz im Gegenteil. Man kann ein Open-Source-CMS benutzen, ein kostenloses Template/Theme einsetzen oder eins kaufen, wenn man schon keinen Webdesigner beauftragen mag. Aber das, was Generatoren und auch die meisten Baukästen erzeugen, ist einfach keine geeignete Wahl, wenn eine suchmaschinen- und benutzerfreundliche, barrierearme Unternehmens-Website entstehen soll.

Silbentrennung auf Webseiten

Veröffentlicht am in Kategorie Webdesign

Silbentrennung im Textverarbeitungsprogramm geht automatisch und ist auch von Hand steuerbar, wenn die Automatik mal Fehler macht.

Silbentrennung auf Webseiten ist eine andere Sache. In CSS 2 war es nicht vorgesehen. Natürlich konnte man von Hand einen harten Trennstrich setzen an den Stellen, wo man es als erforderlich erfand. Das passte dann mit den Einstellungen des Webdesigners. Aber wenn der Seitenbesucher einen anderen Browser benutzte, vielleicht auch noch unter einem anderen Betriebssystem und im schlimmsten Fall mit individuell eingestellter Schriftgröße, dann waren die Trennstriche oft nicht am Ende einer Zeile, sondern irgendwo mittendrin. Sehr hässlich.

Man konnte sich in HTML mit einem soft hyphen (&shy;) behelfen und sogar ein Online-Tool zu Hilfe nehmen: hypho-o. Schön und gut für einen Webdesigner, aber unzumutbar für einen Kunden, der jedesmal seinen geänderten Text durch dieses Werkzeug jagen und dann per copy-and-paste in den Text-Editor einfügen müsste.

Mit CSS 3 leuchtet ein Hoffnungsschimmer am Horizont auf: es ermöglicht Silbentrennung oder hyphenation, wie es im Englischen heißt. Die Browserunterstützung ist allerdings noch nicht sehr gut, und ohne Browser-Präfixe kommt man momentan noch nicht aus. Und so lautet der Code:

p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Ich habe es in verschiedenen Browsern unter Windows und Linux getestet. Unter Linux habe ich keinen Browser gefunden, unter dem es funktioniert hat. Unter Windows klappt es besser:

Firefox 10.0.2: ja
Seamonkey 2.7: ja
Safari 5.1.2: ja

Chrome 16.0.912.63: nein
Opera 11.61: nein
Internet Explorer 8 und 9: wahrscheinlich nicht; ist mir momentan aber auch ziemlich egal.

Schriftkontrast auf Webseiten

Veröffentlicht am in Kategorie Webdesign

Die Schrift auf einer Webseite sollte gut lesbar sein – das ist eigentlich klar. Aber was macht eine Schrift gut lesbar?

Zunächst einmal die Schriftkategorie: serifenlos oder mit Serifen (Schmuckschriften etc. wollen wir hier mal außen vor lassen)? Serifen sind die kleinen »Füßchen« unten an den Längsbalken oder die Ausläufer an den Querbalken eines Buchstabens. In gedruckten Publikationen erleichtern sie den Lesefluss, weil sie das Auge von einem Buchstaben zum andern überleiten. Auf Bildschirmen dagegen verschwimmt eine Schrift in kleiner Schriftgröße oft, wodurch sich Serifenschriften für Mengentexte auf Webseiten eher nicht so gut eigen. Natürlich hängt es immer auch von der Schriftgestaltung ab.

Wichtig ist auch die Zeilenlänge: bei zu langen Zeilen findet das Auge schwer die richtige nächste Zeile, bei zu kurzen Zeilenlängen muss das Auge zu oft in die nächste Zeile springen, was ebenso den Lesefluss stört.

Noch wichtiger finde ich die Schriftgröße. Man darf nicht vergessen, dass nicht alle Menschen, die eine Webseite lesen wollen, über eine hundertprozentige Sehkraft verfügen. Natürlich kann man im Browser die Schriftgröße anpassen: entweder, indem man eine Mindestgröße in den Einstellungen angibt, die einem angenehm ist, oder indem man bei Webseiten mit allzu kleiner Schrift die Anzeige vergrößert. Bei vielen Browsern geht das durch Drücken von STRG und +. Nicht jeder Benutzer weiß das, und deswegen brechen vielleicht manche den Webseitenbesuch bei unlesbar kleiner Schrift schnell wieder ab.

Und jetzt endlich kommen wir zu dem Punkt, der in der Überschrift schon erwähnt wird: zum Schriftkontrast. Die Leserlichkeit steht und fällt mit dem Kontrast. Schrift auf gemustertem Hintergrund ist ein absolutes Tabu, es sei denn, das Muster wäre extrem dezent in der Farbgebung und Struktur, also quasi kaum sichtbar. Komplementärkontrast ist ebenso schlecht (Komplementärfarben stehen sich im Farbkreis genau gegenüber). Zum Beispiel würde blaue Schrift auf orangenem oder auch auf rotem Grund bei gleicher oder nur wenig unterschiedlicher Farbhelligkeit zum Flimmern führen, das den Augen sehr unangenehm ist.

Also setzt man eine dunkle Schrift auf einen hellen Untergrund. Reines Schwarz auf reinem Weiß ist auf Monitoren – im Gegensatz zu Printmedien – ein zu extremer Kontrast. Da wählt man besser ein sehr dunkles Grau/Anthrazit oder ein cremiges Weiß. Wenn es nicht so unbunt sein soll: trotzdem dunkle Farbe auf hellem Grund oder umgekehrt, also zum Beispiel ein Dunkelbraun auf vanillefarbenem Grund.

Was gar nicht geht, ist etwa mittelgrau auf hellgrau. Wenn dann auch noch die Schrift sehr klein ist, sagen wir 8pt/11px/0.7em, macht das Lesen einfach keinen Spaß mehr. Wie auf dem Beispiel unten.

schriftkontrast.png

Georgia Pro und Verdana Pro

Veröffentlicht am in Kategorie Webdesign

Georgia als Serifenschrift und Verdana als serifenlose sind zwei der am meisten auf Webseiten eingesetzten Schriften. Sie wurden seinerzeit im Auftrag von Microsoft speziell für die Anzeige auf Computerbildschirmen entworfen. Die typografischen Möglichkeiten sind mit den wenigen Schriftschnitten Standard, Fett und Kursiv allerdings recht beschränkt.

Daher wurden beide Schriftfamilien nun in Zusammenarbeit vierer Schriftentwickler erweitert auf jeweils 20 Schriftschnitte und tragen den Namenszusatz »Pro«. Sie sind erhältlich als Desktop- und als Webfonts-Version. So große und dazu hochwertige Schriftfamilien haben natürlich auch einen recht stolzen Preis.

Nähere Informationen: fonts.com

« Ältere Einträge
Neuere Einträge »