Neues Design

Das alte Design der Webseite war doch schon etwas angestaubt, was jemand mal so umschrieb:

Es hat mehr etwas von einem Outdoor Handy, als von einem iPhone, zweckmäßig halt.

Da mich sowieso einige Kleinigkeiten an dem Design störten, dachte ich mir das eine Renovierung ganz interessant wäre. Es stellte sich bloß die Frage ob man ein Theme komplett neu schreibt oder eine bereits vorhandene Basis nutzt.

Das alte Design "Ocean"

In meinem Fall überlegte ich auf Bootstrap oder der HTML Boilerplate aufzusetzen. Auch gibt es einige schöne WordPress „Starter Themes„, allerdings traf nichts wirklich meinen Nerv. Also ging die Suche weiter. Fündig wurde ich dann beim GPL Theme „Picochic“ (http://picomol.de/picochic/), welches mir doch recht gut gefiel. Dieses wurde als Grundlage genommen und daraus das neue Design gebaut welches man hier nun sehen kann.

Unter anderem mag ich feste Seitenbreiten nicht wirklich, was dann natürlich als erstes geändert werden musste. An der Typografie (Schriftarten etc.) wurde anschließend geschraubt, Stylesheets für den Druck wurden hinzugefügt und am Social Media Widget wurde gewerkelt, so das dieses nun auch Youtube unterstützt. Ansonsten wurden noch andere Dinge wie das Menü minimal angepasst. Jetzt müssen nur noch Fehler gefunden und beseitigt werden ;)

WordPress Kickstart

Wenn man mit der Entwicklung eines WordPress Themes anfängt, so sind es am Anfang immer die gleichen Sachen die man dort macht. Viel schöner wäre es wenn man gleich ein Grundgerüst hätte und dieses nur noch ausbauen muss. Genau für diesen Fall gibt es WP-Kickstart welches unter https://github.com/gerritvanaaken/WP-Kickstart zu finden ist. Lizenztechnisch steht das ganze unter Public Domain.

Weitere Informationen gibt es unter:
http://praegnanz.de/weblog/htmlcssjs-kickstart

Kleines CSS Rätsel unter WordPress

Responsives Design ist schon eine tolle Sache. Je nach den Fähigkeiten des Ausgabegerätes wird die Webseite angepasst. Vor einigen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Komponente erweitert. Das ganze sieht auf kleineren Geräten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Mindestbreite unterschritten wird:

@media screen and (max-width: 850px)
{
 ...
}

Wenn das der Fall ist werden bestimmte Elemente (wie die Siderbar) ausgeblendet, die Größe der Schriftart verändert, et cetera. Nur gibt es anscheinend ein Problem mit ungeklärter Ursache. Wenn ich auf einem Mobilgerät die Seite „Blog“ aufrufe so ergibt sich folgendes Bild:

Er ignoriert anscheinend das angepasste CSS für Bildschirme kleiner 850 Pixel und zeigt stattdessen die „normale“ Seite an. Dies passiert auf allen getesteten Geräten und auch nur auf der Blog Seite. Nun zum Rätsel: Woher kommt das? Über Ideen zur Lösung des Problems würde ich mich freuen :)

Weitere Informationen gibt es unter:
http://www.elmastudio.de/webdesign/webseiten-optimierung-fur-mobile-gerate-verschiedene-losungen-im-vergleich/
http://www.elmastudio.de/webdesign/diskussionsanregung-wie-wichtig-ist-die-webseiten-optimierung-fur-mobile-gerate-heute-schon/

Sidebar bei Twenty Eleven immer anzeigen

Das neue Standardtheme von WordPress ist ja Twenty Eleven. In der Blogseite hat man bei diesem Theme standardmäßig eine Sidebar. Nur bei den statischen Seiten war dies nicht der Fall. Damit auf diesen Seiten die Sidebar angezeigt wird, muss das Sidebar Template (Attribute -> Template) auf der Seite aktiviert werden. Damit ist die Sidebar dann auf der entsprechenden statischen Seite aktiviert.

Weitere Informationen gibt es unter:
http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-on-single-posts-and-pages