kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

kulturbanause blog relaunched

kulturbanause blog hat nach über drei Jahren Betriebszeit ein sehr umfangreiches Redesign erhalten! Ich hoffe es gefällt Euch. Ich habe nicht nur das Layout geändert sondern auch alle Inhalte überarbeitet und die gesamte Seitenstruktur sowie die Zielgruppenausrichtung verändert. Aus diesem Grund spreche ich hier auch von einem Relaunch und nicht von einem Redesign.
In diesem Beitrag möchte ich Euch zeigen was sich alles geändert hat, wo die Vorteile der neuen Version liegen und aus welchem Grund ich mich für bestimmte Techniken und Vorgehensweisen entschieden habe.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

Flexibilität ist alles!

Innerhalb der vergangenen drei Jahre hat sich im Web derart viel getan, dass meine alte Seite schlichtweg veraltet war und den modernen Ansprüchen nichtmehr gerecht wurde. Insbesondere der Einzug mobiler Endgeräte wie Smartphone und Tablet-PCs führt dazu, dass eine moderne Website so gestaltet werden muss, dass sie auf jedem Bildschirm gut aussieht und vor allem gut lesbar ist. Skalierbarkeit ist hier das Stichwort.

Leider ist es viel schwieriger grafisch aufwändige Websites flexibel zu gestalten als schlichte Designs und ohne Kompromisse kommt man hier nicht weiter. Das Problem besteht darin, dass Pixelgrafiken nicht skaliert werden können und somit eine feste Größe im Weblayout einnehmen. Ich habe mich dazu entschlossen das Design offener und somit dynamischer zu gestalten, aber nach wie vor so illustrativ wie möglich zu arbeiten. Mithilfe von Media Queries habe ich insgesamt vier verschiedene Versionen dieser Seite erstellt, die abhängig von der Bildschirmauflösung und Ausrichtung eigentlich immer zu einem bestmöglichen Ergebnis führen sollten. Ein wenig Feintuning ist allerdings sicher noch nötig.

Media Queries auf kulturbanause blog

Die Flexibilität der neuen Website bezieht sich allerdings nicht nur auf die verschiedenen Ausgabemedien. Ich selbst brauchte unbedingt eine bessere Sidebar in der ich Umfragen, Werbebanner, Ankündigungen etc. einbauen kann wenn ich sie brauche. Das alte Layout bot keinen Platz - moderne Elemente wie beispielsweise die Like-Box von Facebook waren ein grauenhafter Fremdkörper.

HTML5, CSS3 und WordPress

Die Seite läuft jetzt mit HTML5 und einem massiven Einsatz von CSS3. Als Rückrad verwende ich natürlich wie immer WordPress. Der Einsatz von HTML5 und CSS3 bietet natürlich auch heute noch einige Probleme von denen ich viele erst bei der Umsetzung bemerkt habe.
Um die Ladezeiten im erträglichen Bereich zu halten habe ich mich dazu entschlossen die CSS3-Funktionen nicht über ein JavaScript-Framework in älteren Browsern zu simulieren. Im Internet Explorer etc. sieht die Seite daher einfach nicht ganz so schön aus, ist aber trotzdem funktionell.

Browser-Vergleich zwischen IE7 und Chrome

Leider konnte ich den anfangs geplanten Parallax-Effect für die Blätter oben nicht einbauen. Es gab einfach zu viele Nachteile auf den mobilen Endgeräten und mit der Ladezeit.

Die HTML5-Unterstützung für ältere Browser habe ich mit dem HTML5SHIV-Script simuliert. Den Internet Explorer 6 und ähnlich veraltete Browser unterstütze ich nicht länger. Diese Entscheidung fiel in einem Schritt mit der neu definierten Zielgruppe. Da sich auch bei HTML5 immer noch einiges ändert muss ich in Zukunft wohl häufiger das ein oder andere Mini-Update einschieben - aber das ist es wert.

Zielgruppe und Seitenstruktur

Über die letzten Jahre hinweg hat sich der Anteil der Webdesign relevanten Themen langsam auf 100% gesteigert. Aus diesem Grund habe ich mich jetzt dazu entschlossen die Zielgruppe endgültig neu zu definieren und ab sofort ausschließlich zum Thema Webdesign und Bildbearbeitung zu schreiben. Die bereits oben erwähnten technischen Neuerungen (HTML5, CSS3 etc.) stehen natürlich auch mit der Zielgruppe in direktem Zusammenhang.

Hauptnavigation auf kulturbanause blog

Damit Ihr leichter die für Euch wichtigen Inhalte findet habe ich alle Artikel neu getagged, neu sortiert und eine deutlich vereinfachte Kategorie-Struktur sowie eine bessere Suche umgesetzt.

Die Sprache war in der Vergangenheit immer ein wenig durchmischt was von Besuchern häufig kritisiert wurde. Die Navigation war halb in Englisch verfasst - die Sprache der Artikel war Deutsch etc. Ab sofort ist alles nur noch in Deutsch und wurde so gestaltet und programmiert, dass es problemlos mit Google Translate übersetzt werden kann.

Mit Google Translate übersetzte Website

Familiärer als bisher

Ich habe versucht die gesamte Seite persönlicher zu gestalten und auch in Texten einen persönlicheren Ton anzuschlagen. Da die privaten Themen nun vollständig von dieser Seite verbannt worden sind, ist es mir wichtiger als zuvor den direkten Kontakt zu meinen Lesern zu finden. Ich freue mich also über jeden Kommentar und hoffe, dass Ihr Euch in Zukunft häufiger dazu überwinden könnt einen Kommentar zu verfassen anstatt einfach nur auf "gefällt mir" zu klicken.
Nichts desto trotz habe ich jetzt eine deutlich bessere Social Graph Integration als vorher ;)

Wenn Ihr Link-Tipps oder Fragen habt dann zögert nicht und schickt mir einfach eine Nachricht.

Persönliche Ansprache des Besuchers

Layout

Das Layout habe ich komplett neu illustriert und dabei nur einige wenige Parallelen zum alten Design aufrecht erhalten. Charakteristisch am alten Design war natürlich das Fantasy-ähnliche, recht düstere Layout. Den Fantasy-Stil habe ich deutlich zurückgenommen. Trotzdem hat man meiner Meinung nach das Gefühl, die Landschaft befände sich nicht auf der Erde.

Das Farbkonzept habe ich in den Grundzügen beibehalten (Blau, Grün, Grau/Braun) aber deutlich aufgehellt. Ich möchte mit der neuen Seite einen positiveren, freundlicheren Stil treffen. Auch die Farbbalken der Überschriften habe ich in Anlehnung an die alte Version beibehalten.
Wenn Ihr die Entwicklung der Seite sehen wollt, so schaut mal hier vorbei:

Fehler und Verbesserungen

Wenn Ihr Bugs findet - was ohne Zweifel der Fall sein wird - so schreibt mir doch bitte über das Kontaktformular im Footer eine kurze Info.
Ich arbeite bereits im Hintergrund parallel an einem Update dieser Version mit einigen Verbesserungen die ich vor der Deadline leider nichtmehr einbauen konnte. In Zukunft wird es also wahrscheinlich häufiger Feature-Updates geben als das bisher der Fall war.

Und jetzt viel Spaß :)

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

