2017er Relaunch von FDP Thüringen

20170130_FDP_Thueringen_RelaunchNachdem das letzte Design der Website der FDP Landesverband Thüringen bereits Mitte 2009 online ging und seitdem lediglich kleinere Schönheitskorrekturen vorgenommen wurden, war es wirklich an der Zeit dem Internet-Auftritt der Thüringer Liberalen einem umfangreichen Relaunch zu unterziehen. Heute war es nun endlich soweit, nach einigen Wochen intensiver Arbeit an einer modernen und frischen Theme und wenigen Tagen Downtime ist das Layout nun online.

Eines der wichtigsten Features ist natürlich ein komplett Responsive Design, um dem Anspruch der Besucher via Smartphones, Tablets & Co. gerecht zu werden. Hierfür wurde als Basis u.a. JQuery, Bootstrap sowie Fonts Awesome inkl. diverser Plugins genutzt. Eine wesentliche Änderung findet sich auf der Startseite, auf der bisher rein die letzten Neuigkeiten angezeigt wurden und die nun durch eine Portalseite mit Slider, Terminankündigungen & Co aufgewertet wurde. Auch eine Anbindung an die wichtigsten Social Media Plattformen wurde wieder integriert, wobei aus Datenschutzgründen auf eine direkte Anbindung verzichtet wurde. Stattdessen habe ich auf das Script shariff gesetzt, womit die Like-Daten via indirekter Server-Abfrage aktualisiert werden.

Feedback, (konstruktive) Kritik und Anregungen sind selbstverständlich auch diesmal wieder gern gesehen!

Relaunch von CheatsCorner.de

Relaunch von CheatsCorner.deDie letzten 8 Wochen habe ich mich intensiv mit einem meiner eigenen Projekte beschäftigt und heute ist nun der Relaunch von CheatsCorner.de online gegangen.

Seit 14 Jahren ist dieses Projekt nun online, das zuletzt genutzte Layout wurde seit gut 6 Jahren genutzt. Sowohl technisch (teilweise basierte es noch auf Tabellenlayouts) wie auch optisch war es alles andere auf der Höhe der Zeit, ein moderners Design war wirklich angebracht. Neben der Nutzung von jQuery, Slidern & Co. stand im Fokus aber auch die Bedienung von Besuchern mit Browsern auf mobilen Endgeräten, Tablets etc. Daher investierte ich viel Zeit in ein Responsive Design, was (hoffentlich) eine weitgehend gute Darstellung auch auf diesen Geräten ermöglicht. Optimiert auf eine Auflösung ab 1280 Pixeln Bildschirmbreite, was laut Statistik bei rd. 85% der Besucher der Website gegeben ist, passt sich die Darstellung bei kleineren Auflösungen entsprechend an. So werden die beiden Menues der Website z.B. bei kleineren Auflösungen per Javascipt in ein Drop-Down-Menue umgewandelt.

Ich hoffe natürlich, dass das neue Layout auch optisch gut ankommt und freue mich auf Feedback via Kommentaren, eMails etc.

Relaunch von FDP Thüringen

fdp_thuer_smallDie letzten Tage und Wochen war es etwas ruhig hier auf meiner Website, denn ich hatte ein umfangreiches Projekt in Arbeit: das Redesign der Website der FDP Thüringen. Das letzte Layout hatte ich am 01.01.2006 online gestellt und entsprach inzwischen nicht mehr so ganz meiner Erwartungshaltung. Insbesondere das Layout sollte moderner wirken sowie den aktuellen Standards entsprechen und die sicherlich nicht unumstrittenen Web2.0-Features wie Twitter & Co. gehören integriert.

Seit gestern nun ist die Website der FDP Landesverband Thüringen sowie ein Großteil der Websites der angeschlossenen Kreisverbände nach einer kurzen Downtime von 18 Stunden wieder online. Und ich glaube, dass Ergebnis spricht für sich: hellere Farben, Drop-Down-Menue, Vergrösserungsoption bei den Bildern und vieles andere mehr. Die Website wirkt aufgeräumter und ist in sich klarer strukturiert. Vor allem das umfangreiche Menue, das bisher in einem linken Container viel Platz weggenommen in Aspruch genommen hat, ist nun als CSS-Drop-Down-Menue platzschonend oben integriert, womit mehr Raum für die Artikel bleibt. Entgegen meiner sonst üblichen Fluid Layouts habe ich diesmal die Container mit fixierten Breiten angelegt, was einer Bildschirmauflösung von mind. 1024*768P Pixeln bedarf. Da dies aber inzwischen Standard ist, halte ich diese Einschränkung für akzeptabel. Da im Hintergrund ein CMS läuft (phpVerbanmdCMS) und die Autoren der Websites nicht durchweg über gute HTML-Kenntnisse verfügen, ist dies aus meiner Sicht ein notwendiger Kompromiß

Feedback, (konstruktive) Kritik und Anregungen sind selbstverständlich gern gesehen!

Toom Baumärkte – Relaunch der Website

Wie (fast) alles im Leben, hat sich auch der Themenbereich Webdesign in den letzten Jahren weiter entwickelt. Früher warem pixelgenaue Tabellen-Layouts das Mass aller Dinge, heute sind CSS, web 2.0, AJAX & Co. in aller Munde. Wenn also die Website einer bekannten Marke einem Relaunch unterzogen wird, dann rechnet man mit vielem. Die Webdesigner der Toom Baumärkte haben aber etwas geschafft, womit sicherlich 2007 niemand mehr gerechnet hat: Frames!!!!

Ja, Ihr lest richtig: Die neue Website basiert auf verschachtelten Framests! Dazu kommt, dass das Layout der Website auf Basis von Tabellen erstellt wurde und der Quellcode nur so von handwerklichen Fehlern strotzt:

  • Kein einziges Mal wurde eine valide DOCTYPE-Deklaration verwendet
  • Der HTML-Code ist nicht mal html 4.01-konform.
  • Wesentliche Texte sind als Grafiken eingestellt worden, womit Besucher mit Textbrowsern etc. weitgehend ausgeschlossen werden. Insbesondere, da das ALT-Attribut nur in der Navigation zur Anwendung gebracht wurde.

Besonders schön finde ich die nachfolgende Zeile:

  1. <script type="text/javascript" src="file:///C:/Dokumente%20und%20Einstellungen/helene.keller/Anwendungsdaten/Adobe/Adobe%20GoLive/Settings7/JScripts/GlobalScripts/CSScriptLib.js"></script>

Ohne Worte!

Sicherlich: Fehler passieren überall und jedem. Aber dass ein Unternehmen der renommierten REWE-Gruppe eine derartig unprofessionelle und einfach nur schlecht gemachte Website einkauft, das kann ich wirklich nicht nachvollziehen. Schade nur, dass wir wohl nie erfahren werden, ob man sich in der Unternehmensgruppe jemals hierüber bewusst sein wird.

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 …..?

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.

Projekt Redesign der FDP Thüringen abgeschlossen

In den letzten Wochen habe ich mich i.w. mit dem Redesign der FDP Thüringen beschäftigt. Ziel war es den Webauftritt der Thüringer FDP neben einem neuen, frischen Outfit mit einer verbesserten Handhabung und erhöhter Barrierefreiheit auszustatten.

Bisher basierte die Website auf einem Tabellenlayout und HTML 4.01. Daher wurde die Website komplett neu aufgebaut und auf xhtml 1.0 umgestellt. Da die Daten durch verschiedene User über ein CMS bereit gestellt werden, habe ich XHTML 1.0 Transitional gewählt, um trotzdem gewissen Eingabefreiheiten zu ermöglichen.

Gewählt habe ich das derzeit sicherlich schon fast übliche 3 Spalten-Layout mit einem Menue im linken Container, dem Content im mittleren Container und weitere Infos wie Umfragen etc. imr echten Container. Dazu kommt der Header als Blickfang und ein Footer mit weiteren Infos.

Das bei einer Seite der Liberalen die Farben gelb und blau dominieren, versteht sich natürlich fast von selbst. Trotzdem sollte der Besucher nicht mit den Farben eschlagen werden, so dass diese im wesentlichen sich auf den Header und die Navigation konzentrieren. Ansonsten ist der Hintergrund hell bei Nutzung schwarzer / dunkler Schriften. Zur Auflockerung sind die Überschriften in dunkelgrau, Blau und Grün gewählt.

Feedback, Anregungen, Verbesserungsvorschläge sind natürlich gern gesehen 🙂