Mit HTML5 Frameworks professionelle Webseiten entwerfen

2013-08-06 14:21 (Kommentare: 0)

HTML5 Frameworks
© giomatmicro - Fotolia.com

Moderne Webseiten sind komplexe Anwendungen mit einer Shop-, Forum-, Community- oder Content Management-Lösung im Hintergrund. Beim Frontend sind die User anspruchsvoll und an interaktive Oberflächen gewöhnt. Dort müssen die Optik und die Usability stimmen, sonst springt der Nutzer ganz schnell ab. Die Anforderungen der Webuser sind vergleichbar mit denen für klassische Desktop-Applikationen – vielleicht sogar etwas höher. Das gilt auch für die technische Seite: Von Browser zu Browser und zwischen unterschiedlichen Endgeräten gibt es bei der HTML-Darstellung Unterschiede. Der Entwickler muss es schaffen, auf allen Zielplattformen ein gutes Design zu realisieren. So genannte Frameworks helfen dabei. Sie erlauben, komplexe HTML5 Anwendungen schnell und robust zu entwickeln.

Was sind HTML5 Frameworks?

Es gibt inzwischen unzählige ganz unterschiedliche Website-Typen im Netz. Doch bei allen Unterschieden gibt es zahlreiche Bedienkonzepte und Problemlösungen, die sich auf verschiedenen Webseiten wiederfinden. So lohnt es, Lösungen für wiederkehrende Aufgaben zu sammeln und wieder zu recyclen. Frameworks basieren auf diesem Konzept der Wiederverwendbarkeit von Software, ohne dabei eine fertige Anwendung beziehungsweise ein vollständiges Frontend zu sein.

Bei einem professionellen Framework profitieren Entwickler von nützlichen Komponenten, Framework-Tests und einer kontinuierlichen Weiterentwicklung. Das Ergebnis ist ein Konzept zur schnellen Erstellung von Layouts und leicht zu integrierenden UIElementen. Einmal eingearbeitet sparen Programmierer Zeit beim Implementieren von Lösungen. Für Aufgaben wird auf den vorhandenen und getesteten Code des Frameworks zurückgegriffen. Menüs, interaktive Formulare oder ganze Grid-Layouts lassen sich so mit wenig Aufwand und Entwicklungszeit weitgehend browser- und endgerätunabhängig in hoher Qualität implementieren. Enthalten in HTML5 Frameworks sind meist neben Basics Styles für Interface-Elemente auch noch eine angepasste Typografie (CSS) und JavaScript Plug-ins (zum Beispiel Slider, Bildergalerien, Polyfiller) sowie PhotoshopVorlagen.

"You-Must-Know" Frameworks

(Twitter) Bootstrap

Das Framework Bootstrap wurde von Twitter entwickelt und 2011 als Open Source Projekt auf der Source-Code Hosting-Plattform Github veröffentlicht. Dort ist es heute eines der beliebtesten Projekte. Für die Entwicklung wurde auf HTML5 und CSS3 gesetzt. Responsive Webdesign unterstützt Twitter Bootstrap seit der vor rund einem Jahr erschienenen Version 2.0. Mit der Version 3.0 wurde der Name des Projekts auf Bootstrap reduziert.

Die Popularität und die dank guter Tests robusten Komponenten sind die Stärken dieses Toolkits.
Tipp: Auf Tutsplus.com ist ein Tutorial mit Videoanleitung zu finden.

HTML5 Boilerplate

Dieses Framework zählt ebenfalls zu den populären Open Source Tools für HTML5. Es kommt mit einem mobile-friendly Template und einer Reihe vorgefertigter Media Queries daher. Support für Apache Server Caching und Compression sind für eine gute Performance enthalten.

HTML5 Code kann für einfache Webseiten, responsive Webpages oder Apps erzeugt werden. Basis-Code für Google Analytics ist bereits eingebettet. Es kann aber auch ein Template ohne die Integration des Web Analytics Tools von Google heruntergeladen werden. Dazu gibt es unter http://www.initializr.com/ die Möglichkeit, ein Custom Build zu erstellen.

Um Webseiten, die mit HTML5 Boilerplate entwickelt wurden, auch für ältere Browser (Internet Explorer Version 9 oder früher) nutzbar zu machen, beinhaltet das Framework wahlweise das JavaScript Workaround HTML5 Shiv oder den bekannten Polyfiller Modernizr.

Tipp: Mit diesem Video gibt es eine Einführung. Hier gibt es eine Hilfe-Community.

Foundation Framework

Foundation zählt ebenfalls zu den bekannten HTML5 Frameworks. Es setzt auf den Mobile First Ansatz und auf Rapid Prototyping. Letzteres ist kein Lippenbekenntnis: Das Projekt stellt eine große Auswahl an Basis-Templates zur Verfügung. Darunter Layouts für Shops, Blogs, Feeds und Marketing Websites. Grundlage dafür ist ein flexibles Grid-System. Wenig Aufwand genügt so, um Prototyp für ein Projekt zu bauen. Ausführliche Docs erkären anschaulich, wie Dropdown-Menus, Pagination und oder gar das Grid-System genutzt werden.

Ein Blick auf die Lizenzen

Das Augenmerk gehört bei der Frameworkwahl der Lizenz. Nicht alle Lizenzen können miteinader kombiniert werden. Die GPL ist beispielsweise sehr restriktiv und steht im Konflikt mit proprietärer Software. Bootstrap wurde unter der Apache 2.0 Licence veröffentlicht. Fondation und HTML5 Boilerplate sind mit einer MIT Licence zu haben. Beide Lizenzen gelten im Allgemeinen als GPL kompatibel. Dabei verzichten MIT und Apache Lizenz auf eine Copyleft Klausel. Das verspricht Flexibilität für kommerzielle Projekte.

Die HTML5 Frameworks im Überblick
FrameworkStärkenTwitterGithub RepositoryLizenz
Bootstrap Gute Tests, viele Tutorials im Web @twbootstrap Link Apache License v2.0
HTML5 Boilerplate Customizable, Performante Konfiguration @h5bp Link MIT Licence
Foundation Guter Prototyping Support, viele Templates, umfangreiche und anschauliche Dokumentation @foundationzurb Link MIT Licence

Zurück

 
domainssaubillig © 2007-2024 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum