Beiträge

Erklärung und Vorteile von Progressive Web Apps

Progressive Web Apps – Die mobile Revolution?

Täglich nutzen wir Progressive Web Apps und wissen es nicht einmal. Diese sogenannten PWA’s besitzen alle Funktionalitäten und Möglichkeiten klassischer Smartphone-Apps, laufen aber vollständig im Webbrowser und haben damit den Vorteil, dass sie nicht erst installiert werden müssen. In den letzten Jahren hat der Vormarsch dieser Art von App begonnen und sie ist nun im Begriff, herkömmliche Apps vollständig abzulösen.

Nach der allgemeinen Einführung in die Web Apps, befassen wir uns deshalb noch einmal genauer mit dem Thema und tragen zusammen, was eine Progressive Web App ausmacht, ob sie dem Vergleich zu klassischen Apps standhält und welche Chancen für Unternehmen bietet. Die vielen Vorteile dieser Entwicklungen zeigen wir aber gleich vorweg…

  • Keine Installation notwendig, Nutzung direkt im Browser

  • Updates auf dem Server und nicht beim Nutzer

  • Nutzung dank Caching auch offline möglich

  • Unterschiedlichste Funktionen abdeckbar

  • Inhalte können von Suchmaschinen indexiert werden

  • Simples Teilen der App per URL

  • Geringere Entwicklungs- und Wartungskosten

  • Unabhängigkeit von App Stores

  • Gesicherter Zugriff für geschäftliche Anwender auf Firmendaten möglich

 

Was genau sind eigentlich Progressive Web Apps?

Bekannte Webdienste wie Gmail, Netflix, Trivago, Microsoft Office, Instagram oder Twitter sind Progressive Web Apps. Es sind Anwendungen, die im Webbrowser ausgeführt werden und dem Nutzer das gleiche Erlebnis wie native Apps liefern (also eigens für diese Funktion erstellte Anwendungen, die auf dem Endgerät in einer separaten Umgebung verarbeitet werden). Egal ob Smartphone, Tablet oder Desktop-PC, der Nutzer kann im Browser Mails lesen und schreiben, Flugreisen buchen oder Filme schauen.

PWA’s stellen also Funktionen bereit, die über das reine Anzeigen von Texten und Bildern im Webbrowser hinausgehen. “Progressive” werden sie im Vergleich zu bisherigen Web Apps durch die Möglichkeit, auch offline nutzbar zu sein.

Die Technik dahinter ist nicht allzu komplex. Das wichtigste Element für die Umsetzung von Progressive Web Apps sind die sogenannten Service Worker. Sie arbeiten im Hintergrund der Webseite und ermöglichen das Laden von bestimmten Inhalten in den Cache, ohne dass es einer erneuten HTTP-Kommunikation bedarf. Fordert ein Nutzer bestimmte Inhalte an, hat der Service Worker diese Inhalte bereits in den Cache geladen, da der Entwickler diese vorab definiert hat.

Hierbei kommen moderne Methoden der Webentwicklung, wie das Prerendering, Preloading und Prefetching, zum Einsatz. Während der Entwicklung einer Progressive Web App werden diese Schlüsselressourcen identifiziert, referenziert und vorgeladen. Je nach Nutzerinteraktion weiß die App, welche Inhalte angefordert werden und muss diese nicht extra über die Internetverbindung nachladen.

Dieses Prinzip reduziert die Abhängigkeit von Übertragungsraten speziell des mobilen Internets und verbessert die User Experience.

Die Kontrolle des Cachings schließt noch einen weiteren Aspekt mit ein – das Laden der Inhalte erfolgt wesentlich schneller, somit müssen die Nutzer keine langen Wartezeiten in Kauf nehmen. Der Nutzungsprozess wird dadurch auf einem hohen Niveau trotz schonendem Gebrauch der Netzwerkressourcen gehalten.

Die Vorteile von PWA’s in der App-Entwicklung

Technik, Nutzererfahrung und Onlinemarketing

  • Deutlich hervor sticht, dass man PWA’s nicht aus dem jeweiligen App-Store herunterladen und installieren muss. Somit gehören auch Updates der Vergangenheit an. Mit der Funktion “Add-To-Homescreen”, welche so gut wie jedes mobile Betriebssystem unterstützt, kann der Nutzer den Link wie ein klassisches App-Symbol auf seinem Desktop abspeichern und jederzeit aufrufen.
  • Ein weiterer Vorteil von Progressive Web Apps ist die Nutzung auch bei schlechter oder gar keiner Internetverbindung. Die App muss lediglich einmal online genutzt werden, dann sollten die Inhalte im Cache auch offline verfügbar sein.
  • Des Weiteren haben Entwickler die Möglichkeit, auf mehr Funktionen des Smartphones zuzugreifen, wie bspw. das Senden von Push-Benachrichtigungen auf mobile Geräte.
  • Außerdem ist das Teilen der App sehr simpel. Während bei nativen Apps erst ein Link über den Store aufgerufen werden muss, kann für PWA’s ganz einfach die URL aus dem Webbrowser kopiert werden.
  • Und auch für das Onlinemarketing bieten sich Vorzüge: Bei Progressiven Web Apps können die Inhalte nämlich im Gegensatz zu nativen Apps vollständig von Suchmaschinen indexiert werden.

Unternehmerische Vorteile

  • Die wirtschaftlichen Vorteile sind die geringeren Entwicklungs- und Wartungskosten. Eine zeitintensive Entwicklung für mehrere Betriebssysteme wird überflüssig und Updates können direkt eingespielt werden, ohne dass Nutzer extra darüber informiert werden müssen.
  • Da Progressive Web Apps nicht installiert werden müssen, sind die Betreiber unabhängig von App Stores. Entwickler müssen demnach vom Verkaufspreis keine Anteile für die jeweilige Plattform abgeben.
  • Zudem ist die mentale Hürde zur Installation einer App deutlich höher, als der Schritt zum Aufrufen einer Webseite und dem Abspeichern als Homescreen-Icon. Betreiber einer PWA benötigen also weniger Überzeugungskraft als mit einer App, erzielen aber im Endeffekt eine ähnlich hohe Conversion Rate sowie Kundenbindung.
  • Auch für Businessanwendungen gibt es kaum Grenzen: Geschäftliche Anwender profitieren mit dem gesicherten Zugriff auf Firmendaten von Desktops, Laptops, iOS- und Android-Geräten, welche aus dem Browser heraus ermöglicht werden. Über Services – lokal oder über die Cloud – können diese Daten dann sicher und hochverfügbar bereitgestellt werden. In den Bereichen Datenschutz und Datensicherheit hat sich gerade im Mobile Bereich sehr viel getan, sodass auch die Geräte selbst mittlerweile durchaus für den Unternehmensalltag zum Einsatz kommen können.

Welche Zukunft haben Progressive Web Apps?

Inwieweit sich Progressive Web Apps in der Zukunft durchsetzen werden, bleibt noch abzuwarten. Die technologische Entwicklung in diesem Bereich wird von Google vorangetrieben und war anfangs nur für Android-Geräte und den Chrome-Browser verfügbar. Die großen Konkurrenten der Branche haben ihre Systeme nach langer Zurückhaltung mittlerweile aber ebenfalls für Progressive Web Apps nachgerüstet.

So hat Microsoft im September 2017 angekündigt, den mit Windows 10 eingeführten Edge-Browser für PWA‘s zu optimieren. Im „Redstone 4“-Update des Betriebssystems aus dem Frühjahr 2018 war der PWA-Support dann endgültig enthalten. Apple hat schon seit einiger Zeit Service Worker in das Webkit des hauseigenen Safari-Browsers integriert und damit die Basis für Progressive Web Apps geschaffen. Und auch reine Browserentwickler, wie Mozilla mit seinem Firefox, sind mit von der Partie.

Es ist wohl also nur noch eine Frage der Zeit bis sich Progressive Web Apps auf dem Markt etabliert haben – die Bedingungen dafür erfüllen sie jedoch bereits. Interessieren Sie sich für die Entwicklung von Progressiven Web Apps? Dann lassen Sie sich von der Softwareentwicklung der kreITiv beraten!

Ursprung und Vorteile reaktiver JavaScript Frameworks für moderne Benutzeroberflächen

Reaktive JavaScript Frameworks – Trend in der Entwicklung von Benutzeroberflächen

Reaktives Verhalten, Virtual DOM und Komponenten sind die wesentlichen Bestandteile von reaktiven JavaScript Frameworks und entscheidende Stichworte für den modernen Softwareentwickler bei der Erstellung von Benutzeroberflächen. Richtungsweisend für die Etablierung dieses Trends können die zahlreichen Entwicklungen der letzten Jahre sein, welche auf eben diesen Frameworks basieren, darunter große Projekte wie Netflix, Facebook, Instagram, WhatsApp oder AirBnB.

Wieso man diesem Trend folgen sollte und welche Vorteile er mit sich bringt, möchten wir in diesem Blogartikel aufzeigen.

Ein eindeutiger Trend, doch wo liegt der Ursprung?

In den vergangenen Jahren dominierten Libraries beziehungsweise Frameworks, wie jQuery oder Mootools, den Bereich der Benutzeroberflächenentwicklung. Nun lässt sich jedoch ein eindeutiger Wechsel in Richtung reaktiver JavaScript Frameworks erkennen.

Bei der Entwicklung von großen Webanwendungen kommt es zunehmend darauf an, eine vernünftige Codestruktur zu erzeugen. Vergleicht man hier als Beispiel jQuery mit Vue oder React als Vertreter der reaktiven Frameworks, so stellt man fest, dass jQuery keine Komponenten bietet.

Mittels Komponenten ist ein Entwickler in der Lage, Struktursprachen wie HTML und CSS mit der JavaScript-Logik innerhalb einer Datei zu bündeln. Diese kann dann an beliebiger Stelle innerhalb der Anwendung mehrfach verwendet werden. Zusätzlich besteht die Möglichkeit, diese Komponenten problemlos innerhalb einer anderen Anwendung zu nutzen. Die variabel einsetzbaren Codestrukturen werden dann in übersichtlicher Art und Weise miteinander verknüpft, sodass am Ende die Darstellung über eine Baumstruktur möglich ist.

Der zentrale Vorteil von reaktiven JS-Frameworks ist somit die Reduktion der Komplexität der Codestruktur. Sekundäre Ziele sind dabei die bessere Verständlichkeit und somit auch leichtere Wartung von komplexen Codestrukturen.

Was ist eigentlich dieses reaktive Verhalten?

Innerhalb einer Komponente kann der Entwickler zum Beispiel Formulardaten definieren, welche automatisch über das Model Binding der Logik zugänglich gemacht werden können. Bei jQuery muss an dieser Stelle mit Events gearbeitet werden, bei Vue und Co. ist dies praktisch nicht notwendig.

Zusätzlich gibt es neue Libraries, wie zum Beispiel Elements für Vue. Durch Elements kann ein Entwickler vorgefertigte Komponenten in seine Anwendung implementieren. Diese verfügen damit schon über eine gewisse Logik und sind auch komplett grafisch aufgearbeitet.

In Puncto Geschwindigkeit können reaktive JavaScript Frameworks natürlich auch bestehen, da mindestens ein virtuelles Strukturabbild des HTML-Dokuments im Speicher vorgehalten wird. Dadurch muss nicht das komplette HTML-Dokument neu geladen werden, wenn sich ein Teil dieser Struktur ändert. Der virtuelle DOM prüft selbstständig, welche Bereiche im Dokument neu gerendert werden müssen und imitiert genau dies automatisch. Damit ist die clientseitige Manipulation deutlich effizienter geworden.

Viele Vorteile rechtfertigen die höhere Entwicklungszeit

Fassen wir die zahlreichen Vorteile von reaktiven JavaScript Frameworks zusammen:

  • Wiederverwendbarer Code durch Komponenten

  • Bessere Wartbarkeit der Anwendung

  • Schnellerer Zugriff auf Daten dank Model Binding und reaktiven Verhaltens

  • Effizientere Manipulation von HTML-Strukturen

  • Höhere Geschwindigkeit

Natürlich besitzt jede neue Technologie auch ein oder zwei Schattenseiten. Im Fall von Vue ist dies der doch spürbar höhere Anspruch für die clientseitige Entwicklung. Das führt letztlich zu einer längeren Entwicklungszeit für eine Anwendung.

Zusammenfassend kann man jedoch sagen, dass der Trend eindeutig in Richtung reaktiver JavaScript Frameworks zeigt, da selbst das World Wide Web Consortium W3C an einer sehr analogen Technologie namens „Shadow DOM“ arbeitet.

Webseiten und Web-Apps mit dem Laravel Framework

Laravel Framework – Die beste Option für Ihr Unternehmen

Webanwendungen erlauben einen universellen und flexiblen Zugang zu den unterschiedlichsten Dienstleistungen. Mit einer rasant steigenden Nutzung des Internets bieten auch zahlreiche Unternehmen ihre Waren, Dienstleistungen und Kenntnisse als Web-Content an. Zuverlässige, sichere und effiziente Applikationen sind somit der Schlüssel zum Erfolg für viele moderne Firmen.

Oft wird die Umsetzung solcher Web-Apps an Spezialisten und Agenturen abgegeben. Trotzdem ist es auch für den Auftraggeber wichtig, die unterschiedlichen Herangehensweisen bei der Entwicklung zu kennen, um zu verstehen, wie sich diese auf das eigene Unternehmen auswirken können.

7 Gründe, warum wir auf das Laravel Framework setzen

Für die Softwareentwicklung von kreITiv haben wir uns, wenn es um komplexe und langlebige Webanwendungen geht, für das PHP-Framework Laravel entschieden. Aus der Unternehmersicht, waren die folgenden Kriterien für diesen Schritt ausschlaggebend.

1

Ladezeit/Geschwindigkeit der Anwendung

Statistiken von Google aus dem Jahr 2016 belegen, dass 53% aller Nutzer eine Webseite verlassen, wenn deren Ladezeit mehr als drei Sekunden beträgt. Dies zeigt, dass die Geschwindigkeit von Web-Applikation höchste Priorität haben sollte.

Anders als bspw. beim mittlerweile sehr komplexen CMS WordPress, beinhaltet eine Laravel-Applikation ausschließlich die Funktionen, die auch wirklich gebraucht werden. Das Resultat ist ein nahezu perfekt auf den Verwendungszweck zugeschnittenes Produkt.

Bei großen Erweiterungen, welche die Ladegeschwindigkeit immer begrenzen, bietet Laravel diverse Optimierungsoptionen, bei denen unter anderem Caching eingesetzt wird.

2

Möglichkeiten zur späteren Weiterentwicklung

Laravel ist das beliebteste PHP Framework 2017 und kommt mit einer breiten Community von Programmierern und Unterstützern. Das bedeutet, dass es keine Probleme bei der späteren Überarbeitung eines Produktes gibt, da Laravel vollständig dokumentiert ist und zahllose Hilfestellungen zu finden sind. Projekte können durch die Skalierbarkeit Laravels stets wachsen und haben keine Limitierungen in diesem Bereich.

Außerdem beinhaltet Laravel ein Versionsmanagement für die Datenbankentwicklung, welches bei der späteren Expansion des Projektes hilfreich ist.

3

Client-Side Framework Unterstützung

Die komplizierten Funktionalitäten einer Web-App verstecken sich immer hinter dem Design. Daher ist es von hoher Wichtigkeit, dass die Benutzeroberfläche einfach zu bedienen ist und mit einer gewissen Eleganz beim Nutzer einen bleibenden Eindruck hinterlässt.

Laravel unterstützt eine Vielzahl an unterschiedlichen Client-Side Frameworks, welche für eine professionelle Entwicklung der Seitendarstellungen benötigt werden. Somit können sowohl statische als auch dynamische Seiten erstellt werden und es gibt keinerlei Limitationen, wenn es um die Interaktivität und Komplexität der Webanwendung geht.

4

Verwendung neuester Techniken bei der Entwicklung

PHP-Frameworks wie Laravel sind grundsätzlich ein Schritt in die Zukunft der Webentwicklung, da durch die Abstraktion keine einfachen Fehler und Sicherheitsprobleme auftauchen und die Programmierung effizienter und schneller geschieht.

Laravel ist ein ideales Grundgerüst für jegliche Webanwendungen, dank dem sich der Entwickler auf die eigentlichen Funktionalitäten der Applikation konzentrieren kann. Ein Beispiel dafür sind die Datenbankzugriffe, welche bei Laravel über vorgefertigte und abgesicherte Methoden laufen, was dazu führt, dass die Entwicklung schneller und die Verwendung sicherer ist.

5

Programmiererfreundliche Entwicklung

Durch den logischen Aufbau und die durchdachte Struktur der Laravel-Applikationen, ist das Handling für Produktentwickler um vieles angenehmer. Das führt dazu, dass viel weniger Logik- und Strukturfehler entstehen. Durch den besseren Überblick erkennen Programmierer schon bei der Entwicklung viel mehr Sicherheitsfehler und Bugs. Auch spätere Erweiterungen oder Änderungen der App können ohne Probleme durchgeführt werden, da es auch für einen projektfremden Entwickler einfach ist, die Struktur und Funktionalitäten zu verstehen und darauf basierend weiterzuentwickeln.

6

Überprüfte und instand gehaltene Sicherheitsoptionen

Laravel baut auf ein vollwertiges und häufig getestetes Authentifizierungssystem. Hinter dem Open Source Framework steht eine große Community. Dadurch werden Sicherheitslücken und allgemeine Fehler schnell erkannt und behoben.

Dieses Authentifizierungssystem umfasst das ganze Framework, wodurch die Absicherung von bestimmten Seiten und einzelnen Prozessen realisiert werden kann. Aufbauend darauf, wurden verschiedene Erweiterungen/Pakete entwickelt, mit denen man komplexere Systeme entwickeln kann. Genauso wie die nativen Laravel-Funktionen, sind diese Erweiterungen community-unterstützt und daher sehr verlässlich.

7

Erweiterte Möglichkeiten bei der Datenverarbeitung und -bereitstellung

Anders als bei vielen CMS und anderen Frameworks, liegt die Datenbankverwaltung ganz in den Händen der Programmierer. Es erlaubt den Zugriff auf alle Daten und ermöglicht eine Verwertung dieser Daten in einer großen Vielfalt.

Eloquent ist eine Laravel-Klasse, welche eine effizientere Datenverarbeitung erlaubt. Über automatisierte Verknüpfungen zwischen Datenbanktabellen und Laravel-Modellen wird der Datenzugriff erleichtert. Dadurch können jegliche Informationen verarbeitet werden und im Anschluss für Marketing, Prozessanalysen, und Kundenbetreuung sowie -service verwendet werden.

Moderne Webanwendungen von kreITiv

Egal, ob Webseite, Web-App oder cloud-gestützte lokale Anwendung, die Softwareentwicklung von kreITiv aus Dresden realisiert auch Ihr Projekt. Wir bauen auf moderne Webtechnologien und die Ablösung isolierter Systeme zugunsten flexibler und zukunftsweisender Onlinelösungen. Fragen Sie uns an.

Frameworks erleichtern heute das Arbeiten für Webentwickler

Frontend Development Frameworks in der Webentwicklung

Das World Wide Web wächst noch immer beständig und mit ihm auch der Umfang an Endgeräten, mit denen wir darauf zugreifen. Aus diesem Grund werden auch die Jobs der Webdesigner und Entwickler deutlich komplexer.

Schließlich sollen Webanwendungen auf möglichst vielen Geräteklassen mit den unterschiedlichsten Bildschirmauflösungen zum einen wie geplant funktionieren und zum anderen gut aussehen.

Warum überhaupt Frameworks in der Webentwicklung?

Vor einigen Jahren waren die Dinge deutlich einfacher. Man konnte davon ausgehen, dass die eigene Webseite stets über Desktop-Rechner mit einem Standardbrowser aufgerufen wurde. 960 Pixel wurden mehr oder weniger als eine gute Breite für eine Webseite betrachtet. Mit dem Boom von mobilen Endgeräten in den letzten sieben bis acht Jahren hat sich alles geändert. Wir haben die Einführung von Smartphones und Tablets aller Größen, eReadern, Browser in TV-Geräten und vieles andere erlebt. Die Vielfalt an Geräteklassen steigt nahezu täglich.

Bei der Arbeit mit unbekannten Darstellungsgrößen ist das “Responsive Design” eine der primären Strategien, die verwendet werden. Dieser Mechanismus stellt definierte Layouts bzw. Stylesheets auf der Grundlage der Größe der Browserfenster bereit.

Für Designer und Entwickler ist es wichtig zu verstehen, wie man mit dieser mobilen Welt umgehen kann. Es wurden bereits Technologien und Werkzeuge entwickelt, die das Leben der Web-Spezialisten vereinfachen sollen. Hier kommen die sogenannten Frontend Development Frameworks ins Spiel. Sie erlauben es, reaktionsfähige, standardkonforme Webseiten mit minimalem Aufwand zu erstellen und gleichzeitig alles einfach und konsistent zu halten.

Für Entwickler, welche die heutige Webentwicklung ernst nehmen, sind Frameworks keine Option, sondern ein Muss.

Es existiert eine Vielzahl dieser Frameworks; einige von ihnen heben sich aber von der Masse ab. Eines der mächtigsten und beliebtesten Frontend Frameworks ist Bootstrap.

Bootstrap, das beliebteste freie CSS-Framework

Bootstrap ist ein kostenloses Framework für die Gestaltung von Webseiten und Webanwendungen. Es wird Open Source unter einer Creative Commons Lizenz entwickelt und enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten sowie optionale JavaScript-Erweiterungen. Im Gegensatz zu vielen Web-Frameworks handelt es sich nur um ein reines Frontend-Entwicklungstool.

Ursprünglich war Bootstrap nur für die interne Verwendung bei Twitter gedacht. Sein großer Erfolg ist auf folgende Punkte zurückzuführen:

  • Das responsive Grid-System,
  • eine nahezu komplette Bibliothek an User-Interface-Komponenten (inklusive JavaScript)
  • und eine hohe Usability.

Damit kommt das Framework auch in Sachen Effizienz und Zeitersparnis einer immer noch jungen, sich professionalisierenden Branche entgegen.

