kulturbanause Blog

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

Responsive Webdesign


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 Multi Columns – Responsive Layouts ohne Media Queries

Mit dem »Multi Column Layout« von CSS lassen sich Inhalte in mehreren Spalten anzeigen. Das CSS-Feature bietet sich besonders gut für Fließtexte an, kann aber auch für andere Darstellungen sinnvoll eingesetzt werden. Besonders interessant ist, dass mit Multi Columns responsive Layouts ohne Media Queries möglich sind. Die Gestaltung von in sich abgeschlossenen Komponenten wird somit möglicherweise einfacher.

Beitrag zu Ende lesen

Sketch – Resizing & Responsive Design (Video-Tutorial)

In Sketch können Objektgruppen so konfiguriert werden, dass sich alle enthaltenen Elemente, Texte und Bilder flexibel ausrichten, wenn die Gruppe in der Höhe oder in der Breite angepasst wird. Die Funktion namens »Resizing Constraints« wird auch oft im Zusammenhang mit Responsive Design in Sketch beschrieben – auch wenn es sich eigtl. nur um fluide Elemente handelt. Mit ein wenig Übung können sehr einfach flexible Komponenten und Layouts gestaltet werden.

Beitrag zu Ende lesen

Websites für das iPhone X optimieren: weiße Balken entfernen, Viewport anpassen, Safe Area festlegen

Das iPhone X verwendet ein nahezu randloses Display, dass sich über die gesamte Vorderfläche des Geräts erstreckt. Da das iPhone insgesamt abgerundet ist, sind auch die Ecken des Displays abgerundet. Daher müssen Designer für das iPhone X einige Besonderheiten berücksichtigen um im Safari für iOS auch wirklich das gesamte Display für die Website zu verwenden. In diesem Beitrag beschreiben wir, wie ihr mit geringem Aufwand Websites für das iPhone X optimieren könnt.

Beitrag zu Ende lesen