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.
Gewinkelte Verläufe gehören in vielen Grafik- und Bildbearbeitungsprogrammen zur Standard-Ausstattung. Sie ermöglichen zahlreiche grafisch ansprechende Effekte, die mit linearen oder radialen Verläufen nicht möglich sind. In CSS könnt ihr gewinkelte Verläufe mit der conic-gradient()-Funktion erzeugen.
Mit Hilfe der Scroll Snap-Technik von CSS könnt ihr steuern, dass der Browser an bestimmten Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrolled werden soll. CSS Scroll Snap kann somit die Usability und die User Experience erheblich verbessern – z. B. beim Gestalten von Bildergalerien oder OnePagern mit verschiedenen Sektionen. Viele Scrolling-Effekte, für die früher JavaScript eingesetzt wurde, können dank Scroll Snap heute mit CSS gelöst werden.
In WordPress ist es mit Hilfe der wp_localize_script-Funktion möglich, PHP-Variablen an JavaScript zu übergeben. Diese Funktion ist besonders hilfreich, wenn man in einer mehrsprachige Website mit Übersetzungs-Strings arbeitet oder wenn Inhalte über AJAX nachgeladen werden sollen. In diesem Beitrag zeigen wir euch, wie ihr PHP-Variablen in WordPress richtig an JavaScript übergebt. Beitrag zu Ende lesen
Die verschiedenen Darstellungsformen responsiver Website-Layouts werden üblicherweise mit Media Queries realisiert. Mit CSS Grid kann dank der minmax()-Funktion und dem Schlüsselwort auto-fit allerdings auf Media Queries verzichtet werden. Das ist sehr komfortabel für Entwickler und führt zu stufenlos flexiblen Ansichten.
Mit dem <dialog>-Element von HTML steht eine native Methode zur Verfügung um ein Dialogfenster bzw. einen Modal Screen zu erzeugen. Im Gegensatz zu selbstgebauten Lösungen wie einer Lightbox, ist die semantische Qualität der von <dialog> deutlich besser. In Kombination mit JavaScript kann das Fenster geöffnet oder geschlossen werden. In diesem Beitrag geben wir euch eine kurze Übersicht über die Eigenschaften des Elements.
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.
Scrolling zählt zu den elementaren Bedienkonzepten im Web. Dennoch gibt es viele Probleme bei der Implementierung der gewünschten Scrolling-Funktion sowie beim …
Die Front-End Tooling Umfrage hat ein ziemlich geradliniges Ziel – herauszufinden welche Werkzeuge von Frontend-Entwickler derzeit in unserer Branche eingesetzt werden. …
Im responsive Webdesign werden Bilder gegebenenfalls automatisch verkleinert. Leider rendert Google’s Browser Chrome Bilder beim Verkleinern nicht so, wie es …
Laut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the …
