Welches CMS für meine Website?

Die Möglichkeiten sind vielfältig, die Empfehlungen zahlreich: Wordpress, Joomla und Typo3 sind nur einige Beispiele für Content Management Systeme, die ihre Befürworter haben, dem Laien aber erst einmal nichts sagen. Wer sich eine Website erstellen oder seine vorhandene Webpräsenz neu auflegen möchte, der steht vor der Frage: Welches CMS soll ich wählen? Wir liefern einen groben Überblick über die wichtigsten Content Management Systeme, um Ihnen die Entscheidung leichter zu machen.

Vorbetrachtung: Was soll meine Website leisten?

Bevor es ans Eingemachte geht, sollten Sie sich zunächst diese Frage stellen. Werden Sie sich klar darüber, welchen Ansprüchen Ihre zukünftige Website gerecht werden muss. Liegt ein starker Fokus auf der neuen Website und erwarten Sie eine vermehrten Austausch mit Kunden und Interessenten? Oder dient die Website lediglich als Vervollständigung Ihrer Werbung? Wie viele Inhalte möchten Sie auf der Website platzieren und wird die Seite im Verlauf der Zeit stark wachsen? Welche Funktionen wünschen Sie sich - Kalender, Blogbereiche, Archive, Galerien, Buchungs- und Shopfunktionen?

checkliste anforderungen cms

 

Werden Sie sich im Vorfeld klar darüber - anschließend können Sie sich auf die Suche nach dem passenden Content Management System begeben.

Der aktuelle Favorit: Wordpress als CMS

Es ist nicht nur unser Favorit, sondern auch weltweit der Platzhirsch unter den Content Management Systemen. Laut dem Analyseunternehmen BuiltWith nutzen 18 Millionen Websiten Wordpress als Content Management System. Auch bei uns im firmennest ist Wordpress seit vielen Jahren das Mittel der Wahl für die Erstellung von Websites.

 

Die Software bietet neben grundlegenden Einstellungen viele erweiterte Funktionen wie Widgets, Plug-Ins und verschiedene Themes. Dank vieler kluger Köpfe in der Nutzergemeinde ist die Auswahl hier sehr groß. Das Wordpress-Backend ist sehr leicht verständlich und intuitiv bedienbar - dies ist der Hauptgrund für die Beliebtheit unter den Websitebetreibern.

 wordpress logo

Durch die vielen (teilweise kostenpflichtigen) Erweiterungsoptionen ist Wordpress als CMS für kleine Websites mit geringerem Umfang wie auch komplexe Webpräsenzen geeignet. Zur Gestaltung der Website können Sie entweder vorhandene Themes nutzen oder selbst tätig werden - eine absolut individuelle Darstellung gibt es von firmennest. Wir sind Ihr Partner für das Webdesign in Berlin und ganz Deutschland und setzen Ihre Website-Vorstellungen mit Wordpress in die Tat um!

 

Dank der hohen Benutzerfreundlichkeit können Sie in Wordpress selbst Inhalte erstellen, bearbeiten und gestalten bei vergleichsweise geringem Aufwand. Leider stellt Wordpress mit seiner großen Beliebtheit bei Websitebetreibern eine attraktive Angriffsfläche für Hacker dar. Wer aber alle notwendigen Updates zeitnah durchführt, kann so eventuelle Sicherheitslücken schließen.

Joomla! als Content Management System

Mit einigem Abstand zum Marktführer Wordpress folgt an zweiter Stelle das CMS Joomla!. Die Basis-Version dieser Software ist bereits etwas umfangreicher als bei Wordpress und die Konfigurationseinstellungen nicht immer so leicht verständlich für Website-Einsteiger. Bei Fragen finden Sie in Online-Handbüchern Hilfe und einer aktive Community steht Ihnen gern mit Rat und Tat zur Seite.

 

Der Pool an Plug-Ins, Modulen und Themes ist, ähnlich wie bei Wordpress, vielfältig und teilweise kostenlos verfügbar. Für wen Individualität und ein einzigartiges Design nicht an erster Stelle stehen, der kann aus vielen vorgefertigten Designs für seine Joomla!-Website wählen.

 joomla logo

Zu Beginn ist das Handling von Inhalten und Erweiterungen im Backend für so manchen Webmaster gewöhnungsbedürftig. Generell zählt Joomla! aber zu den nutzerfreundlicheren Content Management Systemen und je mehr Sie sich damit beschäftigen, umso schneller Verständnis entwickeln Sie für die Funktionsweise des Systems.

 

Joomla! ist geeignet für Websites von geringerem Umfang, deren Ausmaß skalierbar ist. Hier sind die möglichen administrativen Einstellung völlig ausreichend und auch zielführend.

Drupal für die Website-Erstellung

Die Content Management Systeme Drupal und Wordpress sind in Hinblick auf die Komplexität der Grundinstallation ähnlich schlank gestaltet. Über Module lassen sich die Funktionen des Systems nach Bedarf erweitern und sehr flexibel gestalten. Drupal ist somit eine gute Basis für sehr individuelle Projekte von kleinem oder mittlerem Umfang.

 drupal logo

Nennenswert sind die vielen Funktionserweiterungen, die Drupal im Bereich des Web 2.0 zur Verfügung stellt. Hier liegen auf jeden Fall die Stärken des Systems und sein primärer Anwendungsbereich. Weiterhin positiv ist, dass Rechte sehr differenziert gestaltet werden können, wodurch Sie den Überblick behalten, auch wenn viele verschiedene Personen an der Website arbeiten sollen. Kleine oder mittlere Projekte, die in starkem Maße eine Community und user-generated Content einsetzen, finden in Drupal ein passendes CMS.

 

Der administrative Aufwand des Content Management Systems ist allerdings um einiges aufwändiger als zum Beispiel bei Wordpress. Die meisten Anpassungen sind nur über den FTP-Zugang möglich und bedeuten damit immer einen tiefen Eingriff in das System.

TYPO3 als CMS

TYPO3 ist zusammen mit Wordpress und Joomla! eines der am meist genutzten CMS weltweit. Wie bei den Mitstreitern findet sich auch hier eine kreative Folgerschaft, die fleißig Erweiterungen, Plug-Ins und Widgets programmiert und diese oft kostenlos zur Verfügung stellt.

 typo3 logo

Ein großer Minuspunkt für jeden, der sich nicht intensiver mit Content Management Systemen und deren Konfiguration auseinandersetzt: TYPO3 ist nicht einfach zu verstehen und anzupassen. Das System ist sehr leistungsfähig, muss aber unbedingt richtig implementiert werden, um seine volle Kraft entfalten zu können. Für jeden, der noch keine Erfahrung im Webdesign und der Webprogrammierung hat, ist TYPO3 ohne Betreuung durch einen fachkundigen Experten deshalb nicht zu empfehlen. Auch gängige Anpassungen von Inhalten und verwendeten Medien sind mit anderen Systemen wie Wordpress leichter zu handhaben.

 

Positiv zu nennen ist wiederum der Fakt, dass sich das System bei korrekter Konfiguration leicht an ändernde Umstände anpasst. Wer von Beginn an eine größere Website in Planung hat oder ein umfangreiches Wachstum der Komplexität erwartet, findet in TYPO3 ein zuverlässiges Content Management System.

Weitere Systeme

Mit den genannten Big Playern im Bereich CMS ist noch lang nicht alles gesagt. Viele weitere, größere und kleinere Entwickler haben Content Management Systeme auf den Markt gebracht, die sich etabliert haben. Dazu gehören unter anderem Jimdo, Redaxo, ProcessWire, Contao, Opencart - sie alle haben ihre Vor- und Nachteile, welche sich oft erst beim Selbsttest herausstellen.

 

Wir sehen: Pauschal lässt sich keine Aussage treffen, warum welches CMS für welches Projekt gewählt werden sollte. Für Firmenwebsites präferieren wir in der Regel Wordpress, da es die perfekte Kombination aus Gestaltungsfreiheit für den Webdesigner und intuitiver Bedienbarkeit für Sie als Nutzer ist. Sie wünschen sich eine neue Website? Standard-Designs und recycelte Programmierungen gibt es bei uns nicht - gern beraten wir Sie zu Ihren individuellen Möglichkeiten!

Typografie im Flat Design

Getreu dem Motto “weniger ist mehr” verzichtet Flat Design auf zahlreiche Gestaltungsmittel, die im Skeuomorphismus noch Anklang fanden. Dazu zählen aufwändige Verzierungen oder dreidimensionale, die Wirklichkeit imitierende Elemente. Im Vordergrund stehen Simplizität und das (farbliche) Hervorheben einiger weniger Elemente. Durch grafische Reduktionen im Flat kommt daher der Typografie wieder eine größere Bedeutung zu. Schriften werden zu den Hauptelementen, die wesentlichen Botschaften entfalten sich am besten im Text. Folge: Das Thema Flat Design Typo gehört zur zentralen Fragestellung im Gestaltungsprozess, auch für unser Webdesign Berlin Team. Was gibt es für eine harmonische Flat Typographie zu beachten?

Typographie im Flat Design - Was gilt es zu beachten?

Flat Design Typo am Beispiel von adayinbigdata.com (Screenshot).

Flat Design Typo Regeln

Simplicity - das zentrale Schlagwort im Flat Design - wirkt sich natürlich auch auf die Wahl der Schrift(en) aus. Im Sinne eines Minimalistischen Webdesigns, das die Webseite insbesondere mit farbigen Flächen und Schaltflächen strukturiert, arbeitet man optimalerweise auch mit “simplen” Fonts. Mit dem Text sollen dem Besucher einer Website Impulse übermittelt werden. Was zählt, ist der Inhalt. Die gestalterischen Mittel bzw. die Schriftart darf die Botschaft nicht übertünchen, sondern diese diese unterstreichen. Unaufdringlich und mit schlichter Eleganz, dennoch interessant fürs Auge und einfach lesbar sollte das Schriftbild im Flat Design sein und sich harmonisch in die Gesamtgestaltung einfügen.

 Die richtige Schriftart für Flat Websites finden.

Flat Design Fonts müssen mit der schlichten Eleganz und Farbenfreude der Gestaltung in ihrer Gesamtheit harmonieren, um die Message eindrücklich zu vermitteln.
Oft verwendet man nur eine Font-Familie, wie hier bei Ghost Games (Screenshot).

Die Idee des Simplen zieht sich auf allen Ebenen durch: In der Regel findet man auf Webseiten im Flat maximal zwei verschiedene Fontfamilien (wohingegen Designer in anderen Projekten zwei bis vier Schriftfamilien nutzen). Vor allem klare Schriftarten dominieren als Flat Design Fonts. Außerdem kennzeichnend: Speziell serifenlose Schriften mit mehreren Schriftschnitten werden in diesem Webdesign Trend bevorzugt. Die grellen Farben im Flat heißen im Umkehrschluss für die Flat Typo, dass Größenverhältnisse, Linien und Striche klar und ausbalanciert sind.

Serifen im Flat?

Auch wenn Novelty Fonts im Flat Design funktionieren können, sind es doch vielmehr serifenlose Schriften, die überwiegen. Insbesondere Schriften mit sehr dünnen oder sehr breiten Schnitten beherrschen das Bild. Serifenschriften sind eher selten anzutreffen; zu viel Aufmerksamkeit könnte die Verzierung auf sich ziehen. Hier gestaltet sich zudem die Suche für die passende Typographie dann wesentlich schwieriger.

Schriftarten ohne Serifen sind typisch für Flat Typo

Flat Design Typo am Beispiel des Webfonts «Montserrat» der argentinischen Designerin Julieta Ulanovsky.

Eine einheitliche, in der breite nicht variierende Schrift sowie Schriftstärke ist zudem einfacher zu lesen und passt mit den unterschiedlichsten Hintergründen zusammen. In unseren Projekten arbeiten wir häufig mit Flat Design Fonts wie

  • Lato
  • Open Sans
  • Montserrat
  • PT Sans
  • Source Sans Pro.

 

Im Rahmen von Flat Design arbeiten wir gerne mit Fonts wie Lato«Lato» - häufig im Flat Webdesign zur Anwendung kommendes Webfont von Łukasz Dziedzic.

Daneben werden häufig auch Proxima Nova, Helvetica oder Helvetica Neue als Flat Design Fonts genannt. Arial könnte sich hier ebenso einreihen. Für ein aussagekräftiges und Persönlichkeit ausstrahlendes Design eignen sich jedoch Webfonts mit mehr Pepp.

Novelty Fonts funktionieren auch für Flat Webseiten.Novelty Typo im Flat Webdesign am Beispiel von «Impact Label».

Sofern Novelty Fonts zum Einsatz kommen sollen, empfiehlt es sich zwei Fonts für das Design zu wählen. Hierbei ist es ratsam auf eine Novelty Schriftart zu setzen, die einer serifenlosen (hinsichtlich Attributen wie klare Linien und einheitliche Striche) ähnlich ist, also auch nicht zu verspielt oder dekoriert erscheint. Diese sollte dann an den Stellen auftauchen, an denen der Text einfach und groß gehalten wird.

Lesbarkeit, Raum und Farbkontrast in der Flat Typografie

Da der Flat Stil vollkommen auf dreidimensionale Effekte (etwa Schlagschatten) verzichtet, ist eine eingängige Farbpalette zur Gestaltung umso wichtiger. Mutige leuchtende und helle Farben mit ähnlich hoher Sättigung kommen bevorzugt zum Einsatz. Mit Blick darauf, dass eine solche farbenfrohe Gestaltung in Kombination mit Flat Icons wesentliches Ausdrucksmittel im Flat Design ist, muss die Wahl der Schriftart hinsichtlich Schriftgröße bzw. -breite, Strichstärke und natürlich auch Schriftfarbe gut abgestimmt sein.

Am häufigsten finden sich Schwarz und Weiß als Schriftfarben auf Flat Webseiten. Wenn man bedenkt, dass die Schriftzüge eben sehr häufig auf farbigem Hintergrund positioniert werden, wundert diese Farbwahl in der Flat Design Typo kaum. Schließlich sorgt dieser Farbkontrast für eine bessere Lesbarkeit von Texten. Da eben nicht auf Schatten gesetzt wird, müssen sich Text und Hintergrund eben durch den Farbkontrast abheben.

Des Weiteren beeinflussen leuchtende Hintergrundfarben auch die Strichstärke und und Schriftgröße der Typographie im Flat Design: Fonts sollten sich durch gerade Striche auszeichnen und groß sowie kräftig genug sein, um sich gut lesen zu lassen. Wir vermeiden in diesem Zusammenhang kursive Schriftschnitte, da diese zu viel Unruhe in das sonst so „gerade“ Design bringen. Insgesamt sollte man Texten im Flat “Raum zum Atmen” geben. Ausreichend Whitespace, große Fonts, Variation in der Schriftgröße ermöglichen es den Botschaften, sich auf der Seite zu entfalten.

Flat Design Font Trends

Nachdem wir bereits ein paar Flat Design Font Beispiele genannt haben, stellen wir hier noch ein paar weitere Klassiker und Trends vor:

Raleway

 raleway webfont

«Raleway» by The League of Moveable Type

Junction

junction webfont

«Junction» by The League of Moveable Type

Corbert

corbert webfont

«Corbert» by The Northern Block

Sofia Pro

sofia pro webfont

«Sofia Pro» by Mostardesign

Manteka

manteka webfont

«Manteka» by Eduardo Araya

Kidot

kidot webfont

«Kidot» by Massimo Vignelli

Market Deco

market deco webfont

«Market Deco» bySteve Ferrera

Gnuolane

gnuolane webfont

«Gnuolane» by Typodermic Fonts

RBNo2

rbno2 webfont

«RBNo2» by Rene Bieder

Langdon

langdon webfont

«Langdon» by xlntelecom

Museo Sans

museo sans webfont

«Museo Sans» by Exljbris

Dense

dense webfont

«Dense» by CD Type

Lovelo

lovelo webfont

«Lovelo» by Renzler Design

Klinic Slab

klinic slab webfont

«Klinic Slab» by Joe Prince

Caviar Dreams

caviar dreams webfont

«Caviar Dreams» by Nymphont

Muli

muli webfont

«Muli» by Vernon Adams

Josefin Sans

josefin sans font

«Josefin Sans» by Typemade

Moderne Sans

modern sans font

«Modern Sans» by Marius Kempken

Tracks

tracks webfont

«Tracks» by Gumpita Rahayu

Franchise

franchise font

«Franchise» by Weathersbee Type

Mohave

mohave font

«Mohave» by by Gumpita Rahayu

OSP-Din

osp din font

«OSP-DIN» by OSP-foundry

Big John & Slim Joe

big john slim joe font

«Big John & Slim Joe» by Ion Lucin

Bebas Neue

bebas neue font

«Bebas Neue» by Flat-it

Material Design: Be-Greifbar

 Material Design ist eine von Google entwickelte Designsprache, die vor allem auf mobilen Endgeräten und im Web bei diversen Google-Diensten zum Einsatz kommt. Sie wurde aus dem minimalistischen Flat Design abgeleitet. Dem zweidimensionalem Flat Design fügt das Material Design eine dritte Dimension hinzu, die den grafischen Oberflächen subtil Tiefe verleiht und Elemente haptischer gestaltet. Wie das Flat Design setzt das Material Design sehr stark auf die Betonung von Icons und Schriften. Die verwendeten Elemente sind großflächig, einfarbig und in leuchtenden und kontrastreichen Farben ausgeführt. Im Zuge der Einführung des Material Designs hat Google auch seine eigene Schriftart, den Android Font “Roboto”, angepasst.

material design

 Was ist das erklärte Ziel von Googles Design?

Material Design erhebt den Anspruch, die Prinzipien “guten” Designs mit sämtlichen Möglichkeiten von Technologie und Wissenschaft zu verbinden. Besonders gut lässt sich die Umsetzung dieses Anspruchs an animierten Elementen erkennen.

    Beispiel:

Wenn sich eine rechteckige Form auf dem Display ändert - egal ob sie lediglich die Größe ändert oder sogar auch die Form - dann ändert sich sowohl die Höhe als auch die Breite der Form asynchron; also die Breite verändert sich beispielsweise schneller als die Höhe. Diese Art der Choreographie wirkt auf eine subtile Art natürlich. In manchen Fällen ändert sich die Größe eines Inhalts synchron, während sich der dazugehörende Container asynchron ändert. So kann der Designer vermeiden, dass beispielsweise Bilder unnatürlich verzerrt werden.

google material design martphone 1796337 640

Die Prinzipien von Material Design

“Material ist die Metapher” (Google)

Material Design basiert auf unserer realistischen Erfahrung der Welt; auf physikalischen Gesetzmäßigkeiten, die unsere Wahrnehmung strukturieren und von uns als “natürlich” empfunden werden. Materialien geben die taktile Dimension vor, vor allem Studien von “Papier und Farbe”, und werden durch technologische Finessen für “die Vorstellungskraft und Magie” geöffnet, so Google. Die Grundlagen von Licht, Oberfläche und Bewegung bestimmen, wie Elemente aussehen und animiert werden, wie sie sich in Interaktion miteinander verhalten. Licht und Schatten, Abstände und Absätze, Kanten und Ecken sind in diesem Sinne “realistisch” gestaltet und helfen den Nutzern, die Funktionalität der grafischen Oberfläche intuitiv zu “begreifen”.

“Kräftig, grafisch, intentional” (Google)

Print Design bildet in mehrfacher Hinsicht die Basis für Material Design. Typografie, Gitter, Räume, Dimensionierung, Farbe und der Einsatz von Bildern sind bestimmende Elemente und kreieren optische Hierarchien, Bedeutungen und bestimmen die Blickführung. Alles steht im Zeichen der User-Erfahrung. Der User soll geleitet werden und intuitiv verstehen: Darum setzt Googles Material Design auf ein bestimmtes Farbmanagement, großflächige Bilder, großformatige Typos und den bewussten und großzügigen Einsatz von white space.

“Bewegung verleiht Bedeutung” (Google)

Die Interaktionen der Benutzer mit der grafischen Oberfläche bringen diese in Bewegung: Sie transformieren die Oberfläche. Wenn sich die Elemente auf der grafischen Oberfläche ändern und neu organisieren, ist es von besonderer Wichtigkeit, dass die Nutzer dennoch ein Gefühl der Kontinuität erleben und die Oberfläche fokussiert auf die Intentionen der User bleibt. Zu den Prinzipien des Material Design zählt aus diesem Grund, dass die Feedbacks der grafischen Oberfläche subtil aber eindeutig und Veränderungen effizient aber kohärent sind.

google 920532 640

Materielle Eigenschaften

Wer Material Design anwenden möchte, muss sich mit den Qualitäten von Materialien auseinandersetzen, um sie in grafische Elemente “übersetzen” zu können. Im Falle des Material Design von Google bedeutet dies:

  • Elemente haben eine variable Größe (auf der x- und der y-Achse) und eine einheitliche Dicke von 1 Millimeter (y-Achse). Die Dicke bestimmt auch den unerlässlichen Schattenwurf der Elemente. Der Schatten stellt dar, wie groß Abstände zwischen bestimmten Oberflächen sind.
  • Materialien sind “massiv”: Ein Element darf nicht denselben Ort einnehmen, wie ein anderes Element. Zwei Elemente überlappen sich gegenseitig und zeigen dies durch den Schattenwurf, der vom oberen Element auf das untere fällt. Neue Elemente erscheinen auf der oberen Schicht der Elemente und durchdringen nicht etwa tiefere Schichten.
  • Materialien können ihre äußere Form verändern.
  • Wenn Materialien ihre Größe ändern (x- und y-Achse), verharren sie auf ihrer festgelegten Ebene (z-Achse).
  • Materialien falten und biegen sich nicht.
  • Zwei Materialien können sich miteinander verbinden und Eins werden. Einzelne Materialien können sich teilen und wieder “ganz” werden.
  • Material kann spontan auftauchen und verschwinden.
  • Material kann sich auf jeder beliebigen Achse bewegen.
  • Wenn sich Material auf der y-Achse bewegt, ist dies vor allem für Interaktionen des Nutzers vorbehalten.

Materialle Bewegungen

Bewegungen sind im Material Design besonders ausgefeilt. Bewegungen, die der User mit einem Element vollführt - etwa, wenn er einen Regler zieht - geben ein bestimmtes Tempo und eine eigene Dynamik vor. Erklärtes Ziel dieser Ausrichtung ist es, dass Bewegungen weder als “lahm” noch als “nervös” empfunden werden.

 

Elemente, die sich bewegen, folgen, wie oben bereits erwähnt, einer besonderen Choreografie. Entscheidend ist, dass nicht eine lineare Bewegung angestrebt wird, sondern eine, die unserem natürlichen Empfinden für Bewegungen entspricht. So verlangsamen sich Bewegungen am Beginn oder gegen das Ende hin - als würden sie gegen die Trägheit, die Materialien ja auch in der realen Welt überwinden müssen, ankämpfen.  

Fazit

Material Design ist eine faszinierende und bereits extrem ausgefeilte Design-Philosophie. Sie kann Entwicklern viele inspirierende Ansätze liefern. Gleichzeitig beschränkt sie natürlich: Sie ist ein geschlossenes System, dass für jedes Element der Gestaltung - Farbgebung, Icons, Layout, Bewegung etc. - feste Vorgaben bereithält. Spannend wird es immer dann, wenn Webdesign die Regeln derart verinnerlicht hat, dass ein Ausbruch möglich wird.

 

Quellen:

https://material.io/guidelines/

https://design.google.com/

https://www.youtube.com/watch?v=Q8TXgCzxEnw

material design icons

Serif vs. Sans Serif: Welche Fonts sollten für Webseiten genutzt werden

Wenn Sie eine Webseite erstellen, achten Sie gewiss auf ein ansprechendes Design. Dabei stellen sich natürlich viele Fragen: Passt das Design zu den Inhalten und zu meinem Unternehmen bzw. meiner Dienstleistung? Kommen die von mir ausgesuchten Grafiken gut zur Geltung? Findet sich ein Nutzer auf der Seite optimal zurecht? Kann man die eingebauten Texte gut lesen und passen diese typografisch zum Design?
Für jede dieser Fragen können wir, als Agentur für Webdesign (Berlin), passende Antworten liefern. In diesem Blog-Post soll es nun um das Design des Textes gehen, genauer um die Wahl der Schriftart. Da dieses Thema sehr vielseitig ist, möchten wir hier mit einer groben Einteilung der Schriften beginnen und die Frage klären: Serif vs. Sans Serif? Was ist besser für Online-Inhalte.

Begriffserklärung: Was sind Serifen?

Bevor wir uns dem Thema widmen, welche Schriftarten (engl. Fonts) auf Webseiten besonders geeignet sind, möchten wir kurz den Begriff der “Serife” erklären. Laut Duden handelt es sich, um einen “kleinen, abschließenden Querstrich am oberen oder unteren Ende von Buchstaben”.

Auch wenn sich diese kleinen Striche zumeist sehr harmonisch ins Schriftbild fügen, sind sie Ihnen gewiss schon einmal aufgefallen. Schriften, die über Serifen verfügen, werden in der Typografie als “Serifenschrifen” (serif) bezeichnet; Schriften ohne Serifen werden unter dem Begriff “serifenlose Schriften” (sans serif) gefasst.

Schriftbeispiel: Serif und Sans Serif

Schriftart mit Serifen oder ohne Serifen - Was ist das Richtige für meine Webseite?

Die Schriftauswahl für eine Webseite ist ein entscheidender Schritt in Richtung eines stimmigen, unverwechselbaren Designs. Die Schrift sollte zum allgemeinen Design der Website passen, Kombinationen verschiedener Schriftarten (sog. Webfonts) sollten harmonisch sein und gerade bei längeren Textabschnitten spielt natürlich auch die gute Lesbarkeit eine wesentliche Rolle. Gerade dabei ist die Wahl zwischen Serif und Sans Serif entscheidend.

Webseiten sind keine Buchseiten

Buchseite mit Serifenschrift

Verschiedene Tests in Bezug auf das Leseverhalten haben belegt, dass für lange Texte in Druckerzeugnissen eine Serifenschrift von Vorteil ist. Die kleinen Querstriche erleichtern das Verbinden der Buchstaben und erhöhen die Lesegeschwindigkeit. In Romanen und Zeitungen finden sich daher i.d.R. Schriften mit Serifen.

 

Monitor Serif Sans SerifWebseiten werden aber nicht auf Papier, sondern auf Bildschirmen konsumiert. Da Bildschirme in ihrer Auflösung eingeschränkt sind, gelten hier andere Regeln für Texte. Bei geringerer Auflösung “verschwimmen” die Serifen vor dem Auge, sie werden pixelig ausgegeben und die Schrift wirkt insgesamt eher unscharf auf das Auge. Gerade bei kleinen Schriftgrößen wird dieser Effekt besonders deutlich.
Daher empfiehlt sich für längere Texte auf Bildschirmen in jedem Fall die Verwendung von Sans-Serif-Schriften. Die Ermüdung beim Lesen wird dadurch deutlich minimiert.

Schrift als Design-Element

Natürlich soll der Einwand bzgl. der Lesbarkeit die Verwendung von Serif-Fonts im Webdesign nicht komplett ausschließen. Auf vielen Webseiten und Microsites findet sich auch eine stimmige Kombination beider Schriftarten. So werden Serif-Schriften häufig für Überschriften verwendet, wodurch diese optisch vom Fließtext abgesetzt und hervorgehoben werden. Für längere Textblöcke, Breadcrumbs oder Navigationselemente wird i.d.R. auf Sans-Serif-Fonts zurückgegriffen. (Ein bekanntes Beispiel für diesen kombinatorischen Einsatz ist etwa Wikipedia.)

Serif vs. Sans Serif: Zusammenfassung

Eine unterhaltsame Zusammenfassung zum Thema bietet der Webfont-Anbieter “urbanfonts”.

Webdesign und SEO: Ohne das andere geht es nicht

Lange vorbei sind die Zeiten der Gelben Seiten oder der Kleinanzeigen im örtlichen Tageblatt. Auf der Suche Lösungen, Informationen, Produkten und Dienstleistungen ist das World Wide Web zur Bezugsquelle Nummer 1 avanciert. Von Berlin bis Böbrach wird gegoogelt, was das Zeug hält – nach Klamotten, nach Ärzten, nach Restaurants, Hotels, Fliesenlegern, Nachhilfelehrern, Fitnessstudios etc.

Also egal ob weltweit agierender Großkonzern oder lokal ansässiger Handwerksbetrieb – kein Unternehmen kommt heute mehr ohne Website aus, die das Firmenangebot konversionsfreundlich präsentiert.

Vor allem kleine und mittelständische Unternehmen verfügen aber oft nicht über das Know-how und die personellen Ressourcen, um selber eine ansprechende Website zu bauen. Sie lagern diese Aufgabe häufig an externe Dienstleister und Agenturen aus – unter dem Stichwort Webdesign - SEO spielt für eine erfolgreiche Homepage aber eine ebenso große Rolle wie Optik und Usability und sollte von Anfang an mitgedacht werden, also schon im Stadium der Programmierung und der Erstellung des Webdesigns.

Webdesign? Is’ klar - doch was macht SEO?

SEO ist die Kurzform für Search Engine Optimization, zu Deutsch: Suchmaschinenoptimierung. Vereinfacht gesagt geht es bei SEO darum, mithilfe technischer und redaktioneller Maßnahmen die Auffindbarkeit einer Website im Internet zu steigern.

Wer bspw. ein Taxiunternehmen in Berlin hat, will in der Google-Trefferliste natürlich möglichst weit oben stehen, wenn Leute nach “Taxi Berlin” googeln. Die obersten Platzierungen generieren in der Regel die meisten Klicks. SEO-Maßnahmen können die Platzierung verbessern.

seo 1018442 640

Wer seine Seite nicht SEO-optimiert, muss damit rechnen, weit hinten im Google-Ranking zu landen. Und kaum ein User klickt sich durch die Seiten 2 bis 10 auf der Suche nach einem passenden Ergebnis für seine Suchanfrage, eher ändert er seine Suchanfrage.

Webdesign und Suchmaschinenoptimierung beeinflussen sich gegenseitig

Dass die Möglichkeiten zur Suchmaschinenoptimierung schon bei der Erstellung einer Website berücksichtigt werden sollte, wird schnell deutlich. Denn was nutzt Ihnen als Unternehmen eine attraktiv und höchst nutzerfreundlich designte Website, wenn diese im Netz nicht auffindbar ist?

Andersrum verhält es sich ähnlich: Die Google-Rankings Ihrer Website sind hervorragend, viele Nutzer kommen auf Ihre Seite - aber: Sie bestellen nichts, stellen keine Anfrage, machen keinen Termin, verdrücken sich ohne Transaktion wieder von Ihrer Seite. Dann liegt vermutlich etwas mit der Nutzbarkeit im Argen zu liegen, einem Kernelement des Webdesigns.

Wer Webdesign und SEO getrennt voneinander und/oder zeitlich nacheinander angeht oder Agenturen damit beauftragt, der riskiert massive Folgekosten für die Nachrüstung bzw. die nachträgliche Anpassung beider Bereiche aufeinander: Ein schönes Design, das nachträglich mit SEO-Kriterien in Einklang gebracht werden muss, ist genauso arbeitsintensiv wie eine SEO-optimierte aber wenig ansprechende Seite im Nachgang zu verschönern, ohne dass die SEO-relevante Codierung verloren geht.

Um einen solchen finanziellen und zeitlichen Aufwand zu vermeiden und die Basis für eine in jeglicher Hinsicht gelungene Website zu schaffen, lohnt es sich, den Auftrag für eine Website an eine Online-Agentur zu vergeben, bei der alles aus einer Hand kommt. Das heißt, in der Webentwickler/Programmierer, Webdesign- und SEO-Experten von Anfang an zusammenarbeiten.

Eine seriöse Webdesign-Agentur erkennen Sie außerdem daran, dass Ihnen keine Standardlösung zum Festpreis angeboten wird, sondern ein individuell auf Ihre Wünsche und vor allem Ihre Zielgruppe zugeschnittenes Produkt.

Gutes Webdesign ist die Grundlage für gute Rankings

programming 1873854 640

Design und Programmierung sind die entscheidenden Faktoren für die Nutzbarkeit einer Website. Unter anderem folgende Punkte machen eine “gute” Internetseite aus:

  • Standardelemente und Optik: Internetnutzer haben eine bestimmte Erwartungshaltung an die optische Aufmachung und das Vorhandensein bzw. die Anordnung einzelner Elemente einer Website, die sie erfüllt wissen wollen. Dies betrifft unter anderem Texte, Navigationselemente oder Suchfelder.

 

  • Navigation und Menüführung: Eine Website sollte immer dem Unternehmenszweck entsprechend aufgebaut sein: Als Online-Shop wollen Sie verkaufen, als Anwalt wollen Sie Anfragen generieren. Hier bestimmt das Webdesign vor allem mittels passender Navigation, ob die Besucher Ihrer Website am Ende die gewünschte Aktion durchführen oder Ihre Seite tatenlos wieder verlassen.

 

  • mockup 654585 1280Responsives Design: Immer mehr Google-Suchanfragen werden über mobile Endgeräte gestellt. Internetseiten werden also verstärkt über Smartphones und Tablets aufgerufen. Hier ist es die Aufgabe des Webdesigns, neben der Desktop-Ansicht auch ein mobiles Design zu erstellen. Dieses sorgt für eine attraktive und nutzbare Darstellung Ihrer Seite auf kleineren Handy- und Tablet-Bildschirmen.

 

  • Barrierefreies Webdesign: Barrierefreiheit bei der Nutzung von Websites ist seit dem letzten verstärkt in den Fokus der Webdesigner gerückt. Barrierefreies Webdesign ermöglicht auch eingeschränkten Nutzern einen komfortablen Zugang zu Online-Inhalten.

 

Die Umsetzung dieser beispielhaft ausgewählten vier Punkte entscheidet darüber, ob die Besucher Ihrer Website diese als gut oder schlecht empfinden. Aber auch Suchmaschinen wie Google bewerten Aufmachung, Struktur und bspw. die Ladezeit Ihrer Seite und zeigen Ihre Seite je nach Urteil weiter vorne oder weiter hinten in ihren Suchergebnissen an.

Auch in Bezug auf relevante Inhalte auf einer Website muss die Schnittstelle zwischen Webdesign und SEO von Anfang an reibungslos ineinandergreifen: Texte, Videos, Infografiken oder auch Fotos, die auf Ihrer Seite eingebunden werden sollen, müssen vom Webdesign bedarfsgerecht aufbereitet werden. Gesuchte Informationen müssen innerhalb einer Seite vom User schnell und in einer fürs Auge angenehmen Weise gefunden werden können. Aus SEO-Sicht muss der Content über eine SEO-kompatible Codierung und Programmierung verfügen sowie einen informativen Mehrwert liefern. Letzterer dient dem Nutzer für seine Suchanfrage und liefert der Suchmaschine Anhaltspunkte für die thematische Relevanz Ihrer Seite.

Das Webdesign entscheidet also über den Grad, zu dem Onpage-Optimierung möglich ist. Ein Umstand, der einmal mehr beweist, wie sehr SEO und Webdesign zusammengehören.

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35