Blogsoftware Dotclear - Infos und Tipps auf Deutsch

Dieser Beitrag wurde Original freundlicherweise vom  ben_griffith erstellt.

Dass es hierbei um mehr als nur Monitorgröße geht, zeigt der folgende Artikel. Es geht um die Vormachtstellung in den nächsten Jahren. Gewinner zu sein, ist alles und wie es ausschaut, hat es Microsoft geschafft, Apple in Zugzwang zu setzen und Adobe muss gar um seine Produkte fürchten.

Webdesign hat sich seit 1990 regelmäßig geändert. Mit neuen Browserwebstandards lösten neue Trends alte ab, und Webdesigner wurden gut dafür bezahlt, Websites zu erstellen. Als Internet richtig in Fahrt kam, Ende der 90er Jahre, stellte Microsoft Frontpage bereit und plötzlich bezeichnete sich jeder, der eine Website mit diesem Programm erstellt hatte, als Webdesigner. Am Ende der Frontpage Ära 2005 kaufte Adobe Macromedia, um mit Dreamweaver das bessere Programm zu erhalten, weil deren eigenes GoLive zu schlecht war, um weiterentwickelt werden zu können. Flash von Macromedia hatte bereits Anfang 2000 seinen Siegeszug gestartet, scheiterte aber vorerst an schwachen Internetverbindungen. Als Adobe Macromedia aufkaufte, hoffte es, mit Flash und Dreamweaver die Weboption der Zukunft erhalten zu haben. Mit Dreamweaver entstanden layout- und designtechnisch betrachtet erste schöne Websites, auch weil Internet mittlerweile populärer und schneller war. Der vom linken bis rechten Rand fließende Text, unterbrochen von Bildern einen Absatz tiefer, aus den 90ern war Vergangenheit und Div Tags mit dazugehörigem CSS eroberten das Web. Webdesign erwies sich als Kunst und viele nutzten Photoshop um schönere Designelemente zu erstellen.
Adobe sah aus wie der uneinholbare Gewinner.

Als Apple sein iPhone (2007) herausbrachte, wurde die Apple Website der Maßstab für Webdesign. Selbst Adobe konnte nicht der Versuchung widerstehen, es in Teilen zu kopieren. Mit der Herausgabe des iPads (2010) hat sich jedoch etwas getan, was damals niemand für möglich hielt. Apple hat mit dem iPad das Ende seiner Führung und des klassischen Webdesigns eingeläutet. Safari am iPad verhält sich wie der "Anti-Christ" des Webdesigns.

Wie Apple hat vor allem Adobe das Problem, dass seine Produkte veraltet sind. Webstandards haben sich mit CSS3 und HTML5 so gravierend verändert, dass man kein Photoshop benötigt, um schöne Button zu erhalten, und die klassische HTML Page hat ebenfalls ausgedient, so dass man kein Dreamweaver mehr benötigt, um Websites zu erstellen. Ganz zu schweigen von Flash.

Dass Photoshop ein Codeproblem hat, ist bekannt. Es ist alt und kann nicht mehr erweitert werden. Nicht umsonst werden immer mehr neue Funktionen in Lightroom untergebracht. Adobe ist gezwungen, Photoshop neu zuschreiben, damit dieses mit den neuen Entwicklungen mithalten kann. Zudem scheinen die Ausgaben für Macromedia Produkte nicht mehr die Abzahlung des Kaufpreises zu decken. Das kostet Geld und Adobe veränderte im Dezember die Upgradeberechtigung, um kurzfristig schneller an Cash zu kommen. Offensichtlich sind die Ausgaben zu hoch und neue finanzielle Wege müssen gefunden werden, um die laufenden Kosten zu decken.

Als Microsoft im Sommer 2012 begann, Windows 8 populär zu machen, änderte sich mit einem Schlag die Priorität: Das schlichte auf wenige, aber fröhliche Farben und Kanten setzende Layout, das ohne runde Ecken und bunte Icons auskommt, ist der Maßstab und Apple Design is out and gone. Werbemacher entdeckten Kacheln und verwendeten nicht mehr als eine handvoll Farben, die geradezu an die klassischen 256 HTML Grundfarben erinnern. Und wie zur Bestätigung, das aus der Mode gekommene animierte Gif, verdrängt Mitte 2000 von Flash, kommt ebenfalls zurück.

