Blogger Template Prototyping (1/2): HTML Workflow ✤✤✤✤(✤)

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.


English Deutsch

Endprodukt

Ich werde nicht gross auf den Code eingehen, aber ich habe diesess Tutorial geschrieben, während ich am aktuellen KreaTief Template arbeitete. Tangible hat einen Prototypen erhalten, den ihr euch hier ansehen könnt. Und ihr könnt euch auch den Code und die einzelnen Schritte ansehen.

Arbeitsumgebung

Als erstes brauchen wir eine Arbeitsumgebung. Ihr erstellt also am besten einen Ordner und erstellt darin eure Files.

Programme

Was Programme angeht kommt ihr sicher um einen Editor nicht herum. Wer schon mal Posts von mir gelesen hat wird wissen, dass ich Brackets benutze. Kostenlos und absolut grandios!
Ich werde im fertigen Template meine Scripte und das Stylesheet auf GitHub hosten und diese hätte ich dann gerne möglichst klein. Ausserdem schreibe ich die Styles in Sass, also werde ich auch noch einen Compiler verwenden. Hier fällt meine Wahl auf Prepros, weil es mir das Terminal erspart und super schnell geht. Mittlerweile ist das Programm nicht mehr kostenlos (unlimitierte Zeit zu testen, allerdings). Ich bin ehrlich, ich mag es nicht wenn ich für Dinge zahlen muss, die ich auch kostenlos haben könnte, aber Prepros ist neben MS Office wahrscheinlich meine beste Programm-Investition. Ich benutze es tagtäglich und mag es jeden Tag mehr. [Und Werbung Ende]
Und dann braucht ihr natürlich noch einen Browser, aber das sollte klar sein, am besten mehrere und mindestens ein Smartphone und/oder Tablet. (Prepros ist auch da sehr hilfreich mit dem Testen).

Tipp: Vor einer Weile hat Oliver mich auf Emmet aufmerksam gemacht und seither schreibe ich fast nur noch mit Emmet. Für Brackets und viele andere Editoren gibt es schön eine Möglichkeit es zu installieren, seht es euch an!

Ordnerstruktur

Okay, kommen wir zu den Dateien die ihr braucht.
Falls ihr ein eher simples Template habt, das auf statischen sowie Postseiten nicht gross anders aussieht als auf der Homepage, braucht ihr nur eine einzige HTML-Datei, wollt ihr das Ganze etwas "ausgefallener" haben, dann macht ihr am besten drei. Für diesen Fall würde ich dann allerdings womöglich schon Jekyll in Betracht ziehen. Dazu aber später mehr.
Neben den HTML-Dateien braucht ihr alles an externem Zeug was ihr brauchen wollt. Für mich heisst das meist jQuery und FontAwesome.
Und dann natürlich mein absoluter Favorit, der Sass Order. Meine Struktur ist sehr simpel. Grundsätzlich habe ich hier mein Toolkit, das ich von einem Projekt ins nächste mitnehme und dann baue ich basierend auf dem Projekt den Rest auf. Und wenn ihr in eurem Blog Bilder verwendet, solltet ihr auch einen Ordner dafür anlegen, schliesslich wollen wir mit richtigen Bildern und Text prototypisieren.
Die Dateien die ich also für gewöhnlich anlege, sind wie folgt: (Ordner in KAPITÄLCHEN, Dateien nicht).

What we will be talking about

I won't really talk about the code, but I was writing this post while working on the prototype for my current KreaTief template. Tangible got a prototype which you can see here. And you can also check out the Code and the steps it took to get there.

Working environment

First you need a place to work at. So create a new folder and create your structure in there.

Programs

When it comes to programs of course you will need an editor. If you have read a few of my posts, you'll most probably know that I religiously use Brackets. It's free and absolutely fantastic!
I am going to be hosting the finished stylesheet and scripts on github, so I would like to have those files as small as possible. Also I do like to write my styles in Sass. So I will use a preprocessor as well. Here my choice falls on Prepros, because it saves me from using the terminal and is super fast. For a while it is no longer free (there is an unlimitied trial, though). I'm honest, I do not like paying stuff where there are free programs that almost do an equally good job, but Prepros is next to MS Office probably my best Program-investment. I use if daily and like it more every day. [And comercial end]
And then you'll need a browser of course, or multiples, if you can. And a smartphone or tablet to test it on mobile. Prepros comes also with this awesome functionality that lets you test local sites on mobile, as soon as you are within the same network.

