Open Scource Templates
Nicht jeder hat die Zeit und das nötige Geschick sich ein eigenes Layout für seine Website zu basteln, anfangs ist das auch überhaupt noch nicht nötig, schließlich strömen die Besucher meist erst nach einer Anlaufphase auf die Website und bis dahin kann man als Platzhalter ruhig ein “nicht”-unique-Template verwenden, quasi ein Vorläufer-Modell.
Doch für dieses Vorläufer-Modell zahlen? Man kann sich zum Beispiel auf templatemonster.com ein Template kaufen, wen es nicht stört das etliche andere das selbe Template verwenden, der kann für unter hundert Dollar schon zuschlagen.
Doch es geht noch günstiger, denn es gibt Open Scource Templates. Die sind zwar genausowenig unique, aber als Vorläufer-Modell sind diese Templates absolut zu empfehlen. Für alle die keinen Blog nutzen und somit nicht so einfach auf kostenlose Templates zurückgreifen können, die Open Scource Templates:
Zusammengeflickte Layouts
Die deutsche Blogosphäre bietet mitunter sehr schöne Blogtemplates, dann passt es doch aus all diesen schönen Elementen ein einzelnes Layout zu machen. Jetzt heißt es nur noch raten und das könnt ihr bei donvanone.de machen: Werde Blog-(Er)kenner der Woche.
Es gibt sogar was zu gewinnen, nämlich einen Linkplatz für jeweils eine Woche im Blog, ich würde selbst auch gerne mitmachen, aber, wie man auch an der Länge des Artikels sehen kann, ist Zeit im moment nichts was ich im Überfluß habe.
Mein Blog ist häßlich
Derzeit gibt es eine sehr schöne Diskussion auf Basicthinking.de über mein Blog-Layout (und über Bloglayouts im allgemeinen): einladende, kommentierfreudige Blog-Templates. Anders als die Überschrift erwarten läßt ist mein Blog-Template absolut nicht kommentierfreudig, so die Meinung der User. Dazu kann ich nur sagen: Sie haben recht!
Ich habe am 24. September 2005 mit dem bloggen angefangen, und anfangs nutzte ich noch ein Standardtemplate, am 23. November 05 war es dann aber soweit und ich präsentierte hier mein eigenes Blog-Template: Webdesignblog im neuen Design. Doch wie es so war wuchs mein Template mit der Zeit, es kamen Funktionen hinzu und manche wurde wieder entfernt, einfach weil ich vorher noch nicht wußte was funktioniert und was nicht.
Mittlerweile ist fast ein Jahr vergangen und ich weiß nun schon eher worauf es ankommt, ich habe viel über Usability und gutes Design geschrieben ohne selbst ein solches präsentieren zu können. Für mein ein-jähriges Blogger-bestehen ist nun schon länger ein Redesign geplant und durch Roberts Artikel weiß ich nun wie bitter nötig das ist.
Nun bedanke ich mich aber bei allen Lesern dieses Blogs (auch wenn es per RSS-Feed ist) das ihr mir treu seit und meine Artikel, die ich euch biete, trotz des grottigen Designs, lest. Auch ein besonderer Dank an Robert der dieses Thema, zum Glück, mal angesprochen hat und das auf eine nette Art und Weise.
Der leidige Part einer Website – das Design
Das ich eine Null im designen von Webseiten bin kann ich derzeit wieder feststellen, doch bevor ich darüber anfange muss ich noch kurz erklären wie bei mir die Webseiten in der Regel entstehen:
Als erstes erfolgt natürlich die Analysephase, hat meine Idee Bestand, braucht das jemand? Dann gehts auf in die Planungsphase, die in der Regel auch sehr viel Zeit benötigt, aber hier mal gerade nicht so wichtig ist. Hab ich nun alles geplant geht es an die funktionale Umsetzung der Website. Dies hat zwei entscheidende Vorteile, erstens: “Form follows function”, ich sehe welchen Umfang meine Website hat und zweitens: ich kann das Design erstmal weit von mir wegschieben ;)
Nun komme ich aber doch früher oder später immer wieder an den Punkt wo ich den Zeichenblock auspacke und anfange zu zeichnen, das lasse ich dann aber spätestens nach dem dritten Blatt wieder sein, denn Großartiges habe ich damit bislang noch nicht erzielt. Nun gut, starte ich also Photoshop und versuche darin mein Glück, an dieser Stelle verweise ich an meinen Einleitungssatz indem ich darauf hingewiesen habe das ich im designen eine Null bin.
Danach wende ich mich meist nochmal frustriert der Funktionalität meiner Website zu, optimiere ein paar Kleinigkeiten und komme dann früher oder später zu dem Entschluß das alles Aufschieben eh keinen Sinn macht und fange an in Photoshop die Elemente meiner Website nach Usability-Kriterien zu platzieren. So muss ich mich nicht um Farben, Formen und Muster kümmern und behalte meinen Blick frei für das Wesentliche: den Benutzer der Website. Im Endeffekt habe ich dann eine weiße Fläche auf der überall unterschiedlich große Kästchen (Kasten?) platziert sind, mit jeweils ein paar Notizen dazu (Photoshop ist zwar kein Textprogramm, läßt sich dafür aber dennoch gut verwenden ;) ).
Somit habe ich quasi die Struktur meiner Website festgelegt und kann nun mittels CSS meine Elemente platzieren. Dann noch hier und da ein paar Kästchen eine Hintergrundfarbe geben (um die Aufmerksamkeit des Besuchers auf die wichtigen Bereiche zu lenken) und darauf hoffen das das Design ankommt, wie gesagt, Design ist nicht so mein Ding, aber ich gebe mir Mühe. In diesem Sinne, schönen Abend noch!
Eine Einführung in YAML
YAML – Yet another Multicolumn layout (Nicht noch ein merhspalten-Layout) – ist ein Framework mit dem man auf einfachste Weise mehrspalten-Layouts, flexibel oder fest, erstellen kann. Ob das wirklich so einfach ist hat mich interessiert und ich hab YAML einfach mal ausprobiert.
YAML – Einstieg
Erstmal habe ich mich auf die Website verbunden: Yaml.de. Es ist wirklich praktisch wenn man etwas neues erlernen möchte, dieses in seiner Heimatsprache präsentiert zu bekommen, die Anleitung zu YAML ist komplett auf deutsch.
Der Einstieg ist wirklich einfach und man findet, nach einer 1-seitigen Erklärung wie YAML ungefähr funktioniert, schon ein erstes funktionierendes Grundgerüst.
Das Grundgerüst
Wer noch keine Ahnung von CSS hat sollte sich mal das Box-Modell anschauen. Für alle anderen dürfte das YAML-Gundgerüst einfach zu verstehen sein.
Keine Gedanken mehr zu Browserunabhängigkeit
YAML verspricht Browser-unabhängig zu sein und liefert schon vorgefertigte Hacks (für den IE) mit denen das Layout in allen Browser gleich aussehen soll. Gerade das Schliessen von “floats” kann von unterschiedlichen Browsern anders interpretiert werden, darum die Hacks (Hacks sind auch schon für IE7 vorbereitet).
Erste Schritte
Nachdem du dir das Framework heruntergeladen und auf deinen Server hochgeladen hast (oder auf dem Rechner mit einer eigenen Apache Installation) solltest du mal in den Ordner: yaml\layout_storage gehen und dort die Datei Example.html öffnen. Diese bietet ein grund-Layout und bietet sich für den Einstieg an.
Gefällt dir das aktuelle Layout nicht, kannst du einfach oben in der Datei example.html die CSS-Quelldatei ändern, dazu gehst du einfach in den Ordner CSS des YAML-Framworks, kopierst den Namen eines anderen Stylesheets und ersetzt ihn mit dem aktuellen in der example.html.
Hat jemand von euch schonmal dieses Framework eingesetzt? Wie sind eure Erfahrungen?
