die Demo sieht so ganz anders aus als die fertige Seite…

Immer wieder erlebe ich, dass ein Kunde ein WordPress Theme auswählt, bei dem das Design der eigenen Webseite von der der Demo-Version des Themes stark abweicht, Bilder müssen mühevoll angepasst werden, das Handling ist schwierig, Frust vorprogrammiert.

Das passende Theme für Deine Seite zu finden ist ein wenig so wie einen passenden Neuwagen zu kaufen: wir lassen uns von dem schönen, schnittigen Zweisitzer blenden, obwohl wir eine Familienkutsche benötigen.

Auch ich habe bei der Theme Auswahl Lehrgeld bezahlt, deshalb habe ich in diesem Artikel die wichtigsten Punkte bei der Theme Auswahl zusammengefasst und gebe Dir eine Checkliste an die Hand, die Dir die Auswahl erleichtern wird.

 

Content first

Ähnlich wie beim Autokauf ist vorher zu überlegen, welchen Zweck Deine  Webseite erfüllen soll, wie die grundlegende Struktur aussieht, welche Bilder, Medien und Texte sie beinhalten soll.

Content precedes design. Design in the absence of content is not design, it’s decoration.
Jeffrey Zeldman (@zeldman) May 5, 2008

Dieser 10 Jahre alten Satz von Jeffrey Zeldman ist immer noch gültig, der Prozess eines Webprojektes beginnt mit einer Liste der Seiten der Website. So kann die Seite eines Freelancers etwa neben einer Startseite, eine Seite Über mich, eine Seite Kontakt und eine Porfolioseite beinhalten.
Im nächsten Schritt legst Du fest, welche Inhalte auf den einzelnen Seiten dargestellt werden sollen: für die Seite Über mich könnten das ein Foto, ein Text von 150 Worten und social share Icons sein.
Viele kostenlose Themes im WordPress Theme Directory  sind für Portfolios Webseiten gedacht, da hier die Bilder im Vordergrund stehen, für einen Blog sind sie eher ungeeignet, hier kannst Du besser auf Themes wie Twenty Sixteen zurückgreifen.

Theme-Typen

Grob kannst Du zwischen drei  Grundarten von Themes wählen:

  • Frameworks wie Genesis, Thesis oder Beans haben ein Grundgerüst, mit den wichtigsten Funktionen, sie bilden eine solide, flexible Basis,  sie sind rasend schnell und übersichtlich programmiert. Allerdings benötigst Du für Deine Webseite zusätzlich ein eigenes Childtheme für das Design oder Du greifst auf vorhandenes (kostenpflichtiges) Childtheme zurück. Frameworks benötigen für Anfänger einiges an Einarbeitungszeit und technisches Verständnis, dies solltest Du bei der Wahl berücksichtigen.
  • Am anderen Ende findest Du die sogenannten Multi-Purpose Themes wie BeTheme, Elegant Themes oder Avada-Theme. Sie alle kommen mit einem Drag & Drop Builder daher und liefern schnelle Ergebnisse.
  • Dazwischen gibt es eine Reihe von Themes, die leicht anzupassen sind wie etwa das Business One Page Pro Theme.

Bei der Auswahl des Grundtyps solltest Du berücksichtigen, wieviel Zeit und Geld Du investieren möchtest und wie groß Deine Erfahrungen und Dein technisches Verständnis ist.

Demo Content und Features

Eine Webseite soll immer kundenspezifische Inhalte in Form von Texten, Bildern, Graphiken und Texten haben, um Ihren Zweck zu erfüllen. Wenn Designer eine Theme Demo erstellen, legen sie den Fokus auf das Design und nicht auf die Inhalte. Deshalb lasse Dich nicht von einer gut aussehenden Theme Demo blenden, sondern prüfe, ob die Demo zu Deinem Content passt.

Allerdings kann eine Theme Demo hilfreich in Bezug auf die verwendeten Features sein:

  • passt die Seitennavigation? Soll Deine Seite z.B. ein Mega-Menü haben, dann ist es hilfreich, wenn das Theme dieses Feature von Haus aus mitliefert.
  • Wo ist das Logo positioniert?
  • Beinhaltet das Theme bereits Features wie Social Likes oder benötigst Du hierzu ein Plugin? Plugins haben den Vorteil, dass die Funktionen auch bei einem Themewechsel erhalten bleiben.
  • Wie lässt sich das Theme an Deine Bedürfnisse anpassen? Möchtest Du mit einen Builder wie den Visual Composer oder hast Du CSS Kenntnisse und kannst das Theme manuell anpassen?

Pagespeed

Wenn Du eine Reihe von Themes gefunden hast, die zu Deinen Inhalten passen und alle benötigten Features haben, macht es Sinn, die Demo-Seiten einem Pagespeed-Test zu unterziehen. Hier sind die Zahl der HTTP requests wichtig, sie sind ein Gradmesser für die Performance. Wenn Dein favorisiertes Theme eine schlechte Performance hat, benötigst Du auf jeden Fall ein Caching Plugin.

Ein Blick unter die Haube

Nun kommt die Probefahrt: hier gilt es ein Gefühl dafür zu bekommen, wie Du das Theme anpassen kannst. Wenn Dein Theme einen visuellen Editor benutzt, dann schaue Dir in einer Live-Vorschau die Funktionsweise an. Möchtest Du Deine Designanpassungen über CSS machen, solltest Du Dir den CSS-Code des Themes genauer anschauen:

  • wieviele Zeilen CSS wurden verwendet? Themes mit überschaubarem CSS sind in der Regel leichter zu handhaben.
  • Wieviele CSS Dateien gibt es? Auch hier gilt, wenige Dateien sind übersichtlicher und einfacher zu handlen.
  • Wie häufig wurde !important verwendet? Mit !important wird das Standard-CSS überschrieben, verwendet das Theme diese Eigenschaft häufig in seinem CSS, dann ist die manuelle Anpassung aufwendig.

Die Checkliste

Kurz und knapp ist auf folgende Punkte bei der Themeauswahl zu achten:

  • Der Inhalt und Zweck Deiner Seite steht an erster Stelle, wähle ein Theme, welches zu Deinen Inhalten passt.
  • Entscheide Dich für einen der drei Theme Grundtypen Framework, Multi-Purpose Theme oder ein Theme, welches leicht anzupassen ist.
  • Prüfe, ob die Demo-Seiten die von Dir gewünschten Features bieten.
  • Vergleiche die Pagespeed der Themes, die in die engere Wahl kommen.
  • Mache Dich mit dem visuellen Editor oder dem verwendeten CSS vertraut.

Links: