Auf die Frage, wieso nun ein Printmedium für die Online-Branche des Webdesigns gewählt wurde, führt Frau Gründer auf, dass die Online Angebote viel zu schnelllebig sind, dass der Konsumenten, in unserem Fall der Webdesigner, den Überblick behält. Aufgabe des Printmagazins sei es, laut Gründer, einen Filter vorzuschalten und im Vorfeld irrelevante Dinge herauszunehmen.  Problem des Printmediums ist und bleibt die mangelnde zeitliche Flexibilität auf kürzeste Trends zu reagieren. Während Online-Angebote sehr schnell auf solche Trends reagieren können, muss das Printmedium auf den nächsten Erscheinungstermin warten. Was das bedeutet, wird im Fall des Tageszeitungsgeschäft deutlich: Noch bevor eine Nachricht in der Zeitung erscheint, kann man diese im Internet lesen. Viele Zeitungen, Fernseh- und Radiosender beziehen sich mittlerweile immer häufiger auf Meldung aus branchenbezogenen Online-Nachrichtendiensten. Da scheint der Ansatz von Weave grundlegend falsch zu sein. Es ist nur eine Frage der Zeit bis ein Artikel der Zeitschrift kurz nach Drucklegung schon wieder veraltet ist. Dann ist wohl auch Weave gezwungen, auf seiner Webseite nachzubessern.

Die Gründung eines deutschsprachigen Web-Magazins ist grundsätzlich keine schlechte Idee. Auch wenn schon lange englische Magazine auch im Printbereich das Feld abgrasen. Allerdings scheint der Zeitpunkt der Veröffentlichung stark verspätet. Gerade Webdesigner und Webentwickler werden sich hauptsächlich via Internet fort- bzw. weiterbilden und Netzwerke pflegen, und das nicht nur aus Gründen der Kosten. Als Web Designer fordere ich von einem Medium die Möglichkeit von Interaktion.

Bleibt nur zu hoffen, dass das Magazin gut startet, allen Unkenrufen meinerseits zum Trotz. Neugierig auf den Inhalt bin ich dennoch, insbesondere bei der internationalen Gemengelage der Autoren der ersten Ausgabe.

1. Benutze typografisch korrekte Anführungszeichen

Anstatt der gängigen Shift-2 Anführungszeichen sollte man die richtigen Anführungszeichen benutzen. So wird aus “Anführungszeichen” ein “Anführungszeichn”. Sieht doch schon viel besser aus. Wie bekomme ich die hin? Statt Shift+2 einfach “ und ” benutzen.

2. Benutze typografisch korrekte Apostrophen

Das selbe wie oben nur nicht doppelt. Statt des Standard Apostroph der Tastatur ist’s besser ein ’ zu benutzen.

3. Benutze den richtigen Gedankenstrich

Auch hier anstatt eines oder zwei Minuszeichen (–), sollte man das HTML-Enty – benutzen. Der Leser wird es einem danken, denn dieser Gedankenstrich unterbricht nicht den Lesefluss, wie es etwas ein doppeltes Minuszeichen tun würde.

4. Justiere Deine Überschriften

Bei großen Überschriften sollte auf alle Fälle mit Hilfe der CSS-Eigenschaften letter-spacing, word-spacing und line-height die Schrift angepasst werden. Man muss einfach mal etwas herumexperimentieren.

5. Erhöhe den Standard Zeilendurchschuss

Der reguläre Zeilendurchschuss ist etwas knapp gewählt. Für eine Schriftgröße von 12px empfehlen ich eine Zeilenhöhe von 18px.

6. Benutze das richtige Zeichen für die drei Punkte.

Anstatt drei Punkte hintereinander zu setzen, benutze lieber das HTML-Entity …. Es wirkt besser und dafür sind diese Entities schließlich da …

Fehler 1: Zuviel Werbung

