kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

UX/UI Design


WordPress: Suchergebnisse nach Inhaltstypen filtern

Die Suchergebnisse in WordPress können besonders bei der Verwendung von verschiedenen Inhaltstypen schnell unübersichtlich werden. Mit Hilfe einer Filter-Funktion nach verschieden Inhaltstypen lässt sich diese Unübersichtlichkeit verhindern und bietet zusätzlich die Möglichkeit einer Priorisierung. Produkte oder Leistungen können beispielsweise höher priorisiert werden als Blog-Beiträge oder Seiten.

Beitrag zu Ende lesen

Übersicht der Bild- & Grafikformate im Web

Attraktive visuelle Inhalte können für den Erfolg einer Website sehr wichtig sein. Die verschiedenen Grafikformate, die in Websites verwendet werden können, unterscheiden sich in erster Linie in der Art der Kompression und in ihrem Funktionsumfang. Wenn ihr also das passende Dateiformat wählt, erreicht ihr die beste visuelle Qualität, bei gleichzeitig kleinster Dateigröße.

Beitrag zu Ende lesen

One Pager, Microsite, Landing Page & Co. – Website-Typen im Überblick

Was unterscheidet eigentlich einen One Pager von einer Microsite? Und wo ordnen sich Landing Page & Co. ein? Im Umfeld von Websites gibt es unterschiedliche konzeptionelle Ansätze – je nachdem welches Ziel ihr verfolgt. Häufig ist die Gattung bereits am Design erkennbar, da sich in den letzten Jahren stereotypische Layouts für die verschiedenen Website-Typen herausgebildet haben. Wir geben euch einen Überblick über die verschiedenen Website-Typen und ihre Besonderheiten.

Beitrag zu Ende lesen

Farbige Listenpunkte mit CSS ::marker

Geordnete und ungeordnete Listen erhalten vom Browser ein Standard-Styling für Aufzählungspunkte: <ol> wird nummeriert, <ul> erhält grafische Aufzählungszeichen. Diese Aufzählungszeichnen lassen sich mit der CSS-Eigenschaft list-style-type gestalterisch verändern, doch bleiben sie immer in Farbe des Textes. Mit der Pseudoklasse ::marker könnt ihr die Aufzählungszeichen umfärben. In Kombination mit counter() sogar noch weiter anpassen.

Beitrag zu Ende lesen

text-overflow & line-clamp – Text mit CSS kürzen

Um robuste Layouts zu erstellen, kann es notwendig sein, Texte, unabhängig von ihrer Zeichenanzahl, auf eine bestimmte maximale Länge zu kürzen. Vor allem, wenn wir Layouts für Websites entwickeln, die via CMS von einem Redaktionsteam gepflegt werden, müssen wir uns darauf verlassen können, dass die Layouts möglichst unabhängig von ihren Inhalten ihre Symmetrie und Ästhetik bewahren. Dafür gibt es verschiedenste Herangehensweisen. Die wahrscheinlich einfachste ist mit CSS text-overflow und line-clamp.

Beitrag zu Ende lesen

Schriftgrößen im WordPress Block Editor (Gutenberg) anpassen oder deaktivieren

Für Textabschnitte stellt der Block Editor von WordPress die Möglichkeit zur Verfügung, die Schriftgröße zu verändern. Die auswählbaren Optionen lassen sich beliebig anpassen. Von Haus aus bietet WordPress fünf festgelegte Schriftgrößen an, sowie die Möglichkeit einen individuellen Wert anzugeben. Für den Fall, dass ihr das zur Verfügung stehende Werkzeug für euer Theme anpassen möchtet, zeigen wir euch, wie ihr Optionen deaktivieren oder eine Auswahl mit eigenen Größen registrieren könnt.

Beitrag zu Ende lesen

CSS aspect-ratio – das Seitenverhältnis von HTML-Elementen steuern

Web-Layouts und einzelne Komponenten ändern ihre Abmessungen i.d.R. unabhängig in Breite und Höhe. Sie skalieren – bis auf wenige Ausnahmen wie die HTML <img>- oder <video>-Elemente – nicht proportional. Das Beibehalten oder das Verändern des Seitenverhältnisses ist allerdings häufig ein Schlüsselfaktor, wenn es um Layout-Entscheidungen im responsive Design geht. Ein festes Seitenverhältnis ist mittels CSS derzeit nur mit einem Trick möglich. Das ändert sich bald mit der nativen CSS-Eigenschaft aspect-ratio.

Beitrag zu Ende lesen