Tipp: A while ago Oliver introduced me to Emmet and since then I write almost all my html with it. For Brackets and a few other editors there's an extension to use. Check it out!

File Structure

Okay, let's talk about files.
If you are working on a simple template, you won't need multiple html-files to create each and every look of the site. (if you have a more complex site, wait for part 2). Other than that take all of the external resources you need and my absolute favourite, the sass file. My structure is very simple. Basically I travel with a toolkit, and then I just go from there. And if you are using images, have those ready as well.
Okay, to start tangible my folder looked like this (directories in CAPS, files not).

|root
|--SASS/
|--|--ASSETS/
|--|--|--_prism.scss
|--|--|--_font-awesome.scss
|--|--|--[ + all font-awesome partial files ]
|--|--MODULES/
|--|--|--_all.sass
|--|--|--_colors.sass
|--|--|--_functions.sass
|--|--|--_mixins.sass
|--|--|--_typography.scss
|
|--|--PARTIALS/
|--|--|--COMPONENTS
|--|--|--LAYOUT
|--|--|--_base.sass
|--|--|--_general.scss
|
|--|--_reset.scss
|--|--_temporary.scss
|--|--main.sass
|
|--IMG/
|--|--1.jpg
|--|--2.jpg
|--|--3.jpg
|--|--4.jpg
|--|--5.jpg
|
|--JS/
|--|--jquery-2.1.1.min.js
|--|--prism.js
|--|--scripts.js
|
|--FONTS/
|--|--[ + font-awesome Fonts ]
|--|--[ + Roboto Fonts ]
|
|--index.html

Wie ihr sehen könnt schreibe ich meine Hauptstyles in der "neuen" Syntax von Sass, die eingerückte Syntax verwende ich allerdings weiterhin für files die vorwiegend Variabellisten sind, aus imports bestehen oder Mixins und Funktionen sind. Aus dem einfachen Grund, dass sie viel schneller geschrieben sind. Bei grösseren komplexen Files kann man schnell den Überblick verlieren, aber bei so kurzen Zeilen bin ich ganz eindeutig ein Fan der Ursprungssyntax. Aber ihr macht da natürlich was ihr wollt.
Etwas mehr über Sass habe ich schon in meinem Tutorial mit meinem neuen Template Workflow erklärt, ich gehe jetzt einfach mal davon aus, dass ihr Sass schreiben könnt.
Dann noch die ganzen anderen Sachen, von denen ich vorhin schon gesprochen habe.

Markup

Kommen wir zum Markup.
Wie immer basiert mein Template auf five. Oliver hat grundsätzlich kein grosses Markup vorgegeben, es ist ein Header drin und die Artikel sind im HTML-Element article.
Ihr könnt euch schon daran orientieren, oder ihr schreibt den Prototypen einfach so wie ihr ihn haben wollt und kümmert euch nachher darum, dass das alles richtig ausschaut.
So mach ich das für gewöhnlich.
Was sich aber definitv lohnt sind Klassen zu übernehmen, die von Blogger vorgegeben sind. So sind die index-seiten mit einer body-Klasse .index versehen. Die Post-seiten haben die Klasse .item und statische Seiten die Klasse .static_page. Und dann schreibt ihr einfach drauflos. Ob ihr für jeden Seitentyp einen Prototypen schreiben wollt, bleibt nachtürlich euch überlassen. Bei komplexen Templates, die unterschiedlich aussehen auf den Subseiten, tu ich das für gewöhnlich, aber bei Tangible, habe ich das nicht gemacht, sondern einfach nur einen index-prototypen.
Ich versuche möglichst nach jedem grösseren Schritt einen commit zu machen, sodass der ganze Prozess über Git einfach nachvollziehbar ist, darum gehe ich jetzt nicht allzu sehr ins Detail. Aber ihr könnt die ganzen rein prototypen-Schritte hier nachvollziehen.
Ich habe mein Markup geschrieben, wie ich es mir vorstelle und mir dann mit Prepros die Live-Preview angesehen.
Dann habe ich damit begonnen Sass zu schreiben.

Styling

Der Prozess des Stylens macht mit Prepros sehr viel Spass. Die Livepreview wird nahezu zeitgleich mit dem Speichern der Sass-dateien aktualisiert. Wenn ihr mit zwei Monitoren arbeitet oder die beiden Fenster nebeneinader habt, könnt ihr also eure Änderungen praktisch umgehend sehen.
Noch dazu regelt Prepros die Prefixe für euch, ihr müsst nur Autoprefixer aktivieren, also macht CSS schreiben einfach nur total viel Spass und geht sehr schnell. Sass wird euch seeeeehr viel Zeit sparen.
Für alle, die meine Prepros-Einstellunge interessieren, habe ich das Prepros-File integriert. Wenn ihr euch den Prototypen runterladed, könnt ihr die Einstellungen sehen.

Scripts

Was scripte angeht, habe ich jQuery integriert, prism (was ich für syntax-hightlighting brauche, also grundsätzlich nicht teil des Prototypen) und skrollr. Skrollr habe ich schon einmal vorgestellt (hier), ich habe es hier für den Header Effekt verwendet. Und dann habe ich mein ganzes anderes Scripting in ein züsatzliches file gesteckt. Am Ende lass ich Prepros alles in ein File stecken, minifizieren und lade dass dann im Template.

Vorgehen

Okay, zum Vorgehen, bei einem erfolgreichen Prototypen. Das Ziel ist es grundsätzlich alles nur noch übertragen zu müssen. Wie ihr sehen könnt, war das bei mir nicht der Fall, weil der Header in Blogger streiken wollte, obwohl er im Prototypen genau so funktioniert, wie ich ihn haben will, aber ansonsten habe ich versucht schon an Dinge zu denken. Ein Beispiel ist das Preview-Bild für jeden Post.
Ich habe dort daran gedacht, dass ich das Bild nicht als Hintergrundbild setzen kann und mich darum schon um das Script gekümmert, dass das für mich übernimmt. Denkt an Details und wenn ihr alten Code in eurem Template drin habt, den ihr unbedingt braucht, dann vergesst nicht, den zu übernehmen.
Und dann steht dem Prototypen eigentlich nichts mehr im Weg.

Das war Workflow 1, was erwartet und bei 2?

Das ist die Methode, die ich für ganz simple Prototypen verwende, aber wenn ich komplexere Prototypen schreibe, die zwar Gemeinsamkeiten haben, wie zum Beispiel ein Header aber andere Inhalte, dann verwende ich jekll um die Seite zu schreiben und lasse Grunt anstelle Prepros arbeiten. Grunt und Jekyll sind etwas anspruchsvoller und erfordern die Benutzung eines Terminals, aber am Ende ist es doch extrem zeitsparend. Trotzdem war es bei Tangible keine Option, weil ich nur eine Seite geschrieben habe.

As you can see I do write SCSS for the most part of my stylesheets. I do this use the indented syntax for the files that are mostly variables or imports, mixins or functions. The simple reason behind is that I need less typing for those, but SCSS is a little bit easier to overview. BUt you do what you want.
I have talked a little more about Sass in previous tutorials, so this time I just assume you know how to write it.

Markup

Okay, let's talk markup.
As always my template is based on five. So I am loosely orienting myself on that but there is not a lot of markup there. So I just care to take the class-names etc.
For tangible, and every other prototype I will start by writing my markup, then open the live preview in one of my screens, the code in the other screen (sooo good, if you have two of them!) and then I just start writing up my Sass.

Styling

The process of writing Sass is a lot of fun with Prepros because livepreview almost instantly refreshes.
I do also use Autoprefixer, so I don't bother about browser stuff and just have the fun.
For all of you that care about my prepros settings, I did include the file in the git repo.

Scripts

For scripts I used jQuery, prism for my syntax highlighting ( so basically not part of the prototype) and skrollr. I have already talked about skrollr before (here), and did use it on the Header. then I did all of my scripting in a seperate file and concateneted all of these files into one, minified file that I can put into the site.

Process

What makes a successful prototype? Basically the aim is to not have to change a lot after you copied the markup and added the scripts and stylesheet. As you can see this did unluckily not completely work with tangible, because the Header refused to work as planned in Blogger, but otherwise try to think about things that might be harder to achieve in Blogger. For example the preview image. In blogger there is no possibility to set the first image URL as a background image, so I wrote a script for it, which I tested in the prototype already.
Think about Details and if you have some important things (CSS, Links etc in your old template) make sure to take them with you.

That was Workflow 1, what's to come in part 2?

That's the method I use for simple prototypes. But for more complex sites I will use jekyll and Grunt to generate my site, handle Sass and liveprevies. Grunt and jekyll are a little bit harder to set up and do need some work within the terminal but nothing too bad and in the end it will save you quite a lot of time. Still it was no option for tangible, because I only needed this one look.