Archiv der 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

Natürlich beobachtet man als selbständiger Webdesigner die Konkurrenz. Es gibt viele richtig gute Mitbewerber, deren Websites ich mir gerne anschaue und deren Texte mich begeistern können. Manchmal stößt man aber auch auf befremdende Aussagen, wie etwa,

in der Regel werde nicht mit standardisierten Content-Management-Systemen (CMS) gearbeitet, sondern die Website des Kunden von Hand erstellt, um die Einzigartikeit der Internetpräsenz zu gewährleisten. Der Kreativität seien so keine Grenzen gesetzt.

Moment, Moment!
a)
Wieso sind Standards schlecht? Webstandards gewährleisten doch eine möglichst einheitliche Darstellung in allen Browsern und unter allen Betriebssystemen.
b)
Auch beim Einsatz eines CMS (= Inhaltsverwaltungssystem) erstellt der Webdesigner die Internetpräsenz doch von Hand. Denn es muss ein Design erstellt werden, das zur Corporate Identity passt, Layout und Typografie müssen harmonisch sein, es muss ein Theme/Template für das entsprechende CM-System gebaut werden, es müssen Texte und Bilder eingepflegt werden und es muss nicht zuletzt eine übersichtliche Struktur geschaffen werden.
c)
Moderne Inhaltsverwaltungssysteme sind so flexibel, dass eine absolut einzigartige und dazu noch leistungsfähige, moderne Internetpräsenz geschaffen werden kann.
d)
Der Kreativität sind auch und gerade bei Einsatz eines CMS keine Grenzen gesetzt, weil der Webdesigner in der Gestaltung frei ist und sich Erweiterungen installieren lassen, die verschiedene vom Kunden gewünschte Funktionalitäten möglich machen.

Und was sicherlich für den Kunden am meisten von Bedeutung ist: Er/sie kann im Regelfall spätere Änderungen der Inhalte selbst durchführen. Zum Ändern der Texte steht ein grafischer Texteditor zur Verfügung, Bilder können leicht selbst ausgewechselt werden und manchmal können sogar Inhaltsblöcke verschoben/ausgetauscht werden. Kenntnisse in HTML sind hierfür nicht erforderlich. Der Webdesigner muss somit nicht für jede kleine Textänderung neu beauftragt werden.

Wenn dann noch ein lizenzkostenfreies Open-Source-CMS eingesetzt wird, fallen eben nur Kosten für die Dienstleistungen des Webdesigners an, nämlich fürs Design und die Einrichtung des Systems. Viele Zusatzmodule zum Erweitern der Funktionalität sind gänzlich kostenlos oder aber sehr preisgünstig. Und weitere Folgekosten entstehen nur dann, wenn das Design einmal geändert und den aktuellen Trends angepasst werden soll, was aber im Standardfall erst nach vielleicht drei bis fünf Jahren ansteht.

Und genau aus diesen Gründen biete ich meinen Kunden Webdesign eben gerade unter Benutzung eines CMS an – bevorzugt Concrete5 oder Drupal. Und das auch noch preisgünstig, wartungsfreundlich und auf Ihr individuelles Unternehmensdesign abgestimmt.

Den Seitenaufbau von Webseiten zu beschleunigen, ist immer eine gute Idee. Was den Aufbau unter anderem verlangsamt, sind zu viele Hintergrundbilder. Ich hatte ja bisher für den Schatteneffekt rund um den Haupt-Container Bilder eingesetzt: eins für den linken und rechten Rand, eins für den Schatten über dem Kopfbereich und eins für den Schatten unter dem Fußbereich.

Es sind alles nur winzige Dateien gewesen, denn ich komprimiere Bildmaterial immer so gut wie nur möglich. Aber trotzdem beanstandete die Ge­schwin­dig­keits­test-Erweiterung (für Firefox und Opera) YSlow das zu viele Hintergrundbild-Material. Gut, dass die meisten aktuellen Webbrower die CSS3-Eigenschaft box-shadow inzwischen beherrschen. Internet Explorer 8 und älter natürlich nicht – ist klar.

Für diese Krankheit, die sich Webbrowser schimpft, benutze ich also nach wie vor ein Bild als Schatteneffekt. Ich habe es immerhin geschafft, nur noch ein einziges Bild zu verwenden statt wie bisher drei verschiedene. Das verkürzt auch schon mal ein bisschen die Ladezeit. Alle anderen aktuellen Browser (ja, und erstaunlicher Weise wohl auch Internet Explorer 9) kommen mit box-shadow klar. Für ältere Gecko- und Webkit-Browser kann man die Präfixe -moz und -webkit verwenden.

