Mit ergo4All soll eine digitale Lösung entwickelt werden, die ergonomisches Wissen und konkrete Anpassungsvorschläge allen Menschen zugänglich macht – unabhängig von Alter, körperlichen Voraussetzungen oder digitaler Kompetenz. Innerhalb der App steht dabei das Ziel im Vordergrund, individuelle Empfehlungen für gesundes Arbeiten und Alltagsbewegungen leicht verständlich und barrierearm bereitzustellen.
Je nach, welches Szenario (Heben/Tragen, etc.) man in der App wählt, bewertet die KI (gestützt auf maschinelles Sehen und den anerkannten RULA‑Score) Körperhaltungen aus einem kurzen in Echtzeit dokumentierten Video. Anschließend liefert sie dem/der NutzerIn leicht verständliche Hinweise zur Verbesserung der Haltung. Alle Daten werden lokal auf dem Gerät verarbeitet, daher findet keine Cloud‑Speicherung oder Tracking statt.

Zielsetzung

Am Anfang meiner Projektmitarbeit umfassten meine Aufgaben das Redesign bestehender App-Screens sowie die Erstellung neuer Screens mit entsprechender Navigation auf Basis des damals erstmalig überabeiteten Figma-Mockups. Dieses ist hier zu sehen:

Zusätzlich war ich beauftragt die Lokalisierung von Texten, Buttons und co. für Deutsch und Englisch über ein eigenes Lokalisierungsfile vorzunehmen. Im weiteren Verlauf wurde ich gebeten, mir auf einem eigenen GIT-Branch anzuschauen, wie die App für IOS gebuildet werden kann, um lauffähig zu sein. Zum Abschluss lag die Verantwortung für den Aufbau des Onboardings gemäß eines vorab abgestimmten Konzepts bei mir.

Durchführung

In ersten Schritten wurde ich von Dipl.-Ing. Ramon Brullo BSc technisch in die App eingeführt. Dabei wurde die klare Code-Struktur der App erklärt. Es handelt sich hierbei um eine Flutter-App, dessen Hauptsprache die Programmiersprache Dart ist

In den ersten Schritten wurde ich von Dipl.-Ing. Ramon Brullo, BSc technisch in die App eingeführt, wobei insbesondere die klare Code-Struktur einer Flutter-App (Programmiersprache Dart) erläutert wurde. Die Lokalisation erfolgt über ein JSON-File, die Codeverwaltung über GIT mit Sub-Branches und einer regelmäßigen Release-Pipeline. Die Commits orientieren sich am Standard der Conventional Commits, die wiederum die Release-Pipeline anstößt.
Ich nahm bei den fast jeden Dienstag stattfindenden Meetings zwischen unserem Projektteam und TU-KollegInnen teil, in denen Status und Fortschritte abgestimmt wurden. Anfangs lag mein Schwerpunkt auf der App-Lokalisation und dem Verständnis des Codes, bevor ich am Frontend größere Änderungen vornahm und regelmäßig Commits einbrachte. Für design-relevante Themen war Vivian Seidl BSc zuständig, mit der ich mich eng abstimmte.

Ein größeres Vor-Ort-Meeting Mitte Juni diente dazu, die Planung bis in den Herbst hinein gemeinsam mit den TU-KollegInnen festzulegen. Zudem habe ich mir in Flutter angeschaut, wie man einen iOS-Build macht und am Onboarding beteiligt. Das Frontend des Onboarding übernahm ich ganz, während Ramon die Backend-Einbindung in den Appflow übernahm.

Ergebnisse

Nachdem das Redesign abgeschlossen und alle fehlenden Screens ergänzt wurden, gliedert sich das App-Layout nun folgendermaßen (der Onboarding-Prozess, welche erst vor kurzem in der Form dazu kam, wird unterhalb erläutert):

Die App startet beim erstmaligen Öffnen mit einem Welcome-Screen samt Sprachwahl, bevor der/die NutzerIn nach einem Onboarding ins Hauptmenü gelangt. Von dort aus lassen sich direkt allgemeine Tipps zur Ergonomie-Themen oder konkrete Szenarien auswählen. Über den Tipps-Selection-Screen geht es in detaillierte Anleitungen zur Körperhaltung. Wählt man ein Szenario, bekommt man eine kurze Szenariobeschreibung und folgt der Aufnahmefunktion, mit der die eigene Haltung erfasst wird. Anschließend werden im Ergebnis-Screen eine Übersicht und Detailbewertungen angezeigt, inklusive spezifischer Analysen einzelner Körperbereiche. Durch das Redesign sind sind alle Texte lokalisiert und das Screen-Layout Großteils einheitlich.

Nachdem der/die UserIn die Sprache vorselektiert hat, startet in der gewählten Sprache beim erstmaligen Betreten in die App ein durchstrukturiertes Onboarding. Zuerst wird auf die Privatsphäre hingewiesen und erklärt was mit den gesammelten App-Daten passiert. vordem die App kurz und prägnant vorgestellt wird.

Nachdem die Sprache ausgewählt wurde, startet beim ersten App-Betreten ein klar strukturierter Onboarding-Prozess in der gewählten Sprache.

1. Privatsphäre – Zunächst wird erklärt, dass die App komplett offline funktioniert, keine Cloud und kein Tracking verwendet und alle Daten lokal am Gerät bleiben.
2. App-Übersicht – Danach folgt eine kurze Einführung, die den Zweck der App verständlich darstellt.
3. AGBs – Anschließend werden die Nutzungsbedingungen präsentiert, mit einem klaren Hinweis darauf, dass die Ergebnisse nur Informationscharakter haben und keine fachliche Beratung ersetzen.
4. Was ist Ergonomie? – Dieser Screen erläutert die Grundidee der Ergonomie und vermittelt, dass nicht das momentane Empfinden, sondern langfristige Gesundheit im Mittelpunkt steht.
5. Dein Nickname – Zum Schluss können NutzerInnen optional einen Spitznamen vergeben, um Ergebnisse leichter wiederzufinden.

Alle Texte der Onboarding-Screens wurden sorgfältig von einem Kollegen der TU Wien entwickelt, um Inhalte sprachlich präzise, leicht verständlich und zugleich den wissenschaftlichen Standard entsprechend.

Fazit und Ausblick

Bezugnehmend auf meine Vorkenntnisse im hybriden App-Development mit Flutter stellte sich dieses Projekt als sehr gewinnbringend für mich dar. Ich konnte mein Flutter-Wissen nicht nur auffrischen, sondern auch um neue technische Aspekte erweitern. Darüber hinaus erhielt ich durch meinen Teamkollegen Dipl.-Ing. Ramon Brullo, BSc wertvolle Einblicke in unterschiedliche App-Testansätze, deren Einsatzwahl und deren konkrete Umsetzung in Flutter.

Besonders hervorzuheben ist, dass mir Ramon auch das Konzept der Conventional Commits zeigte, das für mich völlig neu war. Ich konnte den Ansatz schnell nachvollziehen und habe diesen im Projekt selbstständig angewendet. Dadurch habe ich nicht nur die Struktur meiner Commits verbessert, sondern auch den Mehrwert von standardisierten Commit-Messages für Teamarbeit und Release-Prozesse erkannt. Ebenso waren die regelmäßigen Meetings und die enge Abstimmung im Team ein Mehrwert für mich. Sei es eine persönliche Weiterentwicklung im Hinblick auf Teamarbeit oder Projektorganisation.

Im Großen und Ganzen nehme ich aus dem Projekt 80 lehrreiche Stunden mit, in denen ich mein technisches Know-how im Bereich Flutter-Entwicklung erweitern, meine Arbeitsweise im Team verbessern und wertvolle praktische Erfahrungen in der koordinierten App-Entwicklung sammeln konnte.

Da es sich noch um ein derzeit laufendes Forschungsprojekt handelt, entspricht die aktuelle App-Version noch nicht der geplanten Veröffentlichung. Im Herbst werden noch einige zusätzliche Usability-Testings in Unternehmen durchgeführt, deren Ergebnisse in die finale Weiterentwicklung einfließen. Eine Veröffentlichung der App in die App-Stores ist noch im heurigen Herbst geplant.

Mehr zu dem Forschungsprojekt lesen? – https://research.fhstp.ac.at/projekte/ergo4all-ergonomie-fuer-alle

The post TFG | ergo4All Forschungsprojekt appeared first on Mobile USTP MKL.

Das Hauptziel des Forschungsprojekts besteht darin, mittels einer App klimafreundliches Verhalten zu fördern und passende regionale Aktivitäten (sogenannte Initiativen) zu präsentieren. Die App Erika soll informieren, durch spielerische Elemente motivieren und belohnen. Das Forschungsprojekt erfolgt am Beispiel der Region Waidhofen a/d Ybbs, weshalb auch eine Integration in die vorhandene Waidhofen-App vorgesehen ist.

In der App können Nutzer*innen an Initiativen teilnehmen, Aufgaben erfüllen und Belohnungen erhalten. Zusätzlich können sie Vorschläge für Initiativen machen und die von anderen bewerten.

Zielsetzung

Meine Aufgabe war es, ein funktionsfähiges CMS laut vorhandenem Prototyp umzusetzen. Dazu zählten sowohl die Umsetzung des Frontends als auch Anpassungen und Ergänzungen im bestehenden Backend. Das CMS sollte vor allem diverse Daten von Nutzer*innen, Initiativen etc. anzeigen, ein Login beinhalten und die Möglichkeit bieten, Inhalte für die App erstellen, bearbeiten und löschen zu können. Zudem sollten mit dem CMS PDFs generiert werden können, die für Initiativen und Belohnungen benötigt werden.

Vorgehensweise

Die genauen Funktionen des CMS wurden anfangs definiert und priorisiert, und später leicht angepasst. Zu Priorität 1 zählten vor allem die Authentifizierung, die Anzeige der verschiedenen Daten (Nutzer*innen, Initiativen und Belohnungsmöglichkeiten) und die Generierung von PDFs. Im nächsten Schritt lag der Fokus auf den Vorschlägen für Initiativen, die angezeigt und freigegeben werden können. Zum Schluss wurden die Funktionalitäten ergänzt, Initiativen anlegen, bearbeiten und löschen zu können.

Verwendete Technologien:

• Frontend: Low-Code-Framework Luisa, Vue.js und Axios
• Libraries für die PDF-Generierung (inkl. QR-Code): pdf-lib, qrcode und file-saver
• Prototyp: QuantUX
• Backend: Express Framework, Effect Library und Swagger

Während der Mitarbeit beim Forschungsprojekt teilte ich mir die Zeit selbst ein, machte mit dem Projektleiter Dipl.-Ing. Gernot Rottermanner vor allem separate Meetings aus und nahm vereinzelt am wöchentlichen Jour Fixe teil. Für das Frontend war ich allein zuständig, während ich beim Backend zusammen mit Dipl.-Ing. Ramon Brullo arbeitete, der vor allem die Funktionen für die App selbst und später das Erstellen und Bearbeiten von Initiativen umsetzte. Den Prototypen für das CMS hatte Dipl.-Ing. Gernot Rottermanner bereits entwickelt. Durch die Verwendung des Low-Code-Frameworks Luisa konnte ich das Design sofort übernehmen, mich auf die Funktionalität konzentrieren und musste in QuantUX nur noch an manchen Stellen Anpassungen vornehmen.

Ergebnisse

Hier können alle Initiativen eingesehen, bearbeitet und neue erstellt werden. Für jede Initiative lässt sich ein PDF und ein QR-Code generieren.

Auf dieser Seite kann eine neue Initiative mittels JSON erstellt und die Eingabe formatiert werden. Das Textfeld wird je nachdem, ob eine Initiative erstellt oder bearbeitet wird, mit einer Vorlage oder den richtigen Daten befüllt. Eine bestehende Initiative kann hier ebenso gelöscht werden.

Auf dieser Seite lassen sich alle eingereichten Ideen (Vorschläge für Initiativen) einsehen und freigeben, sowie alle Bewertungen der freigegeben Ideen nachsehen.

Die Benutzer:innen- und Einlösemöglichkeiten-Seite ähneln dem Rest. Auf ersterer werden alle Nutzer*innen inklusive ihrem Erstelldatum, der Anzahl der angemeldeten und teilgenommenen Initiativen und ihrem “Spielstatus” angezeigt. Auf zweiterer werden alle Einlösemöglichkeiten, sprich mögliche Belohnungen, aufgelistet. Für jede lässt sich ebenso ein entsprechender QR-Code und ein PDF generieren.

Retrospektive

Durch meine Mitarbeit bei Erika konnte ich meine Programmier-Kenntnisse erweitern und viele neue Technologien kennenlernen. Sowohl die komplette Backend-Struktur als auch das Low-Code-Framework Luisa waren neu für mich. Anfangs war das durchaus herausfordernd, doch schnell bekam ich einen Überblick und konnte alles wie geplant umsetzen. Die Verwendung von Luisa hat die Entwicklung des Frontends erheblich beschleunigt und es mir erlaubt, mich vor allem auf das Backend zu konzentrieren. Bei einfachen Projekten ist das Low-Code-Framework sehr praktisch, bei höheren Anforderungen wie z.B. responsive Tabellen stößt es jedoch an seine Grenzen. Insgesamt war das Projekt abwechslungsreich und ließ sich gut im Rahmen der vorgegebenen 80 Stunden umsetzen.

Link zum Forschungsprojekt: https://research.fhstp.ac.at/projekte/erika

The post TFG | Erika CMS appeared first on Mobile USTP MKL.

ABSTRACT

The increase in mobile device usage has driven the need for applications that work across various platforms. This paper explores the two primary approaches to mobile app development: native and cross-platform. Existing research shows that native development ensures high performance and user experience but requires more time and resources. In contrast, cross-platform development methods – such as web, hybrid, interpreted, and cross-compiled apps – streamline development through code reuse, though often at the cost of performance and functionality. However, as mobile technologies continue to evolve, research gaps remain, thus emphasising the need for updated studies to reflect the rapid technological advancements in this field.

1 Introduction

Nowadays, mobile phones have become a device that most people use every day, and the various types of smartphones on the market are almost as diverse as the people using them. Thus, developers intending to create an app need to make sure that it can run on different operating systems. By making an app available on as many mobile platforms as possible, the app’s market presence can be increased, which according to Delía et al. (2017) is vital, as the success of an app is tied to its popularity.

However, due to the numerous possibilities regarding programming languages, development tools, time-to-market demands, and more, the choice on how to make the app work on multiple platforms is not always easy (Delía et al., 2017), especially also because of the ever-changing and constantly evolving technologies (Karami et al., 2023).

There are two different approaches to app development, which will both be discussed in this paper: native and cross-platform development. Both of them have their advantages and disadvantages, which all need to be considered when choosing between the available app development frameworks (Karami et al., 2023). The goal of this paper is to examine and compare other researchers’ findings on app development approaches and to identify gaps that need to be addressed through future research.

2 Types of App Development

2.1 Native App Development

When developing mobile applications natively, a development project is created and worked on for each platform, which uses the platform-specific languages (Delía et al., 2017), such as Java or Kotlin for Android and Swift for iOS (Koram & Garg, 2023; Suri et al., 2023). Thus, when wanting to distribute an app to different platforms, the same app has to be developed multiple times (Koram & Garg, 2023). Since a separate app needs to be developed for each platform, the development and maintenance of apps costs more and demands more effort (Delía et al., 2015);  due to little code reuse, it is very expensive and time-consuming (Suri et al., 2023).

However, these extra costs also have their advantages: native app development allows developers to directly access native platform functionalities, such as the camera, GPS, and other sensors (Delía et al., 2017; Ebone et al., 2018; Koram & Garg, 2023). Furthermore, according to Delía et al. (2017), a user does not need to be connected to the internet to be able to run a native application. Additionally, the researchers claim that native apps execute quickly and it is possible for them to run in the background. Generally, Ebone et al. (2018) believe that native apps provide the best performance and user experience on their respective platforms. Patidar and Suman (2021) are of a similar opinion, since they state that native apps tend to allow for high performance and good user experiences. Koram and Garg (2023) also highlight the “significantly better performance” of native apps and their secure and robust user interfaces (p. 262). Because of their performance and fast execution time, native apps typically have a higher ranking in app stores, meaning they have a “significantly higher level of user satisfaction” (Suri et al., 2023, p. 2).

When it comes to native applications in the academic field, Karami et al. (2023) evaluated 75 peer-reviewed conference and journal papers on different app development approaches and noticed that Android and iOS were the first and fifth most studied frameworks. The researchers believe this might be because half of the evaluated studies used a native app development framework as a baseline to compare cross-platform frameworks to.

2.2 Cross-Platform App Development

Cross-platform, or multi-platform, development uses a single code base which can be run on different mobile platforms (Delía et al., 2017; Ebone et al., 2018; Suri et al., 2023). Thus, the advantage of this development approach is the reduction of development effort, cost and time (Delía et al., 2017; Ebone et al., 2018; Suri et al., 2023) due to the code reutilisation (Delía et al., 2015). However, cross-platform apps are unable to provide the same performance and user experience as native applications (Suri et al., 2023).

According to Karami et al. (2023), the academic interest in cross-platform frameworks is advancing: Cordova appeared within 32 studies and is therefore the most studied multi-platform framework. However, Cordova, as well as Titanium, are also among the oldest cross-platform frameworks, as they were released in 2009. The newer frameworks include Xamarin, which was released in 2011, React Native, which came out in 2016, and Flutter, which was released a year later. In 2021, Flutter was very popular among developers (Koram & Garg, 2023). Karami et al. (2023) also found Flutter and React Native to have been the most popular multi-platform frameworks among developers in 2022, thus beating Ionic and Xamarin. 

Although the mentioned frameworks are all cross-platform, they can differ in how they work. There are multiple approaches to cross-platform app development, which will be elaborated on in the following subchapters.

2.2.1 Web Applications

Web applications are apps that are developed with HTML, CSS and JavaScript, and run in the browser (Delía et al., 2017; Koram & Garg, 2023). No installation is necessary, which means the distribution and updating of apps is easier (Delía et al., 2017; Koram & Garg, 2023), but it might make the application less attractive compared to native apps (Delía et al., 2015). Since only a browser with a connection to the internet is needed, the development is fast and easy, and the developer does not need to adapt to any specific platform (Delía et al., 2017).

On the downside, due to the client-server interaction via the internet, the response time and performance of the web app could be affected negatively (Delía et al., 2015), which could worsen the user experience (Delía et al., 2017). In addition to web apps being dependent on an internet connection most of the time, the type of browser may also affect the user experience (Koram & Garg, 2023). Furthermore, because of the security restrictions imposed on websites, web apps and their interfaces are limited when it comes to the use of native functionalities (Delía et al., 2015; Delía et al., 2017).

Nowadays, Progressive Web Apps (PWAs) aim to make web apps feel more like real apps, by even making them able to be run offline (LePage & Richard, 2024), which is why it would be interesting to further investigate how modern PWAs compare in terms of performance and usability.

2.2.2 Hybrid Applications

