Als ich mit dem Schreiben von Blogger Templates angefangen habe, habe ich das alles hauptsächlich im Blogger Editor selbst gemacht. Das einzige wofür ich HTML und meinen Editor auf dem Computer benutzte, waren meine "Skizzen", die im Grunde eigentlich Box-Modelle waren.
Seit diesen Anfängen habe ich nun schon so viele Templates geschrieben, dass ich ziemlich schnell feststellte, wie ungünstig das war. Ich begann damit Prototypen in HTML und CSS zu schreiben, die schon etwas mehr Style hatten.
Mittlerweile bin ich so weit, dass ich nicht einmal mehr die schlussendliche Funktionalität im Blogger Editor schreibe, sondern nur noch teste, ob das auch wirklich so ausschaut, wie ich mir das vorstelle.
In diesem Tutorial soll es darum gehen, wie man am besten einen Prototypen für ein responsives Blogger Template schreibt. Diese Vorgehensweise kann genauso gut auf andere Seiten angewendet werden. So mache ich es, wenn ich WordPress Themes schreibe, genauso.

Dies ist der erste Teil meiner Prototypen-Serie. Diese Methode verwende ich für einfache Templates, bei komplexeren, verwende ich Methode zwei, die so bald wie möglich folgt.

When I first started writing blogger templates I wrote most of it in the Blogger Editor itself. The only time I took out my editor and wrote pure HTML was when I wrote my "Sketches" which were basically models of my overall look.
Since those beginnings I wrote a lot of templates and found out pretty fast how flawed this whole workflow was. I started writing prototypes that had most of the basic styling already in it.
Now I am at a point where I write everything in my editor. A prototype that basically already looks like the end result and the blogger template with all the functionality, that only lands in the Blogger Editor to be tested if everything works out.
In this tutorial I want to go over writing a prototype which which our stylesheet and markup will be done. This workflow can also be used for other CMS' as well. That's how I do it if I write a WordPress Theme as well.

This is the first part of my prototyping series. I use this method for simple templates, when working on more complex templates, I will be using method two, which will follow as soon as possible.

Wie man ein Blogger Template schreibt, habe ich schon ein paar Mal erklärt. Doch vor einiger Zeit habe ich SASS in mein Leben gelassen und seit dem ist es auf meinen CSS Wegen zu meinem ständigen Begleiter geworden, so auch als ich ein bisschen am aktuellen KreaTief Design gearbeitet habe. Dabei habe ich für mich einen Workflow entwickelt, der die Arbeit am Template enorm vereinfacht und bei der Personalisierung von Templates viel mehr Möglichkeiten bietet als der Blogger Vorlagen Designer. Diesen Workflow möchte ich euch heute zeigen.

How a responsive blogger template is written is nothing I haven't talked about before. But a while ago I let SASS into my life and since then it has not left my side on my css adventures. It did not even leave, when I was working on the current bekreatief template. While I was working on that one, I created this workflow for myself, which I found to be so much easier and faster than how I did it before. Also it is so much easier to personalize my templates now, than using the template designer. How to write a responsive blogger template really fast, that's what this tutorial is about.

To all the English Readers: There is no English Version of this Tutorial, because there are a lot of very detailed posts about writing variables for blogger in english, and since I usually follow the rule: "Do What You Do Best, Link To The Rest" I'm just gonna send you to the place where I learned it. Link. Still, if you have any questions, feel free to ask.

Der Grund warum ich diesen Post schreibe ist der, dass ich bei meiner Suche nach Tutorials zu diesem Thema bloss uralte oder sehr unvollständige Posts (auf Deutsch) gefunden habe. Ich sage nicht, dass ich einen allumfassenden Post schreiben kann, aber zumindest einen Grossteil in abdecken möchte, für all diejenigen, die gerne eigene Variabeln in ihren Blog schreiben möchten, oder das Ziel haben Templates zu erstellendie mit dem Vorlagendesigner kompatibel sein sollen. Trotzdem befolge ich eigentlich immer den Spruch: "Do what you do best, link to the res" (tu, was du am besten kannst, verlinke den Rest) und verweise auch für alle unter euch, die mit English zurechtkommen auf den Link oben, denn dieser Post hat mir das Variabelnschreiben beigebracht.

Heads Up! Seit der Veröffentlichung hier hat Oliver eine Version mit dem alten Kommentarsystem veröffentlicht. Den Grundcode dafür findet ihr hier.

Heads Up! Since this tutorial has been published Oliver wrote a version with the old comment system. The basic code can be found here.

Und da ist es. Das neue Tutorial zu einem Responsiven Blogger-Template, welches auf Five basiert und bloss die Bootstrap-CSS verwendet, aber auf das Bootstrap-Menü verzichtet, welches ich bisher immer verwendet habe. Im Rahmen dieses zweiten Tutorials wollte ich eigentlich Drawing of A Rose genauer erläutern, spontan habe ich aber beschlossen, dass ich mehr Bock hab ein neues Template zu schreiben. ^^

And here it is. The new tutorial to a responsive blogger template, which is based on Five and only using the bootstrap CSS to have some basic style, but not using a bootstrap menu, because I already used this to often. Actually I intended on writing this based on my template Drawing of A Rose, but I just felt like writing a new one ^^

Ich hab einen neuen CopyPasteLove-Post geschrieben.
Templates Schreiben
Wer bei meinem How To responsive Blogger Template mit der Länge überfordert war, bekommt dort eine etwas kürzere Version, die keine externen Stylesheets benötigt, ausserdem könnt ihr euch ein anderes Beispiel ansehen. Wie Frosted Cupcake entstand.