Neues Layout für julis-thueringen.de

Vor gut 4 1/2 Jahren hatte ich für die JuLis Thüringen e.V. ein Layout für deren Website erstellt. Nun war es wirklich mal wieder an der Zeit, den Webauftritt frischer und moderner zu gestalten, aber auch die Barrierefreiheit zu erhöhen. Bisher basierte die Website nämlich auf einem Tabellenlayout und HTML 4.01.

Daher wurde das Layoutgerüst komplett neu aufgebaut und auf xhtml 1.0 Transitional umgestellt. XHTML 1.0 Strict hätte einige Schwierigkeiten gebracht, da die Website über ein CMS gepflegt wird und den Nutzern gewisse Eingabefreiheiten ermöglicht werden müssen.

Wie bereits zuvor nutze ich ein 3 Spalten-Layout mit einem Menue im linken Container, dem Content im mittleren Container und weitere Infos wie Umfragen etc. imr rechten Container. Dazu kommt der Header als Blickfang und dem Hauptmenue und ein Footer mit weiteren Infos.

Das bei dem Jugendverband der FDP ebenfalls die Farben gelb und blau dominieren, ist sicherlich selbsterklärend, ich habe mich aber bemüht, die Farbgestaltung so anzulegen, dass diese Farben sich nicht zu sehr aufdrängen. Feedback, Anregungen, Verbesserungsvorschläge sind natürlich gern gesehen!

sueddeutsche.de im neuen Kleid

Und wieder mal kann über das Re-Design einer grossen deutschen Website berichtet werden: diesmal ist es die sueddeutsche.de, die im neuen Kleid ins Netz gestellt wurde.

Das Re-Design eines der führenden Nachrichten-Portale im deutschsprachigen Netz ist Auftakt einer breiten redaktionellen Offensive. sueddeutsche.de wird von nun an stärker als bisher mit der Redaktion der Süddeutschen Zeitung zusammenarbeiten.
Von Zeit zu Zeit werden auch gestandene Medien vom Drang zu neuer Schönheit erfasst. […] Guter Inhalt braucht große Bühnen und gutes Bühnenbild. […] Dieser Erkenntnis zufolge ändert sich Einiges bei sueddeutsche.de. Über die Jahre hinweg war mancher Wildwuchs entstanden, was der Übersichtlichkeit abträglich war. Das neue Design soll schneller Orientierung verschaffen und große redaktionelle Linien erkennen lassen.

Auch wenn die Kommentare der Besucher recht positiv ausfallen und mir persönlich das neue Design grundsätzlich gefällt, so gibt es leider eine Reihe von Kritikpunkten. Eine Reihe von Besuchern bemängeln z.B. die zu kleine Schrift, die sich mit dem Internet Explorer nicht ändern lässt, da man nahezu durchweg px-Angaben gewählt hat.

Was ich persönlich viel schlimmer finde, ist der Code! Das Layout basiert auf einer Vielzahl von verschachtelten Tabellen und ist alles andere als valide. Der W3C-Validator ermittelt sage und schreibe 302 Fehler und auch der CSS-Part strotzt nur so von handwerklichen Fehlern. Kann es wirklich sein, dass eine so renommierte Zeitung wie die Süddeutsche keinen Webentwickler findet, der ein modernes und gleichzeitg valides, tabellen-freies Layout präsentieren kann? Was wird bei der Auftragsvergabe als Erwartungshaltung, als Bestandteil des fertigen Produktes definiert? Oder wurde eventuell der Auftrag nur anhand des Preises vergeben und nun mussten Amateure herhalten, um den Preis drücken zu können? OK, letzteres ist eine reine Vermutung, die mir nicht zusteht und die ich hiermit als reine Spekulation kennzeichne. Aber fragen darf man schon, oder …..?

Projekt ra-waldner.de

Projekt ra-waldner.deDiese Woche habe ich ein kleineres Projekt für die Ehefrau eines Kollegen online gestellt: ra-waldner.de. Hierbei handelt es sich um die Seite der Rechtsanwältin Ines Waldner in Erfurt, die sich aktuell mit einer eigenen Kanzlei selbstständig gemacht hat.

Die Website basiert auf XHTML 1.0 Transitional und einem 2-Spalten-Layout mit einem Menue im linken Container und dem Content im rechten Container. Dazu kommt der Header als Blickfang und ein Footer mit einem Link zum Impressum. Aufgrund des Themenhintergrundes habe ich die Farben eher dezent gewählt, der massgebliche Farbton ist blau, der Hintergrund ist weiss / grau bei Nutzung schwarzer / dunkler Schriften.

Zu den Inhalten gehören Informationen rund um die Kanzlei, eine Anreisebeschreibung, Downloads und ein Kontaktformular. Da man zunächst ein einfaches Webspace-Paket ohne PHP nutzt, konnte ich leider keine Interaktion wie Prüfung der Eingaben und Absendebestätigung einbauen.

Feedback, Anregungen, Verbesserungsvorschläge sind natürlich auch hier willkommen!

Akquise: Kunden und Aufträge finden und gewinnen

Der 1. Business-Blog-Karneval im deutschsprachigen Raum ist nach 23 Tagen am vergangenen Freitag zu Ende gegangen. Sicherlich wird es Euch beim ersten Lesen dieser Zeilen, die ich im Selbst und Ständig Weblog gefunden habe, genauso gehen wie mir: Was ist bitte ein Business-Blog-Karneval?

Elke Fleing erklärt es folgendermassen:

Mit seiner Initiierung habe ich eine in den USA bereits weit verbreitete Idee aufgegriffen: Bei einem Blog-Karneval arbeiten viele Experten-Weblogs über einen bestimmten Zeitraum hinweg an einem gemeinsamen Thema. Organisation, Themenvorgabe und zentrale Anlaufstelle liegen beim Gastgeber-Blog, alles andere funktioniert – Web 2.0 eben – dezentral: Alle teilnehmenden Weblogs – in unserem Fall haben sich auch nicht-bloggende Business-ExpertInnen mit Beiträgen beteiligt – erstellen Beiträge zum Thema in ihren Weblogs und lesen, verlinken und kommentieren sich auch untereinander.

Als Ergebnis des Blog-Karnevals stehen für Sie, die Leser und Leserinnen, zwei Nutzen:

  • Sie bekommen gratis ein umfangreiches Wissensdossier.
  • Sie haben die Gelegenheit, auf einen Schlag viele Experten-Weblogs und Business-ExpertInnen kennenzulernen, die sich täglich mit Ihren Interessen befassen

Das Ergebnis kann sich wirklich sehen lassen: 53 Autoren haben insgesamt 131 Artikel unter dem Motto Akquise: Kunden und Aufträge finden und gewinnen. Tipps, Informationen und Best-Practice-Beispiele zum Thema Kundenfindung und Kundenbindung veröffentlicht. Unter dem nachfolgenden Link stehen diese Informationen nun gesammlt zur Verfügung, das Prädikat Lesenswert hat sich dieses Projekt mehr als verdient!

Selbst und Ständig Weblog: Akquise und Kundenbindung

CSS Naked Day

Heute am 5. April 2006 findet eine wirklich lustige Aktion im Web statt, an der sich einige Seiten beteiligt haben, die das Thema Webstandards unterstützen: der erste offiziellen CSS Naked Day. Initiator des ganzen ist Dustin Diaz, der sich mit dieser Aktion für die Nutzung von Webstandards einsetzt.

That’s right, I’m starting the first annual CSS Naked Day. In the spirit of promoting Web Standards along with good semantic markup and proper hierarchy structures, April 5th will be a day of nakedness for all webmasters to remove their style sheets from their website for one day. Signining up is not required, just simply comment in this thread with a link to your website and let everyone else know that you’re participating.

Auch wenn ich leider erst heute abend davon erfahren, da ich die letzten 14 Tage beruflich zu sehr eingespannt war, habe ich mich auch an der Aktion beteiligt. Ich hoffe, dass es irgendwann mal Day 2 geben wird und ich von Anfang an dabei sein kann.

Webkrauts mit neuem Design

Webkrauts.de, die deutsche Plattform für Webentwickler, Webdesigner, Programmierer etc., die sich für die Nutzung von Webstandards einsetzen, ist seit heute mit einem komplett überarbeiteten Layout ausgestattet.

Manuela Hoffmann von pixelgraphix hat das neue Layout entwickelt, weitere Mitstreiter haben es dann umgesetzt. Ich persönlich finde das Layout wirklich gelungen, die Handschrift von Manuele Hoffmann ist eindeutig zu erkennen: Optisch ansprechende Header-Grafik (die ich persönlich zwar etwas schmaler in der Höhe gestaltet hätte, aber das ist wie immer reine Geschmackssache), klare Farben und schnell nachvollziehbare Seitenstruktur.

Am Inhalt der Seite wird weiter fleissig gearbeitet, von hier aus ein grosses Danke für das Engagement und die Arbeit, die Ihr investiert.

Ein Website-Konzept aufstellen – Eine Sache der Einstellung

Martin Labuschin hat auf seiner Website eine sehr interessante Artikelreihe unter dem Motto Ein Website-Konzept aufstellen – Eine Sache der Einstellung gestartet:

Der Erfolg einer Website wird schon bei der Konzeption bestimmt. Doch wie stellt man ein solches Konzept auf? Ich habe mich seit ein paar Wochen mit der Konzeption von Websites beschäftigt und berichte nun von meinen Erfahrungen.

Der erste der insgesamt fünf Arikel beschäftigt sich mit der Frage der Einstellung, mit der sich der Betreiber der Website der Angelegenheit nähert. Ich freue mich schon sehr auf die kommenden Artikel, die in Kürze erscheinen sollen.

Dortmund.de unter der Lupe

Einhalten von Webstandards und Barrierefreiheit sind zwei Ziele, die man grundsätzlich bei der Erstellung einer Website einhalten sollte. Dies gilt aber insbesondere für Seiten von Behörden, öffentlichen Einrichtungen und natürlich auch Städten. Am 01.02.2006 wurde nach einem guten Jahr der Überarbeitung die Website der Stadt Dortmund neu ins Netz gestellt. Manuel Bieh hat sich die Website seiner Heimtstadt ganz genau angeschaut und einen sehr interessanten Artikel unter dem Titel Dortmund – Barrierefrei im Netz… oder doch nicht? in seinem Blog veröffentlicht.

Eine große Klappe zu haben und Andere mit eben dieser großen Klappe zu kritisieren ist meist viel einfacher als Dinge selbst von vornherein richtig zu machen. Ich habe mir heute Zeit genommen, um den brandaktuellen, neuen und barrierefreien Internetauftritt meiner geliebten Heimatstadt Dortmund einem sehr ausgiebigen Test zu unterziehen.

Alleine schon dieser Ansatz eehrt Manuel Biehl, denn die meisten kritisieren gern, was falsch gemacht wurde, bringen aber selber keine Vberesserungsvorschläge oder gar Lob. Manuel Bieh geht dabei auf Themen wie Semantik, Navigationsstruktur, Design- und Usability-Aspekte und Formulare ein, bringt zum Ende eine Negativ / Positivliste. Wie lautet das Fazit seiner Analyse:

Die Seite ist in meinen Augen ein sehr guter und vor allem großer Schritt in die richtige Richtung. Vor allem kenne ich den alten Auftritt sehr gut. Es ist eine Steigerung, ja eine starke Verbesserung. Aber es ist nicht die totale Ausschöpfung des Möglichen. Ganz und garnicht. Und das muss ich anprangern. Nicht weil ich Euch, liebe Dortmund-Agentur einen reinwürgen oder Eure mitunter gute Arbeit schlecht reden möchte, oder ich mich von der Stadt Dortmund ausgebeutet oder als Bürger schlecht behandelt fühle. Nein, sondern weil ich es traurig finde. Es sitzen durchaus fähige Leute IN Dortmund die sicherlich eine wirklich barrierefreie, oder zumindest etwas »barrierefreiere« Version hinbekommen hätten als die, die jetzt als »barrierefreies dortmund.de« unter www1.dortmund.de zu finden ist.

Wer nun wissen möchte, was genau alles an Positivem wie Negativem bei der Analyse gefunden wurde, der kann sich den Artikel unter dem nachfolgenden Link vollständig durchlesen:

Artikel „Dortmund – Barrierefrei im Netz… oder doch nicht?“

Redesign vom FOCUS beschäftigt das Web

Es ist manchmal verblüffend, was Ursache für breite Diskussionen unter Webdesignern, Bloggern & Co. werden kann. Aktuell hat es das Redesign der Website des Printmagazins FOCUS geschafft, in aller Munde zu sein. Wobei es weniger das Design an sich ist, sondern die Qualität des Codes und die Art des Diskussion darüber.

Auslöser des ganzen war der Artikel Failed Redesigns Made in Germany – Episode 1 von von Heike Edinger, die wirklich schonungslos mit den Machern ins Gericht geht:

Immerhin: Focus hat den Trend erkannt. Websites werden ja heutzutage tabellenlos gebaut. Soweit, so gut: Hurra, keine Tabellen. Mehr Fachwissen hatte die Relaunch-Chaostruppe allerdings nicht. Der Code ist vollkommen verschwurbelt, strotzt vor div-Verschachtelungen, wo ein li genügt hätte, und ist voll gestopft mit Inline-Stylesheets, altbewährten Blind-Gifs und esoterischer Abstands-div-Kunst

Durch die vielen Kommentare, die sehr kontrovers sich mit der Frage beschäftigten, ob es wirklich sinnvoll ist, durch Anprangern und Zurschaustellung die Masse der Webdesigner zur Einhaltung der Webstandards zu bewegen, hat sich Eric Eggert in seinem Blog nicht nur intensiv in zwei Artikeln mit dieser Diskussion auseinandergesetzt. Nein, er hat sich hingesetzt und die Website des FOCUS komplett überarbeitet und gemäß den Webstandards die Startseite neu aufgesetzt. Das Ergebnis spricht fast schon für sich:

  • (X)HTML-Datei von 115kB auf 49,2kB (-57%)
  • CSS-Datei(en) von 34,3kB auf 12,9kB (-62%)
  • JS-Aufrufe von 23 auf 0 (-100%)
  • Class-Attribute von 610 auf 150 (-75%)
  • Style-Attribute von 413 auf 19 (-95%)
  • Listen (ul) von 0 auf 28
  • Überschriften (h1) von 1 auf 20 (+2000%)
  • Absätze (p) von 0 auf 76

Ich halte diese Diskussion daher für so wichtig, weil sie am Beispiel einer renommierten Zeitung aufzeigt, wie wichtig die Einhaltung der Webstandards sein kann. Und daher habe ich diesen Artikel in der Rubrik Lesenswertes verfasst, damit auch ein paar meiner Besucher hoffentlich mit der Diskussion und vor allem den Webstandards beschäftigen.

YAML Version 2.1 erschienen

YAML, was ist das, werden sich vielleicht ein paar nun fragen. YAML steht für Yet Another Multicolumn Layout und ist:

ist ein Framework zur Erstellung moderner und flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein möglichst hohes Maß an Flexibilität und Zugänglichkeit im Vordergrund. Innerhalb eines Tutorials wird die Funktionsweise der einzelnen Bausteine erläutert.

Wie Ihr in der Changelog nachlesen könnt, arbeitet Autor Dirk Jesse seit mehreren Monaten an dem Projekt. Wer nun mehr wissen will, sollte einfach dem Link am Ende der News folgen. Aber eines solltet Ihr wissen: YAML ist kein Fertiglayout.!!!

Zur YAML-Website