eDOSSIER

83.2017
shop.page-online.de/
downloads

Webdesign mit
Themes & Templates
So profitieren Designer und Developer
vom Trend zur Instant-Website

Templates als Agenturkonzept

Plus: Theme-Anbieter für hohe

Designansprüche

Das PAGE eDossier 83.2017 enthält einen Beitrag aus PAGE 09.2016 (EVT August 2016) im Originallayout.
Im Text enthaltene Links wurden beim Erscheinen des eDossiers nicht mehr geprüft.
IMPRESSUM Redaktion PAGE, Borselstraße 28, 22765 Hamburg; info@page-online.de; Telefon: 040 85183-400, Fax: -449; www.page-online.de. Chefredakteurin/Publisher:
Gabriele Günder, V.i.S.d.P. Autor: Arne Schätzle (as). Anzeigenleiter: Alexander Herz; alexander.herz@page-online.de; Telefon: +49 85183-480, Fax: -489 (verantwortlich für die
Anzeigen und Promotion); PAGE erscheint in der Ebner Verlag GmbH & Co. KG, Karlstraße 3, 89073 Ulm. Geschäftsführer: Gerrit Klein, Martin Metzger (Stellvertreter), Florian
Ebner. Alle Beiträge sind ur­he­berrechtlich geschützt. Alle Rechte, auch Übersetzun­gen und Zweitverwertungen, vorbehalten. Reproduk­tionen, gleich welcher Art, ob ­Fotokopie,
Mikrofilm oder Er­fas­sung in Datenverarbeitungsanlagen, nur mit schrift­­li­cher Genehmigung des Verlages. Eine Vermietung, Verleihung sowie Verkauf oder eine ­sonstige Form
der Zugänglichmachung an Dritte ist Ihnen nicht gestattet. Aus der Veröffentlichung kann nicht geschlossen werden, dass die beschriebe­nen Lösungen frei von gewerblichen
Schutzrechten sind. Für den Fall, dass hier unzutreffende Informationen enthalten sein sollten, kommt eine Haftung nur bei grober Fahrlässigkeit des Verlages oder seiner
Mitarbeiter in Betracht. Weitere eDossiers, Einzelhefte und Aboangebote gibt’s unter shop.page-online.de
090 PAGE 09.16 › WERKZEUG › Themes & Templates

WERKZEUG

Bei Themes und Templates

zählt Flexibilität: Sind
wesentliche Elemente wie
etwa das Menü in unter­
schiedlichen Varianten
verfügbar, lassen sich
schnell und unkompliziert
ver­schiedene Layouts
einer Webseite erstellen

Thema
Template
Dank Web-Templates und -Themes kann man mit wenigen
Klicks komplette Websites erstellen – ganz ohne Programmierkenntnisse.
Eigentlich kein Thema für professionelle Webdesigner. Oder doch?
● »Für 90 Prozent unserer Kunden entwickeln wir
ein individuelles Webdesign, aber kleine und mitt­
le­re Unternehmen, Start-ups oder Solopreneure kön­
nen sich das oft nicht leisten«, sagt Stefan Winter,
Gründer der Digital-Design-Agentur Wiesbaden am
Meer (  w ww.wiesbadenammeer.de  ). In diesem Fall
helfen Themes und Templates: Als Designvorlagen
haben sie alle gängigen Elemente einer Website an
Bord und lassen sich mit einigen Klicks anpassen.
Das verkürzt den Entwicklungs- und Gestaltungs­
prozess, spart Zeit und letztlich Geld. Ist also das
Budget knapp bemessen, kann man mit der passen­
den Vorlage kostengünstig eine komplette Website
erstellen. Soweit die Theorie.
Geht das wirklich so leicht?
Neben ThemeForest (  w ww.themeforest.com  ), dem
weltweit größten Marktplatz, tummeln sich Mitbe­
wer­ber wie TemplateMonster (  w ww.templatemons
­ter.com  ) oder Creativemarket (  https://creativemar
ket.com  ) im Netz. Was ist eigentlich der Unterschied
zwischen Themes und Templates? Während Themes
auf ein bestimmtes Content-Management-System
wie WordPress abgestimmt sind, handelt es sich bei
Templates um HTML-Vorlagen, deren Einsatz auf
kein bestimmtes CMS begrenzt ist. Daneben gibt es
Vorlagen für E-Mail-Marketing oder Shopsys­teme
wie Magento oder Shopify. Während Themes relativ
einfach zu installieren und anzupassen sind, erfor­
dern Templates mehr Programmierkenntnis­se, um
sie auf das gewünschte Backend abzustimmen.
Allen Beschwörungen einer komfortablen Nut­
zung von Designvorlagen zum Trotz: Ohne Fachwis­
PAGE 09.16 091
sen kommen Laien schnell an ihre Grenzen. So lan­
den viele letztlich doch bei professionel­len Webent­
wicklern wie Martin Szymanski, Techni­scher Bera­
ter und Frontend Developer aus Hamburg (  w ww.
elfacht.com  ). Nachdem er für Agentu­ren wie Fork
­Un­stable Media oder Scholz & Friends gearbeitet
hat­te, machte er sich 2010 selbstständig. Regelmä­
ßig kom­men Agenturen oder Unternehmen mit der
Bitte auf ihn zu, ein Theme auszusuchen und ein­zu­
xxxxxxxxxxxxxxxxxxxxxxx
richten. »Man sollte dem Kunden allerdings von Be­
»Der Grund- ginn an klar machen, dass sich ein Template nicht
immer beliebig anpassen lässt«, mahnt er.
gedanke aller Denn oft reichen Kunden ihre Designwünsche im
Themes und Projektverlauf nach: Eine Galerie im Header der Sei­
Templates te soll es noch sein. Oder die Inhalte mittels Akkor­
ist eigentlich deonfunktion animiert ausklappen. Fehlende Funk­
tionen oder Module Code zu ergänzen, erfordert eine
ein guter, intensive Einarbeitung in die Programmierung der
nämlich: Vorlage, was wiederum Zeit und Geld kostet. Des­
Jeder hat das wegen sollte man schon bei der Auswahl des Tem­
plates gezielt vorgehen.
Recht auf
eine schöne Gibt es eigentlich eierlegende
Website« Wollmilch-Templates?
Allein ThemeForest brüstet sich mit einem Angebot
Martin Szymanski,
Technischer Berater
von über 24 000 Themes und Templates – wie trifft
und Frontend man da eine fundierte Auswahl? Grundsätzlich kom­
Developer in Hamburg men für den professionellen Einsatz ausschließlich
↗  www.elfacht.com Premium-Themes oder -Templates, sprich kosten­
pflichtige, infrage. Die Vorlagen sind zwar nach Ver­­
wendungszweck vorsortiert wie Corporate, Enter­
tainment oder E-Commerce, aber auch in den Rubri­
ken fühlt sich manch Suchender von der Wucht
092 PAGE 09.16 › WERKZEUG › Themes & Templates

des Angebots erschlagen. Und in den Be­schrei­

bun­gen protzen zahlreiche Anbieter mit ähn­li­chen
Optionen und Features, preisen Kompatibilität, Um­
fang und Performance.
»Viele Features und gute Performance sind aller­
dings ein Widerspruch«, bemerkt Martin Szymanski.
Lahmt später also die Seite, muss man dem Kunden
Ein Template, drei von
mehreren hundert
erläutern, dass die Ursache bereits im Template ange­
möglichen Looks: Be­- legt ist. Besser also, man hält Ausschau nach schlan­
Theme des Anbie­ters ken Kandidaten. Am besten, man erstellt vor der
Muffin group ( h   ttp:// Suche ein Anforderungsprofil.
themes.muffin­group.
com/be/splash )  hat Was sagt die Community?
von Haus aus über 200
Einige Kriterien lassen sich ohne Weiteres im Vor­
unter­schiedlich gestal-
­tete Designs an Bord.
we­ge abklopfen: Handelt es sich um einen erfahre­
Konsequenz: Ohne nen Anbieter, der schon mehrere Themes veröffent­
umfassende Einar­bei­- licht hat, oder um einen ambitionierten Novizen?
tung ist die volu­mi­nö-­ Ist die Vorlage bereits länger im Angebot oder reiht
se Vorlage nur schwer man sich mit der Installation in den erweiterten Kreis
zu konfigurieren der Betatester ein? Auch ein Blick auf die Communi­
ty hilft bei der Einschätzung: Welche Stimmung ver­
mitteln die Kommentare? Welche Probleme gibt es?
Werden Fragen vom Entwickler beantwortet und gibt
es einen guten Support oder nur ein internes Ticket­
system? Verkauft es sich gut? Wie sind die Bewertun­
gen? So sammelt man zumindest Indizien.
Meist präsentiert sich jedes Theme oder Template
als Demoversion, die alle Funktionalitäten bei­spiel­
haft durchspielt – das sieht zumeist beeindruckend
aus, aber so richtig Bescheid weiß man erst nach
5 Anbieter für hohe Kauf und Installation, wenn man auch die tech­ni­
Designansprüche sche Qualität der Vorlage erkennen kann. Der ers­te
Blick gilt den Theme-Optionen. »Es gibt immer noch
Swift Ideas Themes, bei denen man nur aus einer Handvoll vor­
Technisch ausgereifte WordPress-Themes mit gegebener Schriften auswählen kann oder die Farb­
flüssigen Animationen, die mit viel Liebe zum einstellungen nicht seitenübergreifend funk­tio­nie­
Detail gestaltet sind ren«, bemängelt Martin Szymanski. Die meis­ten Vor­
↗  www.swiftideas.com lagen bieten neben den üblichen Settings wie Farben
Elmastudio und Schriften auch die Möglichkeit, Seiten aus vor­
Sauber gearbeitete WordPress-Themes in konfigurierten Elementen zusammenzu­stellen. Oft
minimalistischem Design, klar strukturiert, eher sind das vorkonfigurierte Module wie Slider, Gale­
für Blogs und Webseiten mit kleinem Umfang rien oder Header, die man mit einem Klick einfügen
↗  www.elmastudio.de kann. Viele Vorlagen bieten Module und Komponen­
ten zusätzlich als Shortcode an, den man individuell
Out of the Sandbox
platzieren kann. Mit Pagebuildern wie dem Word­
Shopify-Themes mit Platz für Storytelling.
Press-Plug-in Visual Composer lassen sie sich über
Weniger für Massenprodukte als für wertige
ein grafisches Interface per Drag-and-drop anpassen.
Artikel in kleinerer Auflage
↗  https://outofthesandbox.com Designvorlagen mit
cr3ativ.com Kopfschmerz-Garantie
Reduzierte Themes mit Fokus auf Benutzer­ Komplexe Themes und Templates mögen zwar für
freundlichkeit, Lesbarkeit und einer Vorliebe alle Eventualitäten vorbereitet sein, sie anzupassen
für Weißraum PAGE eDossier
»Webdesign ist jedoch mühsam und zeitraubend. Norman Lorch
↗  https://cr3ativ.com vom Webstudio Modularte aus Mühl­heim am Main
heute – standar­disiert
ThemeTrust oder individuell?« hat es ausprobiert – anhand des Themes Betheme
Kleines Designstudio mit geringem, aber hoch­ Lesen Sie mehr zu (  http://themes.muffingroup.com/be/splash  ), das
responsiven Design-
wertigem Output, klar und sauber gestaltet sowie sei­ne Macher auf ihrer Website vollmundig als »The
Templates und
mit hoch gelobtem Support
Website-Baukästen
biggest WordPress-theme ever« deklarieren. Und tat­
↗  https://themetrust.com ↗   www.page-online. sächlich bringt es Vorlagen für über 200 Seiten mit.
de/PDDP1083   Schon in den vorkonfigurierten Einstellun­gen des
 PAGE 09.16 093

Templates als
Agenturkonzept
● Neben der Entwicklung individuel­
ler Websites setzt das Webstudio Mo­
dularte in Mühlheim am Main (  w ww.
modularte.de  ) seit einiger Zeit auch
auf die Entwicklung schlanker, maß­
geschneiderter Templates. In Mühl­
heim nennt man sie »Modelle«, die
Hessen wollen mit ihnen zum einen
den Entwicklungsprozess optimieren,
denn »man muss nicht jedes Mal das
Rad neu erfinden«, so Norman Lorch,
Webarchitekt und Gründer des Web­
studios. Die Modelle vertreibt Modu­
larte entweder direkt an Kunden oder
an Designstudios, die sie nach eigenen
Vorstellungen anpassen und mit In­
halten befüllen können.
Zum anderen profitieren auch die
Studiokunden, wenn auf Basis eines
Modells mehrere Websites entste­hen:
Für ihren Kunden internetstores, einen
internationalen E-Commerce-Spe­zia­
listen für Bike- und Outdoor-Produkte
mit Sitz in Stuttgart, Berlin und Stock­
holm, setzte Modularte auf Grundla­
ge eines eigenen Modells gleich meh­
rere Brandseiten um. Es eignet sich
aber auch für Start-ups oder kleine
Unternehmen.
Ins­besondere E-Commerce-Seiten
bieten sich für eine »Modell«-Vorlage
an, da sie sich in ihrer Struktur zu gro­
ßen Teilen ähneln. So hat Modu­larte
auch ein Theme für Onlineshops ent­
wickelt und gemeinsam mit ihrem
Partner, dem Designstudio Wies­ba­den
am Meer, für einen Kunden, den On­
lineshop P2 für Mode und Accessoi­
res, umgesetzt. Weitere Website-Vorla­
gen für die un­terschiedlichsten Bran­
chen sollen folgen.
Unten: Für den Onlineshop P2 aus Darmstadt Auch diese fünf Brand-Sites für
( w
  ww.p2-darmstadt.de )  setzte Modularte ihr eigenes den E-Commerce-Anbieter
Modell »Blacktip« ein, eine Vorlage für E-Commerce- internetstores basieren auf der
Seiten (Mitte). Die leere Vorlage der Seite (oben) lässt vom Webstudio Modularte
sich nach dem Start flexibel befüllen entwickelten Vorlage »Blacktip«
094 PAGE 09.16 › WERKZEUG › Themes & Templates
Vom Template zur Website: Zunächst lädt man die Demovorlage in den Webeditor
Pinegrow. Mit dessen Live-Editing-Funktion lassen sich alle Änderungen in HTML und
CSS sofort sichtbar machen und in verschiedenen Auflösungen bearbeiten
Flexibilität mit Pinegrow
● Statt für jedes Projekt eine neue
Vor­lage zu suchen, setzt Screende­
sign- und Prototyping-Experte Lars
Richter auf die Kombination aus ei­
nem Template und dem Webeditor
Pinegrow. Mit ihm passt er ein und
dieselbe Vorlage für unterschiedli­che
Projekte an. Richter bevorzugt Tem­
plates auf Basis von Bootstrap, wie
man sie beispielsweise bei WrapBoot­
strap (  https://wrapbootstrap.com  )
fin­det. Das CSS-Frame­work bringt
be­reits viele entscheidende Funk­tio­
nalitä­ten mit, unterstützt fast sämt­
liche gän­gi­gen Brow­ser und arbeitet
Themes könne sich selbst ein Experte mehrere
Wochen verlieren. »Das Theme ist so komplex, man
bekommt Kopfschmerzen«, berichtet Nor­man
Lorch. Auch an Anpassungen im Code ist nur be­
dingt zu denken, derart verschachtelt und kompli­
ziert präsentiert sich die Programmierung. Mit dem
Webstudio Modularte folgen Norman Lorch und
sein Kompagnon Alain van der Gugten daher dem
Prinzip des »Weniger ist mehr« (siehe »Templates
als Agenturkonzept«, Seite 93).
Hat man vor, in einem WordPress-Theme eigene
Features zu programmieren, sollte man überprüfen,
ob es die Möglichkeit gibt, ein Child Theme anzule­
gen, sonst gehen beim Update des Parent Themes
die eigenen Anpassungen verloren. Will man in ei­
nem Template eigene Ergänzungen programmieren,
ist die Codequalität essenziell. »Ist der Code durch­
dacht angelegt und sauber aufgebaut, kommt man
damit meist besser klar, als wenn ein Entwickler nach
seinen eigenen Kriterien programmiert hat«, kon­
statiert Lars Richter, Coach und Experte für Screen­
design und Prototyping in Köln. »Oft ist das dann
recht umständlich anzupassen.« Daher hält er Aus­
schau nach einem möglichst wandlungsfähigen Tem­
plate, das er für viele unterschiedliche Aufträge ein­
setzen kann, statt für jeden neuen Kunden eine neue
Vorlage zu suchen (siehe links).
Damit keine Missverständnisse aufkommen: »Der
Grundgedanke aller Themes und Templates«, meint
Martin Szymanski, »ist eigentlich ein guter, nämlich:
Jeder hat das Recht auf eine schöne Website.« Die
Umsetzung dieses Prinzips mit Themes und Tem­
plates kann nach wie vor funktionieren. Solange man
mit dem Kunden die richtigen Absprachen trifft und
für die Auswahl die richtige Strategie findet. Denn
Ziel aller Designoptionen ist es doch, den Content
ins rechte Licht zu rücken. Diesen Vorsatz muss gu­
tes Webdesign berücksichtigen. Daher haben wir ei­
nige Anbieter reduzierter Vorlagen in einer Liste
(siehe »5 Anbieter für hohe Designansprüche« auf
Seite 92) zusammengestellt. as
mit res­ponsiven Fluid Grids. Seine
baukastenartigen Elemente lassen
sich bei Bedarf mittels CSS anpassen
oder erweitern: Farben, Typografie,
Schatten, Stile, Abstände et cetera,
selbst Verläufe und Transparenzen
kann man definieren.
Wichtiger als das Design ist Lars
Richter bei der Wahl des Templates,
dass es die Grundelemente einer Sei­
te in verschiedenen Varianten zur
Ver­fügung stellt, um etwa ein Menü
unkompliziert in unterschiedlichen
Op­tionen auszuprobieren, sei es als
Sidepanel oder im Footer et cetera.
Inspiration pur!

Gleich
zugreifen !

PAGE präsentiert die entscheidenden Trends

in Sachen Konzeption, Gestaltung & Technik.
Jetzt zugreifen: shop.page-online.de/page-mini