Archiv der Kategorie: Webdesign

Hut ab vor kompetenter Konkurrenz, von der man noch was lernen kann. Nie würde ich mich über sie beklagen. Was mich hingegen aufregt, sind Konkurrenten, die ihr Handwerk nicht verstehen.

Es ist schon unfassbar, wer so alles Webdesign quasi »nebenher« anbietet, ohne dafür eine Ausbildung zu haben oder sich wenigstens das nötige Wissen selbst anzueignen mittels aktueller Fachliteratur. Natürlich sieht manches Zusammengefrickelte schön aus. Aber wenn dann Links nicht funktionieren, ist es doch sicherlich für den Kunden, der mög­licher­weise viel Geld bezahlt hat, ärgerlich.

Heute bin ich auf so ein hübsch gestaltetes, aber funktionell mangelhaftes Machwerk gestoßen. Und die Krönung, als ich mir den Quelltext der Referenzen anschaute: Im Jahr 2011 setzen diese »Webdesigner« tatsächlich noch die so was von völlig veraltete Frame-Technik ein! Mit Microsoft Word als HTML-Editor.

Arme Suchmaschinen. Und arme Kunden!

Das CMS »SilverStripe« bietet zum Bearbeiten der Webseiten den WYSIWYG-Editor »TinyMCE« im Backend an. Ich persönlich bin zwar mehr ein Fan von CKEditor, aber gut, TinyMCE ist auch in Ordnung. Aber was mich total stört, ist die voreingestellte Schriftgröße von 62,5 %, die ich als zu klein empfinde. Ich will nicht mit der Nase bis an den Bildschirm ran.

62,5 % entsprechen 10 px – im Fall, dass im Browser eine Standardschriftgröße von 16 px eingestellt ist. Dies ist die Voreinstellung der meisten Webbrowser. Wie kann man diese Größe aber ändern?

Nun, sie lässt sich über eine CSS-Datei einstellen. Im Normalfall verfügt jedes Theme – zumindest wenn es eins der bei der Installation von SilverStripe mitgelieferten ist – über eine im Unterordner CSS liegende Datei editor.css, die man jetzt bearbeiten muss. Sie sollte folgenden Eintrag enthalten:

//This support file is used to style 
//the WYSIWYG editor in the CMS

@import "typography.css";

Mehr nicht. Darunter trägt man ein (im Beispiel wird eine Schriftgröße von 14 Pixeln gewünscht):

body.mceContentBody {
    min-height: 200px;
    font-size: 14px;
}

Nachdem man den Browser-Cache geleert hat, wird die Veränderung sichtbar.

Und nun noch eine Leseempfehlung: Interessanter Artikel auf toscho.de zu dem Irrsinn, Schriftgrößen in Prozent anzugeben.

Kennen Sie das? Winzige Schrift auf einer Webseite, sodass man entweder mit der Nase fast bis an den Bildschirm heran geht (schlecht) oder die Schriftart im Browser vergrößert (lästig). Warum machen Webdesigner so etwas? Vielleicht, weil trotz aller Aufklärungen über Barrierefreiheit und Benutzerfreundlichkeit das Gerücht umgeht, eine mikroskopisch kleine Schrift sehe chicer aus als eine in Normalgröße.

Vielleicht aber auch, weil ja Inhalt König ist (stimmt!) und der Seiten­besucher den gesamten Inhalt auf dem Bildschirm sehen soll, ohne nach unten rollen zu müssen (warum?). Manchmal gelingt das natürlich trotz kleinst möglicher Schriftgröße nicht. Und so sieht man dann den gestal­terischen Wahnsinn, dass der Inhaltsbereich zwar komplett auf den Bildschirm passt, auch auf den eines Subnotebooks oder Netbooks, aber dann ein Rollbalken innerhalb dieses wenige Textzeilen hohen Inhalts­bereiches prangt.

Nun, was ist eigentlich an einer flexiblen Höhe des Inhaltsbereiches aus gestalterischer Sicht so schlimm? Und warum soll auf Teufel komm raus der gar nicht ungewöhnliche Rollbalken (scrollbar) am rechten Rand des Browserfensters vermieden werden? Aber nein, statt dessen eine Schrift, für die man ein Fernglas braucht! Was soll das für einen Sinn haben?

»Niemand scrollt auf Webseiten« ist ein sehr guter Artikel, der sich mit dem hartnäckigen Gerücht befasst, kein Mensch sei neugierig auf das, was unterhalb des sichtbaren Bereichs liegt.

Endlich, seit 2010, gibt es eine große Anzahl von Webfonts, also Schriften, deren Lizenz es erlaubt, sie auf Webseiten als Font einzubetten. Ich weiß: es gab auch früher schon ein paar Webfonts, sogar kostenlose wie die berühmte Graublau Sans – aber in den vergangenen Jahren eben nur eine Handvoll und darunter waren auch nur wenige, die wirklich hübsch aussahen. Heute ist die Situation viel besser.

Meine Lieblingsfundgrube für Schriften ist MyFonts. Sie bieten Tausende von Webfonts an, und die Vorschaumöglichkeiten sind exzellent. Man kann sich sogar anzeigen lassen, wie die Schriften in verschiedenen Browsern unter Windows und Mac aussehen. Man kauft also nicht die »Katze im Sack«. Darüber hinaus gibt es von einigen Schriftfamilien auch bestimmte Schriftschnitte für null Euro, selbst für den kommerziellen Einsatz. So kann man wirklich gefahrlos testen und sich weitere Schrift­schnitte (also Variationen der Schrift in Schriftstärke, Schriftbreite oder Schriftlage) später bei Bedarf dazu kaufen.

Eine Schriftlizenz kann man für Desktop, Web oder beides kaufen. Wenn man gleich beide Lizenzen erwirbt, ist die zweite immer um die Hälfte reduziert. Diese Ersparnis ist natürlich erfreulich, wenn für ein Projekt Print- und Webdesign übereinstimmen müssen.

Besonders hilfreich ist die Anleitung, die man nach dem Kauf bekommt, wie man die Schriften in seine Webseiten einbinden kann. Alles ist gut beschrieben und so vorbereitet, dass man mit Kopieren und Einfügen schnell den erforderlichen Code in die HTML-Datei bzw. das Template eingebaut hat und seine Traumschrift dann auf der Website bewundern kann – es sollte unter jedem einigermaßen aktuellen Browser funktionieren.

Man hat die Möglichkeit, die Schrift entweder nur per CSS einzubinden oder aber per JavaScript und CSS. In letzterem Fall lädt der Browser nur die für die Umgebung des Benutzers notwendige Schrift und der Lade­vor­gang ist etwas schneller. In diesem Fall sehen allerdings Seitenbesucher mit abgeschaltetem JavaScript statt des Webfonts nur eine Stan­dard­schrift, aber laut verschiedenen Statistiken browsen wohl nur ca. 2 % bis 5 % der Benutzer ohne JavaScript.

Übrigens: Diagonale Linien in Schriften erzeugten ja früher immer diese Treppcheneffekte am Bildschirm. Damit dieser Treppcheneffekt vermieden wird, ist unter Mac OS X und unter Windows seit Vista standardmäßig eine Schriftenglättung aktiviert (Microsoft: ClearType, Apple: Font Smoothing). Und in Windows XP kann man sie einschalten. Diese als »Subpixel-Rendering« bezeichnete Technik kann aber unter bestimmten Umständen selbst wiederum Darstellungsprobleme in sich bergen.

Was ist »Google sites«? Lesen wir, was Google selbst schreibt: »Google Sites ist eine kostenlose und einfache Möglichkeit, Webseiten zu erstellen und anderen verfügbar zu machen.«

Ich habe es mal ausprobiert, und tatsächlich lässt sich damit schnell und einfach eine Website aufsetzen. Allerdings muss man einen Google-Account haben oder einen neuen anlegen, denn ohne eingeloggt zu sein, kann man auch nichts erstellen.

Ist man eingeloggt, werden einem verschiedene Vorlagen angeboten, von Wiki über Familien-Treffpunkt bis zur »professionellen« Website. Man kann aber auch eine leere Vorlage wählen und sich dann die einzelnen Seiten des neuen Auftritts selbst zusammenstellen. Auch hierfür gibt es Vorlagen, die sogar ganz hübsch aussehen.

Nach Fertigstellung hat man dann eine Adresse mit »sites.google.com/site/« am Anfang und dem selbst gewählten Namen dahinter, sagen wir mal »profiauftritt/«. Ein Corporate Design oder spezielle Konfi­gurations­möglich­keiten kann natürlich so ein Baukastensystem nicht bieten, oder nur unter erheblichem Aufwand, und das ist eben auch das Manko dieser ganzen »Homepage«-Baukästen der großen Webhoster.

Jetzt wollen wir uns noch die Frage stellen, warum Google so etwas überhaupt kostenlos anbietet. Nun, sie wollen Geld verdienen. Klingt paradox? Ist es aber gar nicht. Denn man wird ziemlich stark mit der Nase darauf gestoßen, dass man seine neue Website doch »mone­tisie­ren« kann (so heißt es in der deutschen Version). Und zwar mittels Google AdSense. Das geht, grob gesagt, so:

