5202

ein Blog über technische Fragen zu Blogger

Layout Vier

von

Ein paar Leuten ist es ja schon aufgefallen - letzte Nacht gab's hier ein kleines Relaunche und zwar auf Layout Vier. Ich habe schon länger vorgehabt, mein bisheriges Layout gründlich zu überarbeiten - rausgekommen ist jetzt was komplett neues, was sich nur noch optisch an das alte Layout Zwei anlehnt.

Wer sich noch erinnert: Vor gut einem Jahr habe ich mein ersten komplett selbstgeschrieben Layout Eins gestartet - und bin seitdem viele Schritte weiter gekommen, bis jetzt zum vorläufigen Endpunkt Vier

Responsive Web Design

Ich schau mit ab und zu meine Analytics Zahlen an und da interessieren mich weniger die absolute Zahl von irgendwelchen Besuchern, als was sie machen, mit welchen Geräten sie auf dem Blog kommen, mit welchen Browser sie unterwegs und so weiter. Und da gibt es ein ganz klarer Trend - mobile ist die Zukunft!

Zur Zeit laufen ungefähr 25% aller Besucher mit Smartphones, Pads whatever hier ein und das war mir ehrlich gesagt für mein Layout Eins schon klar und habe das da auch Rückblickend gut umgesetzt - aber mit Zwei hat das nie so hingehauen. Ich wollte Zwei immer fit für alle Arten von mobilen Geräten machen und letztlich war es einfacher, was neues zu schreiben, als das Alte umzubauen. Zwei ist Geschichte, Vier ist jetzt wieder 'full responsive'.

Ich arbeite an Vier insgesamt seit vielleicht drei Monaten und wie ich auf eure Reaktion auf Layout Drei gemerkt habe, ist der Wiedererkennungswert eines Blogs nicht zu unterschätzen. Das Grundlayout von Zwei wollte ich eigentlich nichgt mehr verändern, aber bestimmte immer wieder kehrende Kritikpunkte lösen.

Die Navbar

Am häufigsten wurde in den letzten Monaten nach einer Suchfunktion im Blog gefragt - der Witz war, so was gab's schon die ganze Zeit, nur hat es niemand gefunden :(. Mit anderen Worten, das war mit meiner UI schlecht gelöst.

Genau das gleiche habe ich oft über meine Archiv, meine Kontaktseite und die anderen Seiten gehört - die Idee, die Seiten in dem Teaser zu verlinken halte ich nach wie vor für gut, aber für viele war's vielleicht doch zu ungewohnt. Deswegen ab jetzt eine klassische Navbar, wo ihr alles wichtige auf einem Blick findet.

Unter der Haube

Während sich nach außen hin wenig geändert hat, ist unter der Haube alles anders geworden. Das letztlich nur als Arbeitsprobe geschriebene Layout Drei war ja das erste 100% Boilerplate Layout von mir und ich habe damals ja schon angekündigt, das nächste Layout mit dem Bootstrap Framework zu bauen - eh voilà, gesagt getan :).

Bootstrap ist grob gesagt ein modular aufgebautes Entwicklungswerkzeug für Layouts und besteht aus HTML und CSS für Typografie, Formulare, Buttons, Tabellen, Raster-System, Navigationselemente ... whatever und hat optionale JavaScript-Erweiterungen. Durch den modulare Aufbau könnt ihr selbst entscheiden, welche Komponenten er in eurem Projekt verwenden möchtet und welche nicht.

Make long story short, Bootstrap ist ein unglaublich mächtiges, professionelles Entwicklertool. Punkt. Durch den Einsatz von Boostrap sollten die Browser-Inkonsistenten, also das der Blog/ Post in unterschiedlichen Browsern unterschiedlich aussieht, endlich der Vergangenheit angehören.

Blogger besitzt einige wirklich fiesen CSS Vorgaben - in Vier ist das nun Vergangenheit. Vor allem ist Bootstrap durch den modularen Aufbau Zukunftssicher - ich benutz jetzt vielleicht 10% der Möglichkeiten, könnte aber jederzeit weitere Module mit in den Blog nehmen. Stay tuned!

Farben, Schrift

Ich habe einige kleinere Layoutentscheidungen getroffen und möchte die noch kurz erklären. Die Linkfarbe ist jetzt zum Beispiel wieder blau ... ihr werdet lachen, aber tatsächlich erkennen viele Leute einen Link sofort an seiner blauen Farbe, während andere Farben als Überschrift, Layout Spielerei oder sonst was durchgehen. Links sind blau. Ich will, das Leute auf meine Links klicken - also mache ich meine Links blau :)

Wer hier mitliest hat vielleicht mitbekommen, dass ich erklärter Anhänger von die-Schriftgröße-kann-gar-nicht-groß-genug-sein bin - ich weiß natürlich, dass das ein paar Leuten definitiv zu groß ist. Ich habe nun einerseits die Schriftgröße um einen Punkt verkleinert - allgemeiner Jubel :) - andererseits solltet ihr jetzt im Browser die Schriftgröße mit STRG + und STRG - individuell anpassen können, ohne dass die Layout-Proportionen zerfallen. Probiert es aus!

Ladezeit

Der Blog ist auf Ladezeit optimiert und im Google Speed Test schneidet die ganze Geschichte inzwischen ordentlich ab - ich habe dazu praktisch alles an Javascript über Board gekippt, was Einfluss auf die Ladezeit haben könnte und dazu gehört sowohl das Infinite Scroll Script als auch das Back to Top. Beide Scripts verwenden einen einen Scroll Handler [d.h. sie feuern, wenn ein Scrollereigniss geschieht] - und beides bremst die Performance von dem Blog aus. Ich habe mir die Zahlen mit und ohne Script angeschaut und habe mich dann entschlossen, dass beide Funktionen die ganze Geschichte zu behäbig machen, also weg damit.

Weitere Posts

Baustelle

Noch ist nicht alles fertig und ich muss vor allem alle Posts noch durchgehen, damit ich sehe, ob vor allem das alte Zeug zufrieden stellend funktioniert. Wenn ihr also einen alten Post findet, der Vogelwild ausschaut, dürft ihr mir das gerne sagen.

Eure Meinung ist gefragt!

Letzlich macht ein Layout nur Sinn, wenn es die Besucher verstehen und nutzen - also: Was haltet ihr von Vier? Besser, übersichtlicher, lesbarer als vorher? Völlig wurscht? Nö, Zwei hat euch besser gefallen?

Danke!

An der Stelle noch mal herzlichen Dank an meine Tester Alexander, Paul und Tom!