Menu

Gedanken

Mein Toolset als Freelancer

Mein Toolset

Immer wieder kommt die Frage auf, welche Themes, Plugins oder Online-Tools ich als Mediendesigner und Webworker nutze. Daher an dieser Stelle eine kurze, nicht abschließende Zusammenstellung meiner bevorzugten Werkzeuge, Plugins und Services, die ich selbst auf meine Seiten verwende oder guten Gewissens weiterempfehlen kann.

Mit Sicherheit werden hier über die Zeit auch einige Punkte wieder gestrichen bzw. durch etwas Neues ersetzt werden. Daher lohnt sich immer mal wieder ein Besuch auf dieser Seite.

Ich hoffe, diese Liste hilft Dir weiter!

Hosting von Webseiten

Spätesten wenn man seine eigene Webseite online bringen möchte, benötigt man eine zuverlässigen und guten Provider.

Ionos

Meine Seite läuft seit Jahren über Ionos*, was vor nicht allzu langer Zeit noch unter 1&1 Webhosting zu finden war. Ich verwalte derzeit alle meiner eigenen Webprojekt wie auch viele meiner Kundenseiten bei Ionos. Bisher gab es noch keine Probleme und der Support ist exzellent.

Hosteurope/All-Incl.

Bei einigen Kundenprojekten hatte ich auch Gelegenheit, mit Hosteurope und All-Inkl. zu arbeiten. Beide bieten in meinen Augen ein sehr gutes Preis-Leistungs-Verhältnis.

WordPress Themes

Wer die Wahl hat, hat die „riesengroße“ Qual! Mittlerweile findest Du unter WordPress.org an die 7.700 kostenlose Themes. Dazu kommen noch mal unzählige Premium Themes auf dem freien Markt. Derzeit wächst auch rasant der Markt für die Full Site Editing Themes.

Premium Themes

Seit Jahren arbeite ich erfolgreich mit dem Framework von Themify. Neben dem Page Builder Pro, der mir erlaubt, Themes von Grund auf neu zu gestalten, biete Themify auch fertige Themes an. Bevorzugt nutze ich hier als Basis das Ultra* alternativ für E-Commerce Seiten das Shoppe*. 

Kostenlose Themes

Auch hier bietet Dir Themify eine kleine Auswahl inklusive der Funktionen des Page-Builders. Alternativ ist das OceanWP oder das „schlanke“ Astra-Themes eine gute Wahl. Von beiden gibt es natürlich auch eine erweiterte Pro-Variante mit einem größeren Funktionsumfang.

Plugins für WordPress

Was ich an Themify so liebe ist das „All in One“. Auch im Bereich Plugins bietet Dir Themify eine stattliche Auswahl an, die zudem perfekt auf den Page-Builder abgestimmt sind. Die umfangreiche Sammlung deckt bereits eine große Menge an auftretenden Einsatzgebieten ab, sodass ich hier nicht nach Alternativen Ausschau halten muss. Eine Übersicht findest Du in diesem Artikel. Für ganz spezielle Aufgaben kommen noch einige externe Plugins zu Einsatz:

Antispam Bee

Die fleißige Biene, wenn es um Kommentar- und Trackback-Spam-Bekämpfung geht. Sie darf in keinem Blog fehlen!

BackWPup

Für die Sicherung und Backups meiner Seite nutze ich seit Jahren problemlos das BackWPup-Plugin.

Woo Commerce

E-Commerce und Shopseiten realisiere ich vorzugsweise mit WooCommerce. Als eine alternative „Checkout-Lösung“ funktioniert auch Shopify hervorragend.

Insert Special Characters

Ein kleines Extra, was ich eigentlich im Gutenberg Editor noch immer vermisse, die Sonderzeichen. 

Table Press

Mit TablePress realisiere ich mit Vorliebe die tabellarische Aufarbeitung von Daten. Die Tabellen liegen dezentral auf meiner Seite, sind leicht zu bearbeiten und werden mittels eines Shot-Codes in den Artikel eingebunden. Einfache kann es eigentlich nicht laufen.

Table of Content Plus

Ein sehr ansprechendes und strukturiertes Inhaltsverzeichnisse für längere Artikel schaffst Du Dir mit Table of Contents Plus.

RankMath

Mein derzeit bevorzugtes SEO Plugin. Begonnen habe ich mit dem bekannten Yoast Plugin, doch mittlerweile habe ich alle Projekte auf RankMath umgestellt. Der Funktionsumfang ist bei RangMath in der Free-Version doch ein wenig umfangreicher.

DSGVO Pixelmate

Mein bevorzugtes Cookie Plugin. In diesem Artikel stelle ich das Plugin näher vor und zeige Dir, wie Du es für den Cookie-Betrieb einrichten kannst.

Online Business Tools

Als Freelance Designer nutze ich in vielen Bereichen online Tools und cloudbasierte Anwendungen. Das ist schon allein meiner Philosophie des papierlosen Büros geschuldet.

Lexoffice

Einer der größten Posten ist dabei die Buchhaltung. Früher waren dies immer Berge von Ordner und Papier. Lexoffice regelt nicht nur meine Papierflut, sondern managt auch gleich meine komplette Buchhaltung bis hin zur Kundenverwaltung sowie Angebots- und Rechnungsstellung.

E-Recht24

Beim juristischen Content, sprich dem Impressum und dem Datenschutz bevorzuge ich den Service von e-Recht24.

LawLikes

Anderweitige juristische und fachliche Beratung, spezielle für Arbeiten im digitalen Bereich hole ich mir bei LawLikes

Newsletter 

Meine Newsletter erstelle und versende ich über den Service von MailChimp. 

Design Tools

Auch wenn mittlerweile die verschiedensten Online Tools auf dem Markt sind, kommt man nicht umzu, in die eine oder andere Software zusätzlich zu investieren. Neben den Klassikern von Adobe habe ich mir über die Jahre verschieden Software zugelegt, um ganz spezielle Arbeiten zu realisieren. 

Adobe CC

Geht es in den professionellen Bereich von Grafik- und Webdesign, kommt man um die Anwendungen von Adobe „kaum“ drumherum. An vorderster Front stehen hier natürlich Photoshop, Illustrator und InDesign. Wobei diese mittlerweile von „Affinity“ eine ebenbürtige Konkurrenz bekommen haben.

Adobe XD

Vor einem Webprojekt steht immer eine ausführliche Analyse und Planung des Projekts. Aus der Summe entsteht letztlich ein voll funktionsfähiger Prototyp der zukünftigen Seite. Vor noch nicht allzu langer Zeit war hier immer Photoshop im Einsatz, mittlerweile erledigt Adobe XD diesem Job! Und, zugegeben, um Längen besser als Photoshop.

Adobe Express

Ein relativ neuer Stern im Adobe Universum ist „Adobe Express“ als eine Alternative zu Canvas & Co. Eine leicht zugängliche Oberfläche für einfachere Gestaltungen mit vielen Vorlagen und Schnellwerkzeuge für immer wieder anfallende Arbeiten. Sehr interessant für die Bearbeitung und Unterhaltung von Social Media Kanälen. Die grundlegenden Funktionen sind kostenfrei, Inhaber einer CC-Lizenz profitieren von weiteren, nützlichen Features wie beispielsweise einem Style Guide für Brands sowie einer automatisierten Kalenderfunktion zum Posten von Social Media Inhalten.

Designerr

E-Books, sei es als Anleitungen oder Newsletter-Beigaben, realisiere ich gerne über Designerr*. Mit einer umfassenden Importfunktion erlaubt mir die Anwendung, aus den verschiedensten Medienquellen sehr einfach und komfortabel ein E-Book zu gestalten. Gegenüber dem herkömmlichen Satz spart man an dieser Stelle ungemein Zeit ein.

Mail Designer Pro3

Ein Eckstein erfolgreicher Webprojekte ist das E-Mail Marketing. Spezielle Kampagnen realisiere ich im Mail Designer. Er biete mir deutlich mehr kreativen Spielraum als die Gestaltungstools beim jeweiligen Mail Anbieter. Zudem hat er eine perfekte Exportfunktion, um meine fertigen Designs beispielsweise bei MailChimp zu integrieren

Screen Flow10

Ich möchte behaupten, dass Screen Recording Tool schlechthin! Wenn es um den Mitschnitt am eigenen Bildschirm geht, wie beispielsweise WordPress Tutorials oder Erklär Videos für meine Kunden. Ich nutze hier derzeit ScreenFlow 10.

0to255.COM/ColorMind.IO

Wenn es um das Thema Farben geht, sei es eine ansprechende Kombination zu finden oder Nuancen einzelner Farben zu generieren, dann sind diese beiden Online-Tools meine Favoriten. In diesem Artikel stelle ich die bei näher vor.

Modular Scale/Type Scale

In einem Webprojekt gilt es auch immer eine spezielle Typo-Hierarchie zu finden. Hier helfen die beiden Online-Tools ModularScale und TypeScale.

IA Writer

Für meine Texte und Blogartikel favorisiere ich den iA Writer. Eine sehr cleane Schreibumgebung ohne großes Drumherum und mit einem klaren Fokus auf das geschriebene Wort.

KI-Tools

Willkommen im neuen Zeitalter der künstlichen Intelligenz. ChatGPT legte vor und mittlerweile sprießen die KI-Tools wie Pilze aus dem Boden. Einem Trend, dem man sich kaum entziehen kann. Mittlerweile habe ich mich mit den Möglichkeiten und Tools auseinandergesetzt und zwei Kandidaten für mich gefunden. Interessant ist für mich vor allem die schreibende KI-Unterstützung, sei es bei Blogartikeln oder Marketingtexten. Momentan noch etwas dünn besiedelt ist die Verarbeitung hinsichtlich der deutschen Sprachunterstützung.

Neuroflash

Abhilfe leistet hier „Neuroflash“, eine in Deutschland entwickelt KI, was auch ein Grund ist, warum das Tool zu den besten deutschsprachigen KI-Textgeneratoren zählt. Neben dem KI-Texter lassen sich auch Bilder und Avatare generieren. In der Free-Version mit 2000 Wörtern im Monat ist dies ein mächtiges Werkzeug für Content-Creator und Blogger.

GetGenie

Als ein direktes Plugin für WordPress konzipiert, gilt „GetGenie“ momentan als beste GhatGPT Alternative. Hier handelt es sich ebenso um einen KI-Textgenerator inklusive einer SEO-Funktion. Hinter diesem Tool steckt dieselbe Technologie wie in ChatGPT. Mit dem Blog Wizard oder dem Genie Mode lassen sich sehr komfortabel Einzeltexte oder ganze Artikel generieren. Auch hier gibt es einen kostenlosen Einstieg mit 1500 Wörtern im Monat und die deutsche Textunterstützung ist hervorragend.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

feat-google-analytics

Google-Analytics illegal, Matomo eine Alternative?

Derzeit häufen sich die Eilmeldungen in den Tec-Blogs: „Google-Analytics in Österreich illegal!“ Welchen Hintergrund hat diese Aussage und was bedeutet das für Deutschland und die EU? Was passiert nach Google Analytics und gibt es Alternativen?

Was ist eigentlich passiert?

Die österreichische Datenschutzbehörde (DSB oder DPA) hat Verstöße gegen die geltende DS-GVO auf österreichischen Webseiten, die mit Google-Analytics laufen, festgestellt. Der diagnostizierte Verstoß geht auf eine Entscheidung des Gerichtshofes der Europäischen Union (EuGH) aus 2020 zurück.

In diesem wurde festgestellt, dass in den USA gehostete Cloud-Dienste nicht in der Lage sind, die DS-GVO und die EU-Datenschutzgesetze einzuhalten. Das Urteil aus 2020 (Schrems II) markierte somit das Ende des Datenschutzschildes, was die Übermittlung von EU-Daten an zertifizierte US-Unternehmen ermöglichte. Nach diesem Urteil herrschte eine gewisse Unruhe in der Branche, allerdings entschieden ein Großteil der US- und auch EU-Unternehmen, dieses Weitergehens zu ignorieren.

„Anstatt Dienste tatsächlich so anzupassen, dass sie DSGVO-konform sind, haben US-Unternehmen versucht, ihren Datenschutzrichtlinien einfach einen Text hinzuzufügen und den Gerichtshof zu ignorieren. Viele EU-Unternehmen sind dem Beispiel gefolgt, anstatt auf legale Optionen umzusteigen.“

Max Schrems, Jurist und Datenschutzaktivist

In diesem speziellen Fall geriet ein österreichisches Unternehmen in die Schusslinie der Datenschutzbehörde, was unter anderem eine saftige Geldstrafe in Millionenhöhe mit sich brachte. Es wurde festgestellt, dass IP-Adressen und andere Identifikationen aus Goggle-Analytics in die USA übermittelt wurden.

Google und auch andere US-Anbieter unterliegen dem US-Überwachungsgesetz. Sie sind verpflichtet, personenbezogene Daten an US-Behörden weiterzuleiten. Somit sind derartige Dienste, trotz verklausulierter Verträge, nicht in der Lage EU-Datenschutzgesetze und das nach Artikel 44 DS-GVO geforderte Schutzniveau einzuhalten (EuGH Entscheidung zum Privacy Shield, Scherme II).

Es ist 5 vor 12!

Das Alarmierende an diesem Vorfall, es schafft einen Musterfall im gesamten europäischen Raum. Daher kann man davon ausgehen, dass auch weitere EU-Mitgliedsstaaten bald dieser Entscheidung folgen werden. Dieses Gerichtsurteil ist also nicht zu ignorieren!

Man kann mit sehr hoher Wahrscheinlichkeit davon ausgehen, dass die Datenschutzorganisation NOYB sowie lokale Datenschutzbehörden auf dieser Grundlage weitere Unternehmen ins Visier nehmen werden.

Das bedeutet konkret, dass ein weiterbetreiben von Google-Analytics illegal wird und bei Aufdeckung nicht unerhebliche Strafen nach sich zieht.

Google-Analytics Alternative Matomo (Piwik)

Was kann man in diesem Zusammenhang bereits jetzt unternehmen? Wenn man Google-Analytics auf seiner Seite in Betrieb hat, sollten man sich spätestens jetzt nach einer Alternative umschauen.

Es gibt eine Vielzahl an Google-Analytic Alternativen. Zugegeben, Google hat uns über die Jahre sehr verwöhnt, mit einer relativ einfachen Integration, immer ausgefeilteren Analysen und nicht zuletzt den enormen Umfang an neuen Tools und Möglichkeiten. Es gibt aber auch andere Anbieter und Tools, die ähnliches leisten. Eine Analyse-Software aus dem Open-Source Bereich ist Matomo (ehemals Piwik).

Zahlen und Fakten

Piwik erschien in seiner ersten Version Anfang 2008 auf dem Markt und ist eine Weiterentwicklung des mittlerweile eingestellten „phpMyVisites“ Projektes. Bis 2018 wurden es 3,4 Millionen Mal heruntergeladen und zählt als direkter Konkurrent zu Google-Anaytics. Im deutschen Raum hat Matomo (Piwik) derzeit ein Marktanteil von über 14 Prozent und belegt hinter Google-Analytics Platz 2 bei gleichartiger Anbieter.

Das Open-Source-Tool ermöglicht genaue Analysen der Gesamtperformance sowie des Nutzerverhaltens. Es kann in der Cloud des Anbieters sowie auf einem eigenen Server betrieben werden. Letzteres garantiert 100%ige Datenhoheit und bietet somit auch die absolute DS-GVO Konformität und Rechtssicherheit.

Pro und Kontra

Auf der Pro Seite kann Matomo auch mit einer sehr hohen Datenqualität überzeugen, der eine deutlich weitreichendere Datenerhebungen zugrunde liegen. So sind mit dem Open-Source-Tool aussagekräftigere und genauere Analysen der Gesamtperformance und des Nutzerverhaltens möglich

Jede Customer-Journey wird 1:1 aufgezeichnet. Somit lassen sich die Bewegungsdaten einzelner Besucher bis auf die Personenebene betrachtet. Das ermöglicht den Matomo-Nutzern, genau herauszufinden, welche Inhalte besonders gut ankommen. Zudem besteht die Option eines individuellen Customer-Trackings, mit dem jede Interaktion eines Besuchers nachvollzogen werden kann.

Für Matono spricht auch, dass es nicht von AdBlockern blockiert oder gestört wird, den das Tool respektiert die Privatsphäre der Besucher. Das führt natürlich zu exakten und realistischeren Analysedaten. Referrer-Spam wird seitens des Matomo-Teams und der Community kontinuierlich gefiltert und in einer „Blacklist“ gepflegt.

Auf der Kontra-Seite steht erst einmal ein gewisser Mehraufwand, die Software zu laufen zu bekommen. Ganz so einfach wie bei Google Analystics geht es dann doch nicht. Matomo benötigt eine eigene Datenbank, die eingerichtet werden muss. Zudem muss die Software auf dem Server installiert und eingerichtet werden. Mit ein paar Grundkenntnissen lässt sich dies aber problemlos meistern.

Das Self-Hosting bedeutet aber auch, dass man sich ab jetzt selbst um die Sicherheit der von den Besuchern erhobenen Daten kümmern muss.

Fazit

Auch wenn das Urteil deutsche Seitenbetreiber momentan nicht berührt, ist davon auszugehen, dass gleichartige Urteile auch hierzulande kommen werde. Noch ist Zeit für eine Exit-Strategie in Sachen Google-Analystics, die man intensiv nutzen sollte.

In meiner Rolle als Webmaster hab ich einige Projekte, die mit dem Google Dienst laufen. Hier gilt es jetzt neue Strategien zu finden und auf datenschutzkonforme Alternativen umzusatteln.

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

header-typekit

Adobe Fonts im Themify Page Builder nutzen

Es gab einmal eine Zeit, da war die Schriftauswahl in einem Webprojekt sowas wie ein Kinderspiel. Die eigentliche Entscheidung war seinerzeit, aus einer Handvoll Systemschriften auszuwählen ob man das Projekt in einer serif- oder sans-serif Schrift gestaltet. Mittlerweile leben moderne Webseiten von ihrer Typografie, ich möchte sogar behaupten, sie sind ein essenzieller Bestandteil.

Die mannigfaltige Auswahl an Webfonts heutzutage macht dies möglich. Eine der großen Anbieter von Schriften ist Adobe Fonts, ehemals Adobe Typekit. In diesem Beitrag zeige ich Dir, wie Du Adobe Fonts im Themify Page Builder* oder allgemein in Deinem Webprojekt nutzen kannst.

Was sind die Adobe Fonts bzw. Typekit?

Bereits vor Typekit unterstützte jeder große Browser die Möglichkeit, auf eine Schriftdatei zu verlinken und diese mit ein wenig CSS anzupassen. Vor diesem Hintergrund brachte 2009 die Firma Small Batch Inc. die Plattform Typekit auf den Markt. Eine cloudbasierte Bibliothek hochwertiger Webschriften.

Das Revolutionäre an Typekit war eine einheitliche Lizenz für die Verlinkung von Web-Schriften, kostenlose als auch kommerzielle Schriftarten unglaublich schnell zu hosten, Unterschiede im Umgang von Browsern mit Schriftarten auszugleichen sowie Schriftdesignern ein Schutzniveau für ihre Arbeit zu bieten.

„Für Designer und Entwickler ist dies ein bedeutender Schritt nach vorne. Sie müssen Ihre Inhalte nicht mehr in Bildern oder Flash einfangen, nur um sich visuell auszudrücken. Seiten werden besser nutzbar, zugänglicher und indexierbarer. Dies ist ein massives Upgrade für das Web.“ so Jeffrey Veen, CEO von Typekit, zum Start der Plattform 2009.

Im Oktober 2011 übernahm Adobe die Firma als kreative Erweiterung ihres cloudbasierten Abo-Dienstes und entwickelt ihn kontinuierlich weiter. 2018 erfolgt dann die Umbenennung in Adobe Fonts. Mittlerweile wurden auch die Lizenz Modele und Einbettungsmöglichkeiten angepasst und vereinfacht.

Adobe Fonts vs. Goggle-Fonts

Die Adobe Fonts Bibliothek umfasst mittlerweile 20.000+ hochwertiger Schriften (Stand 2021). Bis auf ein paar kostenlose Schriften ist diese Bibliothek grundsätzlich kostenpflichtig. Zugang zum ganzen Angebot bekommst Du automatisch bei Abschluss eines Creative Cloud-Abos oder einer Software Einzellizenz.

Das günstigste Angebot wäre im Moment eine „InCopy“ Einzellizenz zu 5.94 EUR monatlich. Ein mehr als fairer Preis, allein für die nicht- und kommerzielle Nutzung der gesamten Schriftbibliothek.

Das große Manko in meinen Augen, eine „physische“ Auslieferung der eigentlichen Schriftdatei ist seitens Adobe nicht vorgesehen. Mit Beendigung Deines Abos gehen auch alle Schrifteinbettungen wieder verloren.

Ganz anders gestaltet sich dies bei den Google-Fonts. Der Zugriff auf die mittlerweile 1300+ Schriften (Stand 2021) ist grundsätzlich kostenlos. Viele Schriftarten sind unter der SIL Open Font License veröffentlicht, während andere unter der Apache-Lizenz veröffentlicht wurden. In beiden Fällen handelt es sich um freie Software-Lizenzen. Dies bedeutet, dass jeder Webseitenbetreiber sie frei verwenden kann, ohne mit Lizenzgebühren rechnen zu müssen.

Natürlich besteht zusätzlich die Möglichkeit, erweiterte Lizenz direkt bei der Gießerei oder dem Designer zu erwerben.

Zudem kannst Du dir alle Schriftdateien aus der Bibliothek oder auf der „goggle-webfonts-helper“ Plattform direkt herunterladen.

Wie bindest Du Adobe Fonts in Dein Projekt ein?

Wie oben bereits erwähnt, benötigst Du ein Konto sowie ein abgeschlossenes Abo bei Adobe, in welcher Form auch immer. Die gesamte Verwaltung übernimmt die Creativ Cloud Applikation. Von hier hast Du dann Zugriff auf die gesamte Schriftbibliothek sowie die Verwaltung Deiner installierten Schriften.

Um mit einzelnen Schriften auf Deinem Computer oder Laptop zu arbeiten reicht es aus, die jeweilige Schrift in der Bibliothek zu aktivieren. Die Schrift wird dann für die Zeit der Aktivierung in einem versteckten und verschleierten Ordner auf Deinem System installiert.

Ausgewählte Schrift mit den aktivierten Schnitten

Für die Nutzung in einem Webprojekt ist noch ein zusätzlicher Schritt notwendig. Die sogenannten Webfonts werden nochmal spezielle in einzeln angelegtem „Webprojekten“ gespeichert, auf das später verlinkt wird. Um die zu ladende Datei so klein wie möglich zu halten, macht es Sinn genau hier nur die wirklich benötigten Schriftschnitte zu aktivieren.

Neues Webprojekt anlegen oder einem bestehenden zuordnen

In diesem generierten „Webprojekt“ kannst Du weitere Einstellung für den jeweiligen Zeichensatz, wie OpenType-Funktionen und Sprachunterstützung, steuern. Und nicht zuletzt bekommst Du an dieser Stelle den benötigten CSS-Code für Deine Website.

Webprojekt in Adobe Fonts anlegen

Als ersten Schritt suchst Du dir Deine bevorzugte Schrift aus der Bibliothek aus. Auf der Detailansicht des jeweiligen Fonts findest Du rechts oberhalb den Link „zu Webprojekt hinzufügen“. In dem sich öffnenden Popup Fenster kannst Du entweder ein neues Projekt anlegen bzw. die Familie einem bestehenden Projekt hinzufügen. Mit der Bestätigung erhältst Du bereits alle nötigen Links und CSS-Codes für Dein Projekt.

Die Verwaltung Deiner ausgewählten Schriften

Um ein Webprojekt auch später bearbeiten zu können, navigierst Du in der Hauptübersicht Deiner Schriftverwaltung zum Stichpunkt „Webprojekte“. Es öffnet sich eine Übersicht aller relevanten Punkte, die Dein Projekt im Moment beinhaltete. Neben den aktivierten Schriften ist dies auch die spezielle ID und der Link zum Einbinden auf Deiner Website.

Die Hauptansicht in Deinem Webprojekt

Über den Punkt „Projekt bearbeiten“ kannst Du weitere Einstellung vornehmen. Speziell nicht benötigte Schriftschnitte solltest Du hier, wenn nicht bereits in der Vorauswahl passiert, abschalten.

Weitere Bearbeitungsmöglichkeiten in Deinem Webprojekt

Schriften auf der Website einbinden

Die von Adobe Fonts empfohlene Methode zur Verwendung der Schriften auf deiner Website ist recht einfach. In einem ersten Schritt kopierst du dir den bereitgestellten Link aus deinem „Webprojekt“ und fügst ihn in den Header-Bereich Deiner Seite ein.

Themify bietet dir für hierfür einen eigenen Unterpunkt in den „General Setting“ an. Unter dem Bereich „Header Code“ fügst du einfach den kopierten Linkt ein.

