Außerdem: UserTiming-Daten komprimieren

Fast Forward: Responsive Grids mit sGrid, Lazy Loading & kreative User Interfaces
Kommentare

Heute geht es im Fast Forward Tutorial-lastig zu. So gibt es zum Beispiel Tipps zum nutzerfreundlichen Laden von Bildern, dem Erstellen von Responsive Grids mit sGrid oder dem Komprimieren von UserTiming-Daten. Außerdem stellen wir drei Wege zur WordPress-Mobile-App vor, blicken auf den Vorteil von Modulen in Open-Source-Projekten und suchen Inspiration beim Erstellen von User Interfaces bei CollectUI.

Faule Websites: Bilder nutzerfreundlich laden

Lazy Loading ist eine Technik, mit der Bilder auf Websites erst geladen werden, wenn der Nutzer tatsächlich bis zu ihnen herunterscrollt. Das kann durchaus sinnvoll sein, um unnötigen Datenverkehr zu vermindern. Betrachtet der Nutzer nämlich nur die obersten drei Bilder, muss er wirklich nicht die zehn darauffolgenden herunterladen. Andererseits kann es aber auch echt anstrengend sein, immer wieder auf das Laden von Bildern warten zu müssen. Wie dieser Interessenskonflikt aufgelöst werden kann, erklärt Monty Shokeen.

Drei Wege zur WordPress-Mobile-App

WordPress ist nicht nur eins der beliebtesten Content-Management-Systeme, sondern auch einer der weltweit am häufigsten genutzten Services überhaupt. Leider funktionierte die Übertragung von WordPress-Angeboten auf mobile Plattformen lange nicht besonders flüssig – besonders, da die vielen Möglichkeiten, WordPress mithilfe von Plugins und Themes zu individualisieren, die Integration erschweren. Drei Varianten, um WordPress in eine Mobile-App zu überführen, stellt Scott Bolinger vor und trägt die jeweiligen Pros und Cons zusammen: Man kann eher lowkey gehaltene App-Builder einsetzen, eine eigene Hybrid-App entwickeln oder das kostenlose Plugin AppPresser benutzen. Wer die Wahl hat, hat dementsprechend die Qual.

sGrid: Responsive Grids ganz leicht erstellen

sGrid ist ein Flexbox-Grid, das auf dem Stylus CSS Processor basiert. Im Vergleich zu anderen Flexbox Grids besticht es durch seine Einfachheit: Ein semantischer Ansatz, keine Dependencies, ein einfaches npm-Package. Dadurch ist es mit vielen JavaScript-Tools kompatibel. Wer damit arbeiten möchte, sollte sich die Anleitung von Julian Ćwirko ansehen. Für Meteor, React und Grund stehen außerdem Implementierungen zur Verfügung.

UserTiming-Daten komprimieren – so geht´s!

Mit UserTiming lassen sich Performance-Werte von Web-Apps messen. Das API arbeitet mit sogenannten Marks, die die Messzeiträume abstecken. Das Problem ist, dass die so generierten Messdaten selbst ein großes Datenvolumen aufbauen, sprich: die Performance runterziehen. Dem kann man entgegenwirken, indem man, wie Nic Jansma in seinem Tutorial erläutert, zuerst die einzelnen Daten durch Neustrukturierung der in ihnen enthaltenen Informationen komprimiert. Danach werden mehrere Wege aufgezeigt, eine Liste von Messdaten zu komprimieren.

Open Source: Der Vorteil von Modulen

Das Prinzip Open Source hat sich in der Praxis als äußerst produktive Methode zur Erstellung von Code erwiesen. Gegenüber der proprietären Softwareentwicklung besitzt die Open-Source-Strategie einige handfeste Vorteile für Programmierer. Um in ihren Genuss zu kommen, muss auch nicht erst der ganz große Wurf gelandet werden. Welche Vorteile es für Coder besitzt, sich auf die Entwicklung von Modulen zu konzentrieren, erklärt Christopher Pott in seinem Blogeintrag.

Kreative User Interfaces dank #dailyui

Die heutige Neu- oder Umstrukturierung eines Webseiten-User-Interfaces ist nicht einfach. Dutzende bzw. Abermillionen Möglichkeiten stehen zur Verfügung und sich durch jede einzelne durch zu klicken ist mühsam. CollectUI macht das ganze etwas einfacher, indem die siegreichen Interfaces der #dailyui-Challenge übersichtlich und stets aktualisiert präsentiert werden. Egal, ob es um Layouts, Farbauswahl oder Interface-Elemente geht – die Inspiration profitiert sicherlich davon.

Aufmacherbild: Linking entities. Network, networking, social media, internet communication abstract. Web of gold wires on rustic wood. (modifiziert) von Shutterstock / Urheberrecht: optimarc

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -