Web Design News & Link-Tipps – Nr. 12
Von kulturbanause Team Erneut haben wir uns zu interessanten Nachrichten und Neuigkeiten aus unserer Branche ausgetauscht. Die Themen kamen in der folgenden Reihenfolge zur Sprache, nur die Tool-Sammlung haben wir am Schluss gebündelt.
WordPress 6.1 und 6.1.1 veröffentlicht
»Misha« kam am 01.11.2022 heraus und brachte neben verschiedenen Anpassungen und Neuigkeiten das neue Theme »Twenty Twenty-Three« mit. Am 15.11. erschien das Wartungs-Release 6.1.1 mit weiteren ergänzenden Features, die es nicht in 6.1 geschafft hatten, wie bspw. Starter-Vorlagen für jeden Inhaltstyp.
YouTube-Einbindung lädt Google Fonts nach
Trotz durchgeführter Qualitätskontrolle waren wir in einem Projekt von einer Abmahnung wegen nicht datenschutzgerechter Einbindung von Google Fonts betroffen. Eine spätere Einbindung von YouTube-Videos oder Plugins durch den Kunden kann dazu führen. Deshalb raten wir auch nach Projektschluss zur Nutzung der Check-Tools wie bspw. von sicher3.de, CCM19 oder eRecht24.
Design-Tools schränken uns ein
Vasilis van Gemert beteiligt sich an der bekannten Diskussion, dass visuelle Design-Tools uns in den kreativen Möglichkeiten einschränken, die mit Code(Kenntnissen) umsetzbar sind.
Ein zugänglicher, benutzerdefinierter Tooltip
Auf web.dev gibt Adam Argyle einen grundlegenden Überblick über die Erstellung eines inklusiven Tooltip-Elements, einschließlich Video und Demos.
Noch ein neues Navigationskonzept für Gutenberg-Editor
Das Gutenberg-Interface ist noch immer weit entfernt von einer intuitiven Nutzung. Deshalb gibt es nun einen weiteren Vorschlag, der mehr die Anmutung eines Design-Tools anstrebt. Wir würden uns einen klaren Fahrplan wünschen und nicht verschiedene Konzepte parallel.
Web-Inhalte beeinflussen den Energieverbrauch
Der Safari Web Inspector kann die CPU-Belastung und damit den Energieverbrauch beim Laden von Websites darstellen. Auch wenn der Beitrag Lösungen aufzeigt, kann er nicht ändern, dass die meiste Energie nicht durch menschliche Nutzer, sondern durch Bots verbraucht wird.
Reine CSS-Toggles
Noch sind sie nur nach Einschalten des experimentellen Features mit Chrome Canary 108+ nachvollziehbar, aber die Einkehr in den Mainstream sollte nur eine Frage der Zeit sein.
LCH ist der beste Farbraum
Farbverläufe und -übergänge können im gängigen Farbraum HSL oft nur eingeschränkt abgebildet werden. Dieser sehr informative Artikel zeigt anschaulich die Überlegenheit von LCH.
Best Practices für Gutenberg
Die bekannte WordPress-Agentur 10up hat ihre bislang interne, sehr umfangreiche Sammlung zum Gutenberg-Editor mit Referenz, Trainingsinhalten und Ratgeber veröffentlicht.
Bediensymbole falsch genutzt
Anhand eines Webseitenbeispiels untersucht xwolf den typischen und zu wenig hinterfragten Einsatz von allseits bekannten Bediensymbolen wie Lupe, Rollstuhl oder Flagge.
Twitter-Account gesperrt, Inhalte weg
Der Twitter-Account von Manuel Matuzovic wurde ohne Begründung gesperrt und blieb es trotz großen Einsatzes für ihn. Über die Inhalte jahrelanger, sehr aktiver Nutzung kann er nicht mehr verfügen. Die Schlussfolgerung ist aktueller denn je: eigene Inhalte auf einer eigenen Plattform veröffentlichen.
Designübergabe mit Kommentaren zur Barrierefreiheit verbessern
Basierend auf einem Vortrag zeigt Anna E. Cook, wie Designer-Teams die Übergabe von Layouts zur Umsetzung unter Gesichtspunkten der Barrierefreiheit verbessern können.
Animierte CSS-Grid Layouts
In den neuesten Desktop-Browsern können nun animierte CSS-Grid-Layouts angezeigt werden.
Warum alles immer gleicher aussieht
Ryan Duffy stellt treffend dar, wie der Zwang von globalisierten Märkten für eine immer mehr um sich greifende Gleichmacherei sorgt, die paradoxerweise vom Bestreben ausgeht, erfolgreiches »Branding« zu betreiben. Was daraus wird, ist sehr nett mit dem Kunstwort »Blanding« beschrieben.
Bessere Text-Links für Screenreader
Anhand von vier Möglichkeiten der Textlink-Auszeichnung zeigt der Artikel »Text Links: Best Practices for Screen Readers«, wie vier Screen Reader diese annoncieren.
Utopia-Plugins für Figma
Auf die Initiative »Utopia« mit den Generatoren zum Erzeugen von fluiden, skalierbaren CSS-Angaben für Schriftgrößen und Abstandswerte hatten wir bereits hingewiesen. Von der Fokussierung auf die Entwicklerseite folgt der nächste Schritt hin zur Designerwelt mit dem Bereitstellen von Plugins für das Tool »Figma«.
Google crawlt JavaScript 9mal langsamer als HTML
Mit einem Experiment zeigt Ziemek Bućko, dass Google beim Crawlen von JS-generierten Inhalten sehr viel länger als bei HTML-Content benötigt. Ein weiterer Grund, auf serverseitiges Rendering zu setzen.
Tools, Tools, Tools
- animatedbackgrounds.me ist eine CodePen-Sammlung animierter Hintergründe, die mit Canvas, CSS und JS umgesetzt sind.
- Auf Whirl gibt es eine wachsende Github-Sammlung von CSS-Ladeanimationen.
- Iconer ist eine Sammlung von verschiedenen Iconsets mit Customizing Options und Download-Möglichkeit in verschiedenen Formaten.
- Free Frontend versammelt 98 CSS Hover-Effekte auf einer Seite.
- Charts.css ist ein CSS-Framework zum Visualisieren von Daten mit Diagrammen.
- Photopea ist eine Online-Bildbearbeitung für u. a. diverse Adobe-Formate, praktisch für unterwegs und Situationen ohne das entsprechende Tool, die Ergebnisse lassen sich abspeichern.
An diesem Punkt seid ihr vielleicht schon etwas im Feierabend-Modus. Unterstützung findet ihr in openverse, der neuen Medienbibliothek von WordPress, indem ihr euch bspw. ein Bier aufmachen lasst.
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.