kulturbanause Blog

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

#wordpress

WordPress-Standard-Loop um Custom Post Types erweitern

Um in WordPress »Custom Post Types« auf der Website anzuzeigen verwendet man meistens den sog. »WP Query«, da hier mit geringem Aufwand festgelegt werden kann, welche »Post Types« ausgegeben werden sollen. Für den Fall, dass ihr nicht »WP Query« nutzen möchtet oder könnt, zeigen wir euch in diesem Beitrag wie ihr den WordPress-Standard-Loop um Custom Post Types erweitern könnt.

Beitrag zu Ende lesen

#responsive-webdesign

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

#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

#javascript

Title-Tag des inaktiven Browser-Tabs animieren

Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.

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