Sven Lennartz 25. Oktober 2006

Kostenlose CSS Layouts – Download

Kein Beitragsbild

Alles muss man nicht selber machen oder neu erfinden. Wenn es schnell gehen muss, eine Idee fehlt oder man nicht sattelfest ist, bieten sich Vorlagen an. Sie eignen sich außerdem hervorragend zum Lernen. Unter einem Template versteht man einen kompletten Seitenentwurf inklusive Grafiken. Ein Layout hingegen bietet nur ein Grundgerüst.

Screenshot

Die folgenden tabellenlosen (X)HTML/CSS-Vorlagen werden gratis zur Verfügung gestellt. Im Falle eines bloßen Layouts ist das auch kaum anders möglich. Bei Templates hingegen verhält es sich anders. Hier ist mehr kreative Leistung im Spiel. Eine Belohnung, oft in Form eines Links, wird zumeist eingefordert. Vor dem Einsatz also immer genau hinschauen.

  • CSS Design Templates
    12 Templates
  • ThreeColumnLayouts von CSS Discuss
    Jede Menge dreispaltiger Layouts aus unterschiedlichen Quellen gesammelt.
  • CSSFILL
    Eine kleine Auswahl mit eigener Website
  • CSS Frames Layouts
    Frames mit CSS sind auch kein Problem
  • CSSplay
    Stu Nicolls ist so etwas wie ein Altmeister wenn es um CSS geht. Frei verfügbare Layoutgerüste finden sich deshalb auch bei ihm. Manchmal muss man vor dem Einsatz um Erlaubnis fragen.
  • CSS Template Gallery
    Schöne Suchmöglichkeiten für allerdings „nur“ 32 Templates. Diese sind zumeist von eher durchschnittlicher Qualität.
  • CSS Intensivstation
    15 Layouts
  • Ex-Designz
    98 XHTML CSS-Templates
  • Code-Sucks
    Sechs Templates und diverse Layouts mit verschiedener Spaltenanzahl.
  • Jimmy Lin
    Acht einfache Templates
  • Layout Gala
    40 Layouts folgen demselben Schema.
  • Little Boxes
    16 Layouts, ein Klassiker
  • Changingman
    Ein einzelnes dreispaltiges Layout. Ausgeführt als Liquid Design.
  • Mollio
    Ein Template in sieben hochwertigen Varianten. Inklusive eines kleinen Styleguides im PDF-Format
  • Open Source Templates
    15 recht schicke Templates
  • OSWD
    Ein riesiges Angebot von Templates aller Arten, aber weitgehend unsortiert.
  • OSWT
    Ein ebenfalls großes Angebot. Mit besseren Such- und Sortiermöglichkeiten. Viel Werbung dabei.
  • Maxdesign
    23 Layouts und Problemlösungen
  • Six Shooter Media
    15 Templates
  • Solucija
    19 Templates, leider ohne nähere Angaben zur Verwendbarkeit.
  • Tinderbox
    Ein Layout in Variationen
  • Yahoo! UI Library: Grids CSS
    Eine komplexe Lösung für viele Probleme. Es wird gerastert. Ein Prinzip, das aus Bildbearbeitungs- oder Layoutprogrammen bekannt ist.

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

