Design

HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5

12. Juni 2013
von

Wer nach fertigen Templates für Webprojekte sucht, wird bei Google schnell fündig. Aber nicht immer entsprechen die Vorlagen hinsichtlich Qualität von Quelltext und Gestaltung den eigenen Ansprüchen. Der Dienst HTML5up bietet hingegen einige optisch ansprechende und dank HTML5 und CSS3 auch zeitgemäß umgesetzte Templates für moderne Webprojekte. Und kostenlos sind diese obendrein.

html5up1
Übersicht aller Templates

Templates für unterschiedliche Inhalte

Die meisten kostenlos erhältlichen Templates haben ein klassisches Grundlayout als Basis. Gerade Templates ein und desselben Anbieters unterscheiden sich meist nur marginal – andere Farben, andere Schrift, andere Ornamentik. Mehr Unterschied ist häufig nicht zu erwarten. Die Templates von HTML5up hingegen, sind alle vom Grundkonzept sehr unterschiedlich. Wer ein Blog aufsetzen möchte, braucht ein anderes Grundlayout als jemand, der hauptsächlich Fotos veröffentlichen möchte. Bei HTML5up findet man für sehr unterschiedliche inhaltliche Ausrichtungen passende Vorlagen.

Derzeit stehen 13 verschiedene Templates zur Auswahl – mal für textlastige, mal für bildlastige Websites. Zeitgemäße CSS3-Effekte und Galeriefunktionen per JavaScript machen die Templates auch für professionelle Anwendungen brauchbar. Außerdem sind alle Templates responsiv aufgebaut und für Tablets und Smartphones optimiert.

html5up2
Demoseite eines Templates

Durch die zugrundeliegende Creative-Commons-Lizenz sind die Templates auch für kommerzielle Projekte kostenlos einsetzbar und dürfen nach Belieben angepasst werden. Lediglich ein Verweis auf HTML5up ist Pflicht, wenn man eines der Templates einsetzen möchte.

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 liefert. Hier kann man ausgiebig testen und schauen, ob das Layout passt. Die Templates stehen als ZIP-Dateien zum Download bereit. Samt Demografiken kann man anschließend die Vorlagen nutzen, um sie für das eigene Webprojekt anzuwenden.

Externe Bibliotheken, wie jQuery und html5shiv, sind Teil des Pakets, sodass man direkt loslegen kann.

Links zum Beitrag

(dpe)

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.

Tags: , , , ,

9 Kommentare zu „HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5
  1. Gerold am 12. Juni 2013 um 10:12

    Fantastisch was ihr uns hier immer wieder bereit stellt zur Gestaltung von Websites!
    Oftmals kann ich zwar die vorgestellten Designs nicht direkt verwenden, aber alleine als Impressionen sind die Dinger oft Gold wert! Der Artikel von gestern mit den Elementen für Photoshop war ebenso spitze.
    Vielen Dank!

  2. Billy Gali am 12. Juni 2013 um 10:50

    Funktionieren die Live-Demos bei euch?
    Bei mir weder unter aktuellem Firefox noch Chrome…

  3. Netdirk am 12. Juni 2013 um 11:28

    Bei mir funktioniert die Seite nicht unter Firefox.
    Chrome zeigt sie an.
    Ein Design das nur auf einigen Browsern angezeigt wird ist unbrauchbar.

  4. Sebastian am 12. Juni 2013 um 14:39

    Nicht mal auf dem aktuellen Firefox… Da ist scheinbar etwas schief gelaufen. Wusste garnicht, dass bei FF etwas schief laufen kann.

  5. Ulrich Diehl am 12. Juni 2013 um 16:30

    Das Problem besteht darin, dass in der Live-Preview die Demo Seite in einem iframe geladen wird, habe aus Spaß mal ein Template runtergeladen und die index Datei in FF und Safari geöffnet: kein Problem!

  6. Bangster am 14. Juni 2013 um 13:27

    Supi Dupi diese Links; habt noch andere Anbieter?

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

  7. […] (via) […]

  8. […] Artikel von Dr. Web […]

  9. Peter am 8. Januar 2014 um 22:41

    “Das Problem besteht darin, dass in der Live-Preview die Demo Seite in einem iframe geladen wird, …” – wieso funktionierts dann immer noch nicht, wenn ich NUR das entsprechende iframe im FF laden???

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!