Auch wir in der kreITiv Webentwicklung setzen natürlich auf bewährte Technologien und halten ebenso die Augen für neue Trends der Softwareentwicklung offen. Kontaktieren Sie uns und realisieren Sie mit uns Ihr nächstes Webprojekt.

Wir beleuchten die Usability von Webanwendungen im kreITiv-Blog

Grundlagen für Usability von Webanwendungen

Webanwendungen oder Web-Apps sind Softwaresysteme, die auf den Standards und Technologien des WWW beruhen. Sie stellen Ressourcen bereit, die über den Browser als einziges User-Interface verwendet werden können.

Warum überhaupt Usability?

Webanwendungen gewinnen zunehmend an Bedeutung und ihre Nutzung ist in den vergangenen Jahren kontinuierlich angestiegen. Dies begründet einen erhöhten Wettbewerbsdruck im Markt der Web-Apps. Eine schlechte Usability führt somit bei gleichem Funktionsumfang der Anwendung zu einem Wettbewerbsnachteil.

Unabhängig davon, ob “normale” Webseite oder ausgereifte Webanwendung: Die erste Verbindung zum Nutzer entsteht über die grafische Benutzeroberfläche. Der Nutzer erlebt die Usability des Produktes Webanwendung stets unmittelbar während des Arbeitens und entwickelt dadurch seine Entscheidung über eine weitere Benutzung. Das kann zum Problem werden, da eine Vergleichbarkeit zu anderen Wettbewerbern im Internet besonders ausgeprägt ist.

Weiterhin weisen Nutzer ein hohes Maß an Ungeduld auf. Daher muss eine Benutzerfreundlichkeit sichergestellt werden, die dem User in kurzer Zeit den komfortablen Umgang mit der Seite erlaubt.

Usability entwickeln über Seitengestaltung und Navigation

Diese Punkte führen dazu, dass Usability einen hohen Stellenwert im Umfeld des Webdesigns einnimmt. Eine Vielzahl an Ansätzen kann helfen, Usability sicherzustellen. Dazu zählen unter anderem die Seitengestaltung und die Navigation.

1. Die Seitengestaltung ist Grundlage der Usability.

Der Aufbau soll den Interessen der Nutzer entsprechen und die Durchführung typischer Aufgaben unterstützen. Es gilt horizontale Bildläufe zu vermeiden. Bei vertikalen Bildläufen sollten Navigationselemente jederzeit sichtbar sein. Grundsätzlich empfiehlt es sich, den Erwartungen des Nutzers zu entsprechen. Dabei spielt der Aufbau eine elementare Rolle. Sehr verbreitet sind hierarchische Strukturen. Diese sind insbesondere zur Darstellung komplexer Inhalte geeignet. Nutzer sind damit vertraut und finden sich schnell zurecht.

Lineare Informationsstrukturen eignen sich vorrangig bei Sachverhalten, die tatsächlich einem linearen Muster folgen. Gitterstrukturen werden eingesetzt, um abhängige Elemente miteinander in Beziehung zu setzen. Netztopologien werden für komplexe Systeme eingesetzt. Das Suchen auf solchen vernetzten Seiten gestaltet sich mitunter schwierig, da der Aufbau selten einer nachvollziehbaren Logik folgt.

2. Die Navigation innerhalb einer Webanwendung stellt den zweiten wichtigen Faktor der Usability dar.

Jede Bewegung innerhalb einer Webanwendung wird als Navigation bezeichnet. Fühlt sich ein Nutzer desorientiert, kann das der ausschlaggebende Grund für den Misserfolg der Anwendung darstellen. Auch bei der Einrichtung und Präsentation der Bewegungsmöglichkeiten sind daher die Nutzererwartungen einzubeziehen und die Anwender zu führen.

Nutzerfreundliche Webanwendungen bzw. Web-Apps von kreITiv

Wir von kreITiv bieten unseren Kunden maßgeschneiderte Webanwendungen mit hoher Usability, denn wir kennen die Anforderungen. Wenn Sie auf der Suche nach einem kompetenten Ansprechpartner in Sachen Webentwicklung sind, stehen Ihnen die Experten der kreITiv gern mit Rat und Tat zur Seite.

HTTP/2 – Anlaufschwierigkeiten beim neuen Web-Standard

HTTP/2 – Anlaufschwierigkeiten beim neuen Web-Standard

Das verbesserte Übertragungsprotokoll HTTP in der Version 2 (HTTP/2) war vor einigen Jahren noch ein großes Thema im Bereich der Kommunikation zwischen Server und Browser. Die Verbesserungen sollten in geringeren Ladezeiten für den Nutzer resultieren, wodurch das Interesse der gesamten IT-Branche groß war.

Die Verwendung des Protokolls ist schon seit einiger Zeit möglich, jedoch scheint der Übergang von HTTP/1.1 zu HTTP/2 eher stockend zu verlaufen. Woran das liegt und welche weiteren Verbesserungen HTTP/2 mit sich bringt, wird im folgenden Artikel beschrieben.

Warum HTTP/2 ?

Der Hauptgrund für die Verwendung von HTTP/2 sind die verkürzten Ladezeiten von Webseiten auf Seiten des Nutzers. Heutzutage beinhalten Webseiten viele Inhalte, welche typischerweise von mehreren Webservern abgerufen werden. Die Kommunikation zwischen Browser und Webserver kann man sich vereinfacht so vorstellen:

Zunächst fordert der Browser die HTML-Datei an. Diese Anfrage wird vom Server angenommen und beantwortet. Der Browser verarbeitet diese Antwort, bevor er eine weitere Anfrage sendet. Zunächst wird also die HTML-Datei analysiert und festgestellt, welche weiteren Inhalte (mit ähnlichem Kommunikationschema) angefragt werden müssen. Diese Kommunikation kann bei komplexen Webseiten, auch bei schnellen Leitungen, zu hohen Ladezeiten führen.

Google – Der Wegbereiter für HTTP/2

Auch Google verfolgte das Ziel von verkürzten Ladezeiten für seine Nutzer. Dabei bilden kurze Ladezeiten bei der Verwendung von Applikationen eine wichtige Voraussetzung für den Komfort des Nutzers. Bei der Lösung des Problems dachte man zunächst an die langsamen Downloadraten und initiierte das Projekt Google Fiber.

Googles Projekt zum Aufbau eines Hochgeschwindigkeits-Glasfasernetzes

»A different kind of Internet and TV« – Google Fiber als Wegbereiter eines schnelleren Internets
Bildquelle: Original von Laura Gilchrist (CC BY 2.0), Bild bearbeitet

Dieses Projekt umfasst den Ausbau eines Hochgeschwindigkeits-Glasfasernetzes in den USA. Dabei sollen Download- und Uploadraten von bis zu 1 GB/s erreicht werden. Zurzeit können knapp 500.000 Haushalte dieses Netz nutzen. Bei der Betrachtung von möglichen Verbesserungen im Bereich der Browser-Server-Kommunikation erarbeitete Google Verbesserungen der genutzten Protokolle im Chrome Browser und in den eigenen Webservern.

Das neue Netzwerkprotokoll trug den Namen SPDY und bildete eine Grundlage für die Erarbeitung von HTTP/2.

Was macht HTTP/2 anders und welche Vorteile ergeben sich daraus?

Die Kommunikation zwischen Browser und Server beginnt bei HTTP/2 genau so wie bei HTTP/1.1, das heißt es folgt ein Verbindungsaufbau auf die Anfrage der HTML-Datei des Browsers. Der weitere Datenverkehr findet dann auf dieser Verbindung statt.

Ein großer Vorteil von HTTP/2 ist die Möglichkeit des sogenannten Server-Push. Dabei kann der Server selbständig Inhalte, wie Skripte oder Style Sheets, an den Browser versenden. Das heißt, dass der Browser gleichzeitig Daten anfragen und empfangen kann. Man spricht hierbei von Multiplexing. Das Resultat bilden verkürzte Ladezeiten für den Nutzer.

Diese können auch von Bedeutung für das Onlinemarketing sein. Geringere Ladezeiten beeinflussen Suchmaschinen in dem Maß, dass entsprechende Webseiten öfter von Google gecrawlt werden, der Google Bot sie also häufiger durchsucht. Dies kann bei Onlineshops dazu führen, dass neue Produkte und Inhalte schneller in den Index aufgenommen werden. Studien belegen ebenfalls, dass geringe Ladezeiten einen positiven Einfluss auf die Conversion-Rate, das heißt die Anzahl von Transaktionen im Verhältnis zu den Seitenaufrufen, haben.

Warum stockt der Übergang von HTTP/1.1 auf HTTP/2?

Trotz der vielen Vorteile ist die Verwendung von HTTP/2 heute doch recht selten. Auch hier hatte Google einen entscheidenden, diesmal jedoch nicht sehr positiven, Einfluss.