Google tritt als Anzeigenvermittler auf. Also, Unternehmen schalten Anzeigen über Google AdWords. Und ein Website-Betreiber kann wie­derum Anzeigen per AdSense auf seinen Seiten einbinden. So werden je nach Thematik der Webseite automatisch passende Anzeigen an­ge­zeigt. Klickt ein Seitenbesucher nun auf so eine Anzeige, bezahlt der Advertiser (Inserent) eine Gebühr an Google und Google wiederum zahlt eine Provision an den Publisher, also denjenigen, der die Anzeigen bei sich einbindet. Der Traum vom schnellen und dicken Geld durch AdSense dürfte aber im Regelfall unrealistisch sein, was jedoch hier nicht zum Thema gehört.

AdSense kann man natürlich ganz unabhängig davon einsetzen, ob die Website nun bei Google oder sonstwo gehostet wird. Insofern sehe ich in »Google sites« keinen wirklichen Vorteil gegenüber vergleichbaren Lö­sun­gen, noch zumal man bei Google ja nie wissen kann, was sie alles für Daten sammeln. Nun gut, die Kombination von Gratis-Webspace (wenn auch nur 100 MB) und einfachem Bau­kasten­system könnte man als Pluspunkt zählen.

Wie gesagt, für wirklich umfangreiche und individuelle Anforderungen reichen derartige Baukästen kaum aus. Für Privatleute und Hobbyisten ist »Google sites« aber eine gute Einstiegsmöglichkeit.

Bluefish ist ein einfach zu bedienender HTML-Editor, den ich ganz gerne unter Linux benutze und den es nun auch für Windows gibt. Im Februar 2010 ist die Version 2.0 veröffentlicht worden.

Nach eigener Aussage ist es »Ein quelloffener Editor für fortgeschrittene Web-Designer und Programmierer, der viele Programmier- und Aus­zeich­nungssprachen unterstützt, sich aber auf die Erstellung interaktiver und dynamischer Webseiten spezialisiert hat.« Nun ja.

Die geläufigsten HTML-Tags kann man per Bilderleiste oder übers Menü (als ausklappbare Liste) in das Editorfenster klicken, aber es lassen sich auch eigene Code-Schnipsel erstellen. Es gibt einen Farbwähler, Tabellen- und Listen-Assistenten und andere übliche Hilfen.

Die erstellten Dokumente lassen sich in der Zeichenkodierung UTF-8 und in ISO-8859-1 oder -15 abspeichern. Natürlich ist heutzutage nur noch UTF-8 zu empfehlen. Bluefish läuft auf den meisten (vielleicht allen?) POSIX-kompatiblen Betriebssystemen, einschließlich Linux, FreeBSD, MacOS-X, OpenBSD und Solaris, und inzwischen eben auch auf Windows.

Immer wieder passiert es, dass im Freeware-Bereich vielversprechende Software irgendwann nicht mehr weiter entwickelt und gepflegt wird. So ergeht es auch dem Weaverslave für das Windows-Betriebssystem. Ich habe ihn eine ganze Zeit lang benutzt, da seine Fähigkeiten über HTML hinaus gehen und er für die PHP-Programmierung eine Syntaxanzeige und eine Funktionsreferenz anbietet.

Außerdem gibt es auch Syntaxhervorhebungen für weitere Programmiersprachen – besonders interessant für den Webentwickler sind natürlich die im Web verbreiteten Skriptsprachen Perl, Python und JavaScript. Auch eine SQL-Hervorhebung fehlt nicht.

Als HTML-Hilfsmittel gibt es selbstverständlich eine Tag-Liste, die man selber noch erweitern kann, die Möglichkeit zur Speicherung von Snippets (Code-Schnipseln), einen umfangreichen Farbwähler (RGB, HSL, Farbkreis, Palette und hexadezimale HTML-Farbkennung) und andere gute Hilfsmittel.

Leider wird diese Sofware seit 2004 und die Website seit 2005 nicht mehr gepflegt. Ich benutze inzwischen seit Jahren den Weaverslave nicht mehr. Die heute von mir bevorzugten Editoren stelle ich demnächst vor.

Warum schreibe ich dann überhaupt noch über den Weaverslave? Nun, er ist ja schnell und schlank, für Anfänger gut zum Lernen geeignet und generell immer noch zu gebrauchen. Zumindest bis HTML 5 endgültig verabschiedet ist und man keine Lust verspürt, die ganzen neuen Tags selber einzupflegen.