Ich bin momentan am Designen einer Website, bei der wir einen spannenden Post-Header machen wollen. Herausgekommen ist beim Spielen folgendes und ich finde es ziemlich cool, weswegen ich dacht, dass ich gleich mal drüber schreiben könnte.

See the Pen Shrinking Sticky Header by Myri (@mynimi) on CodePen.

Postübersichten sind etwas, worüber sich viele Blogger immer wieder Gedanken machen. Ich denke der Hauptgrund dafür ist, dass man durch sie eine einfache Übersicht darüber geben kann, was man schon getan hat, was auf dem Blog an Inhalt überhaupt vorhanden ist, ohne dass der User sich durch die ganzen Posts durchscrollen muss.

Postet man zum Beispiel Rezepte, ist eine Rezeptübersicht wirklich wahnsinnig schnell gemacht.

Viele Leute die ich kenne, machen diese Postübersichten manuell. Ich selbst habe bis vor Kurzen meine Tutorialübersicht auch manuell gemacht, darum war die Liste komplett unvollständig und ein paar Tote Links hatten sich darin auch noch versteckt. Doch dann kam Oliver’s Post hier und ich beschloss das mit der automatisierten Liste umzusetzen. Und seitdem habe ich es an keinem Tag bereut

Eine Frage im Blogger-Hilfeforum (übrigens solltet ihr alle dort dabei sein, wenn ihr euch mit Blogger beschäftigt, wir helfen gerne bei jedem Problem :D (Frage hier)) hat mich dann heute angeregt, dieses Tutorial zu schreiben.

Notiz Das hier ist bloss ein Praxis-Beispiel, Credit für die Ajax-Liste gilt Herrn Doetsch.

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.

Ein super einfaches responives 1-level Menu, mit Flexbox und gaaanz wenig JS.

A super simple 1-level menu with flexbox and just a teeny tiny bit of JS.

See the Pen responsive 1-Level Menu by Myri (@bekreatief) on CodePen.

Damit es hier auch mal wieder was zu lesen gibt, ausser das Versprechen, dass es denn bald wieder losgeht, schreibe ich jetzt mal wieder ein kleines Tutorial. Die ganzen Deadlines und der Weihnachtsstress haben mich nun doch etwas sehr eingeholt, aber als ich heute Morgen gefragt wurde, wie man denn einen Header macht, der sozusagen hinter dem Content liegt, wollte ich unbedingt eine Anleitung dazu für euch schreiben. Und hier kommt sie nun.

First of all so sorry for being a little lazy with my English in the posts, but the neglecting will hopefully end really soon. There are just a couple of deadlines and the necessary Christmas Stress right now that have been keeping me a little too busy. But when I was asked today how you'd create a header that lies behind the content, I wanted to write it for you.

Vor einer Weile habe ich beschlossen, für meine Buttons ein Sass Mixin zu schreiben, nur ist mir dabei aufgefallen, dass ich mehrere Farben brauche, die sich nicht ganz so einfach generieren liessen, wie anfangs gedacht. Und dann gab es noch das Problem der Schriftfarbe, welche entweder weiss oder schwarz sein sollte, je nach dem, was sich halt besser lesen liess. Man hätte mit mehreren Variabeln lösen können, aber ich hab beschlossen, mit Funktionen zu spielen und das Problem auf diese weise zu lösen.

Ich wurde letztens gefragt, wie ich denn meine Navigation sticky gemacht habe und habe versprochen, dass ich dazu einen Post schreibe.
Eigentlich wollte ich euch das Script präsentieren, das ich für mein Menu geschrieben habe. Da ich dieses in letzter Zeit für mehrer Projekte verwendet habe, ist mir aber aufgefallen, dass es ein bisschen Probleme macht. Das ist nicht das Problem meines sticky scripts, es ist das Problem von vielen Scripten. Nach Recherche und viel Trial und Error, habe ich nun ein Script zusammengestellt, dass das Problem nicht aufweist.

Ich habe schon ein paar Tutorials dazu geschrieben, wie ihr responsive Menus schreibt. Bei den komplizierteren, habe ich mich dabei bisher aber auf Frameworks oder andrer Leute Anleitungen verlassen. Mein letztes Menututorial ist aber auch schon eine Weile her. in der Zeit habe ich einiges gelernt und deswegen gibt es jetzt mein erstes "komplexes" Menu für euch. Und das alles nur, damit es für euch ganz einfach wird, das Menu zu verwenden.

I have written a few tutorials on here how to create a responsive menu. For the more complex ones I usually relied on framework or other people's explanations. But my last menu tutorial was written a while ago. In the meantime I learned a lot and that's why I am ready now to present a more complex menu today. And that's only because I wanted it to be super easy to use.