Nähere Informationen: CSS3.info

Es ist grauenhaft, dass es den Internet Explorer gibt – einen Webbrowser, der sich wenig an die Standards hält. Zumindest bis Version 8 werden nur sehr wenige CSS3-Eigenschaften unterstützt und neue HTML5-Tags auch nicht. Firefox, Chrome, Safari und Opera sind da wesentlich besser auf dem aktuellen Stand der Dinge.

Also muss man als Webdesigner immer noch für den IE Extrawürste braten. Was kann er nicht? Nun, zum Beispiel – um nur die für mich wichtigsten zu nennen: abgerundete Ecken, Text-Schatten, Box-Schatten; Video und Audio nativ abspielen. Da muss man also nach wie vor irgendwie mit Bildern bzw. mit Flash rumwursteln oder gar umständliche Hacks anwenden.

Schlimmer aber sind Sicherheitslücken im uralten Internet Explorer 6. Microsoft selbst rät von der Verwendung dieses Uralt-Browsers ab und bietet ja auch keine Updates mehr dafür an. Leider gibt es hier und da noch Benutzer, die diese Gurke aus dem Jahr 2001 benutzen. Unter Windows 2000 zum Beispiel lässt sich gar kein IE 7 oder neuer installieren. Doch solche Benutzer könnten dann wenigstens auf einen anderen Browser umsteigen.

Langer Rede kurzer Sinn: Als eine sinnvolle Sache erachte ich es, wenn solche Benutzer gebeten werden, eine modernere Software zu verwenden. Zu diesem Zweck kann man als Webdesigner ein kleines Skript in den Fuß der Webseiten einbinden, welches von Browser-Update.org zur Verfügung gestellt wird.

Wenn der Besucher auf den Link im Hinweisfenster klickt, gelangt er zur Website von Browser-Update.org und bekommt Vorschläge, welche Browser er installieren kann. Es werden nur diejenigen angeboten, die auch fürs jeweilige Betriebssystem erhältlich sind. Da zum Beispiel Internet Explorer 9 für Windows XP nicht erhältlich ist, liest man: »Internet Explorer 9. Nicht für Ihr Betriebssystem verfügbar. Nur für Windows Vista und 7. Bitte wählen Sie einen anderen Browser aus«. Vielleicht kauft sich der überzeugte Internet-Explorer-Anhänger statt dessen aber auch ein neues Windows-Betriebssystem, womit auch dem armen Microsoft ein Gefallen getan wäre 😉

Jedenfalls wollen wir die Seitenbesucher keinesfalls nerven oder verärgern, und deshalb lässt sich ein vereinfachtes Skript (ohne genaue Einstellungen, bei welchen Browsern und Browser-Versionen ein Hinweis erscheinen soll) herunterladen. Dieses informiert nur diejenigen Benutzer, die Steinzeit-Browser benutzen, welche »vom Hersteller nicht mehr unterstützt werden, Sicherheitslücken aufweisen oder sehr lange veraltet sind«. Das ist zum Beispiel beim Internet Explorer 6 der Fall, aber nicht bei Version 7 oder 8.

Und der Besucher muss der Empfehlung natürlich auch nicht folgen und bleibt für die nächste Zeit von einer erneuten Benachrichtigung verschont – sonst würde er die entsprechende Website wohl einfach verlassen und nie mehr aufrufen. Das wäre schließlich für den Website-Betreiber äußerst kontraproduktiv.

HTML5 hat so einige neue Tags eingeführt, andere sind dafür raus geflogen. Manchmal bin ich mir unsicher, ob bestimmte Tags noch gültig sind. Mit strong ging es mir heute so.

Nun, auch als Webdesigner muss man nicht alles wissen, aber man sollte wissen, wo es steht. Und sich das dann am besten auch notieren. Gut also, dass Webbrowser Lesezeichen/Bookmarks/Favoriten haben. Und dort habe ich folgende Webseite abgespeichert:
quackit.com – HTML 5 Tags.

Fürs Web soll man bekanntermaßen das Bildmaterial so klein wie möglich halten, damit die Datenübertragungsmenge gering und somit der Seitenaufbau schnell ist.

Fotos müssen also komprimiert werden. Im Regelfall eignet sich das Dateiformat JPG für Web-Fotos, weil es auch bei Bildern mit vielen feinen Farbabstufungen ohne zu stark sichtbaren Qualitätsverlust ganz gut in der Dateigröße reduziert werden kann. Eine gute Qualität auch bei sehr starker Kompression verspricht Caesium. Selbst bei 90-prozentiger Kompression soll es kaum Verluste erzeugen.

