Sie sagen es, wir coden es!
Was sind Progressive Web Apps (im Späteren auch als PWA bezeichnet) eigentlich überhaupt und wieso hört man auf einmal überall von ihnen? Damit beschäftigen wir uns heute und erklären, warum sie genau für deine Firma das Richtige sein könnten.
PWA, der Untergang aller Apps?
PWA sind im Einfachen Websites, die die Eigenschaften einer nativen App besitzen aber über Internetbrowser laufen. Genauer haben wir dies bereits in einem anderen Blogeintrag erklärt, den Sie am besten vorab lesen.
Das relativ neue Modell, bei dem aus Website und App ein Hybrid geschaffen wird, gewinnt aktuell immer stärker an Beliebtheit und wird vermehrt von Firmen eingesetzt. IT-Analysten von Gartner prognostizieren sogar, dass bis 2020 die Hälfte aller mobilen Apps durch PWA ersetzt werden. Ob sich diese Vorhersage bestätigen wird, gilt es noch zu beobachten.
Das Bedürfnis nach diesem Websitemodell rührt von einer gewissen App-Müdigkeit her – die Leute wollen nicht für jeden Anlass eine App herunterladen, die sie dann wahrscheinlich nur einmal nutzen werden und danach vergessen. PWA geben dem Nutzer die User-Experience einer nativen App aber nehmen ihm den Umweg über den App Store. Von großem Vorteil ist es, dass man diese Websites auf seinem Desktop oder Homescreen hinterlegen kann und über die im Hintergrund agierenden Skript Dateien, namens ‘Service Worker’, Inhalte cachen kann. Dadurch bekommt der Nutzer die gleiche Erfahrung wie bei einer App, ohne ihn durch die Speicherbelastung und den Download-Umweg einzuschränken.
Doch noch sind sie nicht ganz bei uns angekommen: es gibt beispielsweise keinen Ort, an dem man eine Sammlung aller verfügbaren Seiten dieser Art findet und auf sie zugreifen kann wie bei einem App Store. Zwar laufen sie mittlerweile über alle Browser (Safari und Opera sind kürzlich dazugekommen) aber zum Beispiel bei Safari werden Push-Notifications noch nicht erlaubt. Insgesamt ist PWA momentan der Zugriff auf Kontakte, Kalender und Telefonie-Funktionen verwehrt.
Was Google sich von ihnen erhofft
Immer mehr hört man Google und Microsoft „Progressive Web Apps!“ aus dem Walde schreien. Besonders Google fördert sie – natürlich, denn alles was über das Worldwide Web läuft, bringt ihnen etwas in Bezug auf Google Analytics und Werbung. Noch dazu hilft es ihnen, da ihre Chromebooks häufig in der Web-Entwicklung ignoriert werden und durch die PWA laufen die Seiten auf allen Plattformen automatisch.
Warum sie Programmierern das Leben erleichtern
Auch Coder freuen sich über die wachsende Beliebtheit der Progressive Web Apps. Sie sind nämlich deutlich zeitsparender in der Programmierung, wenn man sie mit nativen Apps vergleicht. Denn eine App muss erst zur Produktversion kompiliert, dann der Private Key erstellt und die App signiert werden und kann dann erst Live gehen. Bei den PWA hat man hingegen den Vorteil, dass nur die Web-App gebaut und dann auf den Server hochgeladen werden muss. Noch dazu spart man sich bei Letzterem die separate Programmierung für Android und iOS und es ist insgesamt weniger fehleranfällig.
Das Win-Win für dein Unternehmen
Mit PWA sparen Sie nicht nur einiges an Entwicklungs- und Erhaltungskosten, Statistiken belegen sogar, dass ihre Push-Notifications häufiger angeklickt werden, die Seiten interaktiver genutzt werden und dass die Konversionen steigen. Am besten eignen sich die Web-Apps wenn deine Dienstleistung größtenteils von Gelegenheitsnutzern verwendet wird. Dann greift der User aufgrund der angenehmen UX lieber auf ihr Angebot zurück, ohne eine schnell in Vergessenheit geratene App auf dem Gerät installieren zu müssen. Obwohl der Bekanntheitsgrad des Ganzen aktuell noch nicht explodiert ist und man nicht direkt umsteigen muss, lohnt es sich dennoch bereits, eine PWA für den Online-Auftritt deines Unternehmens in Erwägung zu ziehen.
Wir von we {code} it stehen dir gerne bei der Beratung zur Seite und helfen dir, deine Eigene PWA zu konzipieren und umzusetzen.
Hast du noch Fragen zu der Programmierung und den Vor- und Nachteilen von Progressive Web Apps? Melde dich gerne über unser Kontaktformular.
Bist du noch in den Anfängen deiner Coder-Erfahrung und willst in ein gängiges sowie praktisches Web-Entwicklungstool reinschnuppern? Oder möchtest du einfach aus Interesse verstehen, was programmiertechnisch geschieht bei einer Webentwicklung? Willst du aus Ehrgeiz ein eigenes Web-Projekt selbstständig auf die Beine stellen? Dann kann diese erste Übersicht zu Bootstrap hilfreich für dich sein.
Zu allererstmal…
Was ist Bootstrap?
Es handelt sich hierbei um ein Framework, das von Twitter entwickelt wurde und Open Source ist, das heißt für jeden frei zugänglich und verwendbar. Es verbindet HTML, CSS und JavaScript miteinander und hält zahlreiche CSS und JavaScript basierte Gestaltungsvorlagen bereit. Mit diesen Grundlagen ermöglicht dir Bootstrap designtechnisch einiges aus deinem Webprojekt rauszuholen und kann mit zahlreichen Oberflächengestaltungselementen dienen.
Nutzerfreundlichkeit
Zudem ist es responsive. Das bedeutet, es passt sich der Bildschirmgröße an und präsentiert dir die Oberfläche der Website deinem Bildschirm entsprechend – egal ob du die Seite gerade auf deinem Computerbildschirm, auf deinem Smartphone oder auf einem Tablet anschaust, es wird immer passen und du musst nicht wie bei anderen Websites links und rechts rumscrollen bis du alles erfasst hast. Responsive Designs steigern die Nutzerfreundlichkeit ungemein und es gibt eigentlich nichts Fataleres als eine Website, die nur für einen Computerbildschirm gedacht ist. Damit verscheucht man jegliche User, die durch andere Endgeräte auf die Website gelangen und für diese die Inhalte der Website nur halb so anschaulich angezeigt werden. Somit ist Bootstrap für mobilfreundliche Websites geeignet.
Für jeden was dabei
Das Schöne an Bootstrap ist, dass man eine Auswahl an verschiedensten Styling Elementen hat, die man nach seinem Geschmack wählen kann. Die verschiedenen Themes, Navigationsbars, Covers und andere Gestaltungselemente bieten dir die Möglichkeit das Aussehen an deine Wünsche und Anforderungen anzupassen. Hier ein paar Beispiele:
Durch die vorgefertigt gestalteten Elemente spart man sich die viele Zeit alles selbst zu entwickeln, und hat um einiges Schneller das komplette Layout einer Homepage erstellt.
Unter https://getbootstrap.com/ kannst du ganz unkompliziert starten und kriegst alle nötigen Codes zum Einbinden und Loslegen.
Dort lädst du dir alle CSS, JavaScript-Dateien herunter – einmal in minimierter Form und einmal in der normalen, lesbaren Variante. Zur Info: Diese erkennst du jeweils an der Endung bootstrap.min.css für den minimierten Code und an bootstrap.css für die lesbare Variante.
Nicht zu vergessen ist die JavaScript Bibliothek jQuery, die du für Bootstrap brauchst. Hiermit hast du alle wesentlichen DOM-, Ereignis-, Effekt- und Ajax-Funktionen. Die müsstest du dir einzeln auf jQuery.com runterladen.
Wie beginne ich ein Projekt?
Erst einmal solltest du ein einfaches HTML-Dokument erstellen mit einem Beispielsatz deiner Wahl (oder wie hier mit dem klassichen „Hallo, Welt“ Satz.)
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>
<h3>Hallo, Welt! <h3>
</body>
</html>
Dir fällt sicherlich auf, dass hier im Head ein sogenannter Viewport gesetzt ist. Dieser Tag sorgt dafür, dass andere mit mobilen Endgeräten deine Website ebenso sehen. Um diese soeben angepriesene Funktionalität jedoch auch benutzen zu können müsst ihr die bootstrap-responsive.css-Datei einbinden. Die JS-Dateien bindest du zum Schluss ein, damit optimierst du die Ladezeit.
Beachte
Folgenden Code musst du in deinen Head setzen, um Bootstrap vollständig zu integrieren und dementsprechend alle Vorteile des Frameworks nutzen zu können:
|
<link rel=”stylesheet” type=”text/css”href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” />
<scripttype=”text/javascript”type=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”></script> |
Auf der Website kannst du nun alle Funktionen wie die Beispiele von oben einbinden. Alle Codes für Funktionen wie z.B. Buttons und vieles mehr sind auf der bootstrap-Homepage zu finden.
Da es eine solche Vielzahl an verschiedenen Frontend Frameworks gibt, kann sich die Wahl des richtigen Frameworks schwierig gestalten. Wie viele andere Entwickler auch, neigt man oftmals dazu die beliebten und bewährten Optionen wie Bootstrap und Foundation zu nehmen. Dann aber wieder kann ein weniger weit verbreitetes Framework effektiver auf individuelle Bedürfnisse angepasst werden. Daher lohnt es sich, sich auf den neuesten Stand zu bringen und sich über verschiedene neue Frameworks und ihren Nutzen zu informieren. Über neuere Alternativen klären wir euch im zweiten Teil auf. In diesem Beitrag konzentrieren wir uns erst einmal auf die Faktoren, die ihr zu einer Ermittlung des richtigen Frameworks beachten müsst.
Aspekte, die man bei der Wahl des Frameworks beachten muss
- Dein Skill-Level: Du solltest dir immer darüber im Klaren sein, was du kannst und was nicht. Wenn du ein Anfänger bist, dann wäre es durchaus sinnvoller ein robusteres Framework wie Bootstrap zu wählen, da es schon vorausgestattet ist mit mehreren sinnvollen Widgets, die einem nicht allzu fordernde Coding Kenntnisse abverlangen. Bist du jedoch bereits geübter im Coden, solltest du Frameworks in Betracht ziehen, die mehr individuelle Anpassungen zulassen.
- Responsive Design: Jede Website, die man entwickelt, sollte ordnungsgemäß über alle Geräte zugänglich sein, da immer mehr Menschen über mobile Geräte auf das Internet zugreifen. Die WELT berichtete erst kürzlich über eine Studie von Adobe Digital Insights, die ausgewertet hat, dass Webseiten fast nur noch über Smartphones angesehen werden. An zweiter Stelle steht das Tablet und die heute schon altmodische Desktop-Ansicht über PCs bilden damit das Schlusslicht. Um die Kunden also anzusprechen, ist ein responsive Design also unabdingbar.
Darüber hinaus hat die Studie ergeben, dass die allgemeine App-Nutzung und Neuinstallationen von Apps im weltweiten Trend stagniert, aber Deutschland hierbei die große Ausnahme bildet. Somit bilden wir einen großen Inlands-Markt an App-Nutzung ab. Deshalb: Bleib bei Frontend Frameworks, die reaktionsfähige Web-Designs unterstützen. In dieser Hinsicht solltest du deine Experimentierfreudigkeit nicht ausleben und dich nach den Marktanalysen richten.
- CSS Preprocessors: Solltest du diese benutzen und den ein oder anderen besonders nutzen, stelle im Voraus sicher, dass dein Framework diese unterstützt.
Alles zusammenfassend sollte das richtige Frontend-Framework das Webseiten-Design vereinfachen und optimieren und den Entwicklungsprozess beschleunigen. Dabei sollte bei der flexiblen Nutzung unterschiedlicher Funktionen keine Abstriche gemacht werden, damit immer noch ein einzigartiges und qualitatives Endergebnis rauskommt.
Geschäftsmodell Digitalisierung, mit Digitalisierung zum Erfolg, digitalisieren Sie Ihren Arbeitsalltag…Überall sind Slogans wie diese präsent, doch scheinen sie nicht allzu greifbar zu sein.
Was genau soll man sich darunter vorstellen?
Einen äußerst interessanten Einblick in den Nutzen der Digitalisierung gibt Vodafone in ihrem Artikel „Wie digital sind deutsche Unternehmen?“ Dort findet man einen sogenannten „Ready Business Check“, indem man einen Test durchlaufen kann, der einem sagt, wie bereit die Testperson für die Digitalisierung des eigenen Unternehmens ist.
Der Sinn und Zweck von Digitalisierung als Geschäftsmodell soll in diesem Beitrag näher erläutert werden:
In einer Welt, die sich durch Globalisierung, Digitalisierung, Öffentlichkeit und pulsierendem Pluralismus auszeichnet, kommt man als Unternehmer nicht umhin mitzuziehen.
Doch was gehört zu der Digitalisierung von Geschäftsmodellen dazu?
Zum einen ist es heutzutage unabdingbar seine mediale Präsenz stark aufzustellen. Doch darüber hinaus kann es sehr dienlich werden die eigenen Arbeitsprozesse für sich auf der einen Seite sowie für den Endverbraucher auf der anderen so simpel und schnell wie möglich zu gestalten. Das kann beispielsweise realisiert werden in Form von einer individuellen Datenbank, einem Office-AddIn oder elegant eingeführte, statistische Datenabfragen. Innovative Software-Lösungen steigern die Effizienz. Nicht auf der Strecke bleiben, sondern mit der Zeit gehen. Denn diese eröffnet einem heutzutage durchaus Tore, von denen man noch bis vor ein paar Jahren nicht zu träumen gewagt hätte. Vielleicht ist dem ein oder anderen auch nicht bewusst, was an Software-Lösungen umsetzbar ist. Hierbei wäre eine umfassende IT-Beratung oder ein Brainstorming an neueren Konzepten zielführend.
Welchen Vorteil bekommt das Unternehmen dadurch?
Durch den Innovationsansatz der Digitalisierung können Unternehmen ihre Kundenanforderungen schneller und treffender bedienen. Dadurch werden sie wettbewerbsfähig und stark am Markt. Das Tagesgeschäft, ganz gleich in welchem Arbeitssektor man sich befindet, kann heutzutage durch Digitalisierung erheblich zeitsparender und zielführender gestaltet werden.
Besonders Start-Ups und Mittelständler können im Hinblick auf Wachstum profitieren, aber auch Großkonzerne oder beispielsweise Krankenhäuser tun sich einen Gefallen damit ihr rastloses Treiben und ihre unablässige Arbeit mit den richtigen Digitalisierungsschritten zu optimieren. Luft nach oben gibt es schließlich immer.
Als Start-Up im Bereich Softwareentwicklung optimiert we {code} it den Arbeitsalltags eben Jener, die die Grenzen nach oben ausweiten wollen. Durch die Optimierung und Automatisierung ihrer täglichen Prozesse mit dem PC, kann we {code} it durch Webapps oder gänzlich individuell zugeschnittene Softwareprogramme, seien es personalisierte Webapps oder Makros, AddIns, das Tagesgeschäft einer jeden Arbeitskraft erleichtern.
Nicht nur für mehr Ergebnisse, sondern auch für mehr Zeit.
Gerne kann man so einen Test wie er auf dem Vodafone Artikel zu finden ist auch in Form eines persönlichen Beratungsgesprächs bei uns durchlaufen, um den momentanen Stand Ihres Unternehmens zu analysieren und zu sehen, welche Alltagsprozesse oder Webseiten, -apps oder Sonstiges optimiert werden können.
we {code} it hat ein offenes Ohr und möchte eure Fantasien an Möglichkeiten in die Tat umsetzen!
Heute wollen wir euch etwas mehr Einblick in unsere Projektarbeiten geben, die wir bereits erfolgreich abschließen konnten.
Da wir uns auf Software-Dienstleistungen jeglicher Art spezialisieren, konnten wir verschiedene Bereiche mit unseren Kunden abdecken und Ihnen das Lächeln ins Gesicht zaubern, das wir nach einem abgeschlossenen Projekt sehen wollen.
Im Bereich Programmierung durften wir für Fayo – Faszien Yoga, Freiskript und dem Ausstellungszentrum Braak behilflich sein und alles coden und digitalisieren, um die Webseiten zum Laufen zu bringen. Zudem haben wir die Prozesse der Webseitenbearbeitung des Unternehmens Ausstellungszentrum Braak maßgeblich optimiert. Hier konnten wir unserem Motto, jedem Unternehmen ihren Arbeitsalltag durch Digitalisierung zu erleichtern, voll und ganz nachkommen.
Eines unserer aktuellsten Projekte im Bereich App-Entwicklung umfasst die kürzlich gelaunchte Swapper-App für die Swapper GmbH.
Für unseren Kunden Gundlach Nutzfahrzeuge GmbH modernisierten wir seine Web-Präsenz und brachten diese somit auf den neuesten Stand. Weitere kreative Updates Richtung Konzept, Gestaltung und schlussendlicher Digitalisierung der Ideen folgen noch.
Zusammenfassend können wir somit erste Referenzen für Webdesign und -development, Programmierung, Software-Optimierung und App-Entwicklung verbuchen, die wir hier mit euch teilen. Parallel laufen eine Vielzahl von Projekten, über die wir noch Verschwiegenheit wahren müssen, doch wir freuen uns jetzt schon sehr auf die spannenden Ergebnisse, die wir liefern und mitgestalten!