Es ist schlichtweg ein Fehler, zuviel Werbung auf einer Webseite zu schalten. Viele Webmaster versuchen, über Ihre Webseite Geld zu verdienen. Das ist auch absolut legitim, Pixel-Kingdom macht das auch. Wenn dadurch allerdings der Content der Webseite untergeht ist das eher schlecht. Denn Besucher kommen auf die Webseite, um Informationen zu finden und nicht um sich Werbung anzuschauen.

Fehler 2: Zuviel Animation/Media Player

Auch wenn Animationen schön sein können (die Betonung liegt auf “können”), sollten diese enorm sparsam eingesetzt werden. Nicht nur, dass sie die Seite unruhig wirken lassen, sie stören zudem den Besucher bei der Erfassung der Inhalte. Wer kennt nicht diese nervenden, rotierenden @-Zeichen in 3d Look? Ausserdem sollte der Einsatz von Media-Player absolut knapp gehalten werden. Wir sprechen hier von einem Maximum von 1 Player pro Seite. Auch sollte es nur ein Format geben und nicht zig verschiedene.

Fehler 3: Flash-Intros

Webdesign-Experten sprechen sich deutlich gegen den Einsatz eines Flash-Intros auf Webseiten aus. Während viele Menschen verstehen, wieso Flash-Intros eine schlechte Idee sind, ergehen sich Designer häufig in ellenlangen Intros, die dem Besucher zuerst den Zugang zu Informationen versperren. Flash Intros ohne “Skip Intro” Button sind sowieso eine Tod-Sünde, denn man zwingt den Besucher bei jedem Besucher der Seite das Intro komplett durchzusehen. Was bei den vielleicht ersten drei Besuchen noch ein tolles Erlebnis ist, wird danach sehr lästig und vergrault mit 100%tiger Wahrscheinlichkeit den Besucher nach dem 4ten Mal. Wieso der meistgeklickte Button im Internet die Beschriftung “Skip Intro” trägt, wundert dann niemanden mehr.

Fehler 4: Unstrukturiertes Layout

Wir reden hier von einem Layout, dass vielleicht den ästhetischen Ansprüchen des Webmasters entspricht, aber mit Sicherheit nur ihm den schnellen Zugriff zu Informationen gewährt. Wenn eine Webseite nur mit Hilfe von Erfahrung zu bedienen ist, werden Besucher sehr schnell das Weite suchen. Zum Beispiel sollte der Besucher nicht mit einer Icon-Navigation überfordern, mit denen er nichts anfangen kann. Wer raten muss, bleibt nicht lange. Designer müssen sich immer vor Augen führen, dass sie eine Webseite für den Benutzer erstellen, und nicht für den Besitzer.

Fehler 5: Links zu anderen Webseiten

Alle Links, die von der eigenen Webseite wegführen, sollten auch als solche gekennzeichnet sein. Zum Beispiel durch eine andere Farbe oder Schrift-Auszeichnung. Ausserdem empfiehlt es sich, solche Links immer in einem neuen Fenster zu öffnen, damit der Besucher die eigene Seite nicht ganz verlässt. Ausserdem sollten Links nicht versteckt sein, sondern gut sichtbar im Text auffallen. Zu empfehlen ist, Links unterstrichen zu lassen, denn dies ist nun mal ein Standard bei Links, und Standards sind unsere Freunde.

Fehler 6: Unklare E-Mail Links

Links, die das E-Mail Programm öffnen, sollten auch als solche gekennzeichnet sein. Entweder durch ein anderes Layout oder durch eine erklärende Bezeichnung. Dadurch kann der Besucher selbst entscheiden, ob sich sein E-Mail Programm öffnet (was im schlimmsten Fall den Computer verlangsamt, wenn er das Mail-Programm erst starten muss) oder nicht.

Fehler 7: Links, die nicht funktionieren

Links, die nicht funktionieren oder deren Ziel nicht mehr existiert sind eine wahre Pest. Es gibt viele kostenlose Link-Checker im Internet, mit deren Hilfe man seine Webseite nach sogenannten “Broken Links” checken kann. Zu empfehlen ist der w3c Linkchecker. Sollte es nicht möglich sein, solche “Broken Links” zu entfernen, dann sollte der Einsatz eigener 404-Seiten in Erwägung gezogen werden.

