Dieser Beitrag wurde Original freundlicherweise vom  ben_griffith erstellt.

Anschaulich betrachtet ben_griffith allgemein das Thema flexible Blog Darstellung gerade auch für mobile Endgeräte und geht auf entsprechende Beispiele ein.

Des weiteren finden Sie eine Templatevorlage mit Beispielen für die flexible Darstellung eines Blogs mit der Blogsoftware Dotclear als Basis für die kostenlose Blog Software Dotclear am Ende des Beitrages.


Weltweit stieg der Gebrauch von Mobile versus Desktop nur um bescheidene 6% in den letzten 12 Monaten und liegt bei 15% zu 85% grob gesagt.

Bei aller Euphorie oder Panik, je nachdem welchem Lager man angehört, sind smaller Devices noch immer limitiert für die Nutzung der meisten Webinhalte. Wenn man hört, dass 60% aller traffic über Facebook via smaller Devices vorgenommen werden, so mag das für Facebook zutreffend sein, aber würde eine deutschsprachige Website ähnliche Zahlen aufweisen können? Statcounter besagt, dass Deutschland nur ein Verhältnis von 6% mobile und 93% Desktops hat.

Inhalt und Länderspezifik sind demnach gefragt. Eine Read- and-Type Website wie Twitter oder Facebook werden international gelesen und erfordern nur geringen Anspruch. Zeige Text, Bilder und Finde.

Nicht alle Websites haben diesen bescheidenen Anspruch und vor allem unterscheidet sich die Leserschaft. Es nützt nichts, wenn man seine Website für den Anspruch eines Facebook Users umstellt, aber die Zielgruppe und Stammleserschaft keine Intentionen für Facebook besitzt.

Umgekehrt macht es wenig Sinn, eine Website im klassischen Layout anzubieten, wenn deren einziger Zweck ist, auf einem small Device gelesen und kommentiert zu werden.

Kürzlich fand ich eine Website im Internet, die Quellcode und seine Erläuterungen bereitstellte. Das Kopieren und Speichern von Quellcode ist nun wahrlich keine Tätigkeit, die der small Device Nutzer anstrebt. Als sehr unangenehm fand ich die riesige Schrift in der der Text geschieben war (24px), nicht zu erwähnen die der Headlines (es muss um die 60px gewesen sein). Der Eigentümer dieser Website bezeichnete sich zu meinem Erstaunen selbst als Designer. Er versucht seine Website als lesbar an smaller Devices, zugleich aber unerträglich an Desktops zu präsentieren.
Dabei gibt es längst Möglichkeiten, dieses zu vermeiden.

Seit zwei Jahren fällt mir auf, dass mehr und mehr Websiteeigentümer glauben, dass je größer die Schrift im CSS ausgelegt, um so besser am iPad zu lesen ist. Die Annahme ist unhaltbar, weil das iPad eine ganz andere Interpretation von Schrift hat. Man muss nur wissen welche.

Wir stehen vor dem Problem, dass smaller Devices alle unterschiedliche Auflösungen haben. Eine Website wird an einem iPad viel kleiner als an einem Samsung Tablet dargestellt, weil ersteres mit einer Breite von 2560px und letzteres mit 1280px in der Auflösung kommt. Zudem benutzen beide Webkit, was wiederum Schrift kleiner interpretiert als moz- oder o- oder ms-.

Wer den Anspruch hat, es allen Recht zu machen, weiß nicht wovon er redet. Es führt kein Weg dahin.

Dotclear hat mit dem Default Template Ductile und Polyvalence bereits zwei Themen, die HTML5 und ready for devices sind. Schaut man sich jedoch deren Templatedateien an, die Vorstellung diese nach eigenem Geschmack umzubasteln scheint schwer und Pannen sind nicht ausgeschlossen. Zumal Ductile am Desktop nicht jedermanns Geschmack sein muss.

Hinzu kommt, das beide Templates Javascript für die Umwandlung einsetzen. JavaScript befindet sich immer mehr in der Kritik, weil es Websites langsam macht.
Schalte zum Spass Javascript in Deinem Browser ab und schaue Deine Lieblingswebsites an. Du wirst überrascht sein, wie schnell die sich plötzlich laden und was alles verschwindet, Werbung zum Beispiel, und Dein Computer beruhigt sich auch mit einmal.

Aorakits wurden vor einigen Jahren von Kozlika als Basistemplates für alle möglichen Layoutkombinationen erstellt. Ich habe eines der wohl beliebtesten Aorakits, das C2, dem zweispaltigen Template, etwas verändert und bereits in seiner Grundfassung ließt es sich am Desktop, Smartphone und Tablet gleichermaßen. Wer den Anspruch hat, seine Website für 90% Desktop User erfreulich und für 10% smaller Device User lesbar zu machen, hat damit eine gute Basis.

Der Grund ist, dass das Layout flexibel ist. Es gibt eigentlich nur wenige Bedingungen, die für diesen Zweck erfüllt werden müssen:

  1. Das Layout muss fließen.
  2. Desktop und small Devises erhalten unterschiedliche Schriftanweisungen unter Verwendung @media. Bitte beachte, dass wenn wir etwas für eine @media Zielgruppe schreiben, müssen die anderen Zielgruppen ebenfalls bedient werden, sonst übernimmt der Browser die einzig verbleibende Anweisung. 
  3. Entscheidet man sich für ein Titelbild, sollte es so angelegt sein, dass Desktop und smaller Device User das Wesentliche sehen.
  4. Die Navigation fließt unter oder über den Blogtext (in meinem Beispiel unter). Soll Sie oberhalb des Blogtextes angeboten werden, kann auch ein 3-spaltiges Layout nützlich sein, wo die Navigation am Desktop links vom Blogtext, am Smartphone jedoch oberhalb angezeigt wird.

Der Grund, dass es für beide Zielgruppen gleichermaßen lesbar ist, liegt an diesem schlichten Code, der in der User_Head.html eingefügt ist:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

und in der CSS Datei befinden sich Beispiele in Punkt 1.

/* -----------------------------------------------------------------
1. STRUCTURE for smartphone, iPad and desktop
Note: Internet Explorer 8 does not support @media
------------------------------------------------------------------ */

@media (max-width: 600px) {
body { font-size : 80%;}
#top h1 a { font-size: 100%;}
#comment-form fieldset {width: 90%;}
.field,.field label,.field input,.field textarea {width: 100%;}
img { max-width: 100%;}
#sidebar {width: auto; max-width: 90%;}
}

@media (min-width: 800px) {
#top h1 a {font-size: 200%;}

}

/* ----- for iPad and its small font as "none" or "auto" or "percent"-----*/
.post {
-webkit-text-size-adjust: 110%;
}



Recht herzlichen Dank an ben_griffith für diesen interessanten Beitrag.

Wenn Sie für Ihren bereits bestehenden Dotclear Blog oder wenn Sie einmal die Blog Software Dotclear testen wollen mit dem flexiblen Mobile Theme, können Sie nachfolgend das Template "flexibility" für Dotclear herunter laden.

Testen Sie diese Datei am besten nur auf einem Testaccount und aus Sicherheitsgründen nicht auf einer scharfen Version, da keinerlei Garantie übernommen werden kann.