offtonewadventures – Erstellung und erste Erfahrungen mit Bootstrap 3

Vor ein paar Monaten kam mein Freund auf mich zu und meinte sein Blog, offtonewadventures, der gleichzeitig als Portfolio fungiert, bräuchte unbedingt einen neuen Anstrich und müsste mehr her machen. Schlicht, praktisch und tauglich für mobile Geräte sollte er sein. Er hatte außerdem seine eigenen Vorstellungen zu Aufbau und Aussehen. Ich entschied mich mal etwas Neues auszuprobieren und griff zu Bootstrap 3 um das Projekt umzusetzen. Für den Blog wurde weiterhin WordPress verwendet, wovon ich auch erzählen möchte.

Vielleicht habt ihr schon mal von Bootstrap gehört. Es wurde von Twitter ins Netz getrieben und ist ein Front-End Framework. Das heißt im Grunde genommen nichts anderes, als das fertige Elemente, beziehungsweise Vorlagen, zur Verfügung gestellt werden mit denen man eine Webseite mit HTML, CSS und JavaScript erstellen kann. Dazu braucht man nicht einmal große Kenntnisse. Man wählt einfach die Komponenten die man haben möchte, läd sich das zusammengestellte Paket runter und bastelt sich dann mithilfe der Beispiele auf der Bootstrap Seite eine eigene Webseite zusammen.

Das bringt sowohl für Designer als auch Programmierer seine Vorteile. Für mich war die Flexibilität im mobilen Bereich entscheidend. Bootstrap 3 ist dafür ausgelegt. Es bringt ein Grid mit sich, dass sich je nach Displaygröße anpassen lässt wie man es möchte. In der zweiten Version von Bootstrap fand ich die Handhabung zu anstrengend, aber jetzt ist es super einfach. Ein anderer praktischer Aspekt, der meiner Meinung nach auch eine große Rolle spielt ist, dass man sich nicht um die Grundformatierungen sorgen muss. Vieles ist vordefiniert. Es spart einem ein gutes Stück Arbeit, zumindest auf den zweiten Blick.

Genanntes Grid machte es mir einfach den Aufbau der Seite zu meisten, auch wenn ich anfangs mit den Abständen die durch die Reihen und Spalten entstehen, die man anlegen kann, zu kämpfen hatte. Die Navigation gestaltete ich ohne Elemente von Bootstrap. Ich legte dann durch Media Queries im Stylesheet verschiedene Versionen für die verschiedenen Ansichten fest. Die Menüpunkte werden schmaler wenn man das Fenster verkleinert. In der mobilen Version lässt sich die Navigation dann durch einen Icon ausfahren. Unterpunkte der Menüs verpackte ich im Hover-Effekt der Navigations-Links um Platz zu sparen.

Mein Freund und Auftraggeber wollte die Blogeinträge unbedingt alle in der selben Höhe haben, was die Gestaltung gar nicht mal so einfach machte. Bringt man die Überschriften nicht auf die gleiche Höhe ist unten oftmals zu viel Platz und es wirkt direkt etwas chaotisch – aber bringt man die Überschriften auf die gleiche Höhe liegt unter den Überschriften meistens zu viel Freiraum. Ich wählte Letzteres, das meiner Meinung nach kleinere Übel.

Abseits der Verwendung von Bootstrap möchte ich auch über die Funktionen von offtonewadventures im Back-End, einer meiner liebsten Teile, berichten. Ein großer Teil der offtonewadventures ausmacht sind die Videos, die dort gezeigt werden. Um das Hinzufügen von Videos zum Portfolio so einfach wie möglich zu machen erstellte ich einen Custom Post Type und wies diesem passende benutzerdefinierte Felder zu wie zum Beispiel Plattform und ID. Je nach Plattform die man wählt wird durch das Template dann der passende Code zur Einbettung ausgegeben. Die ID definiert hierbei das Video, das gezeigt wird. Eigentlich recht simpel. Dazu werden dann einfach Titel und Beschreibung angezeigt, die auch bei der Erstellung des Videos angegeben werden. Im Front-End werden die Videos im Portfolio übrigens dynamisch über AJAX ausgetauscht und angezeigt.

Um das einbinden von Videos in Blogeinträgen auch möglichst einfach zu gestalten (schließlich hat mein Freund keinerlei Kenntnisse in HTML oder CSS) erstellte ich einen Shortcode der benutzt werden kann. Die Shortcodes sind weitaus unkomplizierter als bei einem Blogeintrag den ganzen Einbettungscode einzufügen, um den noch ein Container liegen soll, der das Video responsiv macht. So erscheinen alle Videos einheitlich. Der Shortcode sieht übrigens so aus:

Soweit mein Einblick in die Erstellung von offtonewadventures.com – Um nun selbst zu entdecken wie die Seite in verschiedenen Ansichten aussieht könnt ihr einfach euer Browserfenster verkleinern. Die Mobile Version kann man dadurch auch betrachten.

Mich würde zuletzt noch interessieren wer von euch schon Erfahrung mit Frameworks gemacht hat und was ihr darüber denkt? Lohnt sich der Einsatz, gibt es entscheidende Vor- oder Nachteile für euch?

21. November 2013 2 Kommentare Allgemein