Damit ist die Umstellung von NPN (Next Protocol Negotiation) auf ALPN (Application-Layer Protocol Negotiation) in Verwendung mit dem Chrome Browser gemeint. Diese Erweiterungen ermöglichen u.a. dem Server mitzuteilen, welche Version von HTTP verwendet werden soll. Die Voraussetzung für die Verwendung von ALPN bildet eine Version von OpenSLL 1.0.2 oder höher. OpenSLL ist eine Software, welche im Zusammenhang mit Netzwerkprotokollen und Verschlüsselungen steht. Die angeforderte Version wird jedoch selten verwendet und eine Aktualisierung auf diese bringt große Hürden und großen Aufwand für die Server-Administratoren mit sich.

Die einfache Lösung wäre es, den Google Chrome Browser nicht mehr zu nutzen. Jedoch ist dieser momentan der am meisten verwendete Browser für Desktops und mobile Endgeräte. Das Problem bei der Verwendung von HTTP/2 betrifft also einen Großteil der Nutzer. Die bisherigen Hürden bei der Implementierung von HTTP/2 hemmen demnach für eine große Gruppe von Nutzern die Vorteile, welche durch die Verwendung von HTTP/2 möglich wären.

Toptrends: Material Design, Story Telling und Back to Basics

Top-3 Webtrends für das Jahr 2016

Das Web verändert sich ständig, betrachtet man die Entwicklung der letzten Jahrzehnte erkennt man einen stetig stattfindenden Wandel. Das betrifft auch das Design und den inhaltlichen Aufbau von Webseiten. In diesem Blogbeitrag wollen wir daher auf kommende Webtrends eingehen. Einige existieren zwar schon lange, haben sich aber bisher nicht richtig durchgesetzt.

I. Material Design

Google stellte 2014 auf seiner Entwicklerkonferenz das Material Design vor. Dabei handelt es sich um eine Erweiterung des Flat Designs, welches sich durch seine Einfachheit auszeichnet. Im Flat Design werden die Elemente einfarbig und ohne Verzierungen oder Schlagschatten dargestellt. Im Material Design sieht das anders aus; es baut zwar auf demselben Grundgedanken auf, ist jedoch durch entscheidende Punkte ergänzt. Hier besitzen die Elemente nicht nur eine X- und Y-Koordinate sondern auch eine Z-Koordinate, sie werden also dreidimensional dargestellt. Dies wird meist durch einen Schlagschatten visualisiert. Außerdem werden Farbverläufe verwendet sowie kleine Animationen, die perfekt an den Benutzer angepasst sind. Zum Webtrend Material Design hat Google eine umfassende Informationsseite zum nachlesen erstellt.

Ein paar optische Eindrücke liefert Google seinen Developern im folgenden Clip…

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

II. Story Telling

Bei der Story Telling Methode versuchen Firmen die Geschichte ihres Unternehmens oder eines Produktes lebendig und attraktiv zu vermitteln. Bei jedem Scroll wird den Kunden das Produkt näher vorgestellt. Dies wird durch den Einsatz von prägnanten Bildern, gut zu lesenden Texten und einfachen Animationen realisiert. Auf einigen großen Seiten ist dieser Webtrend bereits gut umgesetzt. Auf vielen weiteren wird er künftig noch Einzug halten und sich auch in der inhaltlichen Ausgestaltung weiterentwickeln.

III. Back To The Basics

Oft sieht man Webseiten, auf denen seitenlanger Inhalt dargestellt wird oder sich unzählige, meist überflüssige Animationen abspielen. Aber in Zukunft sollte auf das Prinzip “weniger ist mehr” gesetzt werden. Das bezieht sich nicht nur auf Texte und Animationen, sondern auch auf Farben. Meist reicht ein einfacher Schwarz-Weiß Kontrast um den Inhalt interessant darzustellen. Außerdem sollte auf die Anzahl der Bilder geachtet werden – in vielen Fällen genügen schon wenige aussagekräftige Bilder oder Grafiken, um den Inhalt zu unterstreichen.

Entwicklung der Webtrends

Ob sich diese drei skizzierten Webtrends 2016 bei der breiten Masse der Webseiten im Internet durchsetzen, ist aus heutiger Perspektive noch ungewiss. Viele große und bekannte Seiten haben diese Prinzipien als Vorreiter schon perfekt umgesetzt. Wir von der kreITiv sind gespannt, wie sich die Webtrends weiterentwicklen und ob sie auch von kleineren Unternehmen umgesetzt werden.

Wenn Sie eine Beratung zum Themengebiet der Webentwicklung möchten oder sich eine kompetente Betreuung Ihrer Projekte wünschen, zögern Sie nicht sich bei der kreITiv zu melden. Wir informieren und unterstützen Sie gern.