kulturbanause Blog

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

UX/UI Design


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

Bilder im Responsive Design – Tipps für Seitenverhältnisse & Motive in flexiblen Layouts

Fotos, Illustrationen und Grafiken sind viel genutzte Gestaltungselemente im Web Design. Beim Einsatz von Bildformaten und Motiven sollte allerdings einiges beachtet werden, damit die Website später gut umsetzbar ist und redaktionell komfortabel gepflegt werden kann. Wir zeigen, was ihr bei Bildern im Web Design hinsichtlich Bildausschnitt, Skalierung und Seitenverhältnis beachten solltet.

Beitrag zu Ende lesen

Bilder für Websites exportieren – Dateiformat, Optimierung, Farbraum

Bilder für eine Website müssen im richtigen Dateiformat gespeichert und möglichst gut optimiert werden. Ist das nicht der Fall, wird die Website zu »schwer« und lädt länger. Eine langsame Ladezeit wiederum wird von Suchmaschinen schlechter bewertet. Auch die User Experience wird beeinträchtigt.

Es gibt zahlreiche Grafik-Dateiformate die im Web eingesetzt werden können. Alle haben ihre Vor- und Nachteile. Für das beste Ergebnis sollte das passende Dateiformat gewählt und das Bild korrekt exportiert werden. Wir geben einen Überblick was beachtet werden muss.

Beitrag zu Ende lesen