Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 12. Juni 2013

HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5

Wer nach fer­ti­gen Templates für Webprojekte sucht, wird bei Google schnell fün­dig. Aber nicht immer ent­spre­chen die Vorlagen hin­sicht­lich Qualität von Quelltext und Gestaltung den eige­nen Ansprüchen. Der Dienst HTML5up bie­tet hin­ge­gen eini­ge optisch anspre­chen­de und dank HTML5 und CSS3 auch zeit­ge­mäß umge­setz­te Templates für moder­ne Webprojekte. Und kos­ten­los sind die­se oben­drein.

html5up1
Übersicht aller Templates

Templates für unterschiedliche Inhalte

Die meis­ten kos­ten­los erhält­li­chen Templates haben ein klas­si­sches Grundlayout als Basis. Gerade Templates ein und des­sel­ben Anbieters unter­schei­den sich meist nur mar­gi­nal – ande­re Farben, ande­re Schrift, ande­re Ornamentik. Mehr Unterschied ist häu­fig nicht zu erwar­ten. Die Templates von HTML5up hin­ge­gen, sind alle vom Grundkonzept sehr unter­schied­lich. Wer ein Blog auf­set­zen möch­te, braucht ein ande­res Grundlayout als jemand, der haupt­säch­lich Fotos ver­öf­fent­li­chen möch­te. Bei HTML5up fin­det man für sehr unter­schied­li­che inhalt­li­che Ausrichtungen pas­sen­de Vorlagen.

Derzeit ste­hen 13 ver­schie­de­ne Templates zur Auswahl – mal für text­las­ti­ge, mal für bild­las­ti­ge Websites. Zeitgemäße CSS3-Effekte und Galeriefunktionen per JavaScript machen die Templates auch für pro­fes­sio­nel­le Anwendungen brauch­bar. Außerdem sind alle Templates respon­siv auf­ge­baut und für Tablets und Smartphones opti­miert.

html5up2
Demoseite eines Templates

Durch die zugrun­de­lie­gen­de Creative-Commons-Lizenz sind die Templates auch für kom­mer­zi­el­le Projekte kos­ten­los ein­setz­bar und dür­fen nach Belieben ange­passt wer­den. Lediglich ein Verweis auf HTML5up ist Pflicht, wenn man eines der Templates ein­set­zen möch­te.

Demo und Download

Für jedes Template steht eine Demoseite zur Verfügung, die auch eine Vorschau für die Darstellung auf Tablets und Smartphones lie­fert. Hier kann man aus­gie­big tes­ten und schau­en, ob das Layout passt. Die Templates ste­hen als ZIP-Dateien zum Download bereit. Samt Demografiken kann man anschlie­ßend die Vorlagen nut­zen, um sie für das eige­ne Webprojekt anzu­wen­den.

Externe Bibliotheken, wie jQuery und html5shiv, sind Teil des Pakets, sodass man direkt los­le­gen kann.

Links zum Beitrag

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

9 Kommentare

  1. “Das Problem besteht dar­in, dass in der Live-Preview die Demo Seite in einem iframe gela­den wird, …” – wie­so funk­tio­nierts dann immer noch nicht, wenn ich NUR das ent­spre­chen­de iframe im FF laden???

  2. Supi Dupi die­se Links; habt noch ande­re Anbieter?

    Grüßle
    Bangster (Bank-Bang-Bang)

  3. Das Problem besteht dar­in, dass in der Live-Preview die Demo Seite in einem iframe gela­den wird, habe aus Spaß mal ein Template run­ter­ge­la­den und die index Datei in FF und Safari geöff­net: kein Problem!

  4. Nicht mal auf dem aktu­el­len Firefox… Da ist schein­bar etwas schief gelau­fen. Wusste gar­nicht, dass bei FF etwas schief lau­fen kann.

  5. Bei mir funk­tio­niert die Seite nicht unter Firefox.
    Chrome zeigt sie an.
    Ein Design das nur auf eini­gen Browsern ange­zeigt wird ist unbrauch­bar.

  6. Funktionieren die Live-Demos bei euch?
    Bei mir weder unter aktu­el­lem Firefox noch Chrome…

  7. Fantastisch was ihr uns hier immer wie­der bereit stellt zur Gestaltung von Websites!
    Oftmals kann ich zwar die vor­ge­stell­ten Designs nicht direkt ver­wen­den, aber allei­ne als Impressionen sind die Dinger oft Gold wert! Der Artikel von ges­tern mit den Elementen für Photoshop war eben­so spit­ze.
    Vielen Dank!

Schreibe einen Kommentar zu Bangster Antworten abbrechen

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