Ignoranter Webdesigner

In den vergangenen Tagen hat ein ehemalige Kollege von mir, der mittlerweile als Einzelkämpfer-Designer unterwegs ist, auf den Launch eines neuen von ihm designten Projekts hingewiesen. Beim Ansehen der Site bzw. des zugrundeliegenden HTML klappten sich mir mal wieder die Fußnägel hoch. Eine Schande, was auch 2010 noch auf neu entstehenden Sites veröffentlicht wird.

Ich habe den Designer daraufhin angeschrieben und wortreich auf seine Fehler hingewiesen. Ein kurzer E-Mail-Dialog entwickelte sich und die von meiner Seite aus letzte Mail daraus möchte ich hier anonymisiert veröffentlichen. Ich nenne dabei weder die angesprochene Site noch den Designer, weil ich hier kein öffentliches Bashing betreiben sondern nur mal wieder auf ein falsches oder zu kurz gegriffenes Selbstverständnis von Webdesignern hinweisen möchte, das leider noch weit verbreitet ist. Trotz der im Text enthaltenen Hinweise wird sich die angesprochene Site trotz Keyworddomain auch kaum bei Google finden lassen. Warum das so ist, zeigt sich im Text, ist aber auch unschwer zu erraten.

Die E-Mail

Ich finde es erschreckend, dass du offensichtlich tatsächlich so ahnungslos bist. HTML hat nichts mit Programmierung zu tun sondern ist eine Auszeichnungssprache für Inhalte. Du zeichnest jedoch keine Inhalte aus sondern lieferst Daten, die keinerlei tabellarische Struktur haben, in einer Tabelle aus. Das ist, als würdest du private Briefe mit Excel schreiben.

Weil HTML eine Auszeichnungssprache ist, haben rein visuelle Angaben darin nichts zu suchen. Das steuert man ausschließlich über CSS. Anreichern kann man dann die Nutzererfahrung noch durch den sinnvollen Einsatz von JavaScript (womit wir dann doch bei der Programmierung wären). JavaScript findet aber nur so Verwendung, dass alle Inhalte auch ohne aktiviertes JavaScript erreichbar sind. Das muss dann nicht identisch aussehen und auch nicht genauso geschmeidig funktionieren, die grundsätzliche Funktion muss aber gegeben sein. Moderne Websites gewährleisten das problemlos.

Unter Camper-Preisvergleich findest du z. B. ein von mir gebautes Formular. Mit aktiviertem JavaScript lassen sich An- und Abreisedatum sehr komfortabel über Datumswähler eingeben und eine der Reisedauer angemessene Kilometerangabe wird dynamisch berechnet, lässt sich aber sehr intuitiv über einen Schieberegler anpassen. Ruft man die Seite ohne Javascript auf, ist alles ebenso bedienbar und man kann mit dem Formular arbeiten, es ist jedoch weniger dynamisch und interaktiv. Auch das kann man noch verbessern, es ist aber auf jeden Fall ein guter Ansatz. Nun ist mir zwar klar, dass das auf der von dir erstellten Seite kein Problem ist, da du JavaScript dort kaum einsetzt. Es soll nur zeigen, was man mit sinnvollem Quelltext für seine Kunden erreichen kann.

Du hingegen versteckst Inhalte in schlecht komprimierten Grafiken mit so sprechenden Namen wie »logo_oben.jpg« und lieferst dafür noch nicht einmal alternative Inhalte. Der optisch offensichtlich so wichtige Text »entfernt« kommt auf der Seite nur im Titel und im Copyrighthinweis vor. Der Text »Beratungsförderung«, immerhin einer der Punkte der Hauptnavigation, taucht an keiner Stelle der Seite auf. Wie soll Google oder ein blinder Anwender auf der Suche nach dieser Dienstleistung wissen, worum es geht? Und du meinst tatsächlich, dass deine Kunden bei Google gut gefunden werden? Kann ja gar nicht sein, wenn du die relevanten Keywords vor den Suchmaschinen versteckst.

Dreamweaver mag ein gutes Programm sein, liefert jedoch vernünftiges HTML nur, wenn man es dazu zwingt. Einfach bunte Bildchen und Texte in ein Tabellenkonstrukt zu ziehen, hat nichts mit der Erstellung von Webseiten zu tun. Das ist, als würde ich einen Tischler mit der Anfertigung eines Regals beauftragen und der baut mir ein IKEA-Billy zusammen. Da kann man zwar Bücher reinstellen, dafür hätte ich aber keinen Tischler gebraucht.

Die Konsequenz für dich kann nur sein, das Handwerk Webseitenerstellung zu erlernen oder es Leuten zu überlassen, die es können. Alles andere ist deinen Kunden gegenüber eine riesige Schweinerei. Verwunderlich finde ich in diesem Zusammenhang übrigens, dass ein Kunde, der sich mit Beratung beschäftigt, sich bei der Auswahl eines so wichtigen Dienstleisters offensichtlich nicht hat beraten lassen. Er hätte sich sonst nicht für dich entschieden, zumindest was die Umsetzung der Site angeht. Gegen das Design ist aus meiner Sicht gar nichts einzuwenden, das finde ich für den Zweck und das vermutlich kleine Budget sehr gelungen. Sich aber als Designer nur auf das Optische zu beschränken, ist ein zu eingeschränktes Selbstverständnis.

Ich habe vor gut drei Jahren mal einen Artikel übersetzt und veröffentlicht, der sich mit genau dieser Problematik beschäftigt. Ich würde mich freuen, wenn du ihn dir mal durchliest. Vielleicht bleibt ja etwas hängen.

Kommentare und Trackbacks (7)

Layoutraster berechnen

Ich habe heute ein kleines Tool in Form einer Excel-Datei veröffentlicht, das mir bei zwei aktuellen Projekten sehr geholfen hat. Es handelt sich dabei um einen Grid Calculator, also ein Werkzeug zur Berechnung von Layoutrastern.

Nahezu jeder, der vor der Aufgabe eines komplexen Layouts gestanden hat, konnte schon feststellen, dass es eine ziemliche Fummelarbeit ist, die Spaltenbreite, die Breite der Spaltenabstände und die zur Verfügung stehende Gesamtbreite auf einen Nenner zu bringen und so ein ansprechendes Raster zu berechnen. Insbesondere bei einem Frontend-Projekt, in dem ich unterschiedlichste Breiten für Eingabefelder brauchte, war für mich ein möglichst vielspaltiges Layout wichtig, um bei den Eingabefeldern sehr flexibel arbeiten zu können.

Hat man dann endlich ein passendes Layoutraster berechnet, steht man vor dem nächsten Problem: Beim Anlegen der Stylesheets oder Festlegen der Vorgaben für Bildgrößen berechnet man immer wieder die Breite von Elementen, die mehrere Spalten und die entsprechenden Zwischenräume umfassen.

Screenshot des Rasterrechners in der Excel-VersionUm die Suche nach einem passenden Raster zu erleichtern und vor allem die nervige Berechnung der mehrspaltigen Elemente zu automatisieren, habe ich eine Excel-Datei gebaut, die einem die Arbeit abnimmt.

Eine Erläuterung der Datei und die Möglichkeit, den Layoutraster-Rechner als Excel- und Open-Document-Datei herunterzuladen gibt es auf der Seite »Grid Calculator – Layoutraster berechnen«.

Kommentare und Trackbacks (7)

Relaunch

Eine zwangsverordnete Pause hat mich dazu gebracht, mich endlich mal wieder nach langer Zeit mit meinem Weblog zu beschäftigen. Insbesondere der schon lange anstehende Relaunch konnte nun in Angriff genommen werden.

Insgesamt war das eine Sache weniger Stunden, was man vermutlich an der einen oder anderen Stelle noch sehen kann. Aber welcher Relaunch ist schon perfekt und an welchem Relaunch wird nicht nach dem Start noch mehr oder weniger verändert? Hier geht es schließlich auch nicht um eine Firmenwebsite sondern um nur um mein kleines Weblog mit einer doch sehr begrenzten Anzahl von Lesern.

Das Layout selbst spukte so oder ähnlich schon seit einiger Zeit in meinem Kopf herum. Ich wollte endlich von dem alten Einheitsgrau weg zu einem farbenfrohen, warmen und dennoch schlichten Layout, in dem das Lesen der Beiträge Spaß macht. Das Lesen steht hier auch ganz klar im Vordergrund, auch wenn ich vorhabe, zukünftig deutlich mehr mit Grafiken zu arbeiten, um Inhalte zu illustrieren oder einfach nur die Optik spannender zu machen.

Screenshot des alten BloglayoutsFür die nicht ganz so regelmäßigen Besucher hier noch einmal das alte Layout als Screenshot.

Aussichten

Dem Layout liegt ein 12er-Grid zugrunde. Dazu schreibe ich in den nächsten Tagen nochmal etwas. Schließlich soll das Weblog ja nach dem Relaunch auch mit interessanten Inhalten gefüllt werden, was in der Vergangenheit viel zu kurz gekommen ist. Zumindest zwei Themen habe ich da schon in der Pipeline, mehr ergibt sich sicherlich, wenn erst mal wieder Druck auf der Leitung ist.

An einigen Stellen wird es noch Erweiterungen geben, so plane ich eh, mich mal mit dem Thema YQL zu beschäftigen und habe dann ja hier eine schöne Spielwiese. Auch für Bilder muss auf die Schnelle noch eine schöne Darstellungslösung gefunden werden. Noch dazu habe ich dem Thema Barrierefreiheit bisher kaum Aufmerksamkeit gewidmet. Das wird aber noch passieren. Die Grundlagen dafür sind ja schon gelegt.

Feedback zum Relaunch nehme ich natürlich gern an. Lasst euch in euren Kommentaren einfach aus und schont mich nicht.

Kommentare und Trackbacks (3)

Rezension »Einführung in XHTML, CSS und Webdesign« von Michael Jendryschik

Mit Einführung in XHTML, CSS und Webdesign legt Autor Michael Jendryschik die 2. Auflage seines Buches vor. Diese Auflage entspricht dem gleichnamigen Online-Tutorial auf der Website des Autors.

Der Inhalt

Abbildung des rezensierten BuchsDas Buch folgt einem strengen, sinnvollen Aufbau. Zu Beginn werden sehr ausführlich die Grundlagen vermittelt. Der Leser erhält Basiswissen zu allem, was in der späteren Arbeit mit XHTML und CSS vorausgesetzt wird. Die Grundlagen nehmen in ihrer Ausführlichkeit auch tatsächlich einen nicht unwesentlichen Teil des Buches ein. Man kann das viel finden, mich hat es jedoch begeistert. Nicht alles ist zwingend notwendig, um den später im Buch zu lernenden Stoff zu verstehen, ich empfehle jedoch, nichts in diesem Bereich zu überspringen. Interessant ist es allemal, so wird z. B. auch auf die Entstehung des Internets eingegangen.

Mir als gelerntem Schriftsetzer hat besonders der Teil »Typografie« gefallen. Es ist das erste Mal, dass ich in einem Buch zum Thema Webdesign in dieser Ausführlichkeit etwas über korrekte Gedankenstriche, Anführungszeichen und Apostrophe gefunden habe. Allein hierfür gebührt Michael mein Dank.

Der nächste Abschnitt widmet sich den zu verwendenden Hilfsmitteln beim Webauthoring. Verschiedene Editoren, Validatoren, Programme zur Bildbearbeitung und nützliche Tools werden vorgestellt. Gerade bei den Tools gibt es unglaublich viel, was dem Webautor die Arbeit erleichtert. Ich nenne nur Firebug, das aus meiner Arbeit nicht mehr wegzudenken ist.

Und dann geht es endlich in Medias Res; XHTML ist der Titel des nächsten Abschnitts. Michael Jendryschik geht ausführlich auf den grundsätzlichen Aufbau von XHTML-Dokumenten ein und erklärt die Syntax und das Vokabular. Hier beginnt dann auch der praktische Teil. Das obligatorische Hallo-Welt-Beispiel finden wir dann auch auf Seite 186.

Wir finden in diesem Kapitel nicht nur eine reine Auflistung von Elementen und den möglichen Attributen sondern der Autor gibt auch Tipps zur Arbeitsweise beim Schreiben und zur Anwendung der Elemente. Der Leser sollte anschließend in der Lage sein, das semantisch jeweils am besten passende Element für seinen Inhalt zu finden. In der gegebenen Form halte ich das auch für eine sinnvolle Wiederholung auch für den fortgeschrittenen Webautor.

In der gleichen Qualität geht es im Kapitel CSS weiter. Hier wird gezeigt, wie das von Präsentationseigenschaften freie XHTML-Dokument mit ansprechender Optik versehen wird. Eine kurze Einführung zum Thema, in der neben der Kaskadierung und Vererbung auch auf die Kommentierung der CSS-Dateien anhand von CSSDOC und auf Bugs und Hacks eingegangen wird, wird gefolgt von einer ausführlichen Auflistung der Eigenschaften und Werte. Auch hier finden sich wieder reichlich praxisrelevante Tipps wo andere Autoren sich oft nur auf die reine Erklärung beschränken.

Die Krönung des Buchs ist das letzte Kapitel (vom Anhang abgesehen). Mit der Kochbar wird eine ansehnliche Beispielwebsite erstellt. Das auf den bisher gelesenen Seiten erworbene Wissen kann hier direkt praktisch angewandt werden. Das äußerst ansehnliche Design von Manuela Hoffmann wird nun in sehr gut beschriebenen Schritten nachvollziehbar umgesetzt. Liegt die Zielsetzung anfänglich auf der reinen Information und damit der Auswahl der korrekten Elemente und deren Anordnung, wechselt Michael anschließend folgerichtig in die Umsetzung des Designs mit CSS. Auch hier ist jeder Schritt anhand des vorher Erlernten nachvollziehbar. Der Einsteiger hat am Ende des Kapitels das Erfolgserlebnis einer mit Webstandards umgesetzten Website, die er – von den eingebundenen Grafiken abgesehen – eigenhändig erstellt hat. Gerade zu Beginn einer Webautorenkarriere ist ein solches Erfolgserlebnis eine tolle Motivation, um in dieser Richtung weiterzumachen.

Das Buch schließt dann mit einem ausführlichen Glossar im Anhang.

Der Autor

Michael Jendryschik ist ein Vollblut-Webautor. Neben seiner Arbeit als Leiter der Webentwicklung bei der itemis AG zeichnet er für zahlreiche Fachartikel auf seiner Website und in den einschlägigen Fachzeitschriften verantwortlich. Ich kenne Michael dann auch noch als Webkraut und – was mir erst beim Lesen wieder bewusst wurde – als Regular der Newsgroup de.comm.infosystems.www.authoring.misc, in der ich gerade zu meinen Anfangszeiten in diesem Bereich fleißig mitgelesen und sporadisch mitgeschrieben habe.

Die Zielgruppe

Das Buch wendet sich an Einsteiger, wie aus dem Titel unschwer zu entnehmen ist. Wie so oft, ist aber auch für den Fortgeschrittenen Webautor etwas interessantes zu finden, und wenn es nur die Auffrischung bereits erworbenen Wissens ist. Wer sich allerdings Webdesigner nennt und immer noch mit Tabellenlayouts arbeitet, sollte sich zwingend mit diesem Buch beschäftigen. Hier lernt man, wie man es richtig™ macht!

Das Fazit

Lesebefehl für den ambitionierten Einsteiger

Links zum Buch

Technische Angaben

  • Einführung in XHTML, CSS und Webdesign
  • Standardkonforme, moderne und barrierefreie Websites erstellen
  • von Michael Jendryschik
  • ISBN 9783827327390
  • Addison-Wesley-Verlag, 12/2008
  • 564 Seiten, gebunden

Kommentare und Trackbacks (2)

I took it

A List Apart hat mal wieder zur Umfrage unter Webworkern aufgerufen. Brav, wie ich bin, habe ich natürlich teilgenommen. Man kann davon ausgehen, dass diese Umfrage absolut repräsentative Ergebnisse liefert. Schließlich gehört A List Apart zur Pflichtlektüre in der Zielgruppe.

Kommentar schreiben