kulturbanause Blog

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

#css

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

#wordpress

Eigene Formatvorlagen für den WordPress-Editor (TinyMCE) erstellen

WordPress verwendet als Eingabemaske zum Bearbeiten von Beiträgen und Seiten den sog. TinyMCE-Editor. TinyMCE bietet bereits in der Standardausführung viele nützliche Textauszeichnungen für die redaktionelle Arbeit. Möchte man den Umfang an verfügbaren Formatierungen um eigene Auszeichnungen ergänzen, bieten WordPress und TinyMCE die Möglichkeit zusätzliche Formatvorlagen zu erstellen und diese in den Editor zu integrieren. Wir zeigen euch in diesem Artikel anhand eines anschaulichen Beispiels, wie ihr den WordPress-Editor um zusätzliche Formatvorlagen erweitert.

Beitrag zu Ende lesen

#svg

SVG Browser-Support für Animationen und Interaktionen

SVG

Mit Hilfe der SVG-Technologie können interessante Interaktionen und Animationen auf einer Website realisiert werden. Leider ist der Browser-Support höchst unübersichtlich, denn ob etwas funktioniert oder nicht ist davon abhängig wie die SVG eingebunden wurde und welche Sprache (JavaScript, SMIL, CSS) zur Erzeugung der Animation verwendet wurde. Wir haben daher für die interne Nutzung eine Übersicht erstellt, die wir euch natürlich nicht vorenthalten wollen.

Beitrag zu Ende lesen

#animationen

Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen

Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.

Beitrag zu Ende lesen

#html

SVG-Grafiken in Websites/HTML-Seiten einbinden

Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.

Beitrag zu Ende lesen