Nun, das kann ich nicht bestätigen. Ich habe drei eigene Fotos in der Auflösung 3072 x 2304 mit Caesium komprimiert, zunächst mit 90-prozentiger Qualität. Die Dateigröße schrumpfte dabei in zwei Fällen um etwa die Hälfte, in einem Fall um etwa zwanzig Prozent. Das hört sich viel an, ist aber eigentlich nichts Besonderes. Als ich dieselben Bilder mit IrfanView auf eine Qualität von 90 Prozent brachte (ohne weitere Kompressionsmaßnahmen), kam ich auf ungefähr dieselben Dateigrößen, sogar etwas kleiner. Ein Unterschied zu den Ergebnissen von Caesium war mit dem Auge nicht erkennbar.

Und als ich in IrfanView noch das RIOT-Plugin mit seinem Chroma Subsampling anwendete, wurden die Dateien noch ein bisschen kleiner.

Doch Caesium verspricht ja, dass man seine Bilder bis zu 90 Prozent ohne Qualitätsverlust komprimieren kann – anders gesagt, die JPG-Qualitätseinstellung von 10 Prozent soll nicht erkennbar sein. Ich habe es ausprobiert. Und natürlich bilden sich hier Artefakte: feine Farbabstufungen werden zu hässlichen großen Flächen mit nur wenigen Abstufungen. Man nennt das auch Klötzchenbildung.

Dazu kommt, dass Caesium meinen Rechner (zugegeben: alter Pentium-IV mit nur einem Prozessorkern) ziemlich belastet hat. Natürlich verkleinert man Fotos im Normalfall erst einmal, bevor man sie fürs Web weiter verarbeitet. Aber ich wollte ja testen.

Fazit: Mit IrfanView und RIOT-Plugin erzielte ich qualitativ gleiche und dabei noch kleinere Bilder als mit Caesium.

Caesium ist kostenlos, aber es wird um eine Spende gebeten. IrfanView ist nur für private Nutzung kostenlos. Auch hier wird um eine Spende gebeten. Die kommerzielle Lizenz mit lebenslangen Updates kostet lediglich 10,– Euro.

In einem Online-Artikel in Internet World Business vom 20.07.2011 werden sieben Dinge aufgezählt, die man beim Webdesign unbedingt vermeiden sollte.

Nun gut, es sind sieben alte Hüte. Dennoch finde ich den Artikel sinnvoll, denn solche Webdesign-Sünden haben sich wohl auch in 2011 noch nicht herumgesprochen. Natürlich kann man einen Mangel an Wissen in diesem Bereich keinem privaten Homepage-Bastler vorwerfen. Doch ich bin vor ein paar Monaten auf einige im Jahr 2011 erstellte Websites eines Mitbewerbers gestoßen, die – kein Scherz! – noch mit Frames gefrickelt worden sind.

Und sicherlich stößt man gelegentlich noch auf andere als die im Artikel genannten Webdesign-Fehltritte. Aber genug davon. Konzentrieren wir uns lieber wieder aufs Gute, Wahre und Schöne!

CSS Lint ist ein kostenloser Online-Dienst, mit dem man seinen CSS-Quellcode prüfen lassen kann. Man kopiert einfach den Text seiner CSS-Datei in das Eingabefeld hinein, lässt das Programm ein kurzes Weilchen arbeiten und schon erhält man eine Auflistung der eventuellen Fehler und Warnungen.

Verbesserungsvorschläge werden gleich mitgeliefert, sodass man seine CSS-Angaben korrigieren kann. Bei meinen Tests ließ sich der Code etwas entschlacken, außerdem wurde ein doppeltes Semikolon bemängelt, das ich übersehen hatte (obwohl mein Editor Webocton Scriptly solche Fehler rot markiert). Zu viele solcher Hinweise sind natürlich für den Webdesigner nicht sehr schmeichelhaft, und deshalb schmückt sich CSS Lint auch mit dem Slogan »Will hurt your feelings«.

Allerdings muss ich sagen, dass ich nicht mit allen Ver­besserungs­vor­schlä­gen ganz einverstanden bin. Wenn ich zum Beispiel eine Angabe mache wie hr.abstand, dann will ich eben einen bestimmten Abstand speziell für horizontale Trennlinien angeben und beim späteren Durchsehen meines Codes wissen, dass der Abstand nur für horizontal rules gelten soll.

Es stimmt: ich könnte statt dessen einen Kommentar einfügen. Der würde dann auch nicht beanstandet werden. W3C-konform ist meine Art der Auszeichnung aber trotzdem. Denn so lässt sich ja dieselbe Bezeichnung verschiedenen HTML-Tags zuordnen – schließlich will man manchmal (um bei diesem Beispiel zu bleiben) verschiedenen HTML-Tags verschiedene Abstände geben. Unterschiedliche Bezeichnungen würden hier nur verwirren, und Konstrukte wie .abstand-hr und .abstand-p finde ich schwachsinnig.

Trotzdem: ich denke noch mal drüber nach.

http://csslint.net/
http://scriptly.webocton.de/

Es gibt Menschen, zum Beispiel Designer aus dem Printbereich, die glauben, eine Website könne und müsse überall und unter allen Umständen gleich aussehen. Also, egal unter welchem Betriebssystem und egal in welchem Webbrowser. Dabei sieht noch nicht einmal ein Druckerzeugnis immer gleich aus. Wenn in der nächsten Auflage ein anderes Papier verwendet wird oder leicht abweichende Druckfarben, kann die Wirkung schon völlig anders sein.

Aber Webseiten sollen im Internet Explorer 6 unter Windows® genauso aussehen wie im Safari unter Mac® oder im Firefox unter Linux? Und welche Bildschirmauflösung soll man zu Grunde legen? Und was ist mit Mobilgeräten? Und wie soll man verhindern, dass jeder Benutzer seinen Monitor anders einstellt: rötlicher/bläulicher, heller/nicht so hell, stark kontrastiert/kontrastarm?

Ja, ich gebe zu, man KANN es mit viel Gefummel so hinbekommen, dass Webseiten auf den gleichen Bildschirmen, aber unter verschiedenen Betriebssystemen und Browsern gleich aussehen. Ein Paradebeispiel wären abgerundete Ecken, aber ich will nicht ins Detail gehen. Ich möchte nur dazu auffordern, dass sich sowohl Webdesigner als auch Seitenbesucher mehr auf die Inhalte konzentrieren als auf die Gestaltung. Natürlich sage ich nicht, dass man sich als Webdesigner bei der Gestaltung keine Mühe geben soll.

Abgerundete Ecken zum Beispiel sehen schön aus, aber wenn sie im Internet Explorer (und nur dort) nicht angezeigt werden können, warum soll ich da mit Grafiken oder aufwändigen JavaScript-Lösungen arbeiten? Und das ist ja nicht das einzige Problem. Kurzum: wann soll ich denn fertig werden mit der Webseitengestaltung, wenn der Kunde doch wartet und drängelt? Und auch nur einen bestimmten Betrag zu zahlen bereit ist?

Ich denke, wirklich wichtig ist, dass der Besucher sich gut zurechtfindet, dass die Farbgebung auch Menschen mit einer Sehschwäche alles gut erkennen lässt und dass die Informationen in einer klaren Sprache kommuniziert werden.

Jens Grochtdreis, Gründer der »Webkrauts«, drückt es keck so aus: »Webseiten sind keine Gemälde!«. Recht hat er.

SeaMonkey ist ja die Mozilla-Komplett-Suite, bestehend aus Webbrowser, E-Mail-Client, HTML-Editor, Adressbuch und Chat. Ich selbst bin kein großer Fan von SeaMonkey; ich finde die Zusammenstellung von Firefox als Browser und Thunderbird als E-Mail-Programm (mit Kontaktverwaltung und Kalender) wesentlich besser. Und der HTML-Editor in SeaMonkey ist eh Schrott und für meine seltenen Chats benutze ich Pidgin, den Multi-Messenger.

Ich nehme aber die Browser-Komponente von SeaMonkey neben einer ganzen Reihe weiterer Browser ganz gern zum Testen, denn die Webseiten, die man erstellt, sollen ja möglichst in allen Browsern gleich aussehen.

Und dabei habe ich jetzt eine Eigentümlichkeit von SeaMonkey entdeckt: Er weigert sich, die HTML-Tags code und pre mit den Angaben zu formatieren, die ich in der CSS-Datei angegeben habe – oder überhaupt den in diese Tags eingeschlossenen Text anders zu formatieren als den »normalen« Text – üblich ist ja eine nichtproportionale Schrift (monospace).

Wenn man aber folgendermaßen verschachtelt, dann geht es:

<pre><code>
   …
</code></pre>

Seltsam, aber nicht schlecht, denn diese Verschachtelung hat in allen Browsern den Vorteil, dass Einrückungen des originalen Textes erhalten bleiben, wie man oben sehen kann. Pre oder code allein stellen die Einrückungen oft falsch dar.