Der Adobe Font Link für den Header Bereich Deiner Seite
p{
 font-family: arno-pro, serif;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6{
 font-family: arno-pro, serif;
font-weight: 700;
font-style: normal;
}

Mit dem oben gezeigten Code beschreibst du aber nur die Eigenschaft „font-familie“. Alle anderen Eigenschaften deiner Schrift, wie „color“, „font-size“, „line-height“ und „letter-spacing“, kannst Du wie gewohnt in den Custom Einstellungen des Themas vornehmen. Im Ergebnis erscheint nun Deine ausgewählte Adobe Schrift anstelle des Default-Fonts.

Nutzt du ein anderes Thema auf deiner Seite, ist es unter Umständen erforderlich ein zusätzliches Plugin zu installieren, was es dir erlaubt speziellen Code in den Header-Bereich deiner Seite zu schreiben. Alternativ biete sich aber auch die nachfolgende Plugin Variante an.

Plugin Alternative zum Einbinden

Alternativ zur oben beschriebenen Methode kannst Du diese Schritte auch über das Plugin „Typekit Fonts für WordPress“ realisieren. Es ist recht einfach und selbsterklärend aufgebaut. Das Plugin übernimmt an dieser Stelle die Einbindung auf Deine Seite. Dafür benötigst Du nur die Adobe ID, die Du oberhalb in Deinem „Webprojekt“ findest, um die Verbindung zum Font-Server herzustellen.

Auch hier ist es erforderlich, den oben angesprochenen CSS Code zu schreiben. Das Plugin bietet Dir hierfür ein eigens Feld an.

Vorteil bei der Plugin Methode, der CSS Code liegt dezentral auf Deiner Seite. Er wird nicht gelöscht, sollte die Custom CSS Deines Themas durch ein Update verändert oder überschrieben werden. Nachteil, es läuft ein Plugin mehr auf Deiner Seite, was eigentlich nicht nötig wäre.

Erweiterte CSS Möglichkeiten

Im Regelfall reicht die Beschreibung der HTML-Tags p (Paragrph) und H1-H6 (Headings) aus. Damit sollten alle Formatierungen in Deiner neuen Schrift dargestellt werden. Wenn Du nur eine Schrift verwendest, kannst Du auch global dem HTML-Tag „body“ diese Schriftfamilie übergeben und dann gesondert einzelne HTML-Tags über die Eigenschaft „font-style“ formatieren.

CSS Anweisungen in der Custom CSS Datei Deines Themas

Du kannst aber noch weiteren HTML-Tags spezielle Eigenschaften zuordnen. Den CSS Code schreibst Du, wie oben gezeigt, entweder mit in Deine Custom CSS oder in das Plugin. Eine Liste aller vom WordPress erlaubten HTML-Tags findest Du an dieser Stelle.

Aber keine Angst, Du musst nicht jedes HTLM-Tag einzeln definieren. Ein Großteil der Tags „vererbt“ sich innerhalb des Codes aus anderen bereits formatierten HTML-Tags. Du hast aber an dieser Stelle die Möglichkeit, auf einige speziellen Formatierungen Einfluss zu nehmen. Ein möglicher Kandidat, wie beispielsweise die Bildunterschrift (figcaption), könnte dann beispielsweise wie folgt aussehen.

figcaption{
font-family: arno-pro, serif;
font-weight: 400;
font-style: italic;
color: #555555;
font-size: 15px;}

Bestimmte Aufgaben kannst Du auch über eigene CSS-Klassen (.class) lösen. Eine weitere, interessante Möglichkeit Dein Design zu individualisieren. Eigene Klassen kannst Du im Editor (Gutenberg) genauso vergeben wie in jedem einzelnen Themify Baustein, den Du in Deiner Gestaltung platzierst hast.

Zuordnung einer eigenen Klasse im Textbaustein von Themify

In dieser neu definierten Klasse gibst Du dann die entsprechenden CSS Anweisungen ein. Ein sehr spannender Anwendungsfall wäre bei einer Schriftmischung innerhalb einer Überschrift mit einer zweiten Schriftart. In diesem gesonderten Beispiel vergibst Du die neue Klasse direkt im HTML-Tag mittels eines „span“ Tag. Dieser umgibt dann das zu formatierende Wort.

<h1>Eine H1 Überschrift mir einer<span class="klassenname">Auszeichnung</span></h1>

Die CSS-Formatierung könnte dann wie folgt lautet:

.klassenname{
font-family: calgary-script-ot, sans-serif;
font-weight: 400;
font-style: normal;}
Deine eigene Klasse innerhalb einer Überschrift

*Das Wort „Klassenname“ ersetze bitte durch Deinen gewählten Namen!

Wie Du siehst, gibt es an dieser Stelle dutzende Möglichkeiten in den Default-Standart eines Themas einzugreifen. Trotz all dieser phantastischen Möglichkeiten laute die Devise immer „Less is more“!

Fazit

Außer Frage, als Designer und Typografie Liebhaber schätze ich diese Ressource sehr, mit den Adobe Fonts auf über 20.000 Schriften zurückgreifen zu können. Dieses Tutorial wurde allerdings durch einige Forenbeiträge inspiriert. Demnach tauchten immer wieder Probleme mit der Integration der Adobe Fonts, speziell in verschieden Page Buildern, auf.

Allein aus einem gewissen Eigeninteresse heraus interessierte mich, ob und wie die Nutzung in meinem bevorzugten Page Builder von Themify* funktioniert. Und, es gestaltete sich in den beiden oben beschriebenen Varianten als problemlos.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Header-6-rules

6 goldene Regeln einer guten Gestaltung

6 goldene Regeln einer guten Gestaltung

Arne Rahn

Weniger als 1 MinuteLesezeit min

Ein gelungenes Design, sei es nun auf einer Webseite oder in einem Printprodukt, ist keine Glückssache, sondern beruht im Wesentlichen auf einfachen Gesetzmäßigkeiten. Diese finden wir in der Gestaltungspsychologie, die mit Beginn der 20. Jahrhunderts begründet wurde. Grundlage für die Formulierung der Gesetze war die empirische Erforschung der menschlichen Wahrnehmung.

Unsere grundlegende Wahrnehmung der Umwelt basiert auf einfachen Formen, nur so kann die Komplexität der Sinneswahrnehmung aufgelöst und letztendlich bewertet werden. In einer gelungenen Gestaltung finden wir immer ein oder mehrere dieser Gesetzmäßigkeiten wieder. Die sechs Wichtigsten möchte ich Dir an dieser Stelle vorstellen.

WEISSRAUM (NEGATIV SPACE)

Ein, aus Kundensicht ungern gesehenes Gestaltungselement guten Designs ist der „Negativ Space“ oder auch Weißraum. Wie oft höre ich in der Praxis: „…schieben Sie Dies und Das mal noch zusammen, dann passt auch noch jenes rein…!“ Dabei ist dem Kunden in diesem Moment gar nicht bewusst, dass er genau damit seine Botschaft sehr kontraproduktiv ins „Abseits“ stellt.

Wir leben heute in einer Welt der Reizüberflutung. Überall werden unsere Sinne durch Werbebotschaften angesprochen. Wir „ertrinken“ förmlich in einem Meer von „zugeklatschten“ Anzeigen und Angeboten, in denen die eigentliche Kernbotschaft verloren gegangen ist.

Der Focus des Betrachters liegt hier auf der Fotografie. Ein angemessen, dosierter Negativ Space
bringt beide Seiten wieder in Waage und lässt die Textbotschaft nicht unter gehen.

Weißraum verschafft einer Aussage einen gewissen Raum zum Atmen. Sie gewinnt dadurch an Gewicht und wirkt letztlich glaubwürdiger. Eine so platzierte Botschaft ist zudem viel leichter und angenehmer für den Betrachter zu lesen.

Mit Weißraum und dem damit einher gehenden minimalistischen Gestaltungsansatz zu arbeiten erfordert Mut. Es stellt gleichzeitig auch eine große Herausforderung an den Designer dar, die richtige Balance zwischen Weißraum und Content zu finden.

Der Freiraum um den linken Textblock bildet in diesem Design
das nötige Gegengewicht zu den schwer wirkenden Bildern.

Weißräume sollten auf keinen Fall willkürlich in ein Design platziert werden. Die Platzierung muss wohl überlegt und einer durchgängigen Struktur bzw. einem zuvor angelegten Konzept folgen. Alles andere würde im schlimmsten Fall wie ein „Unfall“ wirken.

Im Webdesign kann Weißraum an verschiedene Stellen zum Einsatz kommen. Auf langen oder Themenreichen Seiten kann Weißraum unter anderem einen allmählichen Übergang schaffen um den Betrachter auf das neue Segment vorbereiten. Nicht zuletzt verschafft es der Botschaft den nötigen Raum zum Kommunizieren.

GRUPPIERUNG (PROXIMITY)

Die Gruppierung beruht auf dem Gesetz der Nähe. Elemente, die räumlich nahe beieinander liegen werden als eine zusammengehörige Gruppe wahr genommen. Diese Gesetzmäßigkeit ist die Voraussetzung, Inhalt zu strukturieren und klar voneinander abzugrenzen. Es ist eines der stärksten und wichtigsten Gesetze in der Gestaltung und sollte in jedem Fall immer berücksichtigt werden.


Die individuelle Textgestaltung und die Nähe zum Bild bilden hier
eine wahrnehmbare Einheit. Auch bei einer anderen Anordnung
geht die Zusammengehörigkeit nicht verloren.

Richtig angewendet, hat es unsere Wahrnehmung leichter, Zusammengehörigkeit zu erkennen und verschieden Thematiken zu unterscheiden.

Folglich ist es sehr kontraproduktiv, Informationen auf einer Webseite endlos zu verdichten, um möglichst viel Content auf kleinstem Raum unterzubringen. In Kombination mit dem oben genannten Weißraum können diese Gruppen räumlich getrennt und thematisch strukturiert werden.

Dieser Index vereint auf sehr übersichtliche Art die einzelne Menüpunkte der Seite.
Zusätzlich werden in eine zweite Gliederung nochmals
die Kategorien voneinander getrennt.
Das Gesetz der Wiederholung findet man auf vielen E-Commerce Seiten wieder.

Verstärkt wird diese Gruppenbildung, wenn mehrere Merkmale (Form, Farbe, Tonwert, Größe, etc.) auf dem jeweiligen Element vereint sind. Dies schafft eine durchgehende Konsistenz in Deinem Design. Elemente werden dann auch übergreifend wahrgenommen und wiedererkannt.

Bereits in der Planungsphase solltest Du dir Gedanken über das jeweilige Erscheinungsbild machen und in einem „Style Guide“ definieren. In diversen Tools und Frameworks lässt sich dies auch über sogenannte „Global Styles“ realisieren.

KONTRAST (CONTRAST)

Grundlegend verstehen man unter Kontrast das sich zwei Elemente, die sich nicht gleichen, deutlich unterscheiden sollen. Somit können wichtige Elemente einer Gestaltung betont und in den Fokus des Betrachters gerückt werden. Dieses einfache Prinzip hilft auch bei der Strukturierung von Informationen, indem wichtige von unwichtigen Inhalten getrennt werden.

Neben einer groß gestalteten Typografie, die für sich allein Aufmerksamkeit erzeugt,
baut diese Seite auf einen einfachen Farbkontrast.

Im gestalterischen Alltag spielt zudem die Anwendung der verschieden Farbkontraste eine zentrale Rolle. Mit Farbkontrast ist hier spezielle die Farbwahrnehmung und deren Wechselwirkung gemeint. Die Gestaltungspsychologie kennt dabei sieben verschiedene Wechselwirkungen von Farben, auf die ich in einem gesonderten Artikel eingehen werde. Allein, in Kombination und im richtigen Kontext angewendet, sorgen sie für eine abgestimmte Gestaltung einzelner Elemente.

AUSRICHTUNG (ALIGNMENT)

Wie ich es Eingangs bereits sagte, beruht ein gutes Design nicht auf dem Zufall. Die Ausrichtung bzw. die Platzierung von Elementen in einer Gestaltung richtet sich immer nach einem zuvor erarbeiteten Raster. Grundgedanke eines Rasters ist die Unterteilung der zu gestaltenden Flächen in Spalten und Zeilen. Das schafft in einem Design vielfältige Platzierungs- und Unterteilungsmöglichkeiten für die einzelnen Gestaltungselemente.

Eine Zweiteilung der Seite schafft Raum für Bild und Text.
Der linke Textblock setzt zudem auf eine harmonische Mittelachse.

Daraus ergibt sich für das Gestaltungsprinzip der Ausrichtung, dass kein Element einer Gestaltung willkürlich platziert wird. Eine einheitliche Ausrichtung der Elemente verstärken zudem deren Zusammengehörigkeit und verleiht Deinem Design ein konsistentes Gesamtbild.

Im Gestaltungsprozess spielen auch die einzelnen Ausrichtungsmöglichkeiten eine entscheidende Rolle. Elemente orientieren sich dabei an sogenannten Achsen. Grundsätzlich gilt: „Je weniger Achsen in einem Design um so besser!“.  Achsen führen das Auge und somit den Lesefluss.

Die Ausrichtung berührt unweigerlich auch die Frage der Symmetrie in Deiner Gestaltung.

Es mag im ersten Moment etwas verwirrend wirken, aber auch hier gibt es
ein zweigeteiltes Grundraster. Für zusätzliche Spannung sorgt der Versatz
in den einzelnen Elementen.

Eine Platzierung auf der Mittelachse erzeugen zumeist eine symmetrisches Erscheinungsbild, wirken aber auch schnell langweilig. Rechts- wie linksbündige Ausrichtungen hingegen vermitteln eine gewisse Spannung und Dynamik. Noch aufregender wirkt eine bewusst platzierte ASymmetrie in Deinem Design.

SCHWERPUNKTE (FOCAL POINT)

In Deinem Gestaltungsprozess solltest Du dir eine Frage stellen: Was soll das Design bewirken? Letztlich möchtest Du dem Betrachter eine Idee oder ein Produkt näher bringen. Daher ist es wichtig zu verstehen, was Du dem Betrachter vermitteln möchten. Geht es darum ein Produkt zu verkaufen, bestimmte Informationen bereitzustellen oder dient es einfach nur der Unterhaltung?

Durch die farbliche Hervorhebung wird in diesem ehr einfachen Raster
der Focus auf die einzelne Seitenbereiche gelenkt.

Für diese Botschaft gilt es einen Blickfang im Design zu schaffen: einen auffälligen Teil, der sich von den übrigen Gestaltungselementen abhebt. Er soll die Aufmerksamkeit des Betrachters auf sich ziehen und halten.

Gestaltung ist Kommunikation durch verschiedene visuelle Elemente.

Auf einen Farbaccent als Schwerpunkt setzt auch dieses Design.
Sehr auffällig das leuchtende Rot in der ansonsten monochrom, schwarzen Gestaltung.

Es gibt viele Gestaltungsprinzipien, wie beispielsweise kontrastreiche Elemente oder den Weißraum, die dazu beitragen, einen starken Schwerpunkt in einem Design zu etablieren. Auch lassen sich mit Linien, Formen, Farben, Texturen, Größen und vieler andere Elemente Akzente setzen.

Voraussetzung ist eine klare Hierarchie der Elemente. Im Idealfall hast Du nur einen Schwerpunkt in Deinem Design. Zu Viele würden den Betrachter nur verwirren, im besten Fall den definierten Zweck verfehlen.

FAZIT

Die oben angeführten Punkte erheben absolut keinen Anspruch auf Vollständigkeit. Die Gestaltungspsychologie kennt mittlerweile über 100, mehr oder weniger gewichtige, Gesetzmäßigkeiten, die im Rahmen einer guten Gestaltung zu Einsatz kommen können. Ihr Einsatz ist auch immer ein Stück weit vom Zweck der Gestaltung abhängig. 

Die Sechs hier vorgestellten Gesetzmäßigkeiten bilden sozusagen die Spitze des Eisberges. Sie sollten in Deiner nächsten Gestaltung auf jeden Fall Berücksichtigung finden.

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

Weiterlesen

Oft gelesen

Ein gelungenes Design, sei es nun auf einer Webseite oder in einem Printprodukt, ist keine Glückssache, sondern beruht im Wesentlichen auf einfachen Gesetzmäßigkeiten. Diese finden wir in der Gestaltungspsychologie, die mit Beginn der 20. Jahrhunderts begründet wurde. Grundlage für die Formulierung der Gesetze war die empirische Erforschung der menschlichen Wahrnehmung.

Unsere grundlegende Wahrnehmung der Umwelt basiert auf einfachen Formen, nur so kann die Komplexität der Sinneswahrnehmung aufgelöst und letztendlich bewertet werden. In einer gelungenen Gestaltung finden wir immer ein oder mehrere dieser Gesetzmäßigkeiten wieder. Die sechs Wichtigsten möchte ich Dir an dieser Stelle vorstellen.

WEISSRAUM (NEGATIV SPACE)

Ein, aus Kundensicht ungern gesehenes Gestaltungselement guten Designs ist der „Negativ Space“ oder auch Weißraum. Wie oft höre ich in der Praxis: „…schieben Sie Dies und Das mal noch zusammen, dann passt auch noch jenes rein…!“ Dabei ist dem Kunden in diesem Moment gar nicht bewusst, dass er genau damit seine Botschaft sehr kontraproduktiv ins „Abseits“ stellt.

Wir leben heute in einer Welt der Reizüberflutung. Überall werden unsere Sinne durch Werbebotschaften angesprochen. Wir „ertrinken“ förmlich in einem Meer von „zugeklatschten“ Anzeigen und Angeboten, in denen die eigentliche Kernbotschaft verloren gegangen ist.

Der Focus des Betrachters liegt hier auf der Fotografie. Ein angemessen, dosierter Negativ Space
bringt beide Seiten wieder in Waage und lässt die Textbotschaft nicht unter gehen.

Weißraum verschafft einer Aussage einen gewissen Raum zum Atmen. Sie gewinnt dadurch an Gewicht und wirkt letztlich glaubwürdiger. Eine so platzierte Botschaft ist zudem viel leichter und angenehmer für den Betrachter zu lesen.

Mit Weißraum und dem damit einher gehenden minimalistischen Gestaltungsansatz zu arbeiten erfordert Mut. Es stellt gleichzeitig auch eine große Herausforderung an den Designer dar, die richtige Balance zwischen Weißraum und Content zu finden.

Der Freiraum um den linken Textblock bildet in diesem Design
das nötige Gegengewicht zu den schwer wirkenden Bildern.

Weißräume sollten auf keinen Fall willkürlich in ein Design platziert werden. Die Platzierung muss wohl überlegt und einer durchgängigen Struktur bzw. einem zuvor angelegten Konzept folgen. Alles andere würde im schlimmsten Fall wie ein „Unfall“ wirken.

Im Webdesign kann Weißraum an verschiedene Stellen zum Einsatz kommen. Auf langen oder Themenreichen Seiten kann Weißraum unter anderem einen allmählichen Übergang schaffen um den Betrachter auf das neue Segment vorbereiten. Nicht zuletzt verschafft es der Botschaft den nötigen Raum zum Kommunizieren.

GRUPPIERUNG (PROXIMITY)

Die Gruppierung beruht auf dem Gesetz der Nähe. Elemente, die räumlich nahe beieinander liegen werden als eine zusammengehörige Gruppe wahr genommen. Diese Gesetzmäßigkeit ist die Voraussetzung, Inhalt zu strukturieren und klar voneinander abzugrenzen. Es ist eines der stärksten und wichtigsten Gesetze in der Gestaltung und sollte in jedem Fall immer berücksichtigt werden.


Die individuelle Textgestaltung und die Nähe zum Bild bilden hier
eine wahrnehmbare Einheit. Auch bei einer anderen Anordnung
geht die Zusammengehörigkeit nicht verloren.

Richtig angewendet, hat es unsere Wahrnehmung leichter, Zusammengehörigkeit zu erkennen und verschieden Thematiken zu unterscheiden.

Folglich ist es sehr kontraproduktiv, Informationen auf einer Webseite endlos zu verdichten, um möglichst viel Content auf kleinstem Raum unterzubringen. In Kombination mit dem oben genannten Weißraum können diese Gruppen räumlich getrennt und thematisch strukturiert werden.

Dieser Index vereint auf sehr übersichtliche Art die einzelne Menüpunkte der Seite.
Zusätzlich werden in eine zweite Gliederung nochmals
die Kategorien voneinander getrennt.
Das Gesetz der Wiederholung findet man auf vielen E-Commerce Seiten wieder.

Verstärkt wird diese Gruppenbildung, wenn mehrere Merkmale (Form, Farbe, Tonwert, Größe, etc.) auf dem jeweiligen Element vereint sind. Dies schafft eine durchgehende Konsistenz in Deinem Design. Elemente werden dann auch übergreifend wahrgenommen und wiedererkannt.

Bereits in der Planungsphase solltest Du dir Gedanken über das jeweilige Erscheinungsbild machen und in einem „Style Guide“ definieren. In diversen Tools und Frameworks lässt sich dies auch über sogenannte „Global Styles“ realisieren.

KONTRAST (CONTRAST)

Grundlegend verstehen man unter Kontrast das sich zwei Elemente, die sich nicht gleichen, deutlich unterscheiden sollen. Somit können wichtige Elemente einer Gestaltung betont und in den Fokus des Betrachters gerückt werden. Dieses einfache Prinzip hilft auch bei der Strukturierung von Informationen, indem wichtige von unwichtigen Inhalten getrennt werden.

Neben einer groß gestalteten Typografie, die für sich allein Aufmerksamkeit erzeugt,
baut diese Seite auf einen einfachen Farbkontrast.

Im gestalterischen Alltag spielt zudem die Anwendung der verschieden Farbkontraste eine zentrale Rolle. Mit Farbkontrast ist hier spezielle die Farbwahrnehmung und deren Wechselwirkung gemeint. Die Gestaltungspsychologie kennt dabei sieben verschiedene Wechselwirkungen von Farben, auf die ich in einem gesonderten Artikel eingehen werde. Allein, in Kombination und im richtigen Kontext angewendet, sorgen sie für eine abgestimmte Gestaltung einzelner Elemente.

AUSRICHTUNG (ALIGNMENT)

Wie ich es Eingangs bereits sagte, beruht ein gutes Design nicht auf dem Zufall. Die Ausrichtung bzw. die Platzierung von Elementen in einer Gestaltung richtet sich immer nach einem zuvor erarbeiteten Raster. Grundgedanke eines Rasters ist die Unterteilung der zu gestaltenden Flächen in Spalten und Zeilen. Das schafft in einem Design vielfältige Platzierungs- und Unterteilungsmöglichkeiten für die einzelnen Gestaltungselemente.

Eine Zweiteilung der Seite schafft Raum für Bild und Text.
Der linke Textblock setzt zudem auf eine harmonische Mittelachse.

Daraus ergibt sich für das Gestaltungsprinzip der Ausrichtung, dass kein Element einer Gestaltung willkürlich platziert wird. Eine einheitliche Ausrichtung der Elemente verstärken zudem deren Zusammengehörigkeit und verleiht Deinem Design ein konsistentes Gesamtbild.

Im Gestaltungsprozess spielen auch die einzelnen Ausrichtungsmöglichkeiten eine entscheidende Rolle. Elemente orientieren sich dabei an sogenannten Achsen. Grundsätzlich gilt: „Je weniger Achsen in einem Design um so besser!“.  Achsen führen das Auge und somit den Lesefluss.

Die Ausrichtung berührt unweigerlich auch die Frage der Symmetrie in Deiner Gestaltung.

Es mag im ersten Moment etwas verwirrend wirken, aber auch hier gibt es
ein zweigeteiltes Grundraster. Für zusätzliche Spannung sorgt der Versatz
in den einzelnen Elementen.

Eine Platzierung auf der Mittelachse erzeugen zumeist eine symmetrisches Erscheinungsbild, wirken aber auch schnell langweilig. Rechts- wie linksbündige Ausrichtungen hingegen vermitteln eine gewisse Spannung und Dynamik. Noch aufregender wirkt eine bewusst platzierte ASymmetrie in Deinem Design.

SCHWERPUNKTE (FOCAL POINT)

In Deinem Gestaltungsprozess solltest Du dir eine Frage stellen: Was soll das Design bewirken? Letztlich möchtest Du dem Betrachter eine Idee oder ein Produkt näher bringen. Daher ist es wichtig zu verstehen, was Du dem Betrachter vermitteln möchten. Geht es darum ein Produkt zu verkaufen, bestimmte Informationen bereitzustellen oder dient es einfach nur der Unterhaltung?

Durch die farbliche Hervorhebung wird in diesem ehr einfachen Raster
der Focus auf die einzelne Seitenbereiche gelenkt.

Für diese Botschaft gilt es einen Blickfang im Design zu schaffen: einen auffälligen Teil, der sich von den übrigen Gestaltungselementen abhebt. Er soll die Aufmerksamkeit des Betrachters auf sich ziehen und halten.

Gestaltung ist Kommunikation durch verschiedene visuelle Elemente.

Auf einen Farbaccent als Schwerpunkt setzt auch dieses Design.
Sehr auffällig das leuchtende Rot in der ansonsten monochrom, schwarzen Gestaltung.

Es gibt viele Gestaltungsprinzipien, wie beispielsweise kontrastreiche Elemente oder den Weißraum, die dazu beitragen, einen starken Schwerpunkt in einem Design zu etablieren. Auch lassen sich mit Linien, Formen, Farben, Texturen, Größen und vieler andere Elemente Akzente setzen.

Voraussetzung ist eine klare Hierarchie der Elemente. Im Idealfall hast Du nur einen Schwerpunkt in Deinem Design. Zu Viele würden den Betrachter nur verwirren, im besten Fall den definierten Zweck verfehlen.

FAZIT

Die oben angeführten Punkte erheben absolut keinen Anspruch auf Vollständigkeit. Die Gestaltungspsychologie kennt mittlerweile über 100, mehr oder weniger gewichtige, Gesetzmäßigkeiten, die im Rahmen einer guten Gestaltung zu Einsatz kommen können. Ihr Einsatz ist auch immer ein Stück weit vom Zweck der Gestaltung abhängig. 

Die Sechs hier vorgestellten Gesetzmäßigkeiten bilden sozusagen die Spitze des Eisberges. Sie sollten in Deiner nächsten Gestaltung auf jeden Fall Berücksichtigung finden.

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

feat-blogpost

Wie Du einen Blogpost technisch aufwerten kannst

Heutzutage mit einem Blog zu starten ist eigentlich keine große Schwierigkeit mehr. Die Kunst liegt dann mehr darin, ihn ins und am Laufen zu halten.

Ob ich in der Folge mit meinem Blog erfolgreich werde, hängt zum größten Teil vom Inhalt ab. Und der Trend geht hier eindeutig in Richtung qualitativ hochwertiger Content mit Mehrwert für den Leser.

Es gibt aber auch einige technischen Möglichkeiten Deinen Blogpost aufzuwerten. Mit welchen Tools und Plugins Du dies umsetzen kannst, möchte ich Dir in diesem Beitrag zeigen.

Die Funktionalität rund um Deinen Artikel

Wenn man erst einmal sein Blogthema gefunden hat, sollte sich das leidenschaftliche Schreiben von fast allein erledigen. Im Folgenden soll es auch weniger darum gehen, wie Du so einen lesenswerten Artikel verfassen kannst. Hierzu gibt es unzählige Beiträge und Blogs im Netz die sich genau mit diesem Thema auseinandersetzen. Befrage einfach mal die Suchmaschine nach dem Stichpunkte „Blogartikel schreiben“ und Du wirst schnell fündig werden.

Dieser Artikel beleuchtet die technischen Möglichkeiten, um Deinen Artikel noch weiter aufzuwerten und die Benutzererfahrung Deiner Leser zu steigern. Wenn Du generell deinen Blog mit WordPress startest, hast Du dir schon mal eine perfekte Basis geschaffen. Letztlich ist WordPress vor Jahren als eine reine Blogsoftware angetreten und im Kern auch immer geblieben. Das Du mittlerweile eine ganze Menge mehr mit ihr anstellen kannst, steh außer Frage.

Das Geniale an WordPress sind seine unzähligen Erweiterungen (Plugins), mit denen Du jede nur erdenkliche Funktionalität nachrüsten kannst. Auch wenn das sehr verlockend klingt, hier noch mal mein eindringlicher Rat an Dich: „Weniger ist mehr!“. Das hat zum einen etwas mit der Performence Deines Blogs zu tun. Zum anderen muss man nicht jedes auf dem Markt befindliche Tool verbauen. Hier solltest Du dich lieber fragen, wie Du deine Leser noch mehr unterstützen kannst.

Yoast SEO ist wohl eins der bekanntesten und meistgenutzten Plugins, wenn es um die Suchmaschinen-Optimierung geht. Als kleines Features bietet es Dir nebenbei auch noch die Möglichkeit, ein sogenanntes Breadcrumb Menü (Brotkrumen-Navigation) einzubinden. Eine Folge von hierarchischen Links am Anfang jeder Seite bzw. Artikels. Neben der internen Verlinkung bietest Du deinem Leser hiermit eine optimale Orientierung, wo er sich gerade auf Deinem Blog befindet.

Werbung kennzeichnen

Spezielle bei Blogs mit einem kommerziellen Hintergrund wird gefordert, den jeweiligen Artikel als „Werbung“ zu kennzeichnen. Diesen Hinweis könnte man nun einfach in die erste Zeile seines Artikels schreiben. Wäre schnell gemacht, sieht aber nicht unbedingt professionell aus.

Eine Anwendung für die „Layout Parts“ von Themify

Eine elegantere und zudem frei auswählbare Variante realisiere ich immer über das Themify Framework*, so wie Du es auch oberhalb dieses Artikels findest. Die verschiedenen Textbausteine, bereits fertig formatiert, habe ich mit als „Layout Part“ hinterlegt und kann sie nach Bedarf jedem einzelnen Artikel voran stellen. Die Einsatzmöglichkeiten dieses Features können vielfältig Natur sein, sei es nun dem Artikel etwas voranzustellen oder weiterführende Informationen anzuhängen.

Worth The Read

Eine sehr nützliches PlugIn befindet sich auch im Kopf Deines Artikels. Mit „Word the read“ informierst Du deinen Leser über die voraussichtliche Lesezeit. Zudem bietet Dir die Erweiterung noch ein Fortschrittsbalken an, den Du beliebig an jeder Browserseite platzieren kannst.

Das ganze hat einem psychologischen Hintergrund. Zum einen kann der Leser die benötigte Lesezeit besser einschätzen. Der Fortschrittbalken ist dagegen sowas wie ein „Ansporn“ unbedingt das Angefangene auch zu beenden. Er zeigt an, wie viel vom Artikel noch zu bewältigen/lesen ist.

Table of Contents Plus

Ein Garand für einen guten Blogartikel ist eine hierarchische Strukturierung, auch aus Sicht der SEO (Search Engine Optimization). Dies erreichst Du in der Regel mit formatierten Zwischenüberschriften (H2-H6). Das Plugin „Table of contents Plus“ generiert daraus einen kleinen Index und bildet diese Artikelstruktur ab. Damit erhält der Leser, zumeist nach dem Teaser Deines Artikels, eine vollständige Übersicht des Inhaltes. Zudem kann er nach Bedarf auch direkt in den Abschnitt seines Interesses springen.

TablePress

Tabellen sind im Grunde eine hervorragende Sache komplexe Daten übersichtlich aufzuarbeiten. Oft sieht man aber genau das Gegenteil. Schlecht oder falsch formatierte Tabellen, in den die Angaben verschoben sind. An dieser Stelle hilft das Plugin „TablePress“.

Die dezentrale Erstellung und Bearbeitung der Tabellen sowie vielfältige Formatierungsmöglichkeiten machen das Arbeiten mit Tabellen zu einem „Kinderspiel“. Die Einbindung in Deinen Artikel erfolgt dann über einen eigens generierten Short Code.

kk Star Ratings

Ein kurzes Feedback zu Deinem Artikel liefert Dir das unscheinbare Plugin „kk Star Ratings“. Es ist eine simple Sternebewertung, die Dein Leser optional am Ende des Artikels abgeben kann. Zudem unterstützt die Erweiterung die Rich Snippets von Google, sprich Deine Bewertungen werden mit in die Suchergebnisse übertragen und angezeigt.

Shariff Wrapper

Das Teilen von Content ist ein essentieller Bestandteil des Internets. Informationen weitergeben, Empfehlungen aussprechen oder relevante Inhalte miteinander verknüpfen, genau dies bildet die Struktur der World Wide Web. „Shariff Wrapper“ bietet Dir genau diese Funktion für Deine Artikel.

Bereits in der Free-Version hast Du eine große Auswahl an sogenannten „Share-Button“, die Du nach Belieben auf Deiner Seite platzieren kannst.

Related Posts

Der wohl bekannteste Baustein in einem Blogartikel sind die „Related Posts“ oder auch weiterführende Artikel. Dies sind im Grunde empfehlende Links auf ähnliche Artikel in Deinem Blog. Zum einen generierst Du hiermit wieder interne Links auf Deiner Seite, was seitens der SEO gerne gesehen wird.

Zum anderen findet der Lese sofort weitere Artikel aus diesem Themenbereich, die ihn vielleicht interessieren könnten. Bei den Themify Themes* ist dieses Tool bereits integriert und über die „General Settings“ von Themify leicht anpassbar.

Die Optionen für die „Related Posts“ in den Themify General Settings

Bei anderen WP Themen mußt Du diese Funktionalität ggf. über ein Plugin nachrüsten. Eine Empfehlung wäre „Yapp – Yet Another related Posts Plugin“.

Back to Top Button

Eine er unscheinbare Funktion, die ich bei vielen Blogs vermisse, ist der „Back to Top Button“. Es ist sehr mühsam, spezielle bei langen Artikeln, die gesamte Seite per Hand nach oben zu scrollen. Da kann man schnell die Lust auf weiteren Lesestoff verlieren. Dieser Button ist in allen Themify Themes* bereits fest verbaut. Entweder als statischer Button im Footer oder als eine schwebende Variante am unteren Bildschirmrand.

Fazit

Das sind meine technischen Favoriten, einen Blog-Artikel noch interessanter und benutzerfreundlicher zu gestalten. Nutzt Du bereits einige dieser Features oder kennst Du vielleicht noch weitere nützliche Tools? Lass es mich unten in den Kommentaren wissen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Geheimnis-einer-gelungenen-Schriftenmischung

Das Geheimnis einer gelungenen Schriftmischung

Das Geheimnis einer gelungenen Schriftmischung

Arne Rahn

Weniger als 1 MinuteLesezeit min

Man nennt sie nicht umsonst die Königsdisziplin in der Typografie. Denn, für eine gelungene und ästhetisch wirkende Schriftmischung bedarf es weit mehr als nur zwei Schriften in einem Projekt „zusammenzuwürfeln“. Die Kunst der Schriftmischung erfordert sehr viel Erfahrung im Umgang mit Schriften. Neben dem solltest Du viel Sinn für Form, Struktur und Proportion mitbringen.

Mit der momentan existierenden Schriftvielfalt braucht es mehr denn je sehr viel Fleiß und Genauigkeit für eine gelungene Schriftmischung. Wie Du Dich dieser Kunst näher kannst und welche Regeln es zu beachten gibt, will ich Dir in diesem Beitrag etwas näherbringen.

Warum mischt man eigentlich Schriften?

Die Antwort auf diese Frage liefert uns bereits die zentrale Aufgabe einer typografischen Gestaltung, Inhalt verständlich und lesbar aufzubereiten. Neben den klassischen Formen ist innerhalb eines typografischen Gesamtwerkes die Schriftmischung eine der wirkungsvollsten Art der Auszeichnung.

Häufige Verwendung finden sie bei Marginalien, Legenden, Rubriken und lauten Auszeichnungen. Zudem können wir vielschichtige Inhalte didaktisch strukturieren und separieren. Das hilft dem Leser, die Texte unvermittelt zu erfassen und einzelne Passagen besser aufzufinden.

Orientierung für eine gelungene Schriftmischung

Die nachstehenden Regeln stellen kein feststehendes Dogma dar. Sie dienen mehr der Orientierung für eine gelungene und ästhetisch anmutende Schriftmischung. Die Schriftmischung ist eine sehr individuelle, geschmacklich gelenkte Angelegenheit, die zudem wechselnden Schönheitsidealen unterliegt.

Sie sind Zeiterscheinungen und folgen aktuellen Modetrends, daher sollte als Erstes immer der Einsatzzweck hinterfragt werden. Für langlebige Drucksachen sollte generell auf eine Mischung verzichtet werden.

Wann sollte ich nicht mischen

Es gibt einige Schriftfamilien, die sich grundsätzlich nicht mischen lassen, da das Ergebnis unharmonisch oder zu kontrastarm ausfallen würde. Daher sollte es vermieden werden, zwei gebrochene Schriften miteinander zu mischen, auch wenn der Duktus gleich oder ähnlich ist. Sehr unpassend ist auch eine Kombination aus Klassizistischen und Barock-Antiqua-Fonts.

In der ersten Zeile die „Berliner“ als Vertreter der gebrochenen Schriften, darunter die „Bodoni“ als eine klassizistische Antiqua und zu guter Letzt die Barock-Antiqua „Caslon“

Sehr schwierig gestaltet sich auch das „paring“ von englischen Schreibschriften. Zudem solltest Du verzichtet, zwei Fonts aus derselben Schriftklasse zu mischen.

In der ersten Zeile die „Fira Sans“ und darunter die „Montserrat“, beide Vertreter aus der Klasse der serifenlosen Linear-Antiqua

Regeln zur Schriftmischung

Eine gelungene Schriftmischung bezieht sich immer auf die gewählte Grundschrift. Ihr können zusätzlich Schnitte derselben Familie oder eine geeignete weitere Schrift zur Seite gestellt werden. Dabei spielen der Duktus (Linienführung) einer Schrift sowie ihr grundlegender Charakter eine entscheidende Rolle bei der Auswahl.

Daraus lässt sich als eine Regel, die wohl einfachste Form der Mischung definieren, dass sich zwei Schriften mit gleichartigen Duktus und ähnlichen Proportionen gut mischen lassen.

Innerhalb einer Schriftfamilie

Dieser Zustand ist innerhalb einer Schriftfamilie immer gegeben. Daher empfiehlt es sich bei der Bereitstellung und dem eigenen Hosting von Schriften auch die jeweiligen Schriftschnitte (Regular, Kursiv, Semi- oder Bold und Kapitälchen) separat bereitzustellen.

Die „Playfair Display“ in unterschiedlichen Schriftschnitten

Innerhalb einer Schriftfsippe

Eine weitere und sichere Form der Mischung gelingt innerhalb einer Schriftsippe. Schriftsippen sind Schriftsysteme, die meist aus einer Antiqua (serif)-, einer Grotesk (sans serfi)– und einer Egyptienne (salb serif) -Schriftfamilie bestehen. Sie sind im Regelfall vom Schriftdesigner aufeinander abgestimmt und weisen gleiche Grundformen und Proportionen auf.

Die Sippe der „Source Pro“ aus der Google Font Library

Erzeuge ausreichend Kontrast

Eine gelungene Schriftmischung zeichnet sich immer durch einen hohen Kontrast aus. Daher sorge bei der Wahl der Schriften und Schnitte, aus unterschiedlichen Schriftfamilien, für ausreichend Gegensätzlichkeit. Ein starker Kontrast weckt die Aufmerksamkeit und führt den Leser.

Ein starker Kontrast, Headline „Playfair Display Bold italic“, Fließtext „Source Sans Pro Light“

Antiqua & Schreibschrift

Eine sehr gute Mischung gelinge auch zwischen Antiqua-Fonts und Schreibschriften. Derartige Kombination liegt momentan sehr im Trend und man findet sie in vielen Webprojekten wieder. Mittlerweile gibt es viele, aufeinander abgestimmte Pakete mit sogenannten Schreib- oder Signaturschriften.

Die „Marion“ mit einer passenden Schreibschrift, eine Kombination von Vielen auf CreativeMarket.com

Faktoren für eine gelungene Schriftmischung

Das oben genannte Regelwerk formuliert die Basics und dienen an dieser Stelle als Einstieg in das Thema Schriftmischung. Es gibt weit mehr Faktoren – als hier genannt wurden – die zu einer gelungenen Schriftmischung beitragen.

Befasst man sich intensiv mit Schriftmischung, dann ist die Architektur von Schriften eine wertvolle Konstante. Hier spielen die Dickte, Ober- ,Mittel- und Unterlängen sowie die Schriftweite der einzelnen Figuren ein entscheiden Rolle bei der Schriftwahl. Ein scheinbar perfektes Ergebnis erzielt man u.a. wenn die x-Höhe der jeweiligen Schriften aufeinander abgestimmt werden.

Die „Fira Sans“ mit 16pt gesetzt, dazu die „Playfair Display“ angeglichen auf die x-Höhe mit 21pt

Die wohl bekannteste Variante, Headline und Fließtext in unterschiedlichen Schriften zu setzen, beschreibt nur ein „Spielart“ in diesem typografischen Segment. Bereits der subtile Austausch einzelnen Buchstaben, Ziffern und Ligaturen kann die Ästhetik Deiner Arbeit qualitativ aufwerten.

Eine gelungene Mischung zeichnet aber mehr aus als nur die technischen Feinheiten, sie ist auch gleichzeitig visuelle Poesie! Sie kann Spannung erzeugen, Harmonie vermitteln oder mit einem rassigen Temperament präsentieren.

Beispiele aus der Google Font Library

Wenn Du dich im Netz auf die Suche nach geeigneten Font-Parings machst, wirst Du schnell fündig werden. Auf unterschiedlichsten Plattformen bekommst Du – zumeist für die Google Schriften – umfangreiche Empfehlungen. Trotz allem würde ich Dir raten, nicht wahr los zur erst besten Mischung zu greifen.

Suche Dir als Erstes eine, für Dein Projekt passende, Grundschrift. Erst dann entscheide, mit Blick auf den gesamten Kontext, ob eine zweite Schrift sinnvoll und für Dein Projekt förderlich ist. In vielen Fällen bewahrheitet sich die alte Weisheit: „Weniger ist mehr!“

So hat jedes Projekt seine Eigenheiten, die es abzuwägen gilt. Das bedeutet aber nicht, dass Du immer von vorne beginnen musst. Es gibt eine Menge bewehrter Kombinationen auf die auch ich gerne zurückgreife. Einige meiner Favoriten möchte ich Dir an dieser Stelle einmal vorstellen:

Alle hier gezeigten Schriften stammen aus der “Google Font Library”, die Schriftschnitten inclusive der passenden Webformate findest Du an dieser Stelle: https://google-webfonts-helper.herokuapp.com/fonts

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

Weiterlesen

Oft gelesen

Man nennt sie nicht umsonst die Königsdisziplin in der Typografie. Denn, für eine gelungene und ästhetisch wirkende Schriftmischung bedarf es weit mehr als nur zwei Schriften in einem Projekt „zusammenzuwürfeln“. Die Kunst der Schriftmischung erfordert sehr viel Erfahrung im Umgang mit Schriften. Neben dem solltest Du viel Sinn für Form, Struktur und Proportion mitbringen.

Mit der momentan existierenden Schriftvielfalt braucht es mehr denn je sehr viel Fleiß und Genauigkeit für eine gelungene Schriftmischung. Wie Du Dich dieser Kunst näher kannst und welche Regeln es zu beachten gibt, will ich Dir in diesem Beitrag etwas näherbringen.

Warum mischt man eigentlich Schriften?

Die Antwort auf diese Frage liefert uns bereits die zentrale Aufgabe einer typografischen Gestaltung, Inhalt verständlich und lesbar aufzubereiten. Neben den klassischen Formen ist innerhalb eines typografischen Gesamtwerkes die Schriftmischung eine der wirkungsvollsten Art der Auszeichnung.

Häufige Verwendung finden sie bei Marginalien, Legenden, Rubriken und lauten Auszeichnungen. Zudem können wir vielschichtige Inhalte didaktisch strukturieren und separieren. Das hilft dem Leser, die Texte unvermittelt zu erfassen und einzelne Passagen besser aufzufinden.

Orientierung für eine gelungene Schriftmischung

Die nachstehenden Regeln stellen kein feststehendes Dogma dar. Sie dienen mehr der Orientierung für eine gelungene und ästhetisch anmutende Schriftmischung. Die Schriftmischung ist eine sehr individuelle, geschmacklich gelenkte Angelegenheit, die zudem wechselnden Schönheitsidealen unterliegt.

Sie sind Zeiterscheinungen und folgen aktuellen Modetrends, daher sollte als Erstes immer der Einsatzzweck hinterfragt werden. Für langlebige Drucksachen sollte generell auf eine Mischung verzichtet werden.

Wann sollte ich nicht mischen

Es gibt einige Schriftfamilien, die sich grundsätzlich nicht mischen lassen, da das Ergebnis unharmonisch oder zu kontrastarm ausfallen würde. Daher sollte es vermieden werden, zwei gebrochene Schriften miteinander zu mischen, auch wenn der Duktus gleich oder ähnlich ist. Sehr unpassend ist auch eine Kombination aus Klassizistischen und Barock-Antiqua-Fonts.

In der ersten Zeile die „Berliner“ als Vertreter der gebrochenen Schriften, darunter die „Bodoni“ als eine klassizistische Antiqua und zu guter Letzt die Barock-Antiqua „Caslon“

Sehr schwierig gestaltet sich auch das „paring“ von englischen Schreibschriften. Zudem solltest Du verzichtet, zwei Fonts aus derselben Schriftklasse zu mischen.

In der ersten Zeile die „Fira Sans“ und darunter die „Montserrat“, beide Vertreter aus der Klasse der serifenlosen Linear-Antiqua

Regeln zur Schriftmischung

Eine gelungene Schriftmischung bezieht sich immer auf die gewählte Grundschrift. Ihr können zusätzlich Schnitte derselben Familie oder eine geeignete weitere Schrift zur Seite gestellt werden. Dabei spielen der Duktus (Linienführung) einer Schrift sowie ihr grundlegender Charakter eine entscheidende Rolle bei der Auswahl.

Daraus lässt sich als eine Regel, die wohl einfachste Form der Mischung definieren, dass sich zwei Schriften mit gleichartigen Duktus und ähnlichen Proportionen gut mischen lassen.

Innerhalb einer Schriftfamilie

Dieser Zustand ist innerhalb einer Schriftfamilie immer gegeben. Daher empfiehlt es sich bei der Bereitstellung und dem eigenen Hosting von Schriften auch die jeweiligen Schriftschnitte (Regular, Kursiv, Semi- oder Bold und Kapitälchen) separat bereitzustellen.

Die „Playfair Display“ in unterschiedlichen Schriftschnitten

Innerhalb einer Schriftfsippe

Eine weitere und sichere Form der Mischung gelingt innerhalb einer Schriftsippe. Schriftsippen sind Schriftsysteme, die meist aus einer Antiqua (serif)-, einer Grotesk (sans serfi)– und einer Egyptienne (salb serif) -Schriftfamilie bestehen. Sie sind im Regelfall vom Schriftdesigner aufeinander abgestimmt und weisen gleiche Grundformen und Proportionen auf.

Die Sippe der „Source Pro“ aus der Google Font Library

Erzeuge ausreichend Kontrast

Eine gelungene Schriftmischung zeichnet sich immer durch einen hohen Kontrast aus. Daher sorge bei der Wahl der Schriften und Schnitte, aus unterschiedlichen Schriftfamilien, für ausreichend Gegensätzlichkeit. Ein starker Kontrast weckt die Aufmerksamkeit und führt den Leser.

Ein starker Kontrast, Headline „Playfair Display Bold italic“, Fließtext „Source Sans Pro Light“

Antiqua & Schreibschrift

Eine sehr gute Mischung gelinge auch zwischen Antiqua-Fonts und Schreibschriften. Derartige Kombination liegt momentan sehr im Trend und man findet sie in vielen Webprojekten wieder. Mittlerweile gibt es viele, aufeinander abgestimmte Pakete mit sogenannten Schreib- oder Signaturschriften.

Die „Marion“ mit einer passenden Schreibschrift, eine Kombination von Vielen auf CreativeMarket.com

Faktoren für eine gelungene Schriftmischung

Das oben genannte Regelwerk formuliert die Basics und dienen an dieser Stelle als Einstieg in das Thema Schriftmischung. Es gibt weit mehr Faktoren – als hier genannt wurden – die zu einer gelungenen Schriftmischung beitragen.

Befasst man sich intensiv mit Schriftmischung, dann ist die Architektur von Schriften eine wertvolle Konstante. Hier spielen die Dickte, Ober- ,Mittel- und Unterlängen sowie die Schriftweite der einzelnen Figuren ein entscheiden Rolle bei der Schriftwahl. Ein scheinbar perfektes Ergebnis erzielt man u.a. wenn die x-Höhe der jeweiligen Schriften aufeinander abgestimmt werden.

Die „Fira Sans“ mit 16pt gesetzt, dazu die „Playfair Display“ angeglichen auf die x-Höhe mit 21pt

Die wohl bekannteste Variante, Headline und Fließtext in unterschiedlichen Schriften zu setzen, beschreibt nur ein „Spielart“ in diesem typografischen Segment. Bereits der subtile Austausch einzelnen Buchstaben, Ziffern und Ligaturen kann die Ästhetik Deiner Arbeit qualitativ aufwerten.

Eine gelungene Mischung zeichnet aber mehr aus als nur die technischen Feinheiten, sie ist auch gleichzeitig visuelle Poesie! Sie kann Spannung erzeugen, Harmonie vermitteln oder mit einem rassigen Temperament präsentieren.

Beispiele aus der Google Font Library

Wenn Du dich im Netz auf die Suche nach geeigneten Font-Parings machst, wirst Du schnell fündig werden. Auf unterschiedlichsten Plattformen bekommst Du – zumeist für die Google Schriften – umfangreiche Empfehlungen. Trotz allem würde ich Dir raten, nicht wahr los zur erst besten Mischung zu greifen.

Suche Dir als Erstes eine, für Dein Projekt passende, Grundschrift. Erst dann entscheide, mit Blick auf den gesamten Kontext, ob eine zweite Schrift sinnvoll und für Dein Projekt förderlich ist. In vielen Fällen bewahrheitet sich die alte Weisheit: „Weniger ist mehr!“

So hat jedes Projekt seine Eigenheiten, die es abzuwägen gilt. Das bedeutet aber nicht, dass Du immer von vorne beginnen musst. Es gibt eine Menge bewehrter Kombinationen auf die auch ich gerne zurückgreife. Einige meiner Favoriten möchte ich Dir an dieser Stelle einmal vorstellen:

Alle hier gezeigten Schriften stammen aus der “Google Font Library”, die Schriftschnitten inclusive der passenden Webformate findest Du an dieser Stelle: https://google-webfonts-helper.herokuapp.com/fonts

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

Die-Page-Speed-Optimierung

Die Page Speed Offensive

Vor gut einem Jahr veröffentlichte Google den Zeitplan für eine Berücksichtigung der Benutzerfreundlichkeit von Webseiten in ihrer Suche. In diesem Atemzug fanden auch neue Werkzeuge in der Google Search Console ihren Platz. Mit der Page Speed Offensive und dem V5 Update ziehen nun Themify nach und präsentieren ihr überarbeitetes Framework.

Der neue „Core Web Vitals-Bericht“ bietet Dir einen Überblick über die Leistung Deiner Webseite und liefert ausführliche Informationen zum Page Speed und anfallenden Problemen. Zudem kannst Du Dir über Page Speed Insights oder Lighthouse Verbesserungsvorschläge einholen und prognostizierte Problem beheben.

User experience im Focus

Die Benutzerfreundlichkeit von Webseiten rückt immer stärker in den Focus der Google-Suche. Somit etablieren sich nach und nach neue Parameter bei der modernen Webseitengestaltung. Während „Mobile Friendly“ und das „HTTPS-Protokoll“ schon lange zum guten Ton gehören, so halten jetzt auch Reaktionszeiten und Ladegeschwindigkeit (Page Speed) Einzug in die Suche.

Page Experience Signal Quelle: Google Search Central

Spätestens jetzt ist es an der Zeit, als Webseitenbetreiber auf diese neue Entwicklung zu reagieren, und sich dem Thema Website Optimierung zu stellen. Ein Aspekt, diesen neuen Herausforderungen gerecht zu werden, ist die Page Speed Optimierung.

Spezielle Page Builder stehen im Verruf, die Ladezeiten einer Webseite, aufgrund des integrierten Frameworks, auszubremsen. Das liegt schlichtweg an der Komplexität dieser Konstrukte. Immer mehr Tools und Einstellungsmöglichkeiten finden Einzug, was den Anwender auf der einen Seite natürlich freut. Auf der anderen Seite wächst damit auch die gesamte Dateigröße einer Website, die letztlich geladen werden muss.

Die Page Speed Offensive von Themify

Genau diesem Problem haben sich die Jungs von Themify für ihr Framework angenommen. Anfang des Jahres präsentierten Sie ihre Antwort, die PageSpeed Offensive. Dabei wurde das gesamte Framework komplett überarbeitet und an die neuen Herausforderungen angepasst. In meinem Page-Builder Revue bin ich bereits ein wenig auf dieses Feature eingegangen.

Mit der technischen Anpassung des Frameworks kam auch eine neue und übersichtliche „Schaltzentrale“ für die Optimierung hinzu, die ich dir an dieser Stelle einmal näher vorstellen möchte.

Themify General Settings/Performance

Viele grundlegende Einstellungen im Themify Page Builder* findest Du in den General Settings. Seit einiger Zeit findest Du dort auch die neue Registerkarte „Perfomance“.

Mit der Page Speed Offensive präsentiert Themify auch eine komplett überarbeitete Performance Setting im Backend deiner Website
Der Bereich „Perfomnce“ in den Themify General Settings

Um ein Optimum für Deine Seite herauszuholen, solltest Du wenigstens die folgenden Einstellungen vornehmen. Wenn Du das erste Mal diese Einstellungen an Deiner Seite vornimmst, empfehle ich Dir, immer nur eine Einstellung zu aktivieren und danach die Seite auf seine Funktion hin zu prüfen. Treten Fehler auf, nimm diese Einstellung zurück und untersuche das Problem.

Die Einstellungen, die Du auf jeden Fall aktivieren solltest:

  1. Lazy Load – Lazy Load, das Laden von Bildern, wenn sie in den Sichtbereich kommen, solltest Du aktiviert lassen.

  2. Themify Casch – Aktiviert den Cash für Deine gesamte Seite.

  3. Exclude Cashing on – An dieser Stelle kannst Du bestimmen, welchen Bereich unter Umständen nicht in den Cash aufgenommen werden sollen.

  4. GZip Script – Eine serverseitige und verlustfreie Datenkompressionsmethode, sie sollte aktiviert werden.

  5. WebP Images – Die Bereitstellung Deiner Bilder im neuen WebP Format sollte aktiviert werden. WebP erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als JPEG und steht somit in direkter Konkurrenz zum JPEG-Format.

  6. jQuery Migrate – Die Reduzierung der jQuery Bibliothek solltest Du aktivieren

Die Bildoptimierung

Die „Perfomance-Einstellung“ legen im Hintergrund die richtigen Schalter für Dich um, aber es gibt auch Schrauben, an den Du noch selbst drehen kannst, um dem Framework und Deiner Seite unter die Arme zu greifen. Der Schwerpunkt liegt hierbei auf der Reduzierung der gesamten Dateigrößen Deiner Website.

Den größten Speicherplatz belegen in Deinem Content Bilder und Videos. Und genau hier gibt es eine Menge an Optimierungsmöglichkeiten. Im Rahmen meines Website-Relaunch für meine Photoseite habe ich genau an dieser Schraube gedreht. Bei mittlerweile über 1200 Photos, die ich im Schnitt um 60-70 Prozent optimieren konnte, reden wir über einige MB weniger Speicherbedarf, die jetzt den Server belasten. Auch bei weniger Bild-intensiven Seiten steckt in dieser Page Speed Optimierung eine Menge Potenzial.

Es mag pedantisch klingen, aber bei dieser Optimierung zählt jedes Byte.

Was definiert ein Photo?

Dazu erst einmal ein paar Gedanken zum Thema: „Was definiert eigentlich ein Photo“? Grundlegend wird die Dateigröße eines Photos durch seine Dimension und seine Auflösung definiert. Hinzu kommt dann noch, in welchem Dateiformat es letztendlich bereitgestellt wird.

In der Photographie geht der Trend immer weiter nach oben, verbesserte Sensoren und Optiken liefern immer bessere Bildqualitäten. In der Summe steigt auch die Dateigröße eines Ausgangsphotos. Das Ziel der Bildoptimierung für das Web ist aber genau entgegengesetzt. Wir benötigen Bilder, die bei einer optimalen Qualität eine sehr geringe Dateigröße aufweisen. Doch wie kommen wir genau zu diesem Ergebnis?

Ich stelle Dir an dieser Stelle einmal einen möglichen Optimierungsprozess etwas genauer vor.

Das Ausgangsphoto

Schauen wir uns den Prozess für ein einfaches Content-Photo eines Blogs an. Es spielt erst einmal keine Rolle, ob Du das Photo mit dem Handy oder einer DSLR Kamera aufgenommen hast. In beiden Fällen hast Du eine qualitativ hochwertige, aber auch große Ausgangsdatei.

Das Origianl Photo aus einem modernen Handy

Im erstem Schritt solltest Du Dir über die später benötigte Dimension klar werden. Eine Webseite, speziell der Content Bereich, hat immer eine maximale Breite. Bei einfachen Themes kann diese „fix“ sein, im Themify Framework hast Du eine Wahlmöglichkeit. Um es nicht zu kompliziert zu machen, gehen wir vom „Default“ Wert aus. Das sind 1160px für die gesamte Seitenbreite auf dem Desctop. Im Regelfall hat ein Blog Bereich noch eine s.g. Sidebar, die Unterteilung liegt meistens bei 1/3 zu 2/3.

Daraus ergibt sich bereits eine grobe Dimension für das spätere Photo von ca. 770px Breite. Um den genauen Wert für Deine Seite zu ermitteln, wechsle in die Console Deines Browsers und untersuche in alten Beiträgen die integrierten Photos. Hier bekommst Du eine pixelgenaue Anzeige der Dimensionen.

Blick in die Console von Chrome

Bildbearbeitung und Zuschnitt

Wenn Du alle benötigten Werte ermittelt hast, kann es an die Bildbearbeitung und den Zuschnitt gehen. In einer Bildbearbeitungssoftware Deiner Wahl wähle als Erstes den passenden Ausschnitt und das passende Verhältnis für das spätere Photo. Bei vielen Tools findest Du bereits passende Seitenverhältnisse als Vorauswahl.

Dialog „Bildgröße“ in Photoshop

Schritt 2 ist, die endgültige Dimension Deines Bildes zu definieren. In Photoshop findest Du dies beispielsweise unter dem Dialog „Bild“. Hier kannst Du den oben ermittelten Wert (Breite) für das Bild eingeben. Die Auflösung sollte auf 72 ppi eingestellt werden. Dies hat den einfachen Hintergrund, dass Monitore im Regelfall nicht mehr als 72 ppi (Pixel per Inch) wiedergeben können.

Dialog „Speichern für das Web“ in Photoshop

In Schritt 3 erfolgt jetzt noch das „Speichern für das Web“. Auch hierfür steht Dir in Photoshop ein eigener Dialog zur Verfügung. In einer anderen Software mag er ähnlich oder anders betitelt sein. Bei diesem Schritt fällt auch die Überlegung, in welchen Datei-Format Du Dein Bild speicherst. Für den Webbereich funktionieren folgen Formate:

JPEG (Joint Photographic Experts Group) – Das jpeg-Format ist das gängigste Dateiformat im Web und im Zweifel immer die richtige Wahl. Über variabel einstellbare Qualitätsstufen kann hier sehr viel Speicherplatz gewonnen werden.

PNG (Portable Network Graphics) –  ist das Nachfolgeformat zum veralteten GIF Format. PNG -Formate kommen immer dann ins Spiel, wenn Du transparente Bereiche abspeichern möchtest. Das Format unterscheidet sich noch einmal in PNG 8 und PNG 24. Die Zahlenwerte beziehen sich auf die speicherbaren Farbwerte. Das PNG 8 Format kann 256 verschiedene Farbwerte speichern, somit kommt es hauptsächlich bei einfachen Grafiken (Graustufenbilder) zum Einsatz, in denen nicht viele Farbwerte enthalten sind. PNG 24 (32) kann dagegen 16,8 Mio. Farben plus Transparenz abzuspeichern, was dann für ein freigestelltes Photo die richtige Wahl wäre.

GIF (Graphics Interchange Format )– Das frühere Format für die Transparenzspeicherung war das GIF-Format. Es kommt heute nur noch wenig bis gar nicht zum Einsatz. In den meisten Fällen sieht man es noch bei animierten Dateien.

SVG (Scalable Vector Graphics) – Ein verhältnismäßig neues Format im Web ist das SVG. Es liefert sehr keine Dateigrößen bei maximaler Skalierbarkeit ohne Qualitätsverlust, da nur eine mathematische Berechnungsformel gespeichert wird. Bevorzugte Motive sind Grafiken, Icon und Seitenlogos.

WebP – Dieses Grafikformat wurde 2010 von Google als ein weiterer Abkömmling des Video-Codec VP-8 eingeführt. Es kann statische und animierte Bilder verlustbehaftet oder verlustfrei komprimieren und speichern.

Das Photo nach der Bearbeitung in eine Bildbearbeitungssoftware

Kompression

In einem letzten Bearbeitungsschritt werden die Bilder nochmals komprimiert. An dieser Stelle sind Kompressionsraten von bis zu 70% möglich, was die Dateigröße noch einmal merklich reduziert. Wenn Du händisch einzelne Bilder komprimieren möchtest, kannst Du dies beispielsweise auf Compressor.io erledigen. Lade Deine Bilder via Drag&Drop in das Tool, wähle eine Kompressionsrate (Lossless = Verlustfrei, Lossy = Verlustbehaftet) und starte den Vorgang.

Die Startseite von Compressor.io

Das Photo nach der Komprimierung in Compressor.io

Prozesse automatisieren

Wie Du am Beispielphoto siehst, ist dieser Optimierungsprozess ein lohnenswertes Unterfangen und hinsichtlich der neuen Google Suche auch nur empfehlenswert. Bei kleineren Seiten wäre es ein einmaliger Arbeitsaufwand, den man auch händisch erledigen kann.

Bei größeren Seiten und Blogs macht es Sinn, einige Arbeitsschritte zu automatisieren. Beispielsweise kannst Du dir in Deiner Bearbeitungssoftware sogenannte „Aktionen“ hinterlegen, um mit einem Klick den Zuschnitt und das „Speichern für das Web“ automatisch zu erledigen.

Das Fenster „Aktionen“ in Photoshop mit vorgefertigten Speicheroptionen

Auch verschieden WordPress-Plugins nehmen Dir viel von den oben beschriebenen Arbeiten ab. Ein empfehlenswertes Plugin für die Bildoptimierung und WebP Konvertierung ist das Plugin „Imagify“. Es komprimiert in einem ersten Schritt alle bereits vorhandenen Photos auf Deiner Seite und übernimmt dann die weitere Komprimierung für alle neu hoch geladenen Bilder.

Wenn Du ein anderes Thema als Themify auf Deine Seite nutzt, fehlt Dir unter Umständen die Bereitstellung des neuen Webformates WebP. Mit „WebP Converter for Media“ kannst Du diesen Job auch im nachher rein auf Deiner Seite erledigen lassen.

Optimierung meines Portfolios

Wie ich es eingangs bereit erwähnte, ist jetzt der ideale Zeitpunkt seine Webseite für die neue Google-Suche zu rüsten. In meiner Funktion als Webmaster überarbeite ich derzeit alle Kundenseiten sowie meine eigenen Online-Projekte. Ich denke, die bereits erreichten Score-Werte beim Page Speed Insights Test sprechen für sich.

Website-Score-Arnerahn_de
Homepage „Arne Rahn Mediendesign“

Website-Score-Alltagshilfe_Radloff
Homepage „Alltagshilfe Radloff“ Waren

Website-Score-RA_Schilling
Homepage „RA H. Schilling“ Neubrandenburg

Website-Score-Arnerahn_Photography
Mein Photo-Portfolio

Website-Score-Individual_Travel
Travel Blog weltweit

Website-Score-Black_Bikes_Motorcycles
Homepage „Black Bikes Motorcycles“

Alle oben gezeigten Projekte sind mit dem Themify Page Builder* und dem Ultra Thema* entstanden. Planst Du bereits Deine Page Speed Offensive? Wenn Du Hilfe benötigst oder auf Themify umsteigen möchtest, spreche mich gerne an!

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Header-social-network

Wie Du „Social Links“ auf Deiner Website platzierst

Ein Element, was Du heutzutage auf jeder modernen Website findest, ist eine Verlinkung auf die sozialen Netzwerke. Die verschiedenen Links finden sich zumeist in Icon-Form im Header oder Footer einer Seite wieder. Einen Link auf Dein Social Network Profil zu setzen, ist per sé keine große Sache. Eine exakt positionierte und farblich abgestimmte Icon-Leiste stellt dar unter Umständen eine größere Herausforderung dar. An dieser Stelle unterstützt Dich der Themify Pagebuilder mit einem sehr nützlichen Feature.

Themify Social Links

In den General Setting von Themify* gibt es eine eigene Registerkarte, die sich ausschließlich diesem Problem widmet. Der Grundgedanke ist die zentrale Verwaltung Deiner sozialen Profil-Links, die Du dann nach Bedarf an jeder erdenklichen Stelle auf Deiner Website aktivieren kannst. Das erspart Dir letztlich viel Zeit und Arbeit.

Wie Du dieses nützliche Feature einrichtest und effektiv nutzen kannst, zeige ich Dir in diesem kleine Tutorial.

Step 1 – Die Verlinkungen anlegen

Um bei der späteren Gestaltung Deiner Seite das Feature nutzen zu können, musst Du als ersten Schritt Deine sozialen Profillinks anlegen. Dazu benötigst Du nur die genaue URL (www.intagram.com/ProfilName/) Deiner Netzwerk-Profile.

Die Themify Settings im Backend von WordPress

Wechsel dann im Backend Deiner WordPress-Installation in die Themify Settings und dort auf die Registerkarte „Social Links“.

Als Erstes wähle aus, ob Du für die spätere Darstellung ein Bild oder einen Icon-Font benutzen möchtest. In den meisten Fällen wird der Icon-Font mehr Sinn machen, da dies Vektorgrafiken sind, die Du zudem farblich an Dein Design anpassen kannst.

Dann geht es an das Einrichten der eigentlichen Links. Für jedes Profil hast Du Einstellungsmöglichkeiten wie Titel, URL, Icon und Farben.

Die Registerkarte „Social Links“ in den Settings

1- Titel = Netzwerkname, dieser kann nachBedarf später neben dem Icon mit ausgehen werden.

2- Link = eindeutige URL auf das Netzwerkprofil

3- Icon = das passende Netzwerk-Icon, im Framework von Themify findest Du neben den hauseigen Font auch den „Awesome Fontsatz“, aus dem Du frei wählen kannst. Optional besteht auch die Möglichkeit, sich über „Fontello“ einen ganz individuellen Fontsatz anzulegen.

4- Icon Color = definiert die Farbe der Icon

5- Background = definiert eine Hintergrundfarbe für die Icons (Bsp. Weißes Icon auf blauem Grund)

Icon Fonts im Themify Pagebuilder

Für einen neuen Profillink klickst Du unterhalb auf „+ Add Link“ und es öffnet sich ein neuer Bereich. Grundsätzlich kannst Du hier beliebig viele Links anlegen. Bedenke aber immer den benötigten Platzbedarf bei der späteren Ausgabe auf Deiner Website. Wenn Du alle Links angelegt hast, sichere Deine Einstellung rechts oben über „Save“.

Step 2 – Platzierungen im Header oder Footer

Im nächsten Schritt kannst Du globale Einstellungen für den Header- und Footerbereich festlegen. Wechsel dazu in den „Settings“ auf die Registerkarte „Theme Settings“ und dort auf den Punkt „Theme Appearance“. An dieser Stelle wählst Du Dein globales Header- und Footerdesign aus. Jede wählbare Variante hat auch einen definierten Platz für die Social Links, die Du nach Bedarf über „Exlcude Social Widgets“ ausblenden kannst.

Die Registerkarte „Theme Settings“

Step 3 – Platzierung in der Sidebar

Wenn Du einen Blog betreibst, möchte Du vielleicht die Social Links lieber in der Sidebar Deiner Seite platzieren? Auch das ist kein Problem! Dazu navigiere im linken WordPress-Menü auf den Oberpunkt „Design“ und dort zum Register „Widgets“.

WordPress Menü Design/Widget

An dieser Stelle findest Du alle Platzhalter zur Widgets-Ausgabe, die Dein Theme anbietet. Mit der Installation stellt Themify* auch einige fertige Widgets zur Verfügung, unter anderem das der „Social Links“. Dieses kannst Du ganz bequem in der Sidebar platzieren und anpassen.

Widget-Einstellungen der Social Links

1- Titel = vergebe einen allgemeinen Widget-Titel

2- „show link name“ = zeigt neben dem Icon auch den Netzwerknamen

3- „open link in new window“ = öffnet den Link auf einer neuen Registerkarte des Browsers

4- „Icon Size“ = bestimmt die Ausgabegröße der Icons

5- „Orientation“ = bestimmt die Ausrichtung der Icons, horizontal oder vertikal

Step 4 – Alternative Platzierung im Content

Noch individueller lassen sich die „Social Links“ über den Builder platzieren. Hier findest Du das „Widget-Modul“ über, dass Du das „Social Link Widget“ ausgeben kannst.

Verfügbare Module im Pagebuilder

Öffne dazu die Bearbeitung im Builder und wähle aus den Modulen das „Widget-Modul“ aus. Hier kannst Du optional einen Modultitel vergeben und danach, über „Select Widget“ die Themify – Social Links auswählen. Jetzt bekommst Du die gleichen Anpassungsmöglichkeiten, wie bereits in Step 3 vorgestellt.

Die Einstellungen im Modul Widget

Zusätzlich steht Dir hier auch noch der Registertap „Styling“ zur Verfügung, über den Du Deine Social Links noch umfangreicher gestalten kannst.

Individuelle Gestaltungsmöglichkeiten über den Registertap „Styling“

Fazit

Mit diesem Feature von Themify* sind der Verlinkung von Social Network Profilen fast keine Grenzen gesetzt. Du hast an jeder Stelle die Möglichkeit, die Links ganz individuell anzupassen, damit sie sich nahtlos in Dein Design integrieren. Und sollte sich ein neues Profil dazu gesellen oder wegfallen, ändere es einmal in der globalen Verwaltung, die Änderungen werden sofort auf allen Platzhalter Deiner Website sichtbar.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

feat-Relaunch

Der Website-Relaunch – Eine praxis­bezogene Anleitung

Es waren gleich mehrere technische aber auch persönliche Aspekte, die mich dazu veranlasst haben, über einen Website-Relaunch meines Photographie Portfolios nachzudenken. In diesem Artikel möchte ich Dir an meinem persönlichen Beispiel zeigen, wie Du an einen Website-Relaunch herangehen kannst, ihn zielsicher planen und umsetzen kannst.

Was ist ein Website-Relaunch?

In der Fachsprache versteht man unter einem Relaunch eine Wiedereinführung eines Produktes.

In unserem Wirtschaftskreislauf durchlaufen sämtliche Produkte einen sogenannten Produktlebenszyklus. Vereinfacht ausgedrückt bedeutet das, dass ein Produkt oder eine Dienstleistung als Erstes erdacht bzw. designt wird. Dann folgt die Markteinführung, -Reife und -Sättigung. In vielen Fällen endet es mit dem Verschwinden vom Markt. Und an dieser Stelle setzt der Relaunch an. Man überdenkt das Produkt, richtet es neu aus und verpasst ihm im besten Fall ein neues Gewand und führt es danach wieder in den großen Kreislauf zurück. 

Und so wurde dann aus „Raider“ irgendwann mal „Twix“.

Gründe für eine Website-Relaunch

Auch eine Webseite durchläuft mehr oder weniger diesen Zyklus. Ich möchte sogar behaupten, schneller als manch ein klassisches Produkt, was nicht zuletzt der rasanten Entwicklung des Mediums selbst geschuldet ist. Die Gründe, warum man über einen Website-Relaunch nachdenken sollte, können dabei vielseitig sein und werden von Fall zu Fall unterschiedlich ausfallen.

Allgemein kann man hier in drei Obergruppen unterteilen. Zum einen der technische Aspekt, sprich die gesamte Codierung der Seite sowie der integrierten Dienste. Dann das Design und damit einhergehend die „User Experience“ einer Seite. Und nicht zuletzt der wohl wichtigste Part, die Zielgruppenausrichtung. 

Aus diesen drei Bereichen ergibt sich im Vorfeld ein umfassender Fragenkatalog, der dann unter Umständen einen Website-Relaunch erforderlich machen kann.

Herangehensweise an einen Website-Relaunch

IST-Analyse Deiner Webseite

In dieser ersten, analysierenden Phase gilt es festzustellen, ob und in welchem Umfang ein Website-Relaunch erforderlich wird. Unternehmungen, sei sie nun analog oder digital, steht in einem kontinuierlichen Wandel. Sie müssen sich stetig weiterentwickeln und immer wieder aufs Neue erfinden, um am Markt existieren zu können. Daher ist es sehr wichtig, die Unternehmensziele und das dahinterstehende Konzept regelmäßig zu durchleuchten und zu hinterfragen. Bezogen auf Deine Website solltest Du wenigstens die folgenden Fragen stellen:

  • Was findest Du gut oder schlecht an der bisherigen Website?

  • Gibt es ein Feedback Deiner Kunden/Besucher zur alten Website?

  • Hast Du eine auszuwertende Statistik Deiner alten Seite zur Hand? 

  • Ist Dein Design noch zeitgemäß?

  • Und einhergehend damit, spreche ich meine Zielgruppe noch an?

Die IST-Analyse zu meiner Website.

Wie oben schon mal angesprochen, kamen mehrere Punkte zusammen, die letztlich einen Website-Relaunch erforderlich machten. Ein großer Schwerpunkt war die technische Seite.

Dazu muss ich sagen, dass diese meine älteste Seite im Netz war, an der ich über die Jahre unzählige Änderungen vorgenommen habe. Immer wieder wurden hier Plugins getestet, verschiedenste Codesnippets eingebaut und gelöscht sowie Seitenstrukturen geändert.

Aus technischer Sicht ein großes, loses Stückwerk, was ich endlich einmal von Grund auf bereinigen wollte. Hinzu kam das große V5 Update seitens Themify, bei dem im Framework sehr viel umgestellt wurde.

Mit hoher Wahrscheinlichkeit hätte ich nach dem Update die Rache meiner „Altlasten“ zu spüren bekommen. Daher entschied ich mich für eine komplette Neuinstallation der Seite.

Die alte Seite mit ihren „Fehlern“

Zweiter entschiedener Aspekt war die Performance. Die Seite lebt nicht zuletzt von den Fotografien, von denen sich mittlerweile weit über 1000 Stück auf der Seite angesammelt haben. Dies machte sowieso einen Umzug auf einen neuen Server mit mehr Speicherplatz erforderlich sowie die Überlegungen einer besseren Bildoptimierung.

Aus meiner Besucherstatistik ergaben sich auch gleich mehrere Erkenntnisse zur Seitenstruktur sowie den benutzten Endgeräten, die das neue Konzept berücksichtigen musste.

Aber auch hinsichtlich meiner angestrebten Zielgruppe galt es einige neue Überlegungen anzustellen. Alles in allem sollte es ein rundes und umfangreiches Paket werden!

Zielsetzung

Aus der IST-Analyse lässt sich leicht ein detaillierter Zielkatalog definieren, der in der folgenden Planung und Vorbereitungsphase seine Berücksichtigung finden muss. Mögliche Zielsetzungen bei einem Website-Relaunch wären:

  • Deine Seite wurde bisher schlecht gefunden? Dann sollte die Verbesserung des Suchmaschinen-Rankings als Ziel definiert sein.

  • Es sollen mehr Kontakte oder Verkäufe über die Seite abgewickelt werden, sprich eine Steigerung der Konversionsrate?

  • Du möchtest Deine Marke nach außen festigen und stärken?

  • Die Seite an ein neues Corporate Design anpassen.

  • Die Seite technisch auf den neusten Stand bringen.

  • Arbeitsprozesse vereinfachen durch FAQ-Seiten oder Online Chatmöglichkeiten.

Und, das ist nur ein kleiner Auszug an möglichen Zielen, die sich aus der IST-Analyse ergeben können.

Meine Zielsetzung im Detail

  • Die Seite von ihren Altlasten (Codierungen) befreien und technisch auf den aktuellen Stand bringen (neuste WP Version inklusive dem V5-Update von Themify)

  • Die Performance der Seite verbessern, speziell in Form einer umfangreichen Bildoptimierung

  • Umsetzung eines neuen, zeitlosen Designs

  • Eine zielgerichtete Seitenstruktur für eine höhere Konversionsrate

  • Eine erweiterte Contentstrategie

Zielgruppe und Wettbewerber

Man kann es nicht oft genug wiederholen, aber eine gute und erfolgreiche Website orientiert sich immer an ihrer Zielgruppen. Daher ist eine genaue Zielgruppenanalyse eines der ersten und wichtigsten Aufgabe in Deinem Business. An dieser Stelle arbeite ich persönlich gerne mit der „Buyer Persona“, aber auch das SINUS-Modell liefert hier viele wertvolle Erkenntnisse.

Mein „Buyer Personas“ Template

In der Planungsphase zum Website-Relaunch sollte man einen Blick auf die ursprünglich definierte Zielgruppe werfen. Insbesondere solltest Du hier die folgenden Fragen stellen:

  • Hat sich meine Zielgruppe verändert?

  • Wie habe ich bisher Kunden angesprochen und kann dies noch verbessert werden?

  • Setze ich mit dem Relaunch neue/andere Schwerpunkte auf der Seite?

Auch lohnt es sich immer einen Blick auf Dein näheres Umfeld zu werfen. In diesem Zusammenhang schau Dir einmal Deine unmittelbaren Mitbewerber an und versuche unter anderem diese Fragen zu beantworten:

  • Wie sieht allgemein der Wettbewerb in meiner Branche aus?

  • Was machen Deine Mitbewerber anders/besser?

  • Welche Funktionalitäten bieten sie an?

  • Wie sieht die Suchmaschinenoptimierung (SEO) in diesem Segment aus?

  • Welche Keywords ranken am besten bzw. befinden sich an erster Stelle in der Suche?

Zeitplanung für den Relaunch

Um die Zeitplanung und eine Deadline musste ich mir bei meinem Projekt weniger Gedanken machen. Ich hatte mir die neue Seite parallel zur alten installiert und schrittweise aufgebaut. Zudem ist es mein reines Privatvergnügen, sprich, es ist nicht „lebenswichtig”. Trotz allem hatte ich mir als spätesten Termin das Frühjahr 2021 gesetzt, man will ja auch mal irgendwann fertig werden!

Wenn Deine Website essenziell für Deine Einnahmen verantwortlich ist (eCommerce Shop), dann ist das offline Zeitfenster bzw. eine Deadline der wichtigste Faktor, den Du berücksichtigen solltest.

  • Wie groß darf das offline Zeitfenster sein bzw. gibt es eine Deadline?

  • Gibt es vielleicht saisonal bedingt schlechte Zeiten, in denen man den Website-Relaunch durchführen kann?

  • Reichen meine eingeplanten Ressourcen und Mittel – was kostet mich ein Tag offline gehen?

Die Vorbereitung

Wenn sich aus der IST-Analyse der Umstand eines Website-Relaunchs herauskristallisiert, stehen die nächsten organisatorischen Fragen auf dem Zettel.

  • Stehen die Ressourcen, intern wie extern, für einen Relaunch bereit?

  • Wer erstellt die neuen Inhalte, wer liefert die Bilder?

  • Gab oder gibt es ein Content Audit für die bestehenden Inhalte?

  • Wer ist der Ansprechpartner und hat dieser alle benötigten Zugänge und Berechtigungen?

  • Wie hoch ist mein Gesamtbudget?

Und das sind nur einige Fragen, die Du Dir in diesem Zusammenhang stellen musst. Es ist ähnlich wie beim Kochen, bevor Du richtig loslegen kannst, besorgst Du Dir erst einmal alles, was laut Rezept benötigt wird. Fehlt Dir eine entscheidende Komponente, gelingt unter Umständen das ganze Gericht nicht.

Wie hab ich mich vorbereitet.

Zugegeben, ich habe es ein wenig einfacher, da ich Seiten-Betreiber und Webmaster in einer Person bin. Trotz allem gab es eine Menge zu erledigen, bis die Seite technisch umgesetzt werden konnte. An erster Stelle stand, das komplette Konzept neu zu überarbeiten. Die Grundlage für ein richtiges Gestaltungskonzept ist immer Deine Zielgruppe.

Ein Design fertigst Du nicht für Dich, sondern für Deine Zielgruppe! 

Deine persönlichen Präferenzen können an dieser Stelle zwar mit anklingen, sind aber nicht maßgeblich für das spätere Erscheinungsbild entscheidend. 

In meinem Fall hat die Statistik Auswertungen der letzten Jahre gezeigt, dass ich meine angestrebte Zielgruppe nicht ausreichend genug anspreche. Ein erklärtes Ziel der Seite ist die Gewinnung von Modellen für meine Photographie, die ich allerdings in der Vergangenheit verhältnismäßig wenig über diese Seite generiert habe. 

Dieser Aspekt sollte im neuen Konzept stärker berücksichtigt werden, indem ich dem gesamten Thema mehr Transparenz verleihe. Das bedeutet, dass ich in Zukunft mehr aufklärenden Content mit auf die Seite bringe. Über diesen soll dann auch vermehrt der „Call to Action“ angesprochen werden. 

Zweiter großer Konzeptgedanke war die Abwendung von einer klassischen Galerie bzw. Portfolioseite. Die einzelnen Photostrecken sollen Ihre ganz eigene Geschichte erzählen und somit eine ganzheitliche Retro Perspektive abbilden.

Zudem sollten den Bildern im gestalterischen mehr Platz eingeräumt werden, was die Überlegungen auf einen minimalistischen Designansatz lenkten. 

Aus diesen ganzen Vorüberlegungen entstand als Erstes ein „Style Cap“. Eine erweiterte Ideensammlung für das neue Projekt, in dem Schrift, Farbe und Formen bereits Gestalt annehmen.

Das gesamte "Style Cap" zur neuen Seite für den bevorstehenden Website-Relaunch
Das gesamte „Style Cap“ zur neuen Seite

Noch konkreter wird die Planung mit dem Erstellen des Prototyps. An dieser Stelle verdichten sich die Ideen aus dem „Style Cap“ zu einer kompletten und funktionstüchtigen „offline“ Webseite. Hier zeigt sich auch die spätere Seitenstruktur sowie die verschiedenen Ansichten auch unterschiedlichen Endgeräten.

Der komplette Prototyp in Adobe XD für den Website-Relaunch
Der Prototyp in Adobe XD

Für die angestrebte Performance-Verbesserung stand eine komplette Bildoptimierung zur Disposition. Dafür musste der gesamte Bilderbestand in der Bilddimension und der Datenkomprimierung überarbeitet werden. Zudem kam die Überlegung, diese Schritte für die Zukunft zu automatisieren. Im Rahmen der Vorbereitungen galt es jetzt aber erst einmal, den vorhandenen Bestand händisch zu optimieren.

Die technische Umsetzung

Mit der technischen Umsetzung geht der Website-Relaunch in die heiße Phase. Hier zeigt sich sehr schnell, wie gründlich die gesamte Vorbereitung war. Bis zu diesem Zeitpunkt waren Deine investierten Stunden „nur“ offline, an Deiner eigentlichen Website ist dagegen noch nichts passiert.

Gleichzeitig beginnt jetzt auch die Phase, in der Du für Deine Kunden nicht erreichbar seien, wirst und Umsätze wegfallen. Wann und wie lange dieses Zeitfenster andauert, sollte daher explizit geplant werden.

Meine Umsetzung

Ein großer Vorteil war mit Sicherheit, dass ich meine Seite komplett neu aufsetzen wollte. Somit hatte ich mir parallel zur alten Seite eine frische WordPress Installation auf den Server installiert, an der ich bequem arbeiten konnte, ohne den Betrieb der alten Seite zu stören. Für einen Website-Relaunch ist dies natürlich ein sehr günstiger Umstand, da es später nur ein minimales offline Fenster gibt.

Nach der WordPress Installation wurden alle benötigten Plugins und das Themify Ultra Themes* aufgespielt und eingerichtet. Somit stand die technische Basis der neuen Webseite und ich konnte mich an das Überspielen (WordPress Importer) der alten Inhalte (Seiten und Artikel) machen.

Als Nächstes habe ich mich an die Umsetzung des neuen Designs gemacht. Die neuen Schriften wurden implementiert, Farbschemen gespeichert und die neuen Inhaltselemente gestaltet.

Im Bereich der Seiten gab es die größten Anpassungen, da sich die Seitenstruktur komplett geändert hat. Verbunden damit, musste auch alle Menüs überarbeitet werden. Einzig die Artikel blieben wie gehabt. Hier mussten dann „nur“ die optimierten Photos eingepflegt werden.

In letzter Instanz gab es noch das eine oder andere Feintuning. Es gibt immer einige Punkte, die man im Konzept nicht berücksichtigt hat und die einem erst auffallen, wenn man das Gesamtwerk vor Augen hat. Aber danach konnte die Seite Online gehen, was aber nicht bedeutet, dass damit die Arbeiten erledigt sind.

Zu oft wird unterschätzt, welche Arbeit eine Website im laufenden Betrieb macht. Vor allem, wenn die Seite über einen News- bzw. Blogbereich verfügt. Spezielle für meine Seite bedeutet dies auch neuen Content zu produzieren.

Projektplanung in der Übersicht

Wie Du siehst, kann ein Website-Relaunch unter Umständen ein ressourcen- und zeitraubendes Unterfangen werden. Das Geheimnis liegt in einer gründlichen Planung und Vorbereitung, damit die Ausfallzeit so gering wie möglich ausfällt. Hier nochmal eine knappe Zusammenfassung, wie Du an das Projekt Website-Relaunch ran gehen kannst.

Phase 1: Recherche und Analyse – verschaffe Dir einen umfassenden Überblick über den IST-Zustand.

Phase 2: Konzeption – definiere Deine Ziele und die daraus entstehenden Aufgaben.

Phase 3: Design – überarbeite oder passe Dein Gestaltungskonzept an Dein Corporate Design an.

Phase 4: Inhalte – stelle alle neuen Inhalte (Texte, Bilder, Video, etc.) bereit.

Phase 5: Technische Umsetzung – mach Dich wie geplant und konzentriert an die Umsetzung.

Phase 6: Test und Relaunch – überprüfe die gesamte Funktionalität sowie die Ansicht auf allen Endgeräten der neuen Seite. Geht wieder online!

Phase 7: Weiterbetreuung – organisiere die technische und inhaltliche Betreuung der neuen Seite.

Update 05/2021

In die Phase 7, der Weiterbetreuung, gehört auch eine zeitnahe Nachkontrolle der gestellten Ziele. Die Ergebnisse aus der Performance Optimierung können nicht sofort und vollumfänglich gemessen werden. Die großen Suchmaschinen brauchen eine gewisse Zeit, neue oder geänderte Webseite zu indexieren und zu bewerten.

Die Performance nach dem Website-Relaunch
Aktueller PageSpeed Score von 97

Um so mehr freut mich das jetzige Ergebnis der Seite mit einem Score von 97 beim PageSpeed Insights Test. Zum Zeitpunkt der Veröffentlichung dieses Posts lag die Messung noch bei „nur“ 90. Somit wurde mit dem aktuellen Ergebnis ein Teil der seinerzeit definierte Zielsetzung bestmöglich umgesetzt.

Fazit

Ein Website-Relaunch kann unter dem Strich eine Menge Arbeit bedeuten. Die Vorteile aus so einem Vorhaben überwiegen aber deutlich. Eine Webseite, die optisch wie inhaltlich überzeugt, verbessert nicht nur Deine Marktposition, sondern bietet auch die Chance, sich noch klarer von Deinen Mitbewerbern abzusetzen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

feat-404

Die 404 Page, eine unterschätzte Seite.

Die 404 Page, eine unterschätzte Seite.

Arne Rahn

Weniger als 1 MinuteLesezeit min

Steve Jobs, der Begründer von Apple, vertrat die Philosophie, dass man im Gestaltungsprozess auch den nicht sichtbaren Bereichen eine gewisse Aufmerksamkeit schenken sollte. Im Fall von „Apple“ und später „Next“ bezog sich dies unter anderem auf das Innerste oder die Rückseite eines Computers. Folgt man diesem Ansatz auch im Webdesign, dann sind es hier die wenig oder bestens falls kaum benutzten Serviceseiten, wie die 404 Page.

Warum die Arbeit?

Aber ist es unbedingt erforderlich, diese Seite zu berücksichtigen? Zumal sich das CMS WordPress doch automatisch um die Auslieferung der standardmäßig vorhandenen Error-Page kümmert.

Die Antwort lautet: JA!

Trotz aller Sorgfalt kannst Du es nicht verhindern, dass Nutzer auf Deiner Seite mit dem 404-Fehler konfrontiert werden. Fehlt diese individuelle Seite in Deinem Webprojekt, bleibt der Nutzer in einem Error Fall im Dunkeln. Er kann nicht nachvollziehen, warum die aufgerufene Seite nicht funktioniert. 

In einer technisch hochmodernen Zeit verbindet man so etwas schnell mit einem negativen Gefühl. Um diesem entgegenzuwirken, empfiehlt sich immer die Gestaltung einer 404 Page, auf dem der User informiert wird und ihm Optionen für das nächste Vorgehen vorgeschlagen werden. Mit einer individuellen Konfiguration stellst du auch sicher, dass der User auf deiner Seite bleibt, ganz zu schweigen vom Gefühl „gut aufgehoben“ zu sein.

Zudem hat auch Google ein Problem mit einer nicht konfigurierten 404 Page. Die Suchmaschine versucht, auf eine nicht existierende Ressource zuzugreifen, was einen nicht korrekten HTTP-Statuscode 404 zur Folge hat. Die Suchmaschine wertet sowas als ein negatives Signal und auch dies wollen wir ja möglichst vermeiden.

Was ist eigentlich der HTTP-Statuscode 404?

Auf jede HTTP-Anfrage eines Web-Client erfolgt eine Antwort des Servers in Gestalt eines HTTP-Statuscode. Der Server teilt somit dem Client mit, ob seine Anfrage erfolgreich bearbeitet wurde. Im Falle eines auftretenden Fehlers gibt der Statuscode Auskunft darüber, wie die gewünschten Informationen zu erlangen sind. Die bekanntesten Meldungen sind: 404: „Nicht gefunden“, 403: „Fehlende Zugriffsberechtigung“ und 400: „Fehlerhafte Anfrage“.

Die Gründe derartiger Fehler können vielfältig sein. Ein Domainumzug ohne Weiterleitung (Redirekt), die komplette Löschung einer Webseite oder interne URL-Umstrukturierungen sind häufige Fehlerquellen. Ändern sich oft Inhalte auf der Seite, können auch vergessene „tote“ Links die Meldung auslösen. Nicht zu vergessen, ein banaler Schreibfehler eines Users in der URL.

Eine individuelle 404-Page konfigurieren

Im CMS WordPress ist diese grundlegende Funktion bereits vorhanden. Eine individuelle Lösung lässt sich recht einfach über ein zusätzliches Plugin realisieren. Wer ein wenig programmiertechnische Fähigkeiten mitbringt, kann dies aber auch problemlos in HTML oder PHP selbst erledigen.

Eine manuelle HTML-Page

Die Auslieferung einer individuellen 404-Page kannst Du über eine htaccess-Datei in Deinem Root-Verzeichnis realisieren.

Als Erstes erstelle Dir Deine 404-Page in einem Editor Deiner Wahl und lade sie anschließend in das Root-Verzeichnis auf den Server. Als Nächstes ergänze die htaccess-Datei um folgenden Eintrag: ErrorDocument 404 / 404-Seitenname.html (der Präfix „404-Seitenname“ sollte Deinem tatsächlich vergebenen Dateiname entsprechen). Hat Dein Webprojekt noch keine htaccess-Datei, musst Du auch diese im Root des Servers bereitstellen.

Unter WordPress

Unter WordPress sind die vorgenannten Schritte nicht nötig, da sich WordPress automatisch um die Auslieferung kümmert. Die standardmäßig vorhandenen Error Page liegt im Root-Verzeichnis Deines WordPress-Themes. Hier kannst Du diese Datei individuell auf Deine Bedürfnisse anpassen.

Eine weitere Option ist die Realisierung über ein externes Plugin. Es gibt verschiedene Anbieter, die sich ausschließlich um die Konfiguration der Fehlermeldungen kümmern. Du findest diese spezielle Option aber auch in einigen SEO oder Maintenance Plugins.

Mit dem Themify Framework

Auch Themify hat sich diesem Problem in seinem Framework angenommen und stellt Dir in den General-Settings eine Direktverlinkung auf eine individuelle Page zur Verfügung. Nutzt Du beispielsweise das Ultra Themes von Themify*, dann findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. 

Hier kannst Du bequem eine zuvor erstellte Seite auswählen und verlinken. Wie Du eine ganz originelle 404-Page im Themify Builder umsetzen kannst, zeige ich Dir im nächsten Abschnitt. 

Eine individuelle 404-Page erstellen

Eine Error-Page muss im Kern keine aufwendig gestaltete Seite sein. Versetze Dich in die Lage des Anwenders und überlege, wie Du ihm an dieser Stelle helfen kannst. Dazu stellt sich die Frage: Welche Elemente müssen in einer 404-Page unbedingt vorhanden sein?

Elemente einer 404-Page

Mit einer kleinen Textpassage solltest Du den Anwender aufklären, was gerade schiefgelaufen ist. Auf vielen Seiten findest Du den Standardtext „Seite nicht gefunden“ oder „Page not found“. An dieser Stelle kann man aber auch gerne etwas kreativer werden.

Des Weiteren solltest Du dem User eine Möglichkeit aufzeigen, wie er wieder auf Deine Seite zurückfindet. Das kann ein einfacher Button zur Startseite oder ein Link zu einem Archiv oder einer Sitemap sein. Optional bietet sich auch eine Suchfunktion oder die Möglichkeit einer Kontaktaufnahme an.

In meinen Projekten versuche ich immer, diesem „Fehler“ ironisch zu begegnen. Je nach Thema und Inhalt der Seite ist dies meist ein etwas abgewandelter Spruch und ein thematisch passendes Bild. Weiter unten findest Du einige ausgesuchte Beispiele aus meinen Projekten. 

Die Umsetzung mit dem Themify Builder

An dieser Beispielseite möchte ich Dir die Umsetzung mit einer einfachen Grafik im Themify Page Builder zeigen. Die Grafik habe ich mir von OpenDoodles geladen. Eine kleine, witzige Sammlung von Sketsch Illustrationen, die Du frei verwenden kannst. Zudem lässt sich im „Generator“ der Seite auch die Farbwahl individuell auf Dein Design anpassen.

Die fertige 404 Page für das nachfolgende Tutorial

➀ Als allererstes legte Du Dir unter WordPress eine neue Seite an. Diese Page sollte sich im Aufbau von Deinen anderen Seiten unterscheiden, damit sie später auch als eine Fehlerseite wahrgenommen wird. Daher entferne ich grundsätzlich den Header- und Footer Bereich.

Das Themify Framework stellt Dir auf jeder Seite ein „Themify Custrom Panel“ bereit. An dieser Stelle lassen sich individuelle Eistellungen vornehmen, die sich dann ausschließlich nur auf diese Seite auswirken. Wechsel dazu in den unteren Bereich Deiner Seite, für die folgenden Einstellungen.

Auf der Registerkarte „Page Option“ wähle die Sidebar Option „ohne Sidebar“ und unterdrücke zudem den Seitentitel unter Hide Page Title mit „Yes“.

Die Registerkarte „Page Option“

Auf der Registerkarte „Page Appearance“ findest Du die Einstellungen für den Header- und Footer Bereich. Für beide deaktiviere das entsprechende Design mit dem „X-Icon“.

Die Registerkarte „Page Appearance“

Nachdem Du diese Einstellungen erledigt hast, kannst Du die Seite in WordPress veröffentlichen. Deine neue Seite findet sich jetzt in der Seitenübersicht von WordPress wieder. 

➁ In der Übersicht klick jetzt auf „Themify Builder“. Die neue 404-Page öffnet sich zur Bearbeitung im Frontend Deiner Seite.

Die zentrale Seitenübersicht im WordPress Backend

➂ Auf der noch leeren Seite vergibst Du als Erstes im Grid-Setting ein zweispaltiges Layout. Zusätzlich werden die Inhalte an der Mittelachse (align middle) des Row ausgerichtet. Das sorgt für eine optisch, ansprechendere Verteilung der Inhalte.

Die Grid- und Row Options im Themify Builder

➃ In die rechte Spalte setzt Du als Erstes ein Textfeld-Modul für den „404“ Text und formatierst ihn zu einer H1 Überschrift. Schriftart, Größe und Farbe werden erst einmal von Deinen globalen Seiteneinstellungen übernommen. Als Nächstes folgte ein zweites Textfeld-Modul für den individuellen Text. Die Formatierung bleibt hier auf Paragraf.

Das Text-Modul mit seine Einstellungsmöglichkeiten

Zu guter Letzt platziere noch ein Button-Modul unter die beiden Textfelder. Konfiguriere ihn mit einer aussagekräftige Beschreibung und der URL, auf die der User weitergeleitet werden soll.

Das Button-Modul

➄ In die linke Spalte platzierst Du nun die Grafik mit dem Images-Modul.

Das Images-Modul aus der Builder Palette

➅ Da die Seite ohne einen Header-Bereich angelegt wurde, empfiehlt es sich, im oberen Bereich noch einen kleinen Abstand (Padding) einzustellen. Das kannst Du in den „Row-Setting“, unter “Padding”, mit einem Zahlenwert erledigen. Alternativ kannst Du auch an der oberen Kante mit der „Maus anfassen“ und das Padding einfach aufziehen.

Mit Padding-Top eine „Weißraum“ an der Oberkante schaffen

➆ Jedes eingesetzte Modul kannst Du natürlich noch weiter Deinen ganz individuellen Bedürfnissen anpassen. Eine reichhaltige Palette an individuellen Einstellungen findest Du im jeweiligen Modul unter dem Register „Styling“. Wenn alles erledigt ist, speichere Deine Einstellungen über „Save“ und verlasse den Builder Modus (x = Exit). Deine Seite ist nur fertig gestaltet und muss nur noch in das System integriert werden.

➇ Dazu wechselst Du wieder in das Backend Deiner Seite. Im linken Menü von WordPress findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. Aus dem DropDown Menü wählst Du Deine erstellte 404-Seite aus und speicherst den gesamten Dialog. WordPress folgt nun nicht mehr der Standard Einstellung, sondern verweist den User, im Falle eines Fehlers, auf Deine neue 404-Page. Das war’s, wie Du siehst, kein allzu großes Hexenwerk!

Die Themify Settings im linken WordPress Menü

Inspirationen für Deine neue 404-Page

Ich hoffe, der Beitrag konnte offene Fragen hinsichtlich der 404 Page klären? Hast Du bereits eine 404 Fehlerseite in Deinem Webprojekt oder steht dies als Nächstes auf Deinem Zettel? Lass es mich in den Kommentaren wissen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Weiterlesen

Oft gelesen

Steve Jobs, der Begründer von Apple, vertrat die Philosophie, dass man im Gestaltungsprozess auch den nicht sichtbaren Bereichen eine gewisse Aufmerksamkeit schenken sollte. Im Fall von „Apple“ und später „Next“ bezog sich dies unter anderem auf das Innerste oder die Rückseite eines Computers. Folgt man diesem Ansatz auch im Webdesign, dann sind es hier die wenig oder bestens falls kaum benutzten Serviceseiten, wie die 404 Page.

Warum die Arbeit?

Aber ist es unbedingt erforderlich, diese Seite zu berücksichtigen? Zumal sich das CMS WordPress doch automatisch um die Auslieferung der standardmäßig vorhandenen Error-Page kümmert.

Die Antwort lautet: JA!

Trotz aller Sorgfalt kannst Du es nicht verhindern, dass Nutzer auf Deiner Seite mit dem 404-Fehler konfrontiert werden. Fehlt diese individuelle Seite in Deinem Webprojekt, bleibt der Nutzer in einem Error Fall im Dunkeln. Er kann nicht nachvollziehen, warum die aufgerufene Seite nicht funktioniert. 

In einer technisch hochmodernen Zeit verbindet man so etwas schnell mit einem negativen Gefühl. Um diesem entgegenzuwirken, empfiehlt sich immer die Gestaltung einer 404 Page, auf dem der User informiert wird und ihm Optionen für das nächste Vorgehen vorgeschlagen werden. Mit einer individuellen Konfiguration stellst du auch sicher, dass der User auf deiner Seite bleibt, ganz zu schweigen vom Gefühl „gut aufgehoben“ zu sein.

Zudem hat auch Google ein Problem mit einer nicht konfigurierten 404 Page. Die Suchmaschine versucht, auf eine nicht existierende Ressource zuzugreifen, was einen nicht korrekten HTTP-Statuscode 404 zur Folge hat. Die Suchmaschine wertet sowas als ein negatives Signal und auch dies wollen wir ja möglichst vermeiden.

Was ist eigentlich der HTTP-Statuscode 404?

Auf jede HTTP-Anfrage eines Web-Client erfolgt eine Antwort des Servers in Gestalt eines HTTP-Statuscode. Der Server teilt somit dem Client mit, ob seine Anfrage erfolgreich bearbeitet wurde. Im Falle eines auftretenden Fehlers gibt der Statuscode Auskunft darüber, wie die gewünschten Informationen zu erlangen sind. Die bekanntesten Meldungen sind: 404: „Nicht gefunden“, 403: „Fehlende Zugriffsberechtigung“ und 400: „Fehlerhafte Anfrage“.

Die Gründe derartiger Fehler können vielfältig sein. Ein Domainumzug ohne Weiterleitung (Redirekt), die komplette Löschung einer Webseite oder interne URL-Umstrukturierungen sind häufige Fehlerquellen. Ändern sich oft Inhalte auf der Seite, können auch vergessene „tote“ Links die Meldung auslösen. Nicht zu vergessen, ein banaler Schreibfehler eines Users in der URL.

Eine individuelle 404-Page konfigurieren

Im CMS WordPress ist diese grundlegende Funktion bereits vorhanden. Eine individuelle Lösung lässt sich recht einfach über ein zusätzliches Plugin realisieren. Wer ein wenig programmiertechnische Fähigkeiten mitbringt, kann dies aber auch problemlos in HTML oder PHP selbst erledigen.

Eine manuelle HTML-Page

Die Auslieferung einer individuellen 404-Page kannst Du über eine htaccess-Datei in Deinem Root-Verzeichnis realisieren.

Als Erstes erstelle Dir Deine 404-Page in einem Editor Deiner Wahl und lade sie anschließend in das Root-Verzeichnis auf den Server. Als Nächstes ergänze die htaccess-Datei um folgenden Eintrag: ErrorDocument 404 / 404-Seitenname.html (der Präfix „404-Seitenname“ sollte Deinem tatsächlich vergebenen Dateiname entsprechen). Hat Dein Webprojekt noch keine htaccess-Datei, musst Du auch diese im Root des Servers bereitstellen.

Unter WordPress

Unter WordPress sind die vorgenannten Schritte nicht nötig, da sich WordPress automatisch um die Auslieferung kümmert. Die standardmäßig vorhandenen Error Page liegt im Root-Verzeichnis Deines WordPress-Themes. Hier kannst Du diese Datei individuell auf Deine Bedürfnisse anpassen.

Eine weitere Option ist die Realisierung über ein externes Plugin. Es gibt verschiedene Anbieter, die sich ausschließlich um die Konfiguration der Fehlermeldungen kümmern. Du findest diese spezielle Option aber auch in einigen SEO oder Maintenance Plugins.

Mit dem Themify Framework

Auch Themify hat sich diesem Problem in seinem Framework angenommen und stellt Dir in den General-Settings eine Direktverlinkung auf eine individuelle Page zur Verfügung. Nutzt Du beispielsweise das Ultra Themes von Themify*, dann findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. 

Hier kannst Du bequem eine zuvor erstellte Seite auswählen und verlinken. Wie Du eine ganz originelle 404-Page im Themify Builder umsetzen kannst, zeige ich Dir im nächsten Abschnitt. 

Eine individuelle 404-Page erstellen

Eine Error-Page muss im Kern keine aufwendig gestaltete Seite sein. Versetze Dich in die Lage des Anwenders und überlege, wie Du ihm an dieser Stelle helfen kannst. Dazu stellt sich die Frage: Welche Elemente müssen in einer 404-Page unbedingt vorhanden sein?

Elemente einer 404-Page

Mit einer kleinen Textpassage solltest Du den Anwender aufklären, was gerade schiefgelaufen ist. Auf vielen Seiten findest Du den Standardtext „Seite nicht gefunden“ oder „Page not found“. An dieser Stelle kann man aber auch gerne etwas kreativer werden.

Des Weiteren solltest Du dem User eine Möglichkeit aufzeigen, wie er wieder auf Deine Seite zurückfindet. Das kann ein einfacher Button zur Startseite oder ein Link zu einem Archiv oder einer Sitemap sein. Optional bietet sich auch eine Suchfunktion oder die Möglichkeit einer Kontaktaufnahme an.

In meinen Projekten versuche ich immer, diesem „Fehler“ ironisch zu begegnen. Je nach Thema und Inhalt der Seite ist dies meist ein etwas abgewandelter Spruch und ein thematisch passendes Bild. Weiter unten findest Du einige ausgesuchte Beispiele aus meinen Projekten. 

Die Umsetzung mit dem Themify Builder

An dieser Beispielseite möchte ich Dir die Umsetzung mit einer einfachen Grafik im Themify Page Builder zeigen. Die Grafik habe ich mir von OpenDoodles geladen. Eine kleine, witzige Sammlung von Sketsch Illustrationen, die Du frei verwenden kannst. Zudem lässt sich im „Generator“ der Seite auch die Farbwahl individuell auf Dein Design anpassen.

Die fertige 404 Page für das nachfolgende Tutorial

➀ Als allererstes legte Du Dir unter WordPress eine neue Seite an. Diese Page sollte sich im Aufbau von Deinen anderen Seiten unterscheiden, damit sie später auch als eine Fehlerseite wahrgenommen wird. Daher entferne ich grundsätzlich den Header- und Footer Bereich.

Das Themify Framework stellt Dir auf jeder Seite ein „Themify Custrom Panel“ bereit. An dieser Stelle lassen sich individuelle Eistellungen vornehmen, die sich dann ausschließlich nur auf diese Seite auswirken. Wechsel dazu in den unteren Bereich Deiner Seite, für die folgenden Einstellungen.

Auf der Registerkarte „Page Option“ wähle die Sidebar Option „ohne Sidebar“ und unterdrücke zudem den Seitentitel unter Hide Page Title mit „Yes“.

Die Registerkarte „Page Option“

Auf der Registerkarte „Page Appearance“ findest Du die Einstellungen für den Header- und Footer Bereich. Für beide deaktiviere das entsprechende Design mit dem „X-Icon“.

Die Registerkarte „Page Appearance“

Nachdem Du diese Einstellungen erledigt hast, kannst Du die Seite in WordPress veröffentlichen. Deine neue Seite findet sich jetzt in der Seitenübersicht von WordPress wieder. 

➁ In der Übersicht klick jetzt auf „Themify Builder“. Die neue 404-Page öffnet sich zur Bearbeitung im Frontend Deiner Seite.

Die zentrale Seitenübersicht im WordPress Backend

➂ Auf der noch leeren Seite vergibst Du als Erstes im Grid-Setting ein zweispaltiges Layout. Zusätzlich werden die Inhalte an der Mittelachse (align middle) des Row ausgerichtet. Das sorgt für eine optisch, ansprechendere Verteilung der Inhalte.

Die Grid- und Row Options im Themify Builder

➃ In die rechte Spalte setzt Du als Erstes ein Textfeld-Modul für den „404“ Text und formatierst ihn zu einer H1 Überschrift. Schriftart, Größe und Farbe werden erst einmal von Deinen globalen Seiteneinstellungen übernommen. Als Nächstes folgte ein zweites Textfeld-Modul für den individuellen Text. Die Formatierung bleibt hier auf Paragraf.

Das Text-Modul mit seine Einstellungsmöglichkeiten

Zu guter Letzt platziere noch ein Button-Modul unter die beiden Textfelder. Konfiguriere ihn mit einer aussagekräftige Beschreibung und der URL, auf die der User weitergeleitet werden soll.

Das Button-Modul

➄ In die linke Spalte platzierst Du nun die Grafik mit dem Images-Modul.

Das Images-Modul aus der Builder Palette

➅ Da die Seite ohne einen Header-Bereich angelegt wurde, empfiehlt es sich, im oberen Bereich noch einen kleinen Abstand (Padding) einzustellen. Das kannst Du in den „Row-Setting“, unter “Padding”, mit einem Zahlenwert erledigen. Alternativ kannst Du auch an der oberen Kante mit der „Maus anfassen“ und das Padding einfach aufziehen.

Mit Padding-Top eine „Weißraum“ an der Oberkante schaffen

➆ Jedes eingesetzte Modul kannst Du natürlich noch weiter Deinen ganz individuellen Bedürfnissen anpassen. Eine reichhaltige Palette an individuellen Einstellungen findest Du im jeweiligen Modul unter dem Register „Styling“. Wenn alles erledigt ist, speichere Deine Einstellungen über „Save“ und verlasse den Builder Modus (x = Exit). Deine Seite ist nur fertig gestaltet und muss nur noch in das System integriert werden.

➇ Dazu wechselst Du wieder in das Backend Deiner Seite. Im linken Menü von WordPress findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. Aus dem DropDown Menü wählst Du Deine erstellte 404-Seite aus und speicherst den gesamten Dialog. WordPress folgt nun nicht mehr der Standard Einstellung, sondern verweist den User, im Falle eines Fehlers, auf Deine neue 404-Page. Das war’s, wie Du siehst, kein allzu großes Hexenwerk!

Die Themify Settings im linken WordPress Menü

Inspirationen für Deine neue 404-Page

Ich hoffe, der Beitrag konnte offene Fragen hinsichtlich der 404 Page klären? Hast Du bereits eine 404 Fehlerseite in Deinem Webprojekt oder steht dies als Nächstes auf Deinem Zettel? Lass es mich in den Kommentaren wissen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Load More