5202

ein Blog über technische Fragen zu Blogger

Ein responsive Layout für Blogger: EINS

von
Die letzte Woche war ziemlich heftig und ich hab hier kaum was geschrieben. Dafür heute als Ausgleich etwas besonderes, was es - meines Wissens - als Blogger-Layout noch nicht gibt: Ein Responsive-Layout mit horizontalem und vertikalem Grid für Blogger!

Eigenes Layout
Vor knapp zwei Monaten habe über die Grundlagen für ein eigenes Blogger-Layout geschrieben und eine kurze Demo dazu gebaut. Nun bin ich ehrgeiziger geworden und habe ein vollständiges neues Layout von Grund auf selber entwickelt - mein Layout EINS. Nach außen hin schaut das vielleicht  erst einmal nicht so spektakulär aus, aber ich garantiere, unter der Motorhaube' hat es mit herkömmlichen Blogger-Layouts nichts mehr gemein. Mit diesem Layout stelle ich ein hochflexibles 'ideales' Blogger-Layout vor, wo so ziemlich alles eingebaut ist, was mir über Layouts durch den Kopf geht.
Beta
Das Layout ist jetzt noch Beta, d.h. das ist nur als Test-Layout für Leute gedacht, die sich mit-Layout-bauen beschäftigen und Grundwissen über CSS und HTML mitbringen - für den 'normalen' Blogger ist das noch nichts. Ich rate z. Z. auch davon ab, das irgendwo anders als auf einem Test-Blog einzusetzen; viele Feinheiten fehlen noch. Die Grundstruktur ist aber fertig, stabil und einsatzbereit, deshalb stelle ich's auch an diesem Punkt der Entwicklung vor.

Demo: EINS

EINS

Eigenschaft: Responsive Design

Ich versuche die verschieden Eigenschaften dieses Layouts zu beschreiben. Ich fange mit Responsive Design an. Das meint, das sich die Struktur des Layouts an das jeweilige Ausgabegerät anpasst. Blogger besitzt eine 'mobile' Seite - die nur mit dem iPhone funktioniert -,  aber es gibt unzählige Bildschirmgrößen und Endgeräte. Mein Ziel war ein Layout im echten responsive Design zu schreiben, mit 100% flexiblen Größen, was auf allen Ausgabegeräte funktioniert. Was das genau meint, seht ihr an drei Beispiel-Abmessungen

Desktop-Größe
iPad-Größe
Smartphone-Größe
Ihr könnt EINS langsam zusammenschieben und wieder auseinanderziehen - ihr seht dann die verschiedenen 'Sprungpunkte'. Das Layout funktioniert über die Bildschirmgröße des Ausgabegeräts, d.h auch auf 'kleinen' Desktop-Bildschirmen wird das Layout funktionieren. Außerdem sind alle Größenangaben ollständig in % oder em geschrieben, d.h. das die Darstellung wird auch auf Bildschirmen mit hoher Pixel-Dichte konsistent sein - das spielt etwa bei zukünftigen iPads mit Retina-Display eine Rolle.

Vertikales Grid

Ich habe das Layout in einem Raster von zwölf Spalten angelegt. Jedes Element auf der Seite kann die vertikale Größe 'eins' bis 'zwölf' haben. Das vollständige Raster findet ihr hier. Schiebt euren Browser langsam zusammen und zieht ihn wieder auseinander und ich denke ihr werdet verstehen, was ein vertikales Grid ist.
Wozu?
Ich habe in der Demo zu EINS nur vier verschiedenen Größen eingesetzt - aber jedes Element der Seite steht zu jedem anderen Element in einem festen Verhältnis. Das macht die Seite in jeder Größe optisch 'ruhig'. Das ganze schaut natürlich unspektakulär aus - aber glaubt mir, 'klassisches' Design könnt ihr euch auch noch in fünf Jahren anschauen, was 'Spektakuläres' mag in sechs Monaten schon langweilig sein. Mein Ziel ist erst einmal ein klassisches 'gutes' Layout zu schreiben, das spektakuläre kommt dann vielleicht noch oben drauf.

EINS ist flexibel. Mit diesem Grid kann ich mit wenigen Zeilen Code das Layout in jede beliebigen Aufteilung umbauen - es wird immer funktionieren und immer das proportionale Verhältnis wahren.

Horizontales Grid

Ein vertikales Grid war schon ein hartes Stück Arbeit, noch schwieriger war das Layout horizontal auf eine Grundlinie auszurichten. Grundlinie meint, das jedes Element im Blog zu jedem anderen Element horizontal auf der gleichen Linie steht. Hier ein Beispiel:
Ein horizontales Grid ist das Parade-Beispiel für Design, was auf den ersten Blick niemand bemerkt, einfach aus dem Grund, weil normalerweise niemand die Grundlinien nachmisst. Aber: So etwas macht ein Layout sehr 'ausgewogen', ohne das eure Besucher jetzt direkt benennen könnten, woran das liegt. Ein horizontales Raster ist ein Haufen Arbeit und genau deswegen nicht besonders populär, aber inzwischen halte ich's für unverzichtbar.

Markup

Wer mal einen Blick in die Blogger-HTML geworfen hat, dem werden die unzähligen ineinander verschachtelten Div-Container aufgefallen sein. Blogger-Layouts sind komplex. Dabei sind sie noch nicht schlecht geschrieben, sondern müssen einfach viele Fälle abdecken. Aber dieser Div-Brei hat mich schon immer gestört und mein Ziel war ein 'schmalen' Code zu schreiben. Das ist etwa mein Markup:
  <body expr:class='&quot;loading&quot;   data:blog.mobileClass    
&quot; &quot;   data:blog.pageType'>


<div class='container'> 
<nav>
    
    </nav> 
<header>
    <div class='row'>
     <div class='fourcol'>
      <b:section class='header' id='header-1' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='5202-A4 (Header)' type='Header'/>
</b:section>
     </div>
     <div class='fourcol'>
      <b:section class='header' id='header-2' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
     </div>
     <div class='fourcol last'>
      <b:section class='header' id='header-3' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
     </div>
    </div>
   </header>
   
   <div id='mainContent'>
    <div class='row'>
     <div class='threecol'>
      <b:section class='main' id='main-1' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
     </div>
     <div class='ninecol last'>
      <b:section class='main' id='main-2' maxwidgets='2' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blogposts' type='Blog'/>
</b:section>
     </div>
    </div>
   </div>
   <footer>
    <div class='row'>
     <div class='twelvecol last'>
      <b:section class='footer' id='footer' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
     </div>
    </div>
   </footer>
   </div> <!--! end of #container -->

 </body>
That's all. Vergleicht das mal mit einem 'normalen' Layout. Oder mit einem Layout von 'Aristeer' oder ähnlichen YSWYG-Editoren. Gerade diese Editors erzeuge wahre Div-Berge. Mein Markup ist auf Geschwindigkeit ausgelegt. Im Google Speed-Test bin ich etwa auf mobilen Geräten 30% schneller als die mobile Ausgabe von Blogger - und dabei ist mein Layout noch nicht mal mobile Optimiert.

Blogger-Blog Widget

Ich habe in das Blogger-Blog Widget verschiedene Funktionen eingebaut, die es von 'Haus aus' nicht hat - etwa auto Jump-Break mit Vorschau des obersten Bildes. Vieles davon setze ich meinem Beispiel [noch] nicht ein, aber ich habe in diese Richtung verschiedene Experimente gemacht, hier etwa eine 'Foto-Galerie' Ansicht des Layouts


gitHub

Den Quelltext vom Layout findet ihr auf gitHub. Ich wäre an Austausch und Weiterentwicklung von EINS interessiert. Falls hier mal jemand aufschlägt, der Interesse an Blogger-Layouts hat, fände ich's interessant zu sehen, was andere machen - fühle mich an dem Punkt gerade a bisserl als Einzelkämpfer.

Rechtliches

Wie alles auf diesem Blog steht dieses Layout unter der DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE , d.h. ihr könnt damit zu jedem Zweck alles machen was ihr wollt, es gibt keine Einschränkungen. Yeah! Ich alter Hippe ...

Kommentare

Support für dieses Layout gibt's erst mal keinen  fragt doch einfach nach - aber das ist wie gesagt eine Beta-Geschichte für Leute mit Interesse an Schreiben von Layouts haben. Wer lediglich ein Blogger-Layout für den 'produktiven' Einsatz sucht, ist hier [noch] fehl am Platz. Da kommt aber sicher noch etwas von mir - stay tuned! Für Wünsche und Anregungen habe ich immer ein offenes Ohr.