Windows 8 ist entgegen allen Unkenrufen vor allem von deutschsprachigen Experten ein großer Erfolg, mehr genutzt als Windows 7 seinerzeit im gleichen Zeitraum, und bei seinen Anwendern beliebt. Damit verbucht Microsoft auch einen Designerfolg und Apple ist gezwungen, nicht nur sein Design zu verändern, sondern, wie Kacheln und Windows 8, auch sein iOS und OS miteinander für die nächste Generation zu verschmelzen. 

Was wie der Gewinner vor 2 Jahren aussah, ist nur ein Jahr später in der Entwicklung zurückgeworfen.

Ich habe 2008 den Webdesign Index 7 gekauft, der die besten Websites für 2006 vorstellt. Webdesign Index  wird seit 2005 herausgegeben und schaut weltweit nach den schönsten Themen unter Aspekten Design, Farbe, Aufbau.

2006 war insofern ein sehr schönes Jahr, weil Webdesign sich im Wesentlichen noch auf seine HTML Wurzeln berief und noch nicht von Content Management Software (CMS) in die Bedeutungslosigkeit getrieben wurde. Es gab damals schon schlichte Websites, aber auch verspielte, wie Axel Prahl's Website. Schau Dir Prahl's website an. Es ist eines der Relikte alten Designs, die noch immer existieren. Die meisten Websites, deren Layout Webindex Design in 2006 faszinierten, haben keine 2 Jahre später auf ein CMS umgestellt und kämpfen seitdem mit ihrem Einheitslayout, das für alle Seiten gleich aussieht.

Wir hatten seit Ende der 90er Jahre das Problem, dass es unterschiedliche Monitorgrößen und Monitorauflösungen gab. Die alte Regel, mach Deine Website nicht breiter als 800px, sah zwischendurch als überholt aus, weil der Monitor mit 1280px Breite die Mehrzahl darstellte, jedoch hat sich dass seit dem Smartphone/Tablett Boom geändert.

Für Smartphones wurden schnell Umgehungen angeboten. Diese lustlos aussehenden Einheittemplates, die nur Artikelüberschriften anzeigen und heavy content gar nicht erst lädt, kamen schnell in Mode und das klassische Desktop Layout wurde nicht in Frage gestellt.

Seit jedoch 2010 das iPad herauskam, stehen wir vor einem gravierenden Problem: Webdesigners wollen uns einreden, dass wir Websites für Tablets und Smartphones und dann erst für Desktops zu machen hätten. Alistapart.com ist nur eine von mittlerweile häufiger auftretenden Websites von Webdesignern, die sich für diesen Weg entschieden haben.  

Damit der iPad User ein angenehmes Lesegefühl hat, wird der Desktop User ungefragt gebeten, sich mit dem neuesten Trend anzufreunden: die einspaltige Website, die mit schlichtem Text auf einfarbigem Hintergrund in Übergrösse daherkommt.
Diese Entscheidung ist nicht getroffen worden, weil es das beste, sondern weil es das günstigste, ohne erheblichen Aufwand zu erreichende Layout ist. Das es auch anders geht, hat erfolgreich Amazon bewiesen. Seine Layouts funktionieren auf Smartphone, Tablet und Desktop hervorragend und keiner braucht sich vom anderen gestört zu fühlen.

Das Gute an Dotclear ist, dass es erlaubt, jede Form - die Homeseite (home.html), den Blogeintrag (page.html), die Kategorieseite (category.html), die Tagseite (tag.html), das Archiv (archive.html und archive-month.html) und die Suche (search.html) - unterschiedlich anzeigen zulassen. Wir verwenden dazu

.dc-home { }
.dc-post { }
.dc-categories { }
.dc-category { }
.dc-archive { }
.dc-archive-month { }
.dc-tags { }
.dc-tag { }
.dc-404 { }
.dc-search { }

Das erfordert viel Arbeit, aber kann ein Blog zu einem Unikat machen, so dass sich der Aufwand lohnt.
Was man nicht vergessen sollte ist, dass man die Website doch für alle Zielgruppen lesbar und anwendbar macht.

Hierbei sollte man das Wesentliche in seinem Template berücksichtigen:

Der Smartphone User wird immer nur Text lesen wollen und schert sich nicht um Design.
Der Tablet User hat wie seinerzeit der Desktop User eine Auflösungsspanne von 1200px bis 2500px. Somit sehen die einen zu viel oder die anderen zu wenig im jeweils extremsten Fall. Wir haben somit die Entscheidung zu treffen, wie breit in Pixels unsere Website sein soll. Die Angabe der Breite in Prozent und eine max-width ist in jedem Fall ratsam.

Was sich nicht geändert hat, ist die alte Regel, mach Deinen Text nicht breiter als max. 650px, und da spielt es keine Rolle, ob Desktop oder Tablet.

Wie bereits in dem Artikel "Making your blog flexible" angedeutet, die Website sollte fließend sein und jeder User seine passende Schrift und Bildgröße erhalten.

Du willst auf der Homeseite einen Teil der Navigation am Desktop links anzeigen, damit die Smartphones diese zuerst angezeigt erhalten, auf der Postseite (wo der Blogeintrag ausführlich gelesen und kommentiert werden kann, kann diese Navigation ruhig unterhalb des Beitrags erscheinen?

Du hast 2 Möglichkeiten. Du kannst die individuelle Navigation Blogcustom verwenden (etwas, was ich empfehlen wurde) oder Du arbeitest mit beiden vorgegebenen Sidebars Blognav und Blogextra im Template.

Um Blogcustom zu verwenden, gehst Du wie folgt vor:

1. Öffne die home.html im tpl Ordner
2. Scroll bis zu dem Teil, wo Main und Content beginnen:

<div id="main">
<div id="content">

3. Trage oberhalb von <div id="main"> die Blogcustom ein, wie in der Dokumentation beschrieben: 

4. Lege in der style.css das Layout fest.

5. Willst Du die Blogcustom in der home.html und category.html einsetzen, bist Dir aber nicht schlüssig, ob diese nicht später z.B. auch in der tag.html sichtbar sein sollte, dann füge die Blogcustom vorsichtshalber schon mal in die tag.html ein und schreibe in die style.css

.dc-tag #blogcustom {display: none;}

Dieser Eintrag kann jederzeit schnell entfernt werden.

Bevorzugst Du die Sidebars Blognav und Blogextra zu verwenden, dann gehe wie folgt vor:

Entweder Du verwendest das Aorakit 3F, dass die Navis links und rechts vom Content bereits in Prozent anzeigt und passt das gesamte Template nur noch dem Desktop User an, damit der Text eben nicht über mehr als 650px verläuft, oder Du trennst beide Navis wie folgt beschrieben:

1. Öffne die home.html im tpl Ordner
2. Scroll bis zum Ende wo

<div id="sidebar">
<div id="blognav">
{{tpl:Widgets type="nav"}}
</div> <!-- End #blognav -->

<div id="blogextra">
{{tpl:Widgets type="extra"}}
</div> <!-- End #blogextra -->
</div>

erscheint.

3. Trenne beide Navis, so dass Du die Blognav oberhalb des Content setzt:

Der Teil kommt vor Main und Content:

<div id="sidebar">
<div id="blognav">
{{tpl:Widgets type="nav"}}
</div> <!-- End #blognav -->
</div>

<div id="main">
<div id="content">

Der Rest kommt nach Main:

</div> <!-- End #main -->

<div id="sidebar">
<div id="blogextra">
{{tpl:Widgets type="extra"}}
</div> <!-- End #blogextra -->
</div>

4. Öffne die Layout.css und gebe allen float: left;

#main {float: left;}
#blognav {float: left;}
#blogextra {float: left;}

5. Geh in Dein Dashboard und setze in die Blognav nur die Hauptnavigation und schiebe alle anderen Widgets in die Blogextra.

Du willst für jede Art einen eigenes Titelbild haben? Kein Problem:

.dc-home #top {background: url('images/1.jpg') no-repeat; }
.dc-post #top { background: url('images/2.jpg') no-repeat; }
.dc-category #top { background: url('images/3.jpg') no-repeat; }

und so weiter.

Wenn Du für dein bereits bestehendes Dotclear Blog oder wenn Du einmal die Blogsoftware Dotclear mit obengenannten Vorschlägen testen willst, kannst Du nachfolgend das Template "2c with changing backgrounds" für Dotclear herunterladen.

Teste diese Datei am besten auf einem Testaccount, da Dotclear Germany und ben_griffith keinerlei Garantie übernehmen.

Falls Du mehr Fragen zum Thema Layout in Dotclear hast, verwende bitte das Forum im Bereich Templatefragen, da dieser Artikel irgendwann nicht mehr sichtbar ist und nützliche Kommentare auch.