Brownie: Ein kostenloses, responsives HTML5/CSS3-Website-Template

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Muhammad Shahbaz Saleem vom Entwickler- und Gründerblog Egrappler stellt eine komplette Website-Vorlage auf der Basis von HTML5/CSS3, sowie jQuery und einigen darauf aufsetzenden Plugins zur freien Verfügung. Das Template namens Brownie ist, wenn man sich mit Optik und Struktur anfreunden kann, ein guter Startpunkt für die eigene Website. Saleem sieht die Vorlage als besonders für Portfolio-orientierte Websites geeignet. Das liegt hauptsächlich am integrierten Slider, der die komplette Optik der Startseite dominiert.

Brownie: Responsiv mit Einschränkungen

Das erst wenige Tage alte Brownie zeigt sich im Vergleich zu anderen Templates sehr vollständig. Zudem liefert es für manche Bereiche, allen voran der Portfolio-Darstellung, mehrere Designvarianten mit. Saleem hat auch an 404 und Kontaktformular gedacht, wobei das Kontaktformular über ein ebenfalls im Paketumfang befindliches PHP-Script angetrieben wird. Eine Demo kann hier ausprobiert werden.

Eine Vielfalt gängiger jQuery-Plugins liefert weitere Funktionalitäten, sowie sorgt teilweise für das responsive Verhalten des Templates. Um Requests zu sparen, stapelte Saleem alle Plugins in einer einzigen JS-Datei übereinander, die auf diese Weise minified immer noch stolze 120k auf die Waage bringt.


Vollständige Designvorlage mit allem, was man so braucht…

Das Design funktioniert relativ solide responsiv. Nur der Anzeigenplatz oben rechts wirkt undurchdacht implementiert. Er beeinträchtigt beim Resizing, sowohl im Desktopbrowser, wie auch in mobilen Clients das Layout. Das müsste nicht sein.

Saleem verspricht Cross-Browser-Kompatibilität und liefert einige Styles speziell für Internet Exploder mit. Ich testete die Vorlage unter Mac OSX mit dem aktuellen Chrome, sowie Safari und Firefox. In allen Browsern skalierte das Layout einwandfrei. Durchgängig reproduzierbar war allerdings der fehlerhaft implementierte Anzeigenplatzhalter. Auch im Chrome Beta und im Maxthon unter Android auf dem HTC One X funktionierte das Template zuverlässig mit der gleichen Einschränkung, dem Anzeigenplatzhalter. Ebenfalls nicht überzeugend auf dem mobilen Client erschien der Style des zweiten Navigationslevels, der zugeklappt in weißer Schrift auf weißem Grund nur mäßig gut lesbar war. Das ist allerdings mit etwas eigenem Know-How schnell gefixt.


Android ICS: Unschöne Implementationsfehler zeigen sich…

Im Ergebnis kann sich Brownie durchaus sehen lassen. Wer den Einstieg in responsives Design direkt mit einer eigenen Website wagen möchte, kann anhand von Brownie einen schnellen Erkenntnisgewinn erzielen. Learning by doing funktioniert jedenfalls bei mir stets am besten. Zudem hat Saleem für eine recht vernünftige Dokumentation gesorgt.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Sven
Gast

Sehr sauberes und sehr schönes Template. Danke für den Hinweise.

eeee
Gast

gibt leider Probleme mit alten Internet Explorer, die Seite bleibt bei mir weiß.

Stefan
Gast

Super Template, ich nutze es gerade um mich mit dem Thema responsive zu befasssen.

Leider bin ich immer noch nicht dahinter gekommen wo man das dunkle Braun vom Menü Block ändert. Ansonsten ein klasse Ding

wpDiscuz