Theme Wahl bei Webseitenerstellung _ web.SKOR

Wie finde ich das passende Wordpress Theme?

Diese Frage stellen sich gerade viele junge Unternehmer, die versuchen ihre Webseite selbst zu erstellen. Und dabei ist es nicht unbedingt die beste Entscheidung einfach das Theme mit der schönsten Demo zu kaufen. Die Wahl sollte gut überlegt sein und damit Du die richtige Entscheidung triffst, haben wir ein paar heiße Tipps für Dich. (Und hey, der Artikel hat ein paar Affiliate Links – aber nur für echte Empfehlungen. Wenn du die Links zum Kaufen benutzt, unterstützt du uns dabei, weiterhin Content für dich liefern zu können, also vielen Dank!!)

Free oder Premium Wordpress Theme?

Da es so einige kostenlose Wordpress Themes auf dem Markt gibt, ist es kein Wunder, dass dies die erste Entscheidung ist, die wir treffen müssen. Klar nutzen wir alle gerne kostenlose Tools, aber leider ist es nunmal häufig so, dass Qualität kostet. Und das gilt auch für Wordpress Themes. Ich selbst habe vor Jahren bei meiner ersten Webseite – damals für's Fotografieren – ein kostenloses Theme genommen, weil ich nicht viel Geld ausgeben wollte. Allerdings habe ich schnell gemerkt, wie wahnsinnig limitierend das war und konnte zum Glück mit meinen Programmierskills zumindest etwas aus dem Theme rausholen. Sicherlich gibt es akzeptable kostenlose Themes, dennoch würde ich lieber das kleine Geld investieren, um vielleicht eine Lösung zu haben, die mit nicht so stark einschränkt und vor allem etwas länger hält. Denn bei kostenlosen Themes kann man den Hersteller-Support meistens vergessen und früher oder später verschwindet es vielleicht komplett vom Markt.

Was darf ein Wordpress Theme kosten?

Wenn wir nun also sagen, wir möchten etwas Geld investieren, um ein Theme zu kaufen: Wie viel darf das denn sein? Wordpress Themes kosten kein Vermögen. Durchschnittlich liegen die Preise zwischen 30 und 70 Euro. Letzten Endes liegt es natürlich bei Dir, wie viel du ausgeben möchtest, aber alles in diesem Bereich ist völlig okay. Solltest du auf ein Theme stoßen, das wesentlich mehr kostet, schau es dir genau an, bevor du zuschlägst.

Worauf muss ich beim Themekauf achten?

Kommen wir zum Kern des Ganzen: Wenn ich ein Theme kaufe, gibt es bestimmte Dinge, auf die ich besonders achte.

  • Bewertungen
  • Letztes Update
  • Kompatibilität
  • Inkludierte Plugins
  • Look and Feel

Für meine Theme-Suche nutze ich die Plattform Themeforest von Envato*. Das ist mit der größte Marktplatz für Themes, Plugins, Grafiken und vieles mehr und ich bin dort immer fündig geworden. Ich suche dort also nach "Wordpress + ggf. die Branche oder Stil" und dann fange ich zu stöbern an.

Bei den Filtern wähle ich direkt nur Themes aus, die durchschnittlich mehr als 4 Sterne bei den Bewertungen haben. Denn es gibt so viel Auswahl, da will ich nur das Beste sehen. Ich habe allerdings auch immer die Anzahl der Sales im Auge. Im Normalfall möchte ich ein Theme, dass zumindest ein paar hundert Mal verkauft wurde, damit die Sterne-Bewertung wenigstens einigermaßen aussagekräftig ist. Je mehr Verkäufe natürlich ein Theme hat, umso größer ist die Wahrscheinlichkeit, dass jemand in meinem Umkreis oder vielleicht sogar die Konkurrenz dasselbe Theme wählt. Aber damit muss man im Grunde immer rechnen, wenn man sich kein Individualdesign programmieren lässt. Jetzt habe ich also eine Übersicht der Themes*, die in Frage kommen können und schaue mir ein paar genauer an.