29 Kommentare

  1. Matthias

    Verfasst am 27. März 2011 um 18:41 Uhr.

    Gefällt :)

    Besonders die netten kleinen Spielereien fand ich interessant, wie z.B. den Link zum Seitenanfang, die Begrüßung, etc.

    Das neue Layout ist nach dem immer noch schönen, aber düsteren und doch etwas angestaubten alten Layout erfrischend und ansprechend.

  2. Dominik

    Verfasst am 27. März 2011 um 18:48 Uhr.

    Mir gefällt die neue Seite wesentlich besser als die alte. Sie sieht moderner, freundlicher und übersichtlicher aus. Gut finde ich auch das du kein IE 6 mehr unterstützt irgendwann muss man ja die Leute dazu bewegen den Aktuellen Browser zu downloaden. Auch gut finde ich das du nicht so viel Javascript verwendet hast, bei dem alten Design konnte man nicht einmal Navigieren wenn man kein Javascript aktiviert hatte. Im vollen und ganzen eine wirklich sehr schön gelungene Seite.

    Mfg Dominik

  3. Simon

    Verfasst am 27. März 2011 um 18:24 Uhr.

    Hej Jonas,

    bin wirklich beeindruckt von deinem Relaunch!
    Das einzige, was mir noch nicht so gut gefällt ist, dass die „Like“ „Tweet“ und „Buzz“-Buttons untereinander angeordnet sind. In einer Zeile finde ich das persönlich ansprechender.

    Aber alles in allem: super!

    • Jonas Hellwig

      Verfasst am 27. März 2011 um 18:56 Uhr.

      @Simon: Das stört mich ehrlich gesagt auch. Aber der Facebook-Button ändert die Breite je nachdem ob man eingelogged ist, geliked hat oder eben noch nicht geliked hat. Da entstünden dann entweder Lücken oder ein Verschnitt. Das fand ich noch schlimmer. :D

  4. funeralforfree

    Verfasst am 27. März 2011 um 18:39 Uhr.

    Glückwunsch sehr schön anzusehen =)

  5. Kevin

    Verfasst am 27. März 2011 um 19:05 Uhr.

    Wirklich toll geworden, super Design viel schöner als das alte und auch heller was ich besser finde.

    Allerdings hat ein RSS-Feed gerade eben ein wenig gespinnt ich habe ältere Artikel noch mal bekommen, sodass ich 50 ungelesene hatte.

    lg
    Kevin

    • Jonas Hellwig

      Verfasst am 27. März 2011 um 19:17 Uhr.

      @Kevin: Den Fehler mit dem Feed habe ich bemerkt. Aber da war es dann schon zu spät. Der Feed kommt übrigens ab sofort auch ungekürzt.

  6. André

    Verfasst am 27. März 2011 um 19:06 Uhr.

    Gratulation Jonas zu einem wirklich gelungenen Relaunch!! Die harte Arbeit hat sich wirklich gelohnt!

    Grüße
    André

  7. Lukas

    Verfasst am 27. März 2011 um 20:08 Uhr.

    Herzlichenk Glückwunsch zum Relaunch. Ist dir echt gelungen. Interessant wäre ein Artikek wie du die verschiedenen Seiten für iPad & Co. realisiert hast. Sogar den Landscape-Modus beim iPad hast du berücksichtigt!

    • Jonas Hellwig

      Verfasst am 27. März 2011 um 20:27 Uhr.

      @Lukas: Da kann ich gerne in Kürze einen Artikel zu schreiben.

  8. nitnat

    Verfasst am 27. März 2011 um 20:25 Uhr.

    gefällt mir sehr gut! schade um den verworfenen parallax effekt

  9. Ivo Mynttinen

    Verfasst am 28. März 2011 um 8:29 Uhr.

    Sehr gelungenes Design! Ich finde nested-Comments währen noch ein nettes Feature für den Kommentarbereich.

  10. Holger

    Verfasst am 28. März 2011 um 7:06 Uhr.

    hola jonas, schöne arbeit und gut gelungen. deine site ist immer eine empfehlung wert.
    zu dem beweggrund „moderne Elemente wie beispielsweise die Like-Box von Facebook waren ein grauenhafter Fremdkörper“ finde ich allerdings, das diese immer ein fremdkörper sind. und Facebook modern? Atomkraft war auch mal modern … :-)

  11. Jens Bayer

    Verfasst am 28. März 2011 um 8:06 Uhr.

    Hallo Jonas, auch an dieser Stelle: Gratulation zum rundum gelungenen Relaunch. Wurde ja auch Zeit!;) Schön ist auch das Scribble zu sehen. Davon gern mehr! Btw: Portraitmodus iPhone (3G) ist der Punkt Trackbacks & Interne Links zu lang und rutscht unterhalb der Kommentare. Und wegen des Paralaxeffekts: Wirklich schade drum, das hätte sicherlich noch mal deutlich Mehrwert geboten, auch wenn es nur um Gestaltung geht. Kann man da nicht via JS Mobilegeräte (Also ähnlich wie Media Queries) ausschließen? Also so das nur Desktoprechner in den Genuss kommen? Ich kann mir fast nicht vorstellen, dass die Zielgruppe da mit Ladezeiten zu kämpfen hat, insbesondere da diese ja nun zu gefühlten 99% mit dem FF4/IE9 und Co unterwegs sein dürften. Der Rest startet die Seite doch garantiert nur zu bösartigen Testzwecken im IE7;) Whatever: Ganz großes Kino hier!!!:)

    • Jonas Hellwig

      Verfasst am 28. März 2011 um 8:48 Uhr.

      Auch hier nochmal Danke für die Bug-Reports! Der Parallax-Effect wäre nett gewesen – aber nicht um jeden Preis. Ich hätte den Effekt natürlich nur für den Desktop realiseren können (das hatte ich auch zwischenzeitlich) – aber dann muss ich die Grafiken aus der Sprite nehmen und erhöhe die HTTP-Requests etc.
      Unterm Strich war mir die Flexibilität in diesem Punkt dann deutlich wichtiger als das Design. Und das soll was heißen ;)

  12. Nico

    Verfasst am 28. März 2011 um 10:30 Uhr.

    Super Relaunch! Die Seite wirkt nun um einiges aufgeräumter und ist durch die helle Farbgebung auch einfacher zu lesen und wirkt viel ruhiger.
    Ich persönlich finde den Einleitungstext ein bisschen irritierend und viel zu stark gewichtet, vor allem da er auf jeder Seite auftaucht. Da fände ich es viel schöner und sinnvoller den Satz kürzer zu machen und unscheinbarer zu stellen.

  13. Manuel

    Verfasst am 28. März 2011 um 10:43 Uhr.

    Hallo Jonas, der Relaunch ist dir definitiv gelungen! Liebe Grüße aus Österreich, Manuel

  14. Ben

    Verfasst am 28. März 2011 um 11:57 Uhr.

    Saubre Arbeit! Vor allem, dass der Feed jetzt ungekürzt kommt ist ein absoluter Gewinn!

  15. Alex / agimedia.de

    Verfasst am 28. März 2011 um 12:06 Uhr.

    Hallo Jonas,

    ich bin heute das erste Mal auf deiner Seite und finde das Layout sehr gelungen. Ich mag die klare Struktur, die freundlichen Farben und auch die h-tags als optische Trenner sehr gern. Alles in allem ist das Ganze schön rund. Werde sicherlich häufiger reingucken, da ich wohl genau in deiner Zielgruppe bin. Feed ist schon abonniert =)

    Viele Grüße aus Berlin, Alex

  16. Dennis

    Verfasst am 28. März 2011 um 12:48 Uhr.

    Hallo Jonas,

    hab es zwar schon mal auf FB erwähnt, wollte es aber auch nochmal hier tun. Ich finde das neue Layout ebenfalls sehr gelungen, es ist hell, freundlich, übersichtlich, ansprechend und mit Liebe zum Detail (siehe Illustration) – ohne das alte Layout abwerten zu wollen.

    Ich habe jedenfalls nix auszusetzen :)

    Viele Grüße,
    Dennis

  17. JoLau

    Verfasst am 28. März 2011 um 15:24 Uhr.

    Deine Webseite sieht super aus! (Könnte grad neidisch werden… :)
    Wie lange hast du insgesamt daran gearbeitet?

    lg jonas

    • Jonas Hellwig

      Verfasst am 28. März 2011 um 15:51 Uhr.

      @JoLau: Angefangen habe ich Ende Juli – aber dann lag das Projekt lange Zeit brach. Das ist ja leider fast immer so bei eigenen Projekten.
      In den letzten 6-8 Wochen habe ich den Relaunch dann wieder effektiver vorangetrieben und in den letzten 3 Wochen sehr effektiv daran gearbeitet. Wie lange ich insgesamt gebraucht habe kann ich nicht beantworten – bei dem Projekt habe ich auch viel ausprobiert und später wieder verworfen.

  18. Lars Ebert

    Verfasst am 28. März 2011 um 18:36 Uhr.

    Ich finde das neue Design auch sehr beeindruckend. Die Landschafts-Paintings waren schon bei der alten Website echt schick, aber mit den neuen hast du dich selbst übertroffen.

    Sehr schön finde ich auch die vielen kleinen Details, wie zum Beispiel, dass bei deinen Kommentaren die Sprechblase gespiegelt ist. So kann man sofort zwischen deinen und unseren Kommentaren unterscheiden. Und der Textschatten im Content trägt sehr zur Lesbarkeit bei, es liest sich alles sehr angenehm.

    Allerdings hat mich auch der Einleitungstext ganz oben etwas verwirrt. Da besteht eventuell noch Verbesserungsbedarf.

    Außerdem kann man in diesem Kommentar-Textfeld nicht scrollen, ich weiß nicht ob das an deiner Seite oder an FF4 liegt.

    Aber ansonsten finde ich die Seite echt schick. Und ein Hoch auf das Chamäleon!

  19. Cyrille

    Verfasst am 28. März 2011 um 19:22 Uhr.

    Hey Jonas,
    seit Monaten verfolge ich deine Beiträge, und ich muss gestehen dass du damit bei mir die Lust zum „Webdesignen“ immer wieder ankurbelst. Jeden Tag kommen neue Dinge, Updates, Versionen usw heraus, und Dank deiner News verliert man nie den Faden!
    Ich kann nur Lob ausdrücken und hoffen, dass du weirterhin tolle Beiträge hier posten wirst :)

    LG aus Luxemburg,
    Cyr!lle.

  20. Raffy

    Verfasst am 7. April 2011 um 10:10 Uhr.

    Haste schön gemacht! Sieht super aus, wesentlich frischer wie die alte Seite.

    Schöne Grüße aus dem Sauerland
    Raffy

  21. Johannes Schuba

    Verfasst am 29. April 2011 um 19:21 Uhr.

    Moin,
    wenn ein Blog ein Vorbild für mich war/ist, dann deiner, Jonas. Ich war immer hier, bis ich dann vor ein paar Monaten mal meine Bookmarks und den Faden hierher verloren habe. Nun schau ich grade mal hier vorbei und was sehe ich? Ein neues Design, was mir echt bis ins kleinste Detail echt super gefällt.

    Klasse Arbeit und mach mit deinen Artikeln weiter so, wie bisher! ;)

    LG aus dem Norden
    Jojo

  22. Jim

    Verfasst am 1. August 2011 um 18:52 Uhr.

    eine Frage zu deiner Webseite (die übrigends sehr toll ist ;) du verwendest im CSS Code immer .ie9 .ie8 etc um die jeweiligen Versionen anzusprechen. Bei menu-nav beispielsweiße….

    Wo bzw. Wie wird das zugewießen/erkannt per Javascript?

    gruß Jim

    • Jonas Hellwig

      Verfasst am 1. August 2011 um 20:07 Uhr.

      @Jim: Ich vergebe dem HTML-Element über Conditional Comments verschiedene Klassen – je nach IE-Version eine andere. So kann ich anschließend über CSS die Elemente direkt ansprechen und ggf. korrigieren.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.