kulturbanause Blog

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

Layout


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

Flexbox – Responsive Layouts ohne Media Queries

Innerhalb von Flexbox kann mit den Eigenschaften flex-grow, -shrink & -basis festgelegt werden, ob Elemente größer werden dürfen, ob sie kleiner werden dürfen und welche Ausgangsgröße zugrunde liegt. Mit Flexbox lassen sich somit responsive Layouts herstellen, die keine Media Queries benötigen. Das wiederum gilt aktuell in einigen Anwendungsfällen als »Best Practise«, da in sich abgeschlossene Komponenten entwickelt werden können, die nicht auf die Größe des Viewports sondern auf den verfügbaren Platz im Elternelement reagieren.

Beitrag zu Ende lesen

CSS display: contents;

Als Frontend-Designer steht man ab und zu vor dem Problem, dass die semantisch beste HTML-Struktur mit CSS nicht in die gewünschte Form gebracht werden kann. Oft werden daher Abstriche im HTML-Markup in Kauf genommen. Dieser Fall tritt auch dann ein, wenn Layout-Techniken wie Flexbox oder Grid genutzt werden. Mit dem CSS-Befehl display: contents; gehören solche Schwierigkeiten der Vergangenheit an.

Beitrag zu Ende lesen

Container Queries & Element Queries im Responsive Web Design

Eine der drei Grundvoraussetzungen, die Ethan Marcotte 2010 in seinem legendären Artikel »Responsive Webdesign« als Grundlage für selbiges aufgeführt hat, sind die Media Queries. Mit Media Queries kann man das Layout einer Website anhand von Geräteeigenschaften verändern. Beispielsweise, wenn der Viewport eine bestimmte Größe über- oder unterschreitet. Seit 2010 ist einige Zeit vergangen und es hat sich in der Praxis herausgestellt, dass für die Veränderung des Layouts die Viewportgröße nicht immer der ideale Ausgangspunkt ist. Häufig wäre es besser, wenn ein Element immer dann verändert werden könnte, wenn der Raum für dieses spezielle Element einen bestimmten Punkt über- oder unterschreitet. Genau das sollen sog. Element Queries bzw. Container Queries erledigen. Und noch vieles mehr.

Beitrag zu Ende lesen

Responsive Sticky Footer

Wenn der Inhalt einer Website kürzer ist als der Viewport hoch ist, kommt es häufig zu der Fehldarstellung. Es entsteht ein Freiraum unter der Fußzeile, da diese sich an der Länge des Inhalts orientiert. Mit Hilfe eines sog. »Sticky Footers« wird die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positioniert. In diesem Beitrag zeigen wir verschieden Lösungen.

Beitrag zu Ende lesen

CSS Shapes – Textumfluss, Konturenführung und individuelle Formen für Websites

Normalerweise erzeugen alle HTML-Elemente auf einer Website eine rechteckige Box. Das geschieht auch, wenn sie nicht rechteckig aussehen, da sie beispielsweise mit der CSS-Eigenschaft border-radius optisch so verändert wurden, dass sie abgerundet wirken. Texte und andere Elemente richten sich nun immer an den rechteckigen Boxen aus, was optisch unschöne Ergebnisse erzeugen kann. Mit den sog. »CSS Shapes« ist es möglich, nicht rechteckige Formen zu erzeugen und beispielsweise Texte exakt um ein Element herumfließen zu lassen. Vergleichbar mit der Konturenführung aus InDesign. Somit sind sehr interessante und magazinähnliche Layouts möglich.

Beitrag zu Ende lesen