Ich habe mir ein paar Themes in einem neuen Tab geöffnet und gehe diese jetzt der Reihenfolge nach durch. Bevor ich mit eine Demo anschaue, werfe ich zuerst einen Blick auf die Facts, weil ich mich nicht von einem hübschen Look voreinnehmen lassen möchte. Dazu schaue ich mir die rechte Sidebar an, in der ich gleich als erstes sehen, wann das Theme zuletzt geupdated wurde und wann es erstellt wurde. Das letzte Update sollte nicht länger als zwei, drei Monate her sein, da wir sonst einfach Gefahr laufen, dass das Theme mit aktuellen Versionen von Wordpress oder Plugins nicht kompatibel sein könnte. Das Alter des Themes ist nicht immer ein guter Anhaltspunkt. Ganz generell würde ich sagen, alles zwischen einem und drei Jahren ist in Ordnung, aber auch hier gibt es Ausnahmen. Mein Lieblingstheme z.B. ist stolze 4 Jahre alt! Aber es wurde einfach über lange Zeit hinweg ständig aktualisiert, sodass es immer noch ein Top Theme ist. Bei Themes, die sehr jung sind, lohnt es sich einen Blick in das Portfolio des Herstellers zu werfen. Gibt es da andere Themes, die älter sind und immer noch geupdated werden? Denn die Gefahr des Verschwindens besteht natürlich auch bei Premium Themes. Auch ich hatte schon den Fall, dass nach zwei Jahren ein Theme einfach vom Marktplatz gelöscht wurde und man dementsprechend auch keine Updates mehr bekam. Kommt dazu eine große technische Neuerung (wie z.B. die Umstellung der Php Versionen, die vielleicht der ein oder andere mitbekommen hat) kann das schonmal das Aus für die Webseite bedeuten. Deswegen verlasse ich mich am liebsten auf bekannte Hersteller, denen ich vertraue. Eine 100%ige Sicherheit wird es da aber nicht geben.

Etwas weiter unten in der Infobox siehst Du dann noch mit welchen Browsern und Wordpress Versionen das Theme kompatibel ist. Achte da einfach darauf, dass hier aktuelle Versionen mit aufgelistet sind.

In der Beschreibung des Themes solltest Du einen Abschnitt finden, indem Dir die mitgelieferten Plugins angepriesen werden. Achte darauf, dass ein PageBuilder mit an Board ist wie z.B. WPBackery Page Builder, Elementor oder Cornerstone. Diese erleichtern die den Aufbau der Seiten enorm. Zusätzlich kann es nützlich sein, wenn ein Slider-Plugin mit inbegriffen ist, damit das nicht extra gekauft werden muss. Solltest du einen WooCommerce Shop an deine Webseite dranhängen wollen, muss das Theme selbstverständlich mit WooCommerce kompatibel sein. Mit weitere Features wie mobile Optimierung, SEO Ready, etc. wirft eigentlich jedes Theme um sich.

Jetzt darf ich mir endlich die Demo ansehen. Bei Themeforest klicke ich dazu auf das große Bild oben und kann mich dann durch die ausgestellten Seiten klicken. Schau Dir das ruhig ausführlich an, den Look des Menüs, Hover Effekte und schau eventuell sogar mit Deinem Handy auf die Demo-Seite, ob es Dir auch responsive gefällt. Achte auch ein wenig darauf, ob die Seitenladegeschwindigkeit in Ordnung ist. Oft sind Demo-Seiten zwar viel vollgepackter als Deine Webseite es sein wird, aber wenn du auf eine Seite jetzt schon mehr als 4 Sekunden warten musst, ist das alles andere als optimal.

Fazit

Auf diese Art vergleiche ich normalerweise 4-8 Themes miteinander und nehme am Schluss das, das alle meine Anforderungen erfüllt und mir optisch am besten gefällt.

Zum Schluss möchte ich gerne noch mein Lieblingstheme erwähnen, dass ich seit einigen Jahren immer wieder in Benutzung habe, weil es einfach Top ist. Flexibel, über Jahre hinweg aktuell gehalten, schön cleane Optik und jede Menge Funktionen. Das ist das Uncode* vom italienisch-schwedischen Hersteller Undsgn und da dafür gibt’s definitiv eine klare Empfehlung von mir. So, jetzt weißt Du endlich, worauf du achten solltest, also ab mit Dir auf die Suche und viel Erfolg!

 

*Affiliate-Link: Wenn Du über diesen Link einen Kauf tätigst, bekommen wir eine Provision. Dich kostet das natürlich keinen Cent mehr.


6 Tipps für mehr Barrierefreiheit auf Deiner Webseite

Wir kennen Barrierefreiheit unter anderem von Duschen, U-Bahnhöfen, Dokumenten und Büros – also aus den verschiedensten Bereichen unseres Alltags. Aber da, wo wir uns sehr häufig aufhalten, wird sie oft vernachlässigt: Im Web.

Warum Barrierefreiheit im Web?

Ebenso wie in den anderen Bereichen des Alltags, geht es darum eine Webseite für alle erlebbar zu machen. Wenn es uns nicht gelingt unsere Inhalte vollkommen barrierefrei anzubieten, dann sollten wir die Webseite zumindest so barrierearm wie möglich gestalten. Warum? Damit jeder Benutzer sich auf Deiner Webseite zurechtfinden kann, egal ob beispielsweise eine Sehbehinderung oder Leseschwäche vorliegt. Ein postiver Nebeneffekt: Von der Barrierefreiheit profitieren alle Nutzer, denn sie wird damit automatisch übersichtlicher, klarer und leichter verständlich. Und ganz nebenbei, aber nicht außer Acht zu lassen, freut sich Google über diese Optimierungen.

Der Selbsttest mit unserer Webseite

Wenn wir schon über Barrierefreiheit auf Webseiten reden, dann sollte man sich natürlich auch direkt bei der eigenen Nase fassen. Also testen wir direkt unsere eigene Startseite auf Barrierefreiheit. Dafür gibt es diverse Tools, ich habe mich für die Chrome Browser-Erweiterung Accessibility Insights for Web entschieden. Als Webentwickler sehe ich damit direkt, wo ich loslegen muss. Mit dem Schnelltest markiert mir die Erweiterung gleich die Fehler auf der Seite:

Barrierefreiheit im Web - Screenshot unserer Fehler im Test

In einem neuen Fenster öffnen sich die Details dazu. Diese verraten mir, dass der Kontrast des Buttons zu niedrig ist, was in einer schlechten Lesbarkeit resultiert. Da muss man also einfach an den Farben schrauben – kein großer Aufwand. Rechts beschwert sich das Tool über den fehlenden Alternativtext des Bildes und weiter unten auf der Startseite über einen fehlenden Link Text. Alles in allem habe ich schlappe 20 Minuten gebraucht, um diese Optimierungen umzusetzen. Das war aber natürlich nur die Spitze des Eisbergs. Bei der tiefergehenden Analyse stoße ich auf weitere Probleme. Was können Du und ich also tun, um unsere Webseite barrierefreier zu gestalten?

  1. Texte für Links und eingebettete Inhalte
    Links, die zum Beispiel auf Bildern liegen, sollten dennoch einen Text oder Title haben damit klar ist, wohin der Link führt, auch wenn man das Bild nicht erkennen oder sehen kann. Das selbe gilt für eingebettete Inhalte, also zum Beispiel iframes.
  2. Bild Alternativtexte
    Genauso brauchen natürlich Bilder Alternativtexte. Diese werden übrigens auch dargestellt, wenn Bilder aus anderen Gründen nicht geladen werden können und ganz nebenbei sind sie auch ein Leckerli für dein Google Ranking. In Wordpress geht das über die Mediathek.
  3. Labels für Kontaktformulare
    Formularfelder sollten immer ein zugehöriges Label haben. Damit wird klar definiert, welche Info in welches Feld eingetragen werden soll.
  4. Farbkontraste
    Einer der wichtigsten Punkte, denn er betrifft viele Menschen. Auf meinem iMac sehe ich Farbkontraste bis ins kleinste Detail, aber auf etwas schlechteren Bildschirmen wird das schon schwieriger. Für Menschen mit Sehschwächen umso mehr. Also achtet darauf, dass sich die Schrift immer gut vom Hintergrund abhebt.
  5. Bedienung per Tastatur ermöglichen
    Man sollte im Idealfall ausschließlich durch die Tastatur auf deiner Webseite navigieren können. Sorgt z.B. dafür, dass man eine Lightbox auch mit der ESC-Taste schließen kann, sonst hängen die User dort fest und kommen nicht mehr weiter. Auch Slider können per Tastatur bedienbar gemacht werden.
  6. Die richtige Sprache angeben
    Damit Vorlesetools die Webseite ordentlich lesen können, muss immer die richtige Sprache angegeben sein.

Testtools sind super, aber…

Natürlich greife ich als Techie zu allererst zu einem Tool, das mir meine Problemzonen aufzeigt und Optimierungsansätze vorschlägt. Aber verlass Dich nicht zu 100% auf technische Hilfen. Wenn Dir das Thema Barrierefreiheit im Web am Herzen liegt, würde ich Dir empfehlen menschliche Tester heranzuziehen. Die Meinung von Betroffenen wiegt immer noch am meisten!

Ansonsten können die Tools auf jeden Fall ein Schritt in die richtige Richtung sein. Sie helfen Dir einen Blick für die wesentlichen Probleme zu entwickeln und zumeist profitiert Deine Webseite auch insgesamt von den Optimierungen, wie bereits erwähnt. Also: auf die Barrieren, fertig, los!

Quelle: https://webaim.org/projects/screenreadersurvey/


search-centric-design Grafik | web.SKOR

Search Centric Design - das Ende der Navigation?

Nach und nach wird die klassische Navigation auf einer Webseite von dem Suchfeld verdrängt. Google beeinflusst unser Verhalten im Web und rückt die Suche immer weiter in den Mittelpunkt. Bedeutet das früher oder später das Aus der klassischen Navigation?

Die Navigation auf einer Webseite ist lange Zeit der zentrale Anlaufpunkt für Nutzer gewesen. Die gesuchten Inhalte findet man über Menüs, die auf unterschiedlichste Art und Weise dargestellt werden können. Heute hat sich das Top-Menü etabliert, das auf der linken Seite das Logo und auf der rechten Seite die komplette Seitenstruktur als Menü darstellt. Auch die laterale Navigation angeheftet im linken Bereich einer Webseite sieht man immer wieder, genauso wie das Burger Menü, das sich von den mobilen Ansichten auch auf die Desktops schleicht.

Wie navigiere ich allgemein am PC?

Wird die klassische Navigation auch weiterhin Bestand haben? Das Suchfeld drängt sich immer mehr in den Vordergrund, vor allem natürlich bei Online Shops. Denn Hand aufs Herz, wer benutzt auf Amazon und Co. denn schon die Kategorieliste und klickt sich da durch? Nein, natürlich tippt man viel schneller den Produktnamen in die Suchleiste ein und filtert vielleicht noch im Nachhinein die Ergebnisse.

Screenshot von www.amazon.de am 28.08.19

Persönlich merke ich diese Entwicklung schon seit einer Weile bei meinem eigenen Verhalten. Anstatt Lesezeichen zu nutzen, tippe ich die Schlagworte lieber in die Browserleiste und lasse mir von meinem Verlauf die entsprechenden Seiten vorschlagen. Als Mac-User öffne ich Apps so gut wie nie mit Dock oder sogar dem Apps-Ordner, sondern nutze einfach Spotlight, die integrierte Suche. Mit einem verinnerlichten Tastenbefehl (cmd + Leertaste) kann ich innerhalb von Sekunden die ersten Buchstaben eintippen und mit Enter öffnet sich auch schon das entsprechende Programm. Selbst auf meinem iPhone suche ich lieber, anstatt zu überlegen in welchem der Ordner nun die gewünschte App abgelegt ist.

Wer benutzt Search Centric Design?

Aber zurück zum Web. Bei Online Shops haben wir im Grunde schon geklärt, dass die Suche ein zentrales Element ist. Bei Amazon nimmt das Suchfeld beispielsweise fast die komplette Seitenbreite ein. Media Markt hat den Header sehr ähnlich gestaltet. Wenn wir uns die restlichen Top 10 der umsatzstärksten Online Shops in Deutschland ansehen, hat jeder davon die Suchleiste im Header integriert – wenn auch nicht alle so prominent wie bei den genannten Beispielen. Auf die klassische Seitennavigation verzichtet aber noch keiner davon.

Bei Webseiten wird das Thema Search Centric Design noch interessanter. Hierbei sind wir auf der Suche nach Informationen, nicht nach Produkten. Kann dieser Ansatz also bei Webseiten angewandt werden? Wie das wunderbar funktioniert, zeigt die Webseite der Techniker Krankenkasse. Während das klassische Menü dort nur aus zwei Punkten (ohne Dropdown) besteht, ist die Suche ganz klar der Star. Man findet sie nicht nur im Header, sondern auch innerhalb der Seite wird das Suchfeld deutlich in den Vordergrund gerückt.

Screenshot von www.tk.de/techniker am 28.08.19

Was muss die Suchfunktion einer Webseite können?

Persönlich finde ich den Ansatz des Search Centric Design sehr ansprechend und nutzerfreundlich. Aber nur, wenn die Suchfunktion nach gewissen Standards implementiert wird. Das A und O sind dabei die Ergebnisse. Eine Suche muss auf den Punkt genau die Produkte oder Unterseiten ausspucken, die auch wirklich relevant sind. Wirft man z.B. einen Blick auf die normale Wordpress Suche, sieht man gleich ein Negativ-Beispiel. Was also muss die Suche können?

  • Autovervollständigung der Suchbegriffe beim Tippen
  • Schnelle Ladezeiten
  • Übersichtliche Präsentation der Ergebnisse
  • Ein Filter zur Einschränkung der Resultate
  • Alternativvorschläge bei erfolgloser Suche

Und was bringt mir das Ganze?

Nicht immer ist Search Centric Design die beste Lösung. Wenn ihr z.B. nur wenige Unterseiten habt, gibt es schließlich kaum Inhalt, den man durchsuchen kann. Bei sehr großen Seiten kann im Gegenzug die Liste der Ergebnisse erschlagend lang sein. Für uns ist das Search Centric Design ein klarer Fall für A/B-Testings. Probiert also auf Eurer Seite aus, wie sich die Nutzer Verhalten wenn ihr die Suche in den Vordergrund rückt. Für Online Shops ist die Suche aber in jedem Fall ein Must-Have und am besten auch an prominenter Stelle. Je schneller Eure Kunden an ihren gewünschten Zielort kommen, umso zufriedener sind sie, wodurch auch die Kaufrate ansteigen kann. Wenn ihr auf eine Navigation komplett verzichtet oder sie vielleicht in ein Burger-Menü packt, profitiert ihr außerdem von einem übersichtlicheren Design für euren Header. Damit könnt ihr die Aufmerksamkeit des Nutzers klar auf das Suchfeld lenken. Aber: Wie bereits erwähnt, muss die Suche einwandfrei funktionieren. Liefert sie irrelevante Ergebnisse oder braucht sie zu lange, könnt ihr auch das genaue Gegenteil erreichen.

Seid auch vorsichtig damit, die Navigation komplett von Eurer Webseite zu verbannen. User, die sich nicht exakt wissen wonach sie suchen, sondern sich eher inspirieren lassen möchten, könntet ihr ansonsten verlieren. Der ideale Weg wäre für uns also diese Elemente ineinandergreifen zu lassen und je nach Bedarf den Fokus auf die Suche oder die Navigation zu setzen.