Fehler 8: Seltsame Schriftarten

Mal ganz davon abgesehen, dass es momentan nur eine Hand voll websicherer Schriftarten gibt und die Anwendung von Javascripts zur Anzeige nicht sicherer Schriftarten immer noch etwas tricky ist… benutzt die websicherern Schriftarten Times New Roman, Georgia, Arial, Tahoma, Verdana, Trebuchet MS, etc… Und um Himmels und Suchmaschinen Willen, stellt Text auf Webseiten als Text und nicht als Bild dar!

Fehler 9: Schlechte Lesbarkeit

Eine Zeit lang waren kleiner Fließtext auf Webseiten der letzte Schrei. Auch wenn dem Besucher der Webseite die Augen schmerzten beim Lesen der Texte, gerade Designer stellten Fließtexte auf Ihrer Webseite in Schriftgröße 10px dar, am Besten noch mit miserablen Kontrast. Da konnte man sich schon fragen, ob diese Designer während der Typografie-Stunden geschlafen haben.

Fehler 10: Erwartungen werden nicht erfüllt

Besucher kommen meist mit bestimmten Grund-Erwartungen auf eine Webseite. Wenn diese nicht erfüllt werden, kann das schnell dazu führen, dass der Besucher die Seite schneller verlässt, als er sie aufgerufen hat. Standards sind unsere Freunde und sollten eingehalten werden. Auch wenn sich Standards von Zeit zu Zeit ändern. Das heisst nun nicht, dass Standards sklavisch eingehalten werden müssen. Aber man sollte in gewissen Grenzen bleiben.

Ich hatte vor kurzem das Problem mit WordPress, dass ich ausschließlich für eine Kategorie die Archivdarstellung wollte. Ich habe es mit mehreren SQL-Befehlen versucht, die aber ellenlang wurden und damit schwer zu warten waren. Auch in Foren konnte mir keiner helfen, genauso dünn sah es in der Plugin-Ecke aus.

Auf meiner Suche nach einer Lösung dafür, stiess ich auf einen sehr nützlichen Hackvon WordPress. Ich bin mir nicht sicher, seid wann es diesen Hack gibt, aber er funktioniert in 2.7 auf alle Fälle: Mit wenig Aufwand kann WordPress angewiesen werden, für jede Kategorie ein eigenes Layout zu benutzen. Wichtig ist nur, dass man sich die Kategorie ID merkt. Werden wir etwas konkreter: Nehmen wir an, wir benötigen für unsere Kategorie “Webdesign” ein eigenes Layout. Wir erstellen das Layout so, als würden wir irgendein neues Seiten-Template erstellen. Die Kategorie Webdesign hat die ID 4, also nennen wir das Template “category-4.php”. Wir legen es im Stammverzeichnis unseres Templates ab. Wann immer man nun auf die Kategorie Webdesign zugreift, benutzt WordPress die Darstellung unserer Seite category-4.php.

Dennoch verhindert die fehlende Unterstützung des Internet Explorers 6 den weitgehenden Einsatz von PNG-Grafiken. Solange der Internet Explorer 6 noch eine gewisse Verbreitung besitzt, wird sich daran auch nichts ändern.

Es kursieren viele Methoden, dem Internet Explorer 6 die Transparenz von PNGs beizubringen. Mein persönlicher Favorit ist die Methode mit dem Einsatz des “iepngfix.htc”. Diese Funktion basiert auf Javascript und wird entweder in das Hauptverzeichnis oder, falls vorhanden weil übersichtlicher, im Javascript-Ordner der Webseite abgelegt. Mittels einer CSS-Definition kann man nun PNG’s als Hintergrund eines DIV-Containers oder als “normales” Bild überall auf der Webseite einbinden.

Okay, fangen wir an. Wir haben die Webseite hochgeladen und sie ist im Browser ohne Probleme aufrufbar. Wir haben die Webseite auch schon direkt bei allen Suchmaschinen angemeldet, auch wenn nur Google wirklich wichtig ist. Damit Google die eigene Seite in den Suchergebnissen anzeigen kann, muss der Googlebot vorbei geschaut haben und die Webseite in den Google Index aufgenommen haben. Da sich aber sehr viele neue Webseiten bei Google anmelden, kann es einige Zeit dauern, bis die Webseite in den Index kommt, also indexiert wird.

Während man früher gerne mit Hilfe von Ping-Diensten (z.B. Pingomatic) die Indexierung einer Webseite enorm beschleunigen konnte, geht das heute leider nicht mehr so einfach. Aber obwohl Google nach dem Leitspruch “Do no Evil” agiert, kann man sich Google’ s Geldgier zu Nutzen machen.

Als Erstes benötigt man einen Google-Adsense Account. Google Adsense zaubert diese kleinen, mehr oder weniger schnuckeligen Werbeblöcke auf die Webseite. Keine Angst, diese Dinger braucht man nicht ewig. Nun erstellt man Werbung für seine zu indexierende Seite, fügt den Code in sein HTML ein und lädt die Sache hoch.

Rufe im Browser deine Seite auf. Dort sind jetzt die Werbblöcke von Google zu sehen. Am Anfang sind diese immer gleich. Das bedeutet, dass Google noch keine “echte” Werbung bereitstellt. Jetzt klicke 50mal hintereinander auf den “Refresh”-Button. Spätestens nach dem 50ten Klick verändert sich die Anzeige der Werbung und echte Werbung erscheint. Was ist geschehen?

Google hat ein vitales Interesse daran, über seine Werbung Geld zu machen. Das kann Google aber nicht, wenn die Seite auf der die Werbung zu sehen ist, nicht gefunden wird. Deshalb zählt Google die Anzahl der Seitenzugriffe auf die Seite (noch scheint es egal zu sein, wer die Seite wie aufruft). Haben die Seitenzahl einen gewissen Wert überschritten, schaltet Google die richtige Werbung frei und schickt den Googlebot hinterher, damit die Webseite in den Index kommt und gefunden werden kann. Und genau das ist es, was wir haben wollen. So schlagen wir Google mit dessen eigener Gier nach Geld ein Schnäppchen. Übrigens habe ich diese Methode bei pixel-kingdom.com angewendet und war binnen 48 Stunden mit allen Seiten im Google Index.

Nochmals kurze Anleitung:

1. Google Adsense Konto eröffnen (falls noch nicht geschehen)
2. Adsense generieren und auf Seite einfügen
3. Mindestens 50mal die Seite laden, bis sich die richtige Werbung freischaltet
4. Nach 48 Stunden ist die Seite im Google Index

Was heißt im Bereich Webdesign “schlecht” überhaupt? Oder besser gefragt: Was heißt “schlechtes Design”? In Gesprächen hört man häufig folgendes Argument: “Wenn mir die Webseite gefällt, ist dass doch völlig okay!”. Nein, setzen, 6! Leider daneben, denn eine Webseite dient nicht dem eigenen Vergnügen, sondern soll den Kunden ansprechen.

1. Wenn mit einer Webseite Geld verdient werden soll, spielt es keine Rolle, ob die Webseite dem Betreiber persönlich gefällt oder nicht. Das hört sich vielleicht seltsam an, aber wenn die Webseite einer Gruppe gefallen soll, dann ist es die Gruppe von Menschen, die später Geld auf der Webseite lässt. Und das sind immer die Kunden, nicht der Besitzer. Ergo: Die Webseite sollte in erster Linie dem potentiellen Kunden gefallen, nicht dem Betreiber. Wenn die Webseite dem Betreiber ebenfalls gefällt: gut so.
2. Sicherlich gefällt dem “normalen” Menschen seine selbstgestaltete Werbung oder Webseite. Das Internet ist voll mit tollen Schriftarten, kleinen Cliparts, blinkenden Gifs und Flash-Animationen… Damit wird alles vollgepackt und deshalb sieht es toll aus. Nein, tuts nicht, definitiv nicht. Ein ehrlicher Vergleich zwischen der eigenen Webseite mit all diesen tollen Sachen und einer proffessionell erstellten Webseite wirds zeigen: Es kommt nicht nur auf das “wie” sondern auch auf das “wieviel” an. Wie bei Bademoden: Weniger ist mehr .
3. Das Internet und gängige Fachzeitschriften sind voll mit Angeboten, mit deren Hilfe man innerhalb von 2 Minuten und ohne jegliche Programmiertechnik eine tolle Webseite mit allen erdenklichen Funktionen erstellen kann. Oh Gott, man stelle sich so etwas im Bereich von Autos vor: Bau dir innerhalb von einem Tag ein Auto ohne Vorkenntnisse zusammen… Spass beiseite. Wohin so etwas führt, durfte ich während meiner Zeit bei einer Suchmaschinenoptimierungsfirma sehen. Webseiten, die nicht nur optisch eine Katastrophe waren sondern auch programmiertechnisch. Da wurde alles wild zusammengeklatsch, teilweise war das HTML-Markup so zerschossen das der W3C Validator die Flügel von sich streckte… Summa Summarum: Nicht nur die Gestaltung, sondern auch die Programmierung ist wichtig.

Wieso das Ganze? Punkt 1 und 2 meiner Aufzählung dreht sich um die visuelle Gestaltung einer Webseite. Wieso ist die wichtig? Eine gut gestaltete Webseite vermittelt dem Besucher das Gefühl von Seriosität, Sicherheit und Proffessionalität. Alles drei wichtige Gefühle bei einer Kaufentscheidung. Wer kauft nicht lieber in einem seriösen Geschäft ein, als in einer Ramschbude?

Punkt 3 meiner Aufzählung dreht sich um die Programmierung einer Webseite. Es langt nicht nur, eine hübsche Webseite sein Eigen zu nennen, diese Webseite muss auch gefunden werden. Dazu muss sie für Suchmaschinen optimiert werden. Sowohl der Code, als auch die Geschwindigkeit einer Webseite ist dafür ausschlaggebend. Wieso? Auf die Frage hin, welches die Limits für Google seien, antwortete ein Mitarbeiter der bekanntesten Suchmaschine: “Strom und Bandbreite”. Das wiederum bedeutet, dass Google (und nicht nur Google) Webseiten mit kurzen Ladezeiten eindeutig bevorzugt, was wiederum bedeutet, dass solche Webseiten eine höhere Chance auf ein gutes Ranking haben.

Was aber hat das nun alles mit dem Titel des Posts zu tun? Eigentlich ist alles, was ich hier beschrieben und erklärt habe leicht zu verstehen und einleuchtend, dennoch halten sich viele Webseiten entweder aus Unwissenheit oder aus irgendeinem anderen Grund nicht an diese simplen Regeln.

Hauptgrund hierfür ist meiner Meinung nach, dass viele Webseiten immer noch vom “Sohn des Chefs der Personalabteilung” zuhause gebastelt werden, weil es auf den ersten Blick billiger ist, als einen Profi damit zu beauftragen. Denn “Webdesigner” kann sich jeder schimpfen. Die Berufsbezeichnung des Webdesigners ist nicht geschützt, was wiederum bedeutet, dass sich auch der 14 jährige Sohn des Chefs der Personalabteilung so nennen darf. Und was bedeutet das wiederum? Das die Berufsbezeichnung “Webdesigner” kein Qualitätsmerkmal ist. Obwohl ich als Webdesigner arbeite und auch eine Ausbildung zum Mediengestalter Fachrichtung Design Nonprint hinter mir habe, werde ich einen Teufel tun und mich Webdesigner nennen.

Was bleibt also für die Zukunft? Ein Meilenstein für die Entwicklung des Berufes “Webdesigner” wäre eine verbindliche Ausbildung, nicht so etwas, wie es heutzutage als Nebenprodukt der Mediengestalter Print angeboten wird. Besonders im Raum Trier noch eine Katastrophe. Denn nicht nur das Gestalten gehört zum täglichen Brot des Webdesigners, sondern auch das semantisch korrekte Schreiben von HTML/CSS Code, Webprogrammierung und Suchmaschinenoptimierung. Das sind drei riesige Schlachtfelder, die man mit zwei Stunden “Multimedia” auf der Berufsschule nicht abarbeiten kann. Notwendig wäre also ein eigener Unterricht.

In der Zwischenzeit werde ich mich weiter anders nennen und warten, bis die Berufsbezeichnung des Webdesigners geschützt wird.

Die kosten- und serifenlosen Schriften für einen Webdesigner

1. Geo Sans Light

Die Geo Sans Light besitzt zwei Schriftschnitte: Regular und Kursiv.

2. Cicle

Die Cicle kommt mit stattlichen 7(!) Schriftschnitten daher: Regular, Kursiv, Fett, Fett Kursiv, Semi, Semi-Kursiv und “Shadow”. Eine wirklich schöne, klare Schrift.

3. Alte Haas Grotesk

Ups, sieht die nicht der Helvetica, bzw. Helvetica Inserat sehr ähnlich? Nur etwas mitgenommen? Ja, vielleicht, vielleicht ist das auch der Grund, weshalb sie in meiner Liste auftaucht.

4. Blue Highway

Da ist sie wieder, mein Favorit! Wunderschöne Schrift in Anlehung an die Interstate, die amerikanische Version der DIN-Schrift.

5. Florencesans

Diese wunderschöne serifenlose Schrift kommt mit stattlichen 24(!) Schriftschnitten daher und ist ein absolutes Muss für jeden Webdesigner.

6.Enigmatic

Diese Schriftart ähnelt stark der Eurostyle, einer sehr beliebten Serifenlosen Schrift.

7.Share

Wunderschöne Schrift, leider existiert nur ein Schriftschnitt.

8.Vera Humana 95

Wunderschöne Schriftmit vier Schriftschnitten. Erinnert ein wenig an die Optima.

9.Lacuna

Kommt mit zwei Schriftschnitten.

10.Wendelin

Kommt mit acht Schriftschnitten.

Die kostenlosen, serifenbetonten Schriftarten für Webdesigner

11.Liberation Serif

Elegante, schöne Serifenschrift. Kommt mit vier Schriftschnitten.

12. Sanford

Leider nur ein Schriftschnitt…

13. Bodoni XT

Ein Bodoni-Clon, was soll man mehr dazu sagen, als: “Jetzt unbedingt herunterladen!”.

14. Gentium

Ich mag einfach diese klassischen Serifen, kommt mit vier Schriftschnitten daher.

15. Charpentier Renaissance Pro

Habe ich eben gesagt, ich mag klassische Serifenschriften? Tja, wenn man ein klassisches Buch digital kopieren möchte, ist diese Schriftart genau richtig.

16. Bullpen

Auch wenn sie hier jetzt nicht wirklich gut reinpasst, ist sie dennoch eine schöne Serifenschrift.

Die kostenlosen Handschriften für einen Webdesigner

17. Scriptina

Meiner Meinung nach die schönste, kostenlose Handschrift.

18. Jane Austin

Die Schrift der gleichnamigen Autorin von Stolz und Vorurteile, sehr schöne Handschrift.

19. Windsong

Schöne Handschrift, wie häufig besitzt sie nur einen Schriftschnitt. Aber wer brauch schon eine kursive Version einer Handschrift?

20. Freebooter Script

21. Estrya’s Handwriting

22. Honey Script

Kostenlose Grunge/Trash Schriften für Webdesigner

23. Hawaii Killer

Leider besitzt diese Schriftart keine Umlaute, da muss man dann selber ran…

24. WC Roughtrad

Hübsche Sketchbook Schrift, einmal als Regular und einmal in Bold.

25. Sketch Rockwell