61 Kommentare

  1. „CSS Design Templates“ ist u.a ein toter Link

  2. Sehr gute Seite mit sehr vielen Informationen und Beispielen.

    Mein Problem liegt eher an den durchweg englischen Seiten und Templates. Ich habe Schwierigkeiten die Infos in dieser Sprache so zu verstehen, dass ich ein freies Template meinen Bedürfnissen anpassen kann.

    Nebenbei fällt mir auf, dass fast ausschließlich mehrspaltige Templates angeboten werden. Zur Erstellung einer einfachen, aber ansprechenden Seite würde die klassische Ansicht mit nur einer Spalte reichen.
    Oben ein Header, in den ich mein PNG-Logo einbauen kann darunter eine Seitennavigation in der Mitte ein Bereich in den ich Text und Bilder eingeben kann und ganz unten eine kleinere Zeile für die Telefonnummer und andere kurze Infos. Dabei sollte die Hauptzeile, also der Hauptbereich sich automatisch der Text- bzw. Contentlänge anpassen.
    So etwas bekomme ich als Anfänger per Tabellenlayout ohne Probleme hin, tu mich aber schwer, das per CSS zusammen zu basteln.

    Im Prinzip sollte das so aussehen wie hier: http://www.maxdesign.com.au/articles/css-layouts/one-fixed/

    Solch ein einfaches Design mit einer deutschen Erklärung würde mich zum kleinen König bei der Überarbeitung meiner alten Tabellenseiten machen. Hat jemand eine Idee wo ich so etwas finden kann?

    Vielen Dank im Voraus

    Rainer

  3. Auch Jahre später, nachdem ich diese Liste hier nun mehrfach durchstöbert habe, bin ich immer wieder begeistert von dieser. Echt ne klasse Zusammenstellung! Danke dafür!

  4. Das ja mal eine richtig gute Liste.
    Danke

  5. Sehr nützlich!

    Danke!

  6. Die Vorlagen von Dreamweaver CS3 sind sehr gut auf alle Browser abgestimmt, und eignen sich hervorragend für den Anfang.

    Sicher gibt es die Auffassung Dinge von 0 an zu entwickeln.

    Aber selbst Webdesigner sollten sich des Kosten-Nutzen Faktors erinnern…

  7. Danke für deine Auflistung. Da sind sehr viele gute dabei.
    Das beste an diesen Layouts ist aber immer noch die Inspiration.

  8. Hallo!

    Ich verwende auch solche Vorlagen.
    Wir lernen gerade in der Schule, wie man Websiten mit CSS baut.
    Mit diesen Vorlagen habe ich geübt und mir viel es garnicht schwer, mich da reinzudenken.
    Meine jetzige Homepage habe ich mit Hilfe solch einer Vorlage gebaut.
    Es war eine große Hilfe für mich als Anfängerin.

    Was stimmt denn nun? Sind CSS-Layouts nun barrierearm oder nicht?

    Also ich finde, jede informative Seite sollte barrierefrei sein.

  9. Warum verwenden Programmierer eigentlich auch Vorlagen (sprich: Frameworks)?
    Weil dadurch eine Menge Arbeit gespart wird und sich die Entwickler des Frameworks extrem gut in ihrem Themengebiet auskennen und auf Dinge achten, auf die man in derselben Zeit nicht einmal kommt.
    Man muss sich um bestimmte Dinge nicht mehr kümmern und hat eine gute Qualität von Code und Architektur.
    YAML z.B. hat viele Vorteile:
    * Basierend auf Web Standards
    * Barrierearm
    * Flexibel
    * Anwendungsorientiert
    * Umfassend dokumentiert

  10. >>> Ich frage mich nur wer benutzt die freien Layouts und Templates. Als Webentwickler und Designer mache ich die Sachen doch lieber direkt selber, oder? Ich brauche doch auch so einige Zeit um mich in den Quellcode von anderen einzuarbeiten.
    Oder wie seht ihr das?

    Schüler wie ich ^^‘ die Praktikumspraesis erstellen sollen mithilfen von HTML und CSS….

  11. Die DIV Programmierung hat ja nicht nur Vorteile für Sehbehinderte, sondern auch für den Betreiber der Seite. Man denke bei den größeren Firmen an Traffic, Ladezeit etc.

  12. @Lorenz, hab nich alle antworten gelesen ;-)

    genau aus diesem grund verwendet man doch css :/
    man kann es ohne probleme im browser abschalten (2xklicken) und hat alle informationen in chronologischer reihenfolge, ohne bilder und in beliebiger größe. lesbar für JEDEN.
    einfach mal ausprobiern ;-)

  13. Merci,

    wieder einmal Süßes für uns CSSler…

  14. Hallo zusammen,

    ich entwickel ebenfalls auch Webseiten für Firmen und Privatpersonen. Die Diskusionen ob man als Designer Tabellen oder Div-Tags benutzen soll, verfolge ich schon eine ewigkeit. Ich finde doch jetzt sehr interssant, das hier zwei Sehbehinderte Besucher sich über Div-Tags beschweren.

    Der Aufwand für Sehbehinderte Menschen eine Webseite zu realisieren finde ich enorm und viele Firmen schließen die Gruppe aus. Wieso? Weil der Preis den ein vernünftiger und legaler Designer fordert zu hoch ist. Der zweite Punbkt ist, dass viele Firmen sich sagen „Pech gehabt“.

    Aber was ist denn nun Besser? Was den Browserkrieg angeht ist Div-Tags besser. Die Webseite sieht in allen Brwosern gleich aus, was bei Tabellen schwieriger ist. der Aufwand ist bei mir geringer. Und Hacks? Wozu? AUch ohne kann man sehr gute Designs erstellen.

  15. table(-Geschichte) fehlt…

  16. @doerthe: da muss ich Dir Recht geben. Als Webdesigner (mit Anspruch;) erhält man mit Vorlagen nie das gewünschte Ergebnis. Erstens nimmt erfahrungsgemäß die Auswahl und Anpassung einer Vorlage inkl. Sourcecode-Review genauso viel Zeit in Anspruch wie die Erstellung eines Templates und zweitens ist meiner Meinung nach (zumindest arbeite ich so) die Template-Erstellung erst der zweite logische Schritt. Zunächst muss ja erstmal ein Content/Design-Konzept her. Während des Designprozesses entwickle ich im Hinterkopf ja sowieso schon ein CSS-Gerüst und die Stärken von CSS liegen für mich ja auch in der schnellen Umsetzung eines Templates. Natürlich kann man rudimentäre Layouts immer wieder verwenden, aber am Besten taucht man in eine Seite ein wenn man sie doch (fast) komplett selbst macht. Man kennt sich einfach besser aus und ist schneller beim bug-fixen…
    Und bzgl. der -Geschichte: ich benutze noch Tabellen, aber nicht für das Layout, da ist CSS flexibler, schneller und genauer.
    Aber nichtsdestotrotz sind die Links sehr nützlich als Ideen-Input, werde zumindest gleich mal stöbern gehen ;)

  17. Ich vermisse ein bisschen YAML (http://www.yaml.de/). Das hat mir bisher sehr geholfen und ist sowohl für Anfänger als auch für Fortgeschrittene sehr hilfreich.

  18. > Die Moral? Aufpassen, dass neue Technologien nicht neue Barrieren schaffen!

    Im Moment kommt mir Layouts entwerfen mit CSS so vor wie damals ein Tabellen-Layout mit NN4 und IE4. Ewig rumprobieren, Code einfügen der eigentlich keinen Sinn macht (Hacks) und dann Angst haben, dass die nächste Browsergeneration wieder anders funktioniert.

    Mir kommt das oft so vor, als ob nur gezeigt werden soll was geht. Superschöne Seiten! Mit Benutzerfreundlichkeit hat das oft nicht viel zu tun. Aufs Design kommts halt an….

    Die Vorteile eines CSS-Layouts sind meiner Meinung nach nicht groß bzw. gibt es keine. Weniger Code? Mit Tabellen UND CSS kann man auch sparsam Coden. Und die ganzen Buttons, die auf vielen CSS-Seiten sind um zu zeigen, welche Standards alle eingehalten werden, brauchen auch Platz….

    Wartungsärmer? Wenn ein CMS zum Einsatz kommt muß man sowieso nur eine Datei bearbeiten. Außerdem kann man nur durch das Ändern der CSS-Datei nicht ein ganzes CSS-Layout umwerfen. Auch da kommt es auf die Positionierung der DIVs an.

    Barrierefrei? Stimmt auch nicht ganz, wie oben steht. Ich hatte einen Blinden Surfer als Kunden. Die Software, die Blinde nutzen um die Seiten zu betrachten, versteht mittlerweile sehr gut mit Tabellen umzugehen.

    Ein Design für „alle“ Geräte? Auch Käse. Wer will schon ne normale Website auf einem Handy lesen. Hierfür muß dann auch Text etc. angepasst werden.

    So, ich wollte mal ne Lanze fürs gute, alte Tabellen-Layout brechen. Auch wenns gerade out ist…. ;-)

  19. Ich frage mich nur wer benutzt die freien Layouts und Templates. Als Webentwickler und Designer mache ich die Sachen doch lieber direkt selber, oder? Ich brauche doch auch so einige Zeit um mich in den Quellcode von anderen einzuarbeiten.
    Oder wie seht ihr das?

    Doerthe
    PS: Allgemein zu Dr. Web und WWW – Ich bin immer wieder begeistert. Internet ist einfach faszinierend.

  20. Vielen Dank für diese sehr gute Ideen- & Wissensübersicht über Css-Layouts. Mich begeistert immer wieder die kreativen Ideen und deren Umsetzung mit Hilfe von Css.

    RALPH

  21. > Die Moral? Aufpassen, dass neue Technologien nicht neue Barrieren schaffen!

    Im Gegenteil, die neue Technologie soll Barrieren abschaffen; einem guten Webdesigner gelingt das auch durchaus, da kannst du dann auch auf 1000% vergrößern.
    Du kannst nicht das Werk eines schlechten Webdesigners mit der Technologie die er benutzt gleichsetzen.
    So ein Designer verwendet, evtl. weil es gerade so schön ‚in‘ ist oder es ihm aufgezwungen wurde, nur noch CSS, möchte sich dabei aber einfach nicht von den alten Design-Grundlagen des Table-Layouts verabschieden. Wer erinnert sich nicht mehr an die „alten“ Zeiten als die ganzen Printdesigner aufgeschlagen sind (Stichwort: „Der Abstand hier muss ein Zentimeter sein, sonst passt das nicht in mein Seitenverhältnis! Blub.“)? Nun, etwas ähnliches passiert meiner Ansicht nach hier.

    Sowohl gute als auch schlechte Arbeiten konntest du immer schon mit beiden Techniken abliefern.

  22. Da dürfte wirklich für jeden das „richtige“ Beispiel dabei sein. Vielen Dank, wiedereinmal für eine klasse Zusammenstellung!

  23. Hallo

    Vielleicht ist hier nicht der richtige Platz dazu, aber meiner meinung nach geht bei der ganzen CSS-Layout-Diskussion ein Aspekt der Usability verloren.

    Nehmt mal eine Website, die ausschliesslich mit div-tags aufgebaut ist, und setzt den Schriftgrad im Browser auf 250% – die Site wird mit ziemlicher Sicherheit unlesbar. Grund dafür sind die absolut positionierten Elemente. mit dem guten alten table-tag passiert das nicht, es mag sich zwar einiges verschieben, aber immerhin bleibt der Text sichtbar.

    Wer kommt nun auf die Idee, die Textgrösse auf 250% aufzublasen? Nun, sehbehinderte Leute wie ich. Wir sind zwar zugegebenermassen eine Minderheit, aber wie heisst es so schön? Ein System wird nicht daran gemessen, wie es mit dem Durchschnitt umgeht, sondern daran wie es die Extreme bewältigt.

    Was ist mit Screen-Magnifier? (Das sind Tools, die ein Ein- und Auszoomen des Bildschirms ermöglichen.) Wer keinen Apple hat – beim OS X ist die Funktionalität auf vorbildliche Weise eingebaut – muss für eine gute Funktionalität 600 Euro hinlegen, was sicher nicht jedermanns/jederfraus Sache ist.

    Die Moral? Aufpassen, dass neue Technologien nicht neue Barrieren schaffen!

    Einen schönen Tag wünscht

    Lorenz

  24. Schöne Übersicht, vielen Dank!

    Kurze Korrektur: Moolio = _6_ templates (A-F), nicht 7.

    Gruss,

    Christoph

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück