Meldungen und News

Zum Thema INGENIUMDESIGN und TYPO3

Webdesign Elemente - 11 Wichtige Bestandteile von Webseiten

  • News

Webseiten sind aus vielen verschiedenen Design Elementen zusammengesetzt. Wenn man für das eigene Unternehmen eine Website von einer Agentur erstellen lässt, sollte man sich in puncto Webdesign nicht allein nach dem persönlichen Geschmack richten. Je nach Branche, der Dienstleistungen oder Produkte sind andere Elemente wichtig.

Welche Webdesign Elemente sollte eine gute Webseite haben?

Farben

Eine einheitliche Farbgebung ist eine der Grundlagen einer guten Webseite. Damit die eigene Seite nicht überladen, sondern einheitlich wirkt, ist es sinnvoll, ein festgelegtes Farbschema zu verwenden, das zur eigenen Branche passt.

Der Trend geht auch dazu, weniger Farben zu verwenden. Minimalismus hat den großen Vorteil, dass man die wichtigen Elemente besser in den Vordergrund stellen kann. Diese Farbakzente funktioniert aber nur, wenn die Webseite nicht an vielen unterschiedlichen Stellen in verschiedenen Farben blinkt. Weniger ist bei Farben also mehr - ein Umstand, der sich auf viele Design-Elemente übertragen lässt.

Schriftarten und Text

Als Faustregel ist es empfehlenswert, nicht mehr als zwei bis drei Schriftarten auf einer Webseite zu verwenden. Üblich ist es, für die Überschriften eine andere Schriftart zu wählen, als für den Fließtext. Der Text sollte an jeder Stelle der Webseite ähnlich gestaltet werden, damit auch dieser Teil des Designs einheitlich wirkt.

Um dem Besucher die Navigation auf der Webseite so einfach wie möglich zu machen, sollte der Text über eine klare Hierarchie verfügen. Lange Textblöcke schrecken Besucher davon ab, diese tatsächlich zu lesen. Ratsamer ist es, viel Text immer wieder durch auflockernde Elemente für das Auge einfacher und lesbarer zu gestalten.

Logo

Ein Logo mit Wiedererkennungswert ist ein essentieller Teil einer Webseite und darf beim Webdesign nicht vergessen werden. Wenn es auf den ersten Blick erkennbar den Kern des Unternehmens treffend darstellt, hilft dies bei der Etablierung des eigenen Unternehmens als Marke.

Navigation

Die Navigation ist bei Websites der erste Anlaufpunkt, mit Hilfe dessen sich Besucher zurechtzufinden versuchen. Gerade dort sieht man aber auch heutzutage immer wieder noch unübersichtliche Lösungen, die einen Besucher eher dazu anregen, die Webseite schnell wieder zu verlassen, statt sich mit den eigenen interessanten Dienstleistungen auf den Unterseiten zu beschäftigen.

Der Text der Navigation sollte gut lesbar, nicht zu groß und nicht zu klein sein und über einen guten Kontrast zum Hintergrund verfügen. Es ist empfehlenswert, nicht mehr als fünf bis sechs Menüpunkt im Hauptmenü unterzubringen.

Logische und bekannte Struktur

Eine übersichtliche Navigation ist schön und gut - sie sollte aber auch an der richtigen Stelle platziert werden! Immer wieder sieht man Webseiten, die versuchen, einen eigenen Weg zu gehen. Meist für diese eigenen Weg allerdings dazu, dass es für den Besucher deutlich schwerer ist, sich auf der Webseite zurechtzufinden, da er mit dieser Struktur nicht vertraut ist. Bei etablierten und bekannten Anordnungen der Elemente zu bleiben, ist also ein guter Weg, um die Usability der eigenen Seite zu verbessern.

Medien - Bilder und Videos

Neben den textlichen Inhalten sind Medien ebenfalls sehr wichtig, um beim Besucher einen guten Eindruck zu hinterlassen. Dabei sollten diese ebenfalls über ein möglichst einheitliches Erscheinungsbild verfügen. Verwendet man meistens gezeichnete Erklärbildchen, ist es sinnvoll, diesen Stil auf der eigenen Seite konsequent durchzuziehen.

Die Wirkung der Medien, die man anwendet, sollte man immer im Hinterkopf behalten. Bindet man beispielsweise einen Link zu weiterführenden Informationen auf einer anderen Webseite ein, mag dies für den Besucher einen Mehrwert darstellen. Allerdings verlässt er dann deine Seite - und du verlierst einen potentiellen Kunden.

Call-to-Actions

Ein Call-to-Action Button fordert den Besucher dazu auf, etwas Bestimmtes zu tun, z.B. dich zu kontaktieren oder ein Produkt zu kaufen. Call-to-Action Buttons sind sehr wirkungsvoll und werden auf den meisten Webseiten eher zu selten als zu oft verwendet.

Responsivität der Webseite

Wenn du einen Webdesigner mit der Erstellung einer neuen Unternehmenswebseite beauftragt, solltest du ganz besonders darauf achten, dass die Responsivität der Seite nicht zu kurz kommt. Eine responsive Webseite passt sich auf unterschiedlichen Bildschirmgrößen immer so an, dass alle Inhalte für den Nutzer gut zu bedienen sind.

Neben den Vorteilen bei der Usability ist die Responsivität einer Webseite auch ein Ranking Signal für Google und andere Suchmaschinen. Dass Webseiten responsive sind, ist heutzutage Standard und sollte immer Teil eines professionellen Webdesigns sein.

Interaktive Forms: Das Kontaktformular

Neben Medien wie Bildern stellen auch interaktive Formulare interessante Inhalte dar, die einen Besucher möglicherweise dazu bewegen, länger auf der eigenen Seite zu bleiben. Absoluter Standard ist die Verwendung eines Kontaktformulars, mit dem sich Besucher bei der eintragen und dir eine Nachricht hinterlassen können.

Ein Kontaktformular kann einen wichtigen Beitrag dazu leisten, mehr Besucher in Kunden zu konvertieren.

Supplementary Content: Header und Footer

Suchmaschinen wie Google unterteilen die Inhalte deiner Webseite ihr zwei Hauptbereiche: Main Content und Supplementary Content.

Während der Main Content alle wesentlichen Informationen im Hauptbereich der Webseite umfasst, stellen Abschnitte wie die Navigation ganz oben auf der Webseite oder die Adresse und die Links zu Impressum und Datenschutz ganz unten auf der Webseite Supplementary Content dar. Dieser wird von Suchmaschinen bei der Einrankung deiner Webseite nicht beachtet, wesentlich ist der Main Content. 

Dennoch solltest du den Supplementary Content nicht ignorieren. Für Besucher ist der essentiell, um sich auf deiner Webseite zurechtzufinden und wichtige Informationen für Öffnungszeiten und deine Adresse zu erfahren.

Saubere Technik im Hintergrund

Eine saubere Technik im Hintergrund deiner Webseite solltest du nicht vernachlässigen, wenn du langfristig Freude an ihr haben möchtest. Wenn eine Seite aufgrund von Serverproblemen beispielsweise regelmäßig offline ist, ist dies ein negatives Signal für die Suchmaschinen.

Funktionierende Technik ist die Grundlage dafür, dass eine Seite von Suchmaschinen überhaupt angezeigt wird und damit auch dafür, dass Besucher auf deiner Seite sind. Lassen sich Buttons und andere Elemente nicht so bedienen, wie das eigentlich gedacht ist, kann dies auch dazu führen, dass Besucher, die eigentlich gerne Kunden wären, keine Möglichkeit haben, sich mit dir in Verbindung zu setzen.

Aus diesem Grund ist es wichtig, Bugs auf der Seite schnell zu beseitigen.

Mehr Infos zu Webdesign

Eine der Webseiten, auf denen sehr viele Informationen zum Thema Webdesign zu finden sind, ist f5.design. Wenn du dich weiter über dieses Thema informieren möchtest, hier ein Link zu der Webseite: Webdesign

Nun weißt Du vieles, was im Bereich der Webdesign Elemente wichtig ist. So kannst du nun, wenn du das nächste Mal einen Webdesigner beauftragst, besser einschätzen, was wirklich wichtig ist und worauf Wert gelegt werden sollte!

TYPO3 Probleme? News, Hilfen und Tipps Blog

TYPO3 Hilfe Blog

TYPO3 site config mit redirect https und trailing slash

Für unsere unterschiedlichen TYPO3 Projekte benötigen wir auch den richtigen URL und Redirect Aufbau. Damit die URL ohne .html und mit dem „trailing slash“ funktioniert, benötigt ihr die richtigen Site-Config Einstellungen: Wichtig ist hier default: ‚/‘ und ‚/‘: 0 in der map: In der .htaccess File fügt ihr nun folgenden Redirect Code hinzu: So wirdThe post TYPO3 site config mit redirect https und trailing slash first appeared on TYPO3 Probleme? Hier Hilfen und Tipps.

Weiterlesen

TYPO3 Sites Config auslagern

Unter TYPO3 liegen die Sites Config pro Domain unter folgender Pfad-Struktur ab: root/typo3conf/sites/ORDNERNAME/config.yaml um nun die Einstellungen und Konfigurationen auszulagern, könnt ihr nun in der config.yaml folgenden Code verwenden: nun werden alle Einstellungen von der Extension yaml Datei verwendet. Somit kann nun die Sites Config ausgelagert werden und zum Beispiel versioniert werden.The post TYPO3 Sites Config auslagern first appeared on TYPO3 Probleme? Hier Hilfen und Tipps.

Weiterlesen

TYPO3 – tx_seo description crop – abschneiden

TYPO3 bietet seit langem schon mit der tx_seo Core Extension unterschiedliche Ausgaben für den Bereich meta Head an. Um nun aber gewisse Text-Längen abschneiden zu können, benötigt ihr folgenden angepassten typoscript Code: Ihr könnt natürlich auch andere Text-Ausgaben abschneiden und verkürzen. Hier funktionieren auch die normalen Anwendungen wie mit stdWrap oder wrap.Wichtig ist jedoch dasThe post TYPO3 – tx_seo description crop – abschneiden first appeared on TYPO3 Probleme...

Weiterlesen

TYPO3 site-config YAML – robots.txt mit Sitemap automatisch anlegen.

Wenn ihr in TYPO3 unterschiedliche BE-Projekte inkl. unterschiedlichen Domains habt, wo automatisiert die robots.txt mit unterschiedlichen Konfigurationen und Sitemap´s angelegt werden soll, so kann man die Einstellungen in der site-config im YAML eintragen: Weitere Informationen gibt es in der TYPO3 Docu: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/SiteHandling/StaticRoutes.html#static-routes Somit wird nun pro Backend-Projekt eine neue robots.txt je nach URL...

Weiterlesen

OnPage-Optimierung: Die besten Tipps

Die OnPage-Optimierung ist ein wichtiger Faktor, wenn es darum geht, die Sichtbarkeit einer Website zu verbessern. Die richtigen OnPage-Maßnahmen zu implementieren, ist allerdings nicht immer einfach. Es gibt jedoch einige Tricks, mit denen man die Sichtbarkeit der eigenen Website erheblich verbessern kann. Wir haben die besten Tipps für Sie zusammengestellt, damit Sie Ihre Website aufThe post OnPage-Optimierung: Die besten Tipps first appeared on TYPO3 Probleme? Hier Hilfen und Tipps.

Weiterlesen

Was ist technische SEO?

Technische Suchmaschinen Optimierung (SEO) bezieht sich auf Website- und Server-Optimierungen, die Suchmaschinen-Crawler dabei unterstützen, Eure Website effektiver zu crawlen und zu indexieren (um die organischen Rankings zu verbessern). Technische SEO-Checkliste Suchmaschinen bevorzugen in den Suchergebnissen Websites, die bestimmte technische Merkmale aufweisen – zum Beispiel eine sichere Verbindung (https), ein responsives Design oder eine schnelle LadezeitThe post Was ist technische...

Weiterlesen

TYPO3 BE – Error PHP Warning: Undefined array key „tx_news_pi1“

Durch die neue TYPO3 Condition Umstellung und PHP8.x kann es im Backend bei bestimmten Extensions und typoScript Abfragen zu Fehlern kommen. Fehler mit Abfrage für die tx_news:Core: Error handler (BE): PHP Warning: Undefined array key „tx_news_pi1“ in ../vendor/symfony/expression-language/Node/GetAttrNode.php line 97 Alte TypoScript tx_news Abfrage: Neue TypoScript tx_news Abfrage:The post TYPO3 BE – Error PHP Warning: Undefined array key „tx_news_pi1“ first appeared on TYPO3...

Weiterlesen

TYPO3 – ckeditor – table – table-responsive

Hier möchte ich Euch in einer kleinen Anleitung zeigen, wie ihr im ckeditor von bootstrap die table-responsive verwenden könnt. Von der normalen Ausgabe: <table class=“table“>… wollen wir noch zusätzlich einen <div class=“table-responsive“>… Die neue Ausgabe soll dann so aussehen: Dafür müssen wir die lib.parseFunc_RTE erweitern: ins SETUP kommt folgendes typoscript: und Ihr könnt anhand diesesThe post TYPO3 – ckeditor – table – table-responsive first...

Weiterlesen

TYPO3 – PHP 8 max_execution_time – htaccess – all-inkl

Mit der neuen Umstellung auf PHP 8.x greift bei dem Hoster all-inkl (ggf. auch bei anderen Hostern) nicht mehr in der htaccess die PHP Einstellung: max_execution_time Dafür gibt es aber schon eine Abhilfe: ALT: max_execution_time erhöhen bis PHP 7.x in der .htacces Datei ans Ende folgendes eintragen: php_value max_execution_time 300 max_execution_time erhöhen ab PHP 8.xThe post TYPO3 – PHP 8 max_execution_time – htaccess – all-inkl first appeared on TYPO3 Probleme? Hier Hilfen und...

Weiterlesen

TYPO3 – Content Element Wizard – verstecken

Wenn ihr die TYPO3 Default Content Elemente im Backend Wizard Global verstecken wollt, müssen wir sie im Wizard sowie im cType Auswahl entfernen. Fügt im tsconfig Code ein: Hier verstecken wir die Content Elemente: textpic, bullets und table Des weiteren müsst ihr noch folgenden tsconfig Code für den MOD Bereich einbinden: Damit werden in derThe post TYPO3 – Content Element Wizard – verstecken first appeared on TYPO3 Probleme? Hier Hilfen und Tipps.

Weiterlesen