Web Design News & Link-Tipps – Nr. 1
Von kulturbanause Team Im November 2021 haben wir als Team zusammengesessen und uns über Neuigkeiten oder zumindest neu entdeckte Informationen der Branche ausgetauscht. Die wichtigsten Infos archivieren wir in diesem Beitrag. Die Reihenfolge entspricht unserem Meeting.
Visual Studio Code als Browser-Tool
Der Texteditor von Microsoft ist nun komplett im Browser nutzbar. Moderne Browser ermöglichen (mit Erlaubnis) den Zugriff auf das lokale Dateisystem. Dadurch eröffnen sich interessante Wege, ohne installiertes Programm zu arbeiten.
Der WordPress Block-Editor »Gutenberg« erzeugt bald automatisch Anker für Überschriften
Diese neue Funktion fügt Überschriften eine individuelle ID hinzu, so dass Sprungmarken gesetzt werden können. Auch die Voraussetzung für ein automatisiert generiertes Inhaltsverzeichnis ist damit gegeben. Meldung bei Twitter
Online-Tool für thematische Platzhalter-Bilder
Mit dem Tool »lorem.space« kann man thematische Platzhalter-Bilder nach Kategorien wie Filmen,Computer-Spielen, Büchern, Mode oder Schuhen zufallsgeneriert in eine Webseite ausgeben.
Adobe XD unterstützt Videos und Lottie-Animationen
Adobe XD ermöglicht ab Version 45 die Integration von Animationen im Lottie-Format und Videos. Visuelle Prototypen können so realistischer und bewegter gestaltet werden. Lottie-Animationen werden mit Hilfe des Bodymovin-Plugins für After Effects erzeugt und liegen im JSON-Format vor. Sie können sehr einfach in Websites integriert werden. Auf der Website lottiefiles.com – für die es ein offizielles XD-Plugin gibt – stehen fertige Animationen zum Download.
Illustrator und Photoshop bald in der Cloud
Die Adobe-Programme Illustrator und Photoshop sollen bald auch in der Cloud nutzbar sein. Derzeit noch in der Beta-Phase soll dadurch die Zusammenarbeit in Teams verbessert werden. Damit setzt sich der Trend fort, die (bisherige) Arbeit mit Desktop-Programmen mit teils exklusiven Features in die Cloud zu verlagern.
CSS Overview Panel in den Chrome-Devtools
In den Chrome-Devtools ist nun ein weiteres Werkzeug vorhanden, das CSS Overview Panel. Dieses stellt eine übersichtliche Zusammenfassung der CSS-Nutzung bereit. Die Aufstellung beinhaltet bspw. Angaben zur Anzahl von Regeln und Selektoren in unterschiedlichen Segmenten, zu Farben inklusive Check auf AA-& AAA-Kontraste, Typografie und nicht genutzten Deklarationen.
Hintergrund aus Fotos entfernen
Mit dem Online-Tool »remove.bg« kann man aus Fotografien recht einfach den Hintergrund entfernen, bzw. das Hauptmotiv freistellen. Für die Nutzung der API ist eine Registrierung notwendig.
Pattern-Sammlungen für Layout und Core Web Vitals
Auf »web.dev«, der von Google betriebenen Plattform für Webentwicklung, stehen nun Sammlungen von »Patterns« zur Verfügung. Für das Umsetzen von gebräuchlichen Layout-Mustern wie etwa Cards, Grids oder »Holy grail« und die Optimierung der Core Web Vitals stehen aktuelle Lösungen bereit.
Wo wird geklickt?
Mit »Mouseflow« kann man die Usability von Webseiten überprüfen. Das Tool zeichnet Mausbewegungen und -klicks von Benutzenden auf und stellt die Ergebnisse bspw. mit Heatmaps dar. Auch die sogenannte »Customer-Journey« kann erfasst und das Feedback der Testenden eingeholt werden. In einer eingeschränkten Version ist das Tool kostenlos nutzbar.
WordPress-Plugin ACF 5.11 Release mit neuen Funktionen
Das Reset von Elad Shechter nutzt CSS-Features, die in den letzten Jahren hinzugekommen sind. Auf CSS-Tricks dazu die Vorstellung und ein Interview mit ihm.
WooCommerce: Visual Hook Guides
Bei Business Bloomer gibt es eine Liste von aufbereiteten Darstellungen, an welcher Stelle die zahlreichen WooCommerce-Hooks greifen. Anpassungen an beispielsweise der Produkt-Detailansicht oder am Warenkorb sind so wahrscheinlich schneller umgesetzt.
WooCommerce: Alle Bestellungen löschen
Während der Entwicklung wird ein WooCommerce-Shop i.d.R. intensiv getestet und zahlreiche Testbestellungen durchgeführt. Später möchte man diese Testbestellungen normalerweise löschen. Ein kleines SQL-Snippet genügt, um alle Bestellungen zu entfernen. Mächtig, also auf eigenes Risiko!
Neuer Online-Kurs für responsives Design
Der Kurs »Learn Responsive Design« auf der Plattform web.dev richtet sich in erster Linie an Einsteiger*innen, hält aber auch für CSS-Veteranen aktuelle Hinweise zur Umsetzung mit bspw. Flexbox oder Grid bereit.
Lazy Load im Bezug auf die Website-Performance
In der aktuellen Version zeigt Lighthouse einen Fehler an, wenn beispielsweise das Bild im LCP mit Lazy Loading ausgestattet ist. Der Artikel »The performance effects of too much lazy-loading« geht auf Lazy-loading in Hinsicht auf die Core Web Vitals ein und gibt Ratschläge für andere Lösungen.
Advanced Data Protection Control (ADPC)
Einstellungen im Browser statt auf jeder Site – eine neue Spezifikation schlägt eine nutzerfreundliche Lösung für Datenschutzeinstellungen im Browser vor.
DMARC Record für Mail-Adresse – »Security Header für E-Mails«
Diese Spezifikation zur Authentifizierung von E-Mails kann das Versenden von Spam und anderen schädlichen Mails verhindern.
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.