Hybrid applications rely on the use of web technologies, such as HTML, CSS and JavaScript, but unlike web apps, they are not run by a browser; instead, they are executed on a web container, which includes an API that grants access to device-specific functionality (Delía et al., 2017). This way, according to Delía et al. (2017), code can be reused for different platforms, all while still being able to distribute the app via the platform-specific app stores and being able to access native functionalities of the device. Thus, unlike web apps, hybrid apps can function offline and are “true applications” (Koram & Garg, 2023, p. 263). 

On the other hand, the web container may negatively impact the performance of the app, as it requires an extra load (Delía et al., 2017; Koram & Garg, 2023; Zou & Darus, 2024). Moreover, since it is developed using web technologies, the lack of native components in the user interface might have a negative effect on the user experience (Delía et al., 2017).

Examples of hybrid development frameworks include Apache Cordova (Delía et al., 2017) and Ionic (Zou & Darus, 2024). The latter also allows apps to be run directly in a web browser as a PWA in addition to distributing the app via native app stores (Pinto & Coutinho, 2018).

2.2.3 Interpreted Applications

Interpreted applications are often also built with JavaScript, but the majority of the project is translated to native code, with the remainder being interpreted at runtime, so that native interfaces are obtained (Delía et al., 2017). Due to the native components, a high performance can be achieved (Zou & Darus, 2024).

Some examples of frameworks that produce interpreted applications include Appcelerator Titanium and NativeScript, according to Delía et al. (2017). The researchers also state that Titanium’s API serves as a bridge, since it maps each JavaScript element to its matching native element, thus offering natively controlled user interfaces. Something similar is reported by Zou and Darus (2024): React Native allows developers to build performance-critical portions of the application in native languages due to its bridge which connects JavaScript with native modules. The fact that lots of components are directly translated to their native equivalents allows for responsive UIs and high performance; nevertheless, the JavaScript bridge may pose as a bottleneck at times (Zou & Darus, 2024).

2.2.4  Applications Generated by Cross-Compilation

Some applications can be directly compiled into native code, such as by using the Xamarin or Corona framework, so that an app version for each target platform is generated (Delía et al., 2017).

However, while in Corona, only one base code is written in Lua, a simple scripting language, Xamarin, on the other hand, only allows developers to write shared business logic code in C#, and each platform’s user interface still must be developed separately (Delía et al., 2017). But then again, Zou and Darus (2024) note that even though platform-specific user interfaces can be created using Xamarin.iOS and Xamarin.Android, developers can also choose to build a shared UI with Xamarin.Forms. Delía et al. (2017) might not have mentioned Xamarin.Forms because it was less widely adopted or fully developed at the time of their publication. Nevertheless, even though Xamarin.Forms allows developers to build a shared user interface, it often comes with trade-offs in terms of delivering a fully native user experience, as Zou and Darus (2024) emphasise.

Still, the approach of generating apps by cross-compilation often yields a performance close to that of native apps, and results in apps that look and behave similarly to as if they were written natively (Ebone et al., 2018; Zou & Darus, 2024). Furthermore, by compiling directly to native code, a framework like Flutter can get rid of issues associated with JavaScript bridges in other frameworks (Zou & Darus, 2024). However, Flutter requires developers to use a specialised language called Dart, which they must learn in order to build Flutter applications (Suri et al., 2023). 

2.3 Summary

To sum up, apps can be developed natively or by using the cross-platform approach. There are several types of cross-platform development which can be further categorised into web apps, hybrid apps, interpreted apps, and apps generated by cross-compilation. Each of these approaches differs, so depending on the specific requirements of an app, some might be better suited than others. Therefore, it is important to understand how these types of app development compare across different metrics, which will be elaborated on in the following chapter.

3 Comparison

When it comes to comparing different frameworks or types of app development, both the user’s perspective – such as the end user’s satisfaction with the app’s performance and user interface – and the developer’s perspective – such as the amount of support provided by the framework during development – can be considered (Karami et al., 2023). Out of all the studies assessed by Karami et al. (2023), almost half of them took both perspectives into account, while the other half was split relatively evenly between the two. Furthermore, the researchers highlighted that the criteria used to analyse the user’s perspective on an app’s performance and UI often included CPU usage, memory, battery level, launch time, and frames per second, while the criteria used to evaluate the developer’s perspective varied; examples included access to device sensors and the availability of framework documentation and support. On average, each study focussed on four criteria to compare different app development approaches.

The most used criterion for comparison is performance, as it was found by Karami et al. (2023) in more than half of the evaluated studies. According to Delía et al. (2017), this is because performance highly influences user experience, and a bad user experience will result in unhappy users, and thus bad user ratings. Furthermore, Karami et al. (2023) found the next most used criteria to be, in order: platform API accessibility, hardware and sensors accessibility and user interface, so the app’s interface’s quality from the user’s point of view. Thus, the main criteria include both some related to the user’s perspective, and some related to the developer’s perspective.

Additionally, Karami et al. (2023) categorised studies based on their evaluation methods: experiment-based studies assessed frameworks through prototype testing, while documentation-based studies analysed the frameworks’ documentation. The researchers found that two-thirds of the studies were experiment-based, providing insights into runtime performance but with results limited to specific prototypes – in contrast, document-based studies offered a broader API evaluation but lacked real-world performance insights. Few studies combined both methods or included user surveys, likely due to the time and effort required (Karami et al., 2023).

The following subchapters summarise findings by various researchers on how different app development approaches compare in specific metrics.

3.1 Performance

Karami et al. (2023) found that when it comes to performance, native frameworks always yield a better result than multi-platform frameworks. Furthermore, the researchers discovered that React Native was often perceived to affect performance negatively in comparison to other cross-platform frameworks.

On the other hand, Ebone et al. (2018) did not notice a relevant difference between native Android and iOS apps, a Xamarin Android app, and Appcelerator Titanium Android and iOS apps, while the Xamarin.Forms Android and iOS apps took significantly longer to load larger views. On top of that, the researchers detected that the UI response time patterns of the Apache Cordova apps on Android and iOS varied greatly on the platforms.

Similarly, Delía et al. (2017) also highlighted a difference between the Android and iOS platforms; they concluded that performance experiments involving the iOS and Android operating systems ought to be examined independently, as the native method in iOS is far more effective. The researchers believe that the native approach in Android might be slowed down because Java needs the Android Runtime (ART) to function. On the iOS platform, the native app also showed a significantly higher performance compared to the cross-compiled apps (Delía et al., 2017). Nevertheless, regardless of the operating system, a web development approach would be an easy way to get a high performance on all mobile devices, but only if the access to native functionalities of the device is not required (Delía et al., 2017). When analysing hybrid (Cordova) and interpreted apps (Titanium and NativeScript), Delía et al. (2017) realised that the type of JavaScript engine used in both approaches had a big influence on the apps’ performance: hybrid and interpreted apps running on Android, which uses the JavaScript V8 engine, had a much better performance than those running on iOS, which uses the JavaScriptCore engine. Hybrid and interpreted apps running on Android showed a similar performance to web apps and were thus even better than the native and cross-compiled apps, while the same apps running on iOS were worse than native, web and cross-compilation approaches (Delía et al., 2017). Thus, according to Delía et al. (2017), the apps which were cross compiled using Xamarin and Corona had the worst performance on the Android platform, but only the second worst on iOS. However, it is important to acknowledge that this study from 2017 may not fully reflect the performance of modern app development frameworks, thus highlighting the need for ongoing research in this field.

In a more recent paper, Koram and Garg (2023) stated that Flutter “is known for its high level of performance” (p. 264). Furthermore, the researchers found Ionic to have a moderate performance and React Native and Xamarin to have a performance “quite similar to native” (p. 265). Therefore, it would be interesting to analyse how different app development approaches compare in terms of performance today.

3.2 Memory, Battery, and CPU Usage

When it comes specifically to memory, native apps showed to use the least compared to Flutter and React Native apps, with the latter using the most (Karami et al., 2023). Furthermore, Karami et al. (2023) found React Native to also consume more CPU and battery than Flutter. Similarly, Suri et al. (2023) found React Native to have the highest memory and CPU usage compared to Kotlin and Flutter, but when it came to energy usage, both React Native and Flutter showed a very high usage. Given these findings, it would be valuable to examine how other frameworks than the ones mentioned compare in terms of memory, CPU, and battery consumption.

3.3 App Size

Compared to native Android and iOS apps, cross-platform apps are substantially larger (Ebone et al., 2018). Karami et al. (2023) point out that React Native apps are especially large. A similar finding was reported by Suri et al. (2023), who found that when comparing an app made with Kotlin, Flutter and React Native, the native Kotlin app used the least amount of space, while the React Native app used the most. This might also explain the before-mentioned high memory, battery and CPU usage by React Native.

3.4 Platform API and Hardware and Sensors Accessibility

Moving on, when it comes to the access to camera, geolocation, notifications, etc., most studies observed native frameworks to be better, especially since most multi-platform frameworks rely on third-party libraries to access some APIs (Karami et al., 2023). This finding is in line with the frameworks’ descriptions in Chapter 2.

3.5 Development Support

While relying on third-party libraries can sometimes pose limitations, it is also a significant advantage. According to Karami et al. (2023), popular frameworks like React, Ionic, and Flutter offer more third-party libraries and plugins and have greater development support. However, it is not clear whether this statement only applies in comparison to other cross-platform frameworks, or also in comparison to native app development methods. 

3.6 Code Smells and Bugs

Another metric of interest is the number of code smells and bugs. Karami et al. (2023) define a code smell as a “maintainability issue that makes your code confusing and difficult to maintain” (p. 136). When comparing native Android apps with React Native apps, the researchers noticed that native Android apps have more code smells. However, in large apps, native Android apps still tend to have less bugs than React Native apps. Based on these findings, it would be interesting to assess even more frameworks regarding their number of code smells and bugs.

3.7 User Interface

Lastly, when it comes to the user interface criterion, there is no clear winner on the cross-platform side; however, generally, most studies believe native frameworks to be more efficient in producing a high-quality interface than cross-platform ones (Karami et al., 2023). Which frameworks were evaluated in specific, though, is not clear.

Furthermore, Koram and Garg (2023) also believe native apps to be the preferred choice for delivering an intuitive user interface due to their high performance and reliability.

4 Conclusion

In the matter of app development, there are various approaches one can take. Choosing between them can be difficult, especially since each one of them has its advantages and disadvantages.

Patidar and Suman (2021) believe that developers should choose the native approach if they need the best user experience, the fastest speed, the possibility to fully make use of device features, and if they need the app to function even without an internet connection. Moreover, Karami et al. (2023) speculate that complex applications, such as banking apps, may need to be developed natively to ensure a better UI.

However, the native approach is expensive and takes a lot of time, so developers might choose to go for a cross-platform development approach. The easiest way to reach as many users as possible is to create a web app, as all that is required for distribution is a browser. Nevertheless, a web app is limited when it comes to accessing native device functionality. Another alternative is to develop a hybrid app, which according to Delía et al. (2015) still keeps the development effort small, similarly to the web approach. Furthermore, interpreted apps and cross-compiled apps are among the options as well, which are the most appropriate when the developer values good performance and user experience (Delía et al., 2015), but still wants to save time and money.

Whether or not a framework is a good choice might also look different from the perspective of a user compared to the one from a developer. For example, Karami et al. (2023) identified that Flutter is better from a performance standpoint, so it might improve user experience, while React Native is better in the case of development support. Thus, whether an approach or framework is the right choice depends on various factors, and it is up to the developer to decide which aspects to prioritise.

4.1 Limitations and Future Work

Due to the ever-evolving nature of technology, it must be considered that some of the papers cited in this work were published several years ago, and their findings may not fully align with the current state of technology anymore. For example, the tests in the study by Delía et al. (2017) were done on devices like the Samsung S6 and the iPhone 6 plus, both which were considered high-end at the time, but would not anymore in 2025. This highlights the need for new studies to validate, refine, or challenge these earlier findings. Conducting research with the frameworks and devices available today can provide updated insights and ensure that our understanding keeps up with current developments.

REFERENCES

Delía, L., Galdamez, N., Thomas, P., Corbalan, L., & Pesado, P. (2015). Multi-platform mobile application development analysis. 2015 IEEE 9th International Conference on Research Challenges in Information Science (RCIS), 181–186. https://doi.org/10.1109/RCIS.2015.7128878

Delía, L., Galdamez, N., Corbalan, L., Pesado, P., & Thomas, P. (2017). Approaches to mobile application development: Comparative performance analysis. 2017 Computing Conference, 652–659. https://doi.org/10.1109/SAI.2017.8252165

Ebone, A., Tan, Y., & Jia, X. (2018). A Performance Evaluation of Cross-Platform Mobile Application Development Approaches. 2018 IEEE/ACM 5th International Conference on Mobile Software Engineering and Systems (MOBILESoft), 92–93. https://ieeexplore.ieee.org/document/8543442

Karami, P., Darif, I., Politowski, C., El Boussaidi, G., Kpodjedo, S., & Benzarti, I. (2023). On the Impact of Development Frameworks on Mobile Apps. 2023 30th Asia-Pacific Software Engineering Conference (APSEC), 131–140. https://doi.org/10.1109/APSEC60848.2023.00023

Koram, N., & Garg, R. (2023). Review on Mobile App Development: Tools and Techniques. 2023 IEEE World Conference on Applied Intelligence and Computing (AIC), 260–266. https://doi.org/10.1109/AIC57670.2023.10263908

LePage, P., & Richard, S. (2024, September 19). What makes a good Progressive Web App? web.dev. https://web.dev/articles/pwa-checklist

Patidar, A., & Suman, U. (2021). Towards Analyzing Mobile App Characteristics for Mobile Software Development. 2021 8th International Conference on Computing for Sustainable Global Development (INDIACom), 786–790. https://ieeexplore.ieee.org/document/9441097

Pinto, C. M., & Coutinho, C. (2018). From Native to Cross-platform Hybrid Development. 2018 International Conference on Intelligent Systems (IS), 669–676. https://doi.org/10.1109/IS.2018.8710545

Suri, B., Taneja, S., Bhanot, I., Sharma, H., & Raj, A. (2023). Cross-Platform Empirical Analysis of Mobile Application Development frameworks: Kotlin, React Native and Flutter. ICIMMI ’22: Proceedings of the 4th International Conference on Information Management & Machine Intelligence, 1–6. https://doi.org/10.1145/3590837.3590897

Zou, D., & Darus, M. Y. (2024). A Comparative Analysis of Cross-Platform Mobile Development Frameworks. 2024 IEEE 6th Symposium on Computers & Informatics (ISCI), 84–90. https://doi.org/10.1109/ISCI62787.2024.10667693

The post SOTA | Comparing App Development Approaches: Native vs. Cross-Platform App Development appeared first on Mobile USTP MKL.

Das Hauptziel des Forschungsprojekts “Smart Communities – IoT4LAC” besteht darin, den Datenaustausch zwischen verschiedenen regionalen LPWAN-Serviceanbietern zu ermöglichen und den Nutzer*innen durch aussagekräftige visuelle Darstellungs- und Interaktionsmethoden einen tieferen Einblick in die komplexen Daten von Sensornetzwerken zu bieten. Es wird ein System-of-Systems-Konzept entwickelt, das verschiedene Anbieter und Anwendungsfälle integriert und als Grundlage für die Realisierung von Smart Services für Gemeinden, Verbände und das Land dient.

Zielsetzung

Im Rahmen meiner Mitarbeit im Projekt bestand die Aufgabe darin, eine Visualisierung als Grafana-Plugin zu entwickeln. Dieses Plugin sollte es ermöglichen, zwei Attribute in Kombination miteinander über einen definierten Zeitraum darzustellen, sodass die Nutzer*innen einen Überblick über historische Daten erhalten. Darüber hinaus sollten Usability-Tests durchgeführt und umfassend evaluiert werden, um die Benutzerfreundlichkeit des gesamten Dashboards, das im Forschungsprojekt erstelltet wurde, zu bewerten.

Vorgehensweise

Zunächst wurde das Plugin unter Verwendung von Javascript und D3.js umgesetzt und in das Dashboard integriert. D3.js wurde dabei genutzt, um interaktive und dynamische Visualisierungen zu erstellen. Anschließend mussten verschiedene Interaktionsmöglichkeiten implementiert und mit den bestehenden Plugins verknüpft werden. Nach der technischen Umsetzung wurde ein Testdesign entwickelt und potenzielle Testpersonen kontaktiert. Für die Usability-Tests wurde ein Fragebogen mit sechs spezifischen Aufgaben sowie einem Visualisierungs-Literacy-Test erstellt. Die Testpersonen haben diesen im Rahmen der Evaluierung ausgefüllt. Schließlich wurden die Ergebnisse der Tests analysiert und ausgewertet.

Ergebnisse

Im Rahmen meiner Mitarbeit lieferte ich eine detaillierte Beschreibung des entwickelten Plugins und seiner Interaktionen sowie eine umfassende Auswertung der Usability-Tests. Diese beinhaltete eine Beschreibung der Methodik, die Durchführung der Tests sowie die wichtigsten Erkenntnisse aus panel-spezifischem und panel-übergreifendem Feedback. Der berechnete SUS-Score von 60,625 liegt dabei unter dem Durchschnitt, was auf Verbesserungspotenzial hinsichtlich der Usability hinweist.

Retrospektive

Durch meine Mitarbeit im Forschungsprojekt “Smart Communities” konnte ich meine Fähigkeiten in den Bereichen Programmierung und Evaluierung weiterentwickeln. Besonders wertvoll war die Möglichkeit, eine Kombination aus technischen und benutzerzentrierten Aufgaben zu bearbeiten. Die Umsetzung des Plugins sowie meine Beteiligung an der Entwicklung anderer Plugins ermöglichten mir, umfassende Usability-Tests durchzuführen und die Ergebnisse mit meiner vorherigen Arbeit zu verknüpfen. Dies gab mir wichtige Einblicke in die Benutzerfreundlichkeit und die Verbesserungspotenziale von interaktiven Visualisierungen in Dashboards.

The post TFG | Smart Communities – IoT4LAC appeared first on Mobile USTP MKL.

Screenshots des Küken Chatbots: Landing Page

Was ist der KÜKEN Chatbot?

Der Chatbot dient als zentrale Kommunikationsschnittstelle des Projekts und steht bereit, um Fragen zur Mülltrennung, Infos zum Projekt, Fragen zur Organisation und weiterem zu beantworten. Der Chatbot nutzt vorgefertigte Dialoge, die in Flussdiagrammen visuell entworfen und mit Natural Language Processing (NLP) trainiert und verknüpft wurden. So ist es möglich präzise Antworten zum Thema Abfallwirtschaft zu erhalten, ohne dass der Chatbot in andere Themen abschweift.

Screenshots des Küken Chatbots: Start der Konversation

Technische Umsetzung

Für die technische Umsetzung des Chatbots wurde im Backend mit Node.js gearbeitet und im Frontend mit Vue.js und Vuetify. Die Dialoge des Chatbots wurden mit Fabble.io geschrieben (Fabble.io ist seit dem nicht mehr in Betrieb) und anschließend exportiert und mit NLP trainiert.

Wie funktioniert es?

Der Chatbot wird im nächsten Testlauf des Forschungsprojektes “KüKeN” durch scannen eines QR-Code am Kübel mit dem Handy erreichbar sein. Es gibt zwei Optionen zur Interaktion mit dem Chatbot:

• “Bubbles” auswählen: Wähle vordefinierte Begriffe am unteren Bildschirmrand aus.
• Freie Texteingabe: Stelle spezifische Fragen direkt an den Chatbot.

Unser Ziel ist es, interessierten und motivierten Personen schnell und präzise die nötigen Informationen rund um das KüKeN-Projekt zur Verfügung zu stellen.

Screenshots des Küken Chatbots: Freitexteingabe

Retrospektive

Dieses Projekt war eine wertvolle Lernerfahrung für mich. Besonders faszinierend war es, mehr über die Gestaltung von Dialogen und die Funktionsweise von Chatbots zu lernen. Die Herausforderung, präzise und nutzerfreundliche Interaktionen zu entwickeln, hat mir neue Einblicke in die Verbindung von Technologie und Kommunikation gegeben.

Link zur KüKeN Projektseite

The post KÜKEN Chatbot: Der sprechende Mistkübel! appeared first on Mobile USTP MKL.

Ziel des Projekts ist die Entwicklung der App ERIKA, die als digitale Begleiterin für klimabewusstes Handeln im Alltag fungiert. Die App soll dazu beitragen, klimafreundliches Verhalten zu fördern und regionale Aktivitäten in der Region Waidhofen a/d Ybbs sichtbar zu machen. Dabei liegt der Fokus nicht nur auf nachhaltigen Inhalten, sondern auch auf nachhaltigen Aspekten bei der Entwicklung und dem Design der App, um das Konzept der Nachhaltigkeit ganzheitlich zu implementieren.

Die Umsetzung

Während meiner Tätigkeit im Forschungsprojekt ERIKA habe ich umfassend recherchiert, welche Faktoren für die Entwicklung einer nachhaltigen Website entscheidend sind.

Darüber hinaus war ich an der Recherche und Ausarbeitung von Forschungsfragen beteiligt, die sich mit klimafreundlichem Handeln im Alltag, den Auswirkungen verschiedener Maßnahmen, der Rolle der Digitalisierung und der Anwendung von Gamification zur Unterstützung nachhaltigen Verhaltens beschäftigen.

Ich habe Umfrageergebnisse ausgewertet und aufbereitet sowie einen klickbaren Prototypen der App erstellt.

Nachhaltiges Web- & Appdesign

In allen Lebensbereichen bemühen wir uns um Nachhaltigkeit, doch selten wird bedacht, wie stark das Internet unseren Planeten belastet. Die Kohlenstoffemissionen des Internets entsprechen denen der Luftfahrtindustrie und machen etwa 2 % der globalen Emissionen aus.

Bei meiner Recherche zu nachhaltigem Web-, App- und E-Mail-Design bin ich auf zahlreiche Aspekte gestoßen, die zur Nachhaltigkeit beitragen können. Dazu gehören grünes Hosting, SEO, Design, UX und Performance-Optimierung. Beispielsweise tragen die Wahl von Farben und Schriftarten, effizienter Code, minimierte HTTP-Anfragen, optimierte Bilder und die Reduzierung von Drittanbieter-Einbettungen zur Reduktion des CO₂-Fußabdrucks bei.

Nachhaltiges Webdesign ist nicht nur aus ökologischer Sicht sinnvoll, sondern verbessert auch die Benutzer*innenerfahrung, das Suchmaschinen-Ranking und die Zugänglichkeit, insbesondere in Regionen mit eingeschränktem Internetzugang. Webseiten, die weniger Ressourcen verbrauchen, laden schneller und bieten eine bessere Performance, was die Zufriedenheit der Nutzer*innen erhöht und die Reichweite steigert.

Die Ergebnisse meiner Recherchen habe ich schließlich in einem Blogartikel zusammengefasst.

Blogartikel ansehen

Prototyping

Darüber hinaus habe ich einen Figma-Prototypen für eine User Story des ERIKA Services erstellt. Dieser Klickdummy visualisiert, wie der Service im Alltag genutzt werden kann, um die Benutzer*innen über aktuelle nachhaltige Initiativen zu informieren.

Der Prototyp beinhaltet ein Formular, über das Nutzer*innen eigene Initiativen einreichen können. Nach Prüfung und Freigabe erscheinen diese Initiativen in der Kalender- und Kartenansicht. So können Nutzer*innen nicht nur an Veranstaltungen teilnehmen, sondern auch eigene Ideen einbringen, um ihren ökologischen Handabdruck zu vergrößern.

In der Kalender- und Kartenansicht können Nutzer*innen alle bevorstehenden Initiativen und Events, wie zum Beispiel den Wochenmarkt oder den bevorstehenden Flohmarkt, einsehen. Jedes Event verfügt über eine Detailansicht mit einer Beschreibung sowie Informationen zu den Terminen und dem Veranstaltungsort. Bei aktivierter GPS-Funktion erhalten Nutzer*innen Benachrichtigungen, wenn sie sich in der Nähe eines Events befinden.

The post ERIKA | Forschungsprojekt – TFG appeared first on Mobile USTP MKL.

Übersicht

1. Einleitung
2. Tools
3. Vorteile
4. Grünes Hosting
5. SEO
6. Design und UX
7. Performance-Optimierung
   • Programmierpraktiken
   • Code Komprimierung
   • JavaScript
   • Bilder
   • Drittanbieter-Einbettungen und Videos
   • Schriftart
8. Apps
9. E-Mails
10. Checkliste für nachhaltiges Web-/Appdesign
11. Checkliste für nachhaltiges E-Mail-Design
12. Forschungsprojekt “ERIKA”
13. Literatur
14. Bildquellen

Einleitung

Tatsächlich machen die Kohlenstoffemissionen des Internets zwischen etwa 1,8 und 3,2 % der globalen Gesamtemissionen aus [2]. Diese Zahl entspricht ungefähr dem Ausstoß der gesamten Luftfahrtindustrie, was etwa 2 % beträgt [3].

Wenn das Internet ein Land wäre, würde es weltweit den sechstgrößten Umweltverschmutzer darstellen, mit jährlichen Emissionen, die mit denen Japans vergleichbar sind (vgl. Abbildung 1). Somit wäre das Internet stand 2020 hinter China, USA, Indien, Russland und Japan einzuordnen [1].

Nicht nur E-Mails, Videostreams oder Bitcoin-Transaktionen haben einen signifikanten Einfluss auf den CO₂-Fußabdruck (siehe Abbildung 2), sondern auch die Nutzung künstlicher Intelligenz. Neben dem Training von KI-Modellen verursachen auch Suchanfragen erhebliche CO₂-Emissionen. Zum Beispiel produziert jede Suchanfrage mit ChatGPT 4,3 g CO₂ [4], was etwa dem CO₂-Ausstoß einer E-Mail ohne Anhang entspricht [1]. Bevor also intuitiv auf ChatGPT zurückgegriffen wird, ist es sinnvoll zu überlegen, ob die Suchanfrage nicht besser über eine herkömmliche Suchmaschine wie Google gestellt wird, da hierbei nur 0,2 Gramm CO₂ emittiert werden [1].

Tools zur Bewertung der Nachhaltigkeit von Webseiten

Auch das Design nachhaltiger Webdienste und -infrastrukturen wird immer wichtiger, um den CO₂-Fußabdruck des Internets zu reduzieren. Zum Beispiel ermöglicht es der Website Carbon Calculator, die CO₂-Emissionen der Landingpage einer Website zu testen und zeigt zusätzlich an, ob das Hosting erneuerbare Energien nutzt. Die mfg-Website hat beispielsweise ein Carbon Rating von A (Ranking: A+ bis F; pro Seitenbesuch 0,14 g CO₂), was bedeutet, dass sie besser als 87 % aller Webseiten weltweit ist (vgl. Abbildung 3). Allerdings wird das Hosting nicht als “grün” oder nachhaltig bewertet. Die Website vergleicht nämlich den verwendeten Hosting-Provider mit den Daten, die in der Datenbank der Green Web Foundation (TGWF) hinterlegt sind. Wenn festgestellt wird, dass der Hosting-Provider im Verzeichnis der TGWF zu finden ist, wird der CO₂-Fußabdruck entsprechend reduziert. Jedoch war dies im Beispiel der mfg-Website nicht der Fall.

Ein weiteres Tool zur Bewertung der Nachhaltigkeit einer Website ist Beacon, das der mfg-Website die Note B bezüglich des CO₂-Fußabdrucks zuweist. Dieses Tool bietet eine detaillierte Aufschlüsselung der CO₂-Emissionen pro Aufruf und pro Kategorie (z. B. Document, Script, Stylesheet, Image, Font), was Hinweise darauf geben kann, wo Verbesserungspotenzial besteht.

Ein letztes Tool, das ich zum Überprüfen der Website vorstellen möchte, ist der Ecograder, er analysiert und bewertet die Website in drei Hauptkategorien (Seitengröße, UX-Design, Hosting). Der Ecograder liefert auch auf die Website zugeschnittene Tipps:

• Seitengröße: Skalieren Sie Bilder (hier werden z.B. die Bilder aufgeführt die optimiert werden könnten) und entfernen Sie unnötigen Code, etc.
• UX-Design: Verbessern Sie die Darstellung und Accessability Ihrer Website, nutzen Sie Caching und reduzieren Sie Serveranfragen, etc.
• Green Hosting

Jeder Punkt wird mit einer Punktzahl (bis zu 100) bewertet und mit konkreten Verbesserungsvorschlägen versehen. So erkennt man sofort, wo das Optimierungspotenzial liegt.

Nicht nur für die Umwelt von Vorteil

Möchte man eine Website mit geringerem Kohlenstoffausstoß erstellen, so geht dies oft Hand in Hand mit einer verbesserten Web-Performance. Die Grundidee besteht darin, dass eine optimierte Leistung zu kürzeren Ladezeiten führt, was wiederum den Server und das Netzwerk weniger belastet und somit die Energieeffizienz verbessert. Durch die Optimierung der Website lässt sich der Daten- und Energieverbrauch der Nutzer*innen reduzieren und gleichzeitig die Lebensdauer ihrer Geräte verlängern, was wiederum den Bedarf an Upgrades und Ersatz verringert [5].

Mit der verbesserten Performance gehen folgende weitere Vorteile einher [6]:

• Verbesserte Benutzer*innenerfahrung: Eine schlanke Website mit optimierten Bildern und Code lädt schneller und bietet ein flüssigeres Erlebnis für alle Nutzer*innen.
• Höheres Suchmaschinen-Ranking: Google und andere Suchmaschinen bevorzugen Websites, die schnell laden und ressourcenschonend sind.
• Bessere Zugänglichkeit: Eine performante Website kann die digitale Teilhabe im globalen Süden fördern, da sie für Menschen mit eingeschränkter Internetverbindung oder teuren Datenpaketen besser nutzbar ist.
• Geringere Hosting-Kosten: Eine umweltfreundliche Website benötigt weniger Ressourcen und kann daher auf einem günstigeren Hosting-Paket betrieben werden.

Eine nachhaltige Website ist demnach ein Gewinn in vielerlei Hinsicht – für Nutzer*innen, Unternehmen und die Umwelt.

Doch nun stellt sich die Frage, mit welchen Mitteln man eine umweltfreundlichere Webseite erstellen kann. Hier gibt es verschiedene Ansätze, die ich im Folgenden erläutern werde. Gemäß Frick [7] lässt sich nachhaltiges Webdesign in vier Kategorien unterteilen: Green Hosting, Suchmaschinenoptimierung (SEO), Design und UX sowie Performance-Optimierung.

Grünes Hosting

Die Gewährleistung, dass der Webhost erneuerbare Energien verwendet, ist ein wichtiger Schritt zur Reduzierung der Kohlenstoffemissionen der Website. “Grünes Hosting” bedeutet, dass der Hosting-Provider seine Server hauptsächlich oder idealerweise vollständig mit erneuerbaren Energien betreibt. Es ist jedoch nicht immer einfach, echte “grüne” Hosting-Referenzen von Greenwashing und reinen Marketingansprüchen zu unterscheiden. Das Hosting-Verzeichnis der Green Web Foundation listet Unternehmen auf, die entweder erneuerbare Energien verwenden oder ihre Emissionen kompensieren. Ein weiteres hilfreiches Instrument ist “Are my third parties green?“, ein Tool, das die Kohlenstoffauswirkungen von Drittanbieterabhängigkeiten überprüft, einschließlich der Frage, ob sie umweltfreundliches Hosting nutzen [5].

Die Nutzung eines Content Delivery Networks (CDN) trägt ebenfalls zur Nachhaltigkeit einer Website bei. Ein CDN ermöglicht die Speicherung und Bereitstellung von Website-Inhalten auf Servern in verschiedenen Regionen, wodurch Ladezeiten verkürzt und der Energieverbrauch reduziert wird. Durch die Bereitstellung von Inhalten näher am*an der Endnutzer*in verbessert sich die Effizienz der Datenübertragung [8].

SEO

Tracking-Skripte wie Google Analytics können die Leistung einer Website beeinträchtigen, da sie geladen werden müssen, um Daten zu erfassen, die anschließend an das Datacenter übermittelt und dort dauerhaft gespeichert werden. Je weniger solche Skripte verwendet werden, desto besser für die Performance, die Umwelt und den Datenschutz. Wenn Tracking-Skripte benötigt werden, gibt es auch Optionen ohne Cookies und mit geringerer Dateigröße als Google Analytics (vgl. Tabelle). Es ist ratsam, im Voraus zu überlegen, welche Funktionalitäten benötigt werden. Für diejenigen, die nicht alle Funktionen von Google Analytics benötigen, gibt es leichtgewichtigere Tools wie Fathom, Plausible oder andere Alternativen [6].

Design und UX

Nachhaltigkeit sollte bereits in der Designphase eine zentrale Rolle spielen. Ein minimalistisches Design verbessert nicht nur die Benutzer*innenerfahrung (UX), sondern reduziert auch den Energiebedarf für Datenübertragung und -verarbeitung. Ein umweltfreundlicher Ansatz könnte beispielsweise die Verwendung weniger energieintensiver Farben einschließen, da Blau mehr Energie verbraucht als Rot oder Grün (vgl. Abbildung 4). Auf OLED-Bildschirmen kann ein dunkles Farbschema Energie sparen, da schwarze Pixel “aus” sind. Die Farbwahl hat somit Auswirkungen auf die Nachhaltigkeit der Website [9].

Google [10] fand heraus, dass die Verwendung des Dark Modes je nach überprüfter App 30% bis 65% weniger Energie verbraucht als der Light Mode. Darüber hinaus verbraucht Blau 25% mehr Energie als Grün oder Rot. Die Nutzung energieeffizienter Farbpaletten kann somit die Akkulaufzeit verlängern.

Doch neben der Energieeffizienz ist auch die Barrierefreiheit entscheidend. Es ist wichtig, beispielsweise keinen weißen Text auf schwarzem Hintergrund und umgekehrt zu verwenden, da diese Kombination negative Auswirkungen auf die Augenbelastung, Ermüdung und Lesbarkeit hat. Stattdessen sollten weichere Töne bevorzugt werden. Ein Cremeweiß anstatt strahlendem Weiß kann nicht nur sanfter für die Augen sein, sondern auch weniger Energie verbrauchen [11].

Auch responsives Design ist von entscheidender Bedeutung, da es den Ressourcen- und Energieverbrauch minimiert, indem es verschiedene Versionen derselben Inhalte für verschiedene Bildschirmgrößen und Geräte überflüssig macht [18]. Anstatt also separate Websites oder Apps für Smartphones, Tablets und Desktops zu erstellen, passt sich die Website automatisch an die Bildschirmgröße des jeweiligen Geräts an.

Die User Experience spielt ebenfalls eine Rolle [5]: Wie viel Zeit verbringen Benutzer*innen damit, auf Ihrer Website zu navigieren, und laden dabei mehr Ressourcen, als sie benötigen, weil sie nicht finden, wonach sie suchen? Daher sollten Suchfunktionen, intuitive Designmuster, eine optimierte Informationsarchitektur und klare Navigation berücksichtigt werden [8].

Performance-Optimierung

Je mehr Daten übertragen werden, desto mehr Energie wird in Rechenzentren, Telekommunikationsnetzen und Endgeräten verbraucht. Faktoren wie Seitengewicht, HTTP-Anfragen und DOM-Größe spielen dabei eine entscheidende Rolle [12].

• Seitengewicht: Das Seitengewicht ist die Summe der Übertragungsgröße in Kilobyte (KB) aller Ressourcen, die von der Webseite angefordert werden. Laut dem Httparchive-Bericht [21] betrug das Median-Seitengewicht für “Desktop” März 2024 2.566 KB und für “Mobile” 2.277 KB (vgl. Abbildung 5). Die Gewichte der Desktop-Webseiten stiegen seit November 2010 um 428 %, während die der mobilen Webseiten um 1.413 % zunahmen.
  Bilddateien machen mehr als die Hälfte des Gesamtdatentransfers aus (vgl. Abbildung 6). Daher ist es wichtig, dass das Design einer nachhaltigen Website das Gewicht der Webseiten begrenzt, beispielsweise durch die Komprimierung von Bildern.

• HTTP-Anfragen: Eine HTTP-Anfrage wird von einem Client an einen Host auf einem Server gesendet, um auf eine Ressource zuzugreifen. Die Reduzierung der Anzahl von Anfragen pro Seite ist entscheidend, um die Anzahl der benötigten HTTP-Server zur Ausführung der Website zu reduzieren [12].

• DOM-Größe: Beim Laden einer Webseite erstellt der Browser ein Document Object Model (DOM), das eine hierarchische Sammlung von Knoten darstellt, die jedes HTML-Element, Attribut und eingebetteten Text als Baumstruktur darstellen. Ein großes DOM kann die Leistung der Webseite stark beeinträchtigen, da der Browser die Position und das Styling der Objekte ständig neu berechnen muss. Die Vereinfachung der DOM-Größe von Webseiten durch Begrenzung der Anzahl von Knoten reduziert das Gewicht der übertragenen Daten [12].

Programmierpraktiken

Effizienter und sauberer Code führt zu schnelleren Ladezeiten und geringerer Serverbelastung. Es ist wichtig, überflüssigen Code wie Schleifen oder unnötige Abfragen zu vermeiden. Eine bewährte Methode besteht zudem darin, CSS- und JavaScript-Dateien in externe Dateien auszulagern. Dadurch lädt der Browser die Dateien nur einmal herunter, wenn ein Benutzer die Website zum ersten Mal besucht. Bei allen weiteren Besuchen muss der Browser die Dateien nicht erneut herunterladen, was die Ladezeit der Website verkürzt und Energie spart [13].

Code Komprimierung

Ähnlich wie bei Bildern, Videos und Schriftarten ist es sinnvoll, über die Komprimierung von Code und anderen textbasierten Inhalten nachzudenken, um die Dateigröße zu verringern und die Leistung zu verbessern. Die Komprimierung von HTTP-Antworten kann die Ladezeit verkürzen, die Seitengröße reduzieren und die Leistung verbessern, was wiederum die Suchrangfolge beeinflussen kann.

Dies gilt insbesondere für textbasierte Inhalte wie:

• HTML
• CSS
• JavaScript
• JSON
• SVG
• Webfonts (woff, ttf)
• Icons (ico)

Medieninhalte wie Bilder, die bereits komprimiert sind, profitieren hingegen nicht von der HTTP-Komprimierung [6].

Gzip und Brotli sind die zwei gängigsten Methoden zur Komprimierung von HTTP-Antworten. Die Komprimierung kann vorab für statische Inhalte oder dynamisch für jede Anfrage durchgeführt werden.
Wie aus Abbildung 7 hervor geht, ist Brotli in der Regel effizienter als Gzip und erreicht eine bessere Komprimierungsrate. Allerdings benötigt Brotli etwas mehr Rechenleistung für die Komprimierung und Dekomprimierung. Die meisten modernen Browser unterstützen Gzip und Brotli. Brotli ist jedoch in älteren Browsern und einigen mobilen Browsern noch nicht verfügbar. Die optimale Wahl zwischen Gzip und Brotli ist situationsabhängig und sollte von den spezifischen Anforderungen der Webseite oder Anwendung abhängen [6, 14].

Das Verkleinern, Komprimieren und Entfernen unnötiger Teile des Codes tragen dazu bei, den Datentransfer zu reduzieren. Darüber hinaus sollte man so viel wie möglich zwischenspeichern, Caching sollte man vor allem bei Seiten benutzen, die sich nicht besonders ändern [5].

JavaScript

JavaScript ist ressourcenintensiver als HTML und CSS und die meisten Websites sind übermäßig darauf angewiesen. Deshalb sollten JavaScript-Frameworks bedacht eingesetzt werden, also nur wenn sie wirklich benötigt werden. Mit Tools wie z.B. Bundlephobia können diese Abhängigkeiten bewertet werden, möglicherweise kann stattdessen eine native API verwendet werden. Dynamische Imports können dazu beitragen, die Größe des anfänglichen JavaScript-Bundles zu reduzieren und verhindern, dass Benutzer*innen Code herunterladen, der erst viel später benötigt wird [5].

Bilder

Bilder machen einen erheblichen Teil des Seitengewichts aus und tragen fast die Hälfte des Datenverkehrs im Web bei. Es wird empfohlen, SVGs anstelle von Fotos zu verwenden und bei der Verwendung von Bildern sollte darauf geachtet werden, sie zu optimieren und zu komprimieren, um die Dateigröße zu reduzieren. Je einfacher ein Bild ist – mit weniger Farbvariationen und Details – desto kleiner ist die Dateigröße. Techniken wie Hintergrundblur, das Blurren der Ecken oder die Umwandlung in ein Schwarz-Weiß-Bild können helfen, die Dateigröße weiter zu verringern [6].

Durch die Verwendung von srcset und <picture> kann das am besten geeignete Bild für das Gerät bereitgestellt werden. Dabei werden moderne (kleinere) Bildformate wie WebP für Geräte verwendet, die diese unterstützen, um sicherzustellen, dass Geräte mit geringerer Auflösung nicht unnötig große, hochauflösende Bilder herunterladen müssen.
Hiermit kannst du ein WebP-Bild mit einem Fallback zu einem jpg-Bild anzeigen, um sicherzustellen, dass das Bild korrekt angezeigt wird, selbst wenn das WebP-Format nicht unterstützt wird:

<picture>
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung des Bildes">
</picture>

Um zu verhindern, dass Bilder heruntergeladen werden, bevor der*die Nutzer*in zu dem Punkt scrollt, an dem sie benötigt werden, kann das lazyload-HTML-Attribut verwendet werden [5].

Drittanbieter-Einbettungen und Videos

Drittanbietercode wie Chat-Widgets, Analyse-Skripte, Social-Media-Einbettungen und Videos sind oft die schlimmsten Übeltäter, wenn es um Seitengewicht und Datenübertragung geht. Es ist ratsam, den Einsatz von Videos zu minimieren, insbesondere durch das Vermeiden von Autoplay-Videos.
Wenn es jedoch unvermeidlich ist, solche Einbettungen zu verwenden, sollte das Muster “Import On Interaction“ in Betracht gezogen werden, bei dem das Laden der Einbettungen verzögert wird, bis der*die Nutzer*in mit ihnen interagiert [5].
Ein Beispiel dafür ist das WordPress-Plugin “Lazy Embed”, das eingebettete Inhalte wie Videos und Social-Media-Beiträge nur bei aktiver Betrachtung durch den*der Nutzer*in oder bei einem Klick darauf lädt. Dadurch wird die Seitenladezeit verbessert und Bandbreite gespart, da die Inhalte erst bei Bedarf geladen werden [6].

Schriftart

Schriftarten können das Seitengewicht erheblich beeinflussen. Systemfonts, die bereits auf den Geräten der Nutzer*innen vorhanden sind, sollten bevorzugt werden, um zusätzlichen Ladeaufwand zu vermeiden. Systemfonts sind beispielsweise Open Sans (Google Font), Segoe UI (Windows Systeme), San Francisco Pro (Mac Systeme) und Roboto (Android Handys) [15].
Falls individuelle Schriftarten verwendet werden, ist es ratsam, weniger individuelle Schriftstärken einzubeziehen und die Schriftarten in moderne Formate wie Web Open Font Format 2.0 (WOFF2) zu konvertieren. Es kann auch sinnvoll sein, Schriftarten zu unterteilen, indem eine begrenzte Sammlung von Glyphen bereitgestellt wird, insbesondere wenn nur eine Sprache auf der Website benötigt wird [5]. Dies kann mithilfe von Subsetting-Tools erfolgen, die es ermöglichen, die Font-Datei hochzuladen, die gewünschte Sprache auszuwählen und dann ungenutzte Glyphen zu entfernen [6].

Apps

Neben den allgemeinen Prinzipien der nachhaltigen Softwareentwicklung, die sowohl für Web-Anwendungen als auch für mobile Apps gelten, gibt es einige weitere Aspekte, die bei der App-Entwicklung im Hinblick auf Nachhaltigkeit beachtet werden können [22]:

• Gerätespezifische Optimierung: Berücksichtige die unterschiedlichen Hardware-Ressourcen und Leistungsfähigkeiten von Mobilgeräten. Optimiere den Code und das Design speziell für die Zielplattformen wie Android und iOS, um unnötigen Energieverbrauch zu vermeiden.
• Effiziente Sensordatennutzung: Greife nur auf Sensordaten zu, wenn sie für die App tatsächlich benötigt werden. Deaktiviere Sensoren, die nicht aktiv verwendet werden, um den Akkuverbrauch zu reduzieren.
• Modulare Architektur: Modularer Code und Microservices ermöglichen einfachere Updates und Fehlerbehebungen einzelner Komponenten, ohne die den Großteil der App neu entwickeln zu müssen. Dadurch wird der Ressourcenverbrauch reduziert.
• Regelmäßige Updates: Regelmäßige Updates und Fehlerbehebungen sind wichtig, da veraltete Apps aufgrund von Ineffizienzen oder Sicherheitslücken mehr Energie verbrauchen können. Durch regelmäßige Wartung wird eine optimale Leistung und Sicherheit gewährleistet.
• Energiesparfunktionen: Integriere Optionen in die App, mit denen Benutzer*innen den Energieverbrauch aktiv reduzieren können, z.B. Darkmode, Energiesparmodus oder die Möglichkeit, Hintergrundaktivitäten zu begrenzen.
• Bewusstseinsschaffung: Zusätzlich kann man dem*der Nutzer*in Tipps für eine nachhaltige Nutzung der App geben oder energieeffizientes Verhalten, beispielsweise durch Einsatz von Gamification, belohnen.

E-Mails

Wie aus Abbildung 2 hervorgeht, tragen auch E-Mails zur CO₂-Bilanz bei. Angesichts dieser Erkenntnis ist es von Bedeutung, nicht nur bei der Entwicklung von Websites und Apps, sondern auch beim Umgang mit E-Mails ökologisch verantwortungsbewusst zu handeln. Viele Aspekte des Web- und E-Mail-Designs überschneiden sich, wie zum Beispiel die Reduzierung von Bildern, Webfonts, Videos, Tracking-Skripten und Animationen, um die Ladezeit zu verkürzen. Die Verwendung eines dunklen Designs trägt ebenfalls zur Reduzierung des CO₂-Fußabdrucks bei. Zusätzlich empfiehlt es sich, CDNs und E-Mail-Service-Provider (ESP) zu nutzen, die mit grüner Energie betrieben werden [16].

Außerdem ist es ratsam, E-Mails regelmäßig zu überprüfen und zu löschen, insbesondere Spam, Newsletter und große E-Mails. Diese E-Mails füllen den Posteingang unnötig und verbrauchen Speicherplatz. Es ist auch wichtig, die Anzahl der Empfänger*innen zu reduzieren, den Papierkorb regelmäßig zu leeren, Spamfilter einzurichten und nicht verwendete Newsletter sowie unerwünschte Werbung abzubestellen. Zusätzlich sollten automatische Benachrichtigungen von sozialen Medien ausgeschaltet werden [17].
Verwende klare und präzise Formulierungen und vermeide redundante Informationen. Responsives Design ist zudem auch bei E-Mails wichtig, da es die optimale Darstellung auf allen Geräten ermöglicht und somit übermäßiges Scrollen und lange Ladezeiten verhindert [19].

Wenn Buttons verwendet werden, ist es empfehlenswert, diese programmatisch als Code zu integrieren, anstatt als Bilder einzufügen. Dadurch wird in der Regel weniger Speicherplatz benötigt [20].
Statt Anhänge zu verwenden, sollte man auf Datenübertragungsplattformen wie Google Drive oder Dropbox zurückgreifen. Alternativ sollten Fotos und Dateien (z.B. als Zip-Datei) komprimiert werden [17]. Wenn Bilder in E-Mails eingefügt werden sollen, ist es ratsam, nur auf die Quelle auf einem Server zu verweisen, anstatt das Bild direkt einzubetten. Auf diese Weise wird das Bild nur heruntergeladen, wenn die Empfänger*innen die E-Mail öffnen [20].

Checkliste für nachhaltiges Web-/Appdesign

Die folgende Checkliste fasst zusammen, welche Aspekte beim Design einer nachhaltigen Website oder App berücksichtigt werden können:

Hosting: Nutze grünes Hosting und ein CDN.

Design:

• Verwende minimalistische Designs: Sind großflächige Bilder/Videos notwendig?
• Nutze responsives Design.
• Verwende energieeffiziente Farbpaletten und den Darkmode.
• Minimiere den Einsatz von Videos, insbesondere von Autoplay-Videos.
• Verwende energieeffiziente Systemfonts.
• Bei individuellen Schriftarten:
  • Verwende das Format WOFF2.
  • Reduziere die Anzahl der Font Weights.
  • Optimiere die Schriftart mithilfe eines Subsetting-Tools.

UX/Usability:

• Integriere Suchfunktionen: Sind Informationen schnell auffindbar?
• Verwende intuitive Designmuster und Navigationselemente.
• Verwende eindeutige Beschriftungen.
• Verwende eine barrierefreie Gestaltung.

Performance:

• Erfasse das Seitengewicht (Durchschnitt liegt bei 2,5 MB [21])
• Verwende ressourcenschonende Alternativen zu Tracking-Skripten.
• Vereinfache die DOM-Größe durch Begrenzung der Anzahl von Knoten.
• Reduziere die Anzahl von HTTP-Anfragen.
• Komprimiere die HTTP-Antworten (z.B. mittels Gzip oder Brotli).
• Entferne unnötige Code-Teile.
• Lagere CSS- und JavaScript-Dateien aus.
• Verwende Caching für statische Inhalte.
• Setze JavaScript-Frameworks und -Abhängigkeiten bedacht ein.
• Verwende SVGs anstelle von Fotos (wenn möglich).
• Optimiere und komprimiere Bilder (vorzugsweise webp + Fallback jpg/png).
• Nutze Lazy Loading, um das Herunterladen von Bildern zu verzögern.
• Verwende dynamische Imports, um die Größe des initialen JavaScript-Bundles zu reduzieren.
• Verwende das Muster “Import On Interaction”, um das Laden von Einbettungen zu verzögern.

App-Spezifisch:

• Optimiere den Code und das Design gezielt für die Zielplattformen (z.B. Android, iOS).
• Beschränke den Zugriff auf Sensordaten auf das Minimum.
• Nutze eine modulare Architektur.
• Halte die Anwendung durch regelmäßige Updates und Fehlerbehebungen auf dem neuesten Stand.
• Integriere Optionen zur aktiven Reduzierung des Energieverbrauchs.
• Biete Tipps für eine nachhaltige Nutzung an und belohne energieeffizientes Verhalten.

Checkliste für nachhaltiges E-Mail-Design

Designer/Entwickler:

• Entscheide dich für einen umweltfreundlichen CDN und ESP.
• Wähle energieeffiziente Farbpaletten.
• Nutze responsives Design.
• Vermeide Bilder, Webfonts, Videos, Tracking-Skripte und Animationen.
• Integriere Buttons programmatisch als Code, anstatt sie als Bilder einzufügen.
• Komprimiere Bilder und Dateien.
• Nutze Datenübertragungsplattformen, anstatt Anhänge zu verwenden.
• Verweise auf die Quelle auf einem Server, anstatt das Bild direkt einzubetten.

Allgemein:

• Formuliere deine Nachrichten klar und präzise, um Redundanzen zu vermeiden.
• Lösche regelmäßig Spam, Newsletter und große E-Mails aus deinem Postfach.
• Reduziere die Anzahl der Empfänger*innen deiner E-Mails.
• Leere deinen Papierkorb regelmäßig.
• Richte Spamfilter ein.
• Melde dich von unerwünschten Newslettern und Werbemails ab.
• Schalte automatische Benachrichtigungen aus.

Forschungsprojekt “ERIKA”

Dieser Artikel wurde im Rahmen des Moduls “Tun / Forschen / Gründen” im zweiten Mastersemester verfasst. Im Forschungsbereich haben Studierende die Möglichkeit, an einem Forschungsprojekt des dem Studiengang angeschlossenen Forschungsinstituts mitzuarbeiten. Die Grundlage für diesen Artikel bilden Recherchen, die im Rahmen des Forschungsprojekts „ERIKA“ durchgeführt wurden.
Ziel des Projekts ist die Entwicklung der App ERIKA, die als digitale Begleiterin für klimabewusstes Handeln im Alltag fungiert. Die App soll dazu beitragen, klimafreundliches Verhalten zu fördern und regionale Aktivitäten in der Region Waidhofen a/d Ybbs sichtbar zu machen. Dabei liegt der Fokus nicht nur auf nachhaltigen Inhalten, sondern auch auf nachhaltigen Aspekten bei der Entwicklung und dem Design der App, um das Konzept der Nachhaltigkeit ganzheitlich zu implementieren.

Literatur

 [1] So viel Energie verbraucht das Internet: https://de.statista.com/infografik/26873/co2-vergleich-dsl-und-glasfasernetz/

[2] Our Digital Carbon Footprint: What’s the Environmental Impact of the
Online World? https://en.reset.org/our-digital-carbon-footprint-environmental-impact-living-life-online-12272019/

[3] Tracking Aviation: https://www.iea.org/energy-system/transport/aviation

[4] A Closer Look at the Carbon Footprint of ChatGPT: https://piktochart.com/blog/carbon-footprint-of-chatgpt/

[5] Introduction to web sustainability: https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/

[6] How to make your website more sustainable: https://digitalculturenetwork.org.uk/knowledge/webinar-recording-how-to-make-your-website-more-sustainable/

[7] Frick, Tim (2016): Designing for Sustainability: A Guide to Building Greener Digital Products and Services Sebastopol, Kalifornien, USA, ISBN: 978-1491935774

[8] 6 steps to building a more sustainable website: https://www.youtube.com/watch?v=1TlBgfsgIdI

[9] The dark side of green web design: https://www.wholegraindigital.com/blog/dark-colour-web-design/

[10] Google: Here’s why dark mode massively extends your OLED phone’s
battery life: https://www.zdnet.com/article/google-heres-why-dark-mode-massively-extends-your-oled-phones-battery-life/

[11] Energy efficient color palette ideas: https://greentheweb.com/energy-efficient-color-palette-ideas/

[12] Lacom, Pauline & Sagot, Sylvain. (2022). A Research Framework for B2B Green Marketing Innovation: the Design of Sustainable Websites. 10.1109/ICE/ITMC-IAMOT55089.2022.10033239.

[13] 10 Tipps für die nachhaltige Umsetzung von Websites und Apps: https://www.visuellverstehen.de/insights/10-tipps-fuer-die-nachhaltige-umsetzung-von-websites-und-apps

[14] Compression methods for different content types: https://almanac.httparchive.org/en/2021/compression#fig-1

[15] System Fonts als Google Fonts Alternative: https://www.webtimiser.de/system-fonts/

[16] How to design climate-friendly emails: https://uxdesign.cc/sustainable-email-design-fa9eb58610d8

[17] Eine E-Mail ist so schädlich wie eine Plastiktüte: https://www.adesso.de/de/news/blog/eine-e-mail-ist-so-schaedlich-wie-eine-plastiktuete.jsp

[18] Sustainable UI Design: https://medium.com/@JakubWojciechowskiPL/sustainable-ui-design-reducing-the-environmental-footprint-of-digital-interfaces-afe3c9dfe738

[19] Grün mailen: Dein Guide für nachhaltiges E-Mail-Marketing im
Mittelstand: https://www.cleverelements.com/gruen-mailen-dein-guide-fuer-nachhaltiges-e-mail-marketing-im-mittelstand/

[20] 7 Tipps für CO₂-freundliches E-Mail Marketing: https://www.brevo.com/de/blog/co2-freundliches-email-marketing/

[21] Report: Page Weight: https://httparchive.org/reports/page-weight?start=2017_04_15&end=latest&view=list

[22] Sustainable App Development Practices: https://corewave.io/Blogs/sustainable-app-development-practices

Bildquellen

Beitragsbild von Freepik

[A] Abb. 1, 2: https://cdn.statcdn.com/Infographic/images/normal/26873.jpeg

[B] Abb. 3: Screenshot von https://www.websitecarbon.com/website/mfg-fhstp-ac-at/

[C] Abb. 4: https://cdn.shortpixel.ai/spai3/w_1240+q_glossy+ret_img+to_auto/www.wholegraindigital.com/wp-content/uploads/2022/03/Capture.jpg

[D] Abb. 5: Screenshot von https://httparchive.org/reports/page-weight?start=2017_04_15&end=latest&view=list 

[E] Abb. 6: https://blog-img.speedcurve.com/img/page-bloat-2-2011-to-2017.png

[F] Abb. 7: https://almanac.httparchive.org/en/2021/compression#fig-1

The post Sustainable Webdesign appeared first on Mobile USTP MKL.