Web Design News & Link-Tipps – Nr. 7
Von kulturbanause Team Wir sind wieder auf einige interessante Informationen unserer Branche gestoßen, die wir bei unserem regelmäßigen Wissensaustausch besprochen haben und an euch weitergeben möchten. Die Reihenfolge unterliegt keiner inhaltlichen Ordnung, nur die »Tooltips« sind gesammelt am Schluss.
Geschmeidige(re) Typo
Die bekannte Schrift »Roboto« bekommt von Google eine Erweiterung und ist nun als variabler Font verfügbar.
Im Rahmen der Möglichkeiten
Die neu vorgeschlagene CSS-Eigenschaft »object-view-box« kann mit Chrome 104 erstmals getestet werden. Sie soll die Möglichkeiten des Zuschnitts und der Positionierung von Bildern deutlich verbessern.
Behave like an app
Die neue Transitions API ermöglicht für Webseiten Page Transitions, wie sie ohne erheblichen Aufwand oder JS-Framework bisher nur mit nativen Apps möglich sind.
Etwas schönere Zukunft
Microsoft stellt die grünen Designprinzipien vor, mit deren Umsetzung Designer*innen dazu beitragen können, »den Klimawandel zu bekämpfen«.
Nicht immer die reine Lehre
Der Artikel »Mobile-First CSS: Is It Time for a Rethink?« veranschaulicht, warum eine uneingeschränkte Übernahme der Methodologie in der Frontend-Umsetzung nicht sinnvoll ist.
Jazz mit »Arturo«
Die so benannte Version 6 von WordPress ist im Mai veröffentlicht worden. Der Artikel bei Online-Veteran Dr. Web führt durch die wichtigsten Neuerungen. In diesem Twitter-Thread gibt es weitere Informationen zu den »new & shiny bits«
Wer was kann
Diese Websites informieren über die unterschiedlichen Browser-Eigenschaften, was die Unterstützung von assistiven Technologien und die Fähigkeiten der Entwickler-Tools betrifft.
Hergezeigt
Eine nette, wenn nicht gar sehr nette Inspiration für Komponenten-basiertes Design gibt es bei niceverynice.com, eine weitere ist der Showcase von Storybook, der direkten Zugriff auf die Design-Systeme populärer Marken und Dienste ermöglicht.
Mehr Wettbewerb
Noch dürfen auf iOS-Geräten ausschließlich Safari-basierte Browser laufen, auch wenn sie sich »Firefox«, »Chrome« usw. nennen. Mit dem Inkrafttreten des »Digital Markets Act« soll sich das spätestens 2024 ändern.
Absender bekannt
WordPress versendet aus unterschiedlichen Gründen E-Mails. Auf dieser GitHub-Seite von John Blackbourn Seite gibt umfangreich und übersichtlich Auskunft über die entsprechenden Situationen, warum und wann sie auftreten und wie man sie beeinflussen kann.
Neue Heimat
Bei der Erstellung von WordPress-Websites sind »Advanced Custom Fields« (ACF) für viele eine Alternative zum Block-Editor. Das Plugin wechselt nun den Besitzer zum zweiten Mal innerhalb eines Jahres. Wir hoffen, dass die Qualität weiter aufrechterhalten wird.
Sprachkenntnisse ermöglicht
javascript.info ist ein umfassendes und zeitgemäßes Tutorial zum Erlernen und Nutzen von JavaScript. Es beginnt mit den Grundlagen, beinhaltet aber auch fortgeschrittene Konzepte.
Auf dem Weg zum Standard
Die Entwicklung von Websites ist in den letzten Jahren immer modularer und systematischer, aber auch einheitlicher geworden. Das W3C trägt dem Rechnung und hat über die »Design Tokens Community Group« den zweiten Entwurf für die Standardisierung von Design Token veröffentlicht.
Für alle
Viele investieren Zeit und Geld in Device- und Browser-Testing, damit für die Nutzenden das Ergebnis gleich aussieht. Damit auch diejenigen, die nicht oder eingeschränkt sehen, eine Website nutzen können, müssen wir assistive Technologien ebenfalls testen. Assistiv Labs ist dafür eine Plattform auf Abo-Basis.
Wenn Zahlen Nummern sind
Für das Programmieren einer barrierefreien Eingabe von Zahlen wird allgemein das Nutzen von type="number" verwendet. Wenn diese jedoch keine Beträge, sondern Nummern darstellen, empfiehlt »gov.uk« eine andere Umsetzung.
Erschwerte Verfolgung
Firefox spielt »Total Cookie Protection« nun schon als Voreinstellung im Standard-Modus aus. Damit wird der Datenschutz weiter gestärkt, Cross-Site-Tracking weiter erschwert.
Kern und Oberfläche
Der Browser »Chrome« hat hohe Marktanteile, die Browser-Engine »Chromium« beherrscht den Markt noch umfassender, denn auch andere Browser wie »Microsoft Edge« oder »Opera« nutzen sie. Dieser Beitrag bei LambdaTest zeigt die Unterschiede.
Tool, Tools, Tools
- Das Online-Tool »keycode« dient gewissermaßen als Cheatsheet, um die JavaScript-Informationen für jeden Keycode abzufragen.
- Ein weiterer Min-Max-Kalkulator im Gefolge von Utopia kalkuliert die clamp-Angaben für flexible Min-Max-Werte.
- Der Vektor-Wandler »morflax shift« wandelt hochgeladene SVG-Dateien in 3D um, ganz »nice«, solange Claymorphism noch angesagt ist.
- Im SVG Repo gibt es kostenfrei über 300.000 Vektoren und Icons.
- Josh Comeau stellt einen Gradient-Generator bereit, der Fehldarstellungen ausgleicht, wie sie in »Web color is still broken« beschrieben sind.
- Mit CodeSandbox erstellt man, na ja, Sandboxes für schnelle, kollaborative Web-Entwicklung in einem recht schicken UI.
- Das WordPress-Plugin »Clean Image Filenames« wandelt Sonderzeichen so um, dass Server und Browser damit keine Probleme (mehr) haben.
Wer immer noch nicht genug von unseren Link-Tipps hat, kann seine Prokrastination mit dem AI-Modell »Craiyon« weiter ausleben, das aus Texteingaben Bilder erzeugen lassen. Viel Spaß!
Geschrieben von kulturbanause Team
Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.