10 Webflow-Anwendungen, die Sie kostenlos klonen können!

Und einige zusätzliche Möglichkeiten, um das Gefühl einer "App" auf Ihrer Website zu erreichen.

Seit 2010, als der Begriff "App" von der American Dialect Society zum Wort des Jahres gekürt wurde, sind Apps weit über ihre ursprüngliche Bestimmung als Produktivitätsassistent für E-Mail, Kontaktdatenbanken und Kalendernutzung hinausgewachsen. Heute ermöglichen sie es uns, Fotos zu machen, offline zu arbeiten, Spiele zu spielen, Fabrikautomation einzurichten, Geolocation zu nutzen, Push-Benachrichtigungen zu senden, auf Dateien zuzugreifen und vieles mehr. 

Die Welt liebt Apps. 

Wie aus dieser Anzeige aus den Anfängen von Webflow hervorgeht, wollte Webflow eine App-ähnliche Funktionalität sowie den typischen responsiven Website-Designer anbieten. Rund sieben Jahre später scheint es, als hätten sie ihre Pläne aufgrund technischer Zwänge geändert. 

Als Website-Baukasten leisten sie hervorragende Arbeit, und viele Designer und Entwickler würden gerne noch einen Schritt weiter gehen, nämlich mit einer speziellen mobilen App oder zumindest mit mehr mobilen Funktionen. Da die Absprungrate im Web nach 3 Sekunden bei etwa 40 % liegt, ist es sinnvoll, Ihre App auf einzelnen Geräten zu installieren, wo die Ablenkung minimal ist und Sie ein besseres Nutzererlebnis haben. 

‍

Webflow Desk-Anwendung

Neben einer speziellen mobilen App ist eine Webflow Desk-Anwendung ein weiterer Wunsch der Nutzergemeinschaft, bei der die Daten in der Cloud gespeichert werden und von jedem Gerät aus zugänglich sind. Die Möglichkeit, Änderungen an Ihrer Website von unterwegs oder von Ihrem Computer aus vornehmen zu können, wäre sehr vorteilhaft. Aber leider gibt es das nicht. Webflow-Wunschliste

Softwareentwicklung mit Webflow

Obwohl Designer und Entwickler nach dieser Art von Funktion im Webflow-Designer lechzen, steht sie nicht auf ihrer Roadmap. Ihr Standpunkt ist im Moment, dass eine vollständig responsive Website besser für SEO optimiert ist und eine eigene "App" nicht notwendig ist. 

Es gibt jedoch Optionen, wenn Sie diese App wirklich brauchen. Webflow selbst liefert dieses Video, "Prototyping a mobile app in Webflow" von Nelson Abalos, Jr. aus dem Jahr 2017, das hier geklont werden kann. Es zeigt Ihnen, wie Sie eine App entwerfen, indem Sie die mobile Hoch- und Querformatansicht im Designer verwenden, um ein "App"-Gefühl zu erreichen.

‍

Timothy Ricks Tutorial aus dem Jahr 2019 bietet eine aktuellere Version, wie man im Webflow-Designer eine mobile App-ähnliche Funktionalität erreichen kann. Sein klares, prägnantes und rasantes Tutorial führt Sie Schritt für Schritt durch den Prozess und lässt Sie die App im Handumdrehen erstellen.

Wenn Sie sich mit Code auskennen und den "praktischen" Ansatz mögen, haben wir einige ausgezeichnete Optionen. 

Verwandeln Sie Ihre Webflow-Website mit Node.js, einem Kommandozeilen-Tool und einer Terminal-App schnell in eine Desktop-App.

1. Node.js herunterladen(nodejs.org/)
2. Öffnen Sie ein Terminalprogramm wie Putty 
3. Installieren Sie mit Node.js in der Terminalanwendung "nativefier", indem Sie Folgendes eingeben: npm install -g nativefier, und drücken Sie dann die Eingabetaste.
4. Nachdem die Installation abgeschlossen ist, ändern Sie Ihr Verzeichnis in Desktop, damit es nicht in Ihr Stammverzeichnis geht, mit: cd desktop.
5. Führen Sie schließlich aus: nativefier "add the url for the site", und drücken Sie die Eingabetaste. 

Dadurch wird die Website auf Ihrem Desktop in einem App-Rahmen installiert, der genau wie eine App aussieht und sich auch so anfühlt. 

Progressive Webanwendungen

Einige clevere Entwickler haben mit Hilfe des Lighthouse-Tools in den Chrome-Entwicklungstools erfolgreich progressive Web-Apps(PWAs) mit Webflow erstellt. Wenn Ihr Browser diese Funktion unterstützt, können Sie eine JavaScript-Datei als Worker registrieren und dann eine Bibliothek wie Workbox verwenden, um sie für Sie einzurichten. Um Ihre neue App offline anzeigen zu können, müssen Sie die URLs zwischenspeichern und dann eine manifest.json-Datei mit Metadaten und Symbolen erstellen. Sobald Sie alle Aufgaben erledigt haben, sehen Sie eine PWA-Errungenschaft in Lighthouse und können die App auf jedes Gerät laden. 

So können Sie auch schnell Websites erstellen, die wie native Webanwendungen aussehen, sich anfühlen und funktionieren. Sie haben die Vorteile einer exzellenten Verteilung und können alles in einer einzigen Codebasis für Web, iOS und Android nutzen. Ein Bonuspunkt für PWAs ist, dass Sie die Einnahmen behalten können, anstatt sie mit dem App Store zu teilen.

Wie von mehreren Entwicklern im Webflow-Forum im Laufe der Jahre vorgeschlagen, können Sie Ihre Website auch in Webflow erstellen, sie responsiv machen und dann einen Drittanbieterdienst wie appypie verwenden, um Ihre Website wie eine App aussehen zu lassen, die dann an einen App-Store ausgeliefert werden kann.

Alternatively, from a July 2020 discussion in the Webflow Forum, yantiarifin figured out that she could mimic a native mobile app by adding these snippets of code to the <head> tag of her site:

‍

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”mobile-web-app-capable” content=”yes”>

‍

Wenn sie über eine "Verknüpfung" gestartet wird, zeigen sowohl Safari als auch Chrome die "App" in einem Browser ohne Rahmen an. Siehe diese Seite von Web.dev über die Erstellung einer PWA mit Offline-Streaming. 

Und wenn Sie sich ein wenig inspirieren lassen möchten, sehen Sie sich diese hervorragenden PWAs an, die Simicart in seinem Blogbeitrag 12 Best Examples of Progressive Web Applications in 2022 vorgestellt hat.

‍

Klonbare Anwendungen

Lassen Sie uns nun über Vorlagen sprechen. Webflow bietet eine große Auswahl an responsiven App-Webseitenvorlagen, die von der Community von Designern und Entwicklern erstellt wurden und leicht geklont und an Ihre Bedürfnisse angepasst werden können. Hier sind 7, die wir lieben:

1. Die Budgetierungs-App von Alex Iglesias Piñol hat eine schöne Oberfläche. Er hat sie in Webflow entworfen und mit Svelte codiert, um das Gefühl einer echten App zu vermitteln. Mit dieser App können Sie Ihre Einnahmen und Ausgaben leicht im Auge behalten. Sie haben die Möglichkeit, Posten hinzuzufügen oder abzuziehen, wenn sich Ihre Situation ändert.

2. Die Mitgliedschaftsvorlage Nr. 1 des Memberstack-Teams ist der ideale Weg, um einen großartigen ersten Eindruck für Ihre Mitgliederseite zu hinterlassen. Die subtilen Animationen und die ansprechende Oberfläche sind ein wahrer Augenschmaus. In dieser schön gestalteten App finden Sie alles, was Sie brauchen. Sobald Sie Ihr Konto bei Memberstack und Stripe eingerichtet haben, können Sie diese Vorlage klonen und in nur wenigen Minuten einsatzbereit sein.

3. Food App von Linsey Peterson ist eine schöne kleine 3-Seiten-Marketing-Website-App-Vorlage für ein Restaurant, das wirklich schöne Illustrationen, Design und Parallax-Scrolling-Effekt hat. Das helle und moderne Design wirkt lebendig und verspielt.

4. Die App für Pflegekräfte von Shanima Parker ist ein Ort, an dem Pflegekräfte Unterstützung finden können. Mit Bildungsressourcen und Stimmungsprotokollierung erhalten Sie Ratschläge und Vorschläge zur Stressreduzierung und können gleichzeitig mit der Familie in Kontakt bleiben.

5. Landing Page for App von Daria Lisovtsova ist eine klonbare Landing Page, die Ihnen alles bietet, was Sie brauchen, um eine schöne Web- und Mobil-App zu starten. Sie wurde in Webflow für ein modernes und reaktionsfähiges Design erstellt und verfügt über ein abwechselndes Side-by-Side-Layout, das Sie leicht mit Ihrem Produkt austauschen können, um in wenigen Minuten eine ansprechende Seite zu erstellen.

‍

6. Die Habit Building App von Right Hemisphere hilft Ihnen, inneren Frieden zu finden und gute Gewohnheiten zu entwickeln. Mit makellosen Animationen und Bewegungsdesign, gepaart mit einer schönen Farbpalette, bietet diese Vorlage eine schöne Benutzererfahrung. Passen Sie die App mit den Gewohnheiten an, die Sie aufbauen möchten, und beginnen Sie noch heute mit Ihrem "neuen Ich".

7. Health Care App von Eloy Be ist eine Landing Page-Vorlage für ein medizinisches Online-Team oder eine Arztpraxis. Die App hat ein angenehmes Gefühl mit subtilen Animationen, kunstvollen Illustrationen und einer ansprechenden Farbpalette. Sie können sie leicht mit den Informationen Ihres Teams anpassen und schnell ein neues medizinisches Portal erstellen.

Wenn Sie etwas brauchen, um Ihre Kreativität anzuregen, sehen Sie sich diese 4 in Webflow erstellten Anwendungen an. Sie sind nicht kopierbar, aber vielleicht inspirieren sie Sie...

1. Die Prequel-App von Fiwa ist eine kreative Landing Page für die Bewerbung von Produkten mit Animationen, Videos und einer ansprechenden Oberfläche. Sie zeigt zwei Hauptproduktseiten, ein Anmeldeformular und eine Seite mit den Allgemeinen Geschäftsbedingungen. Sie wurde mit Figma, Webflow und etwas benutzerdefiniertem JavaScript erstellt.

2. Apps - Mobile App Webflow Template | BRIX Templates - Webflow von BRIX Templates ist eine To-do-App mit einem modernen und makellosen Design, das sicher beeindrucken wird. Es hat alles, was Sie brauchen, um loszulegen, einschließlich zwei Landing Pages, zwei Preisseiten, eine Blog-Seite, eine Kontakt-Seite, über uns, Karrieren, Job-Posts, Bewertungen und mehrere Utility-Seiten. Hervorragend geeignet für Teamzusammenarbeit, Werbekampagnen und vieles mehr. 

3. Allegory-staging von Onur Gungor ist eine moderne Fahr-App, die gute Versicherungsangebote für sichere Fahrer und Mitfahrer bietet. Mit dieser App können Sie Familienmitglieder zu Ihrem Konto hinzufügen, Ihre Fahrleistung verfolgen und in Notfällen Ihren Standort mitteilen. Außerdem enthält sie ein reales Fahrspiel, mit dem Sie Ihre Fahrkünste verbessern und Kosten sparen können.

4. Poz Journal von Kish Parikh ist eine persönliche, achtsame Tagebuch-App mit einer schönen Oberfläche. Diese App hilft Ihnen, eine tägliche Tagebuchgewohnheit mit Aufforderungen und zu erreichenden Zielen aufzubauen, und gibt Ihnen die Freiheit, das Aussehen Ihres Tagebuchs anzupassen. 

Die Entwicklung eines Produkts oder die Aufnahme einer Dienstleistung ist aufregend und entmutigend zugleich. Je mehr Tools und Ressourcen zur Verfügung stehen, um schnell loszulegen, desto mehr kann der Unterschied zwischen Misserfolg und Erfolg ausmachen. Hier bei Memberstack geben wir Ihnen gerne so viele Optionen wie möglich, um Sie dorthin zu bringen, wo Sie hinwollen, und wir unterstützen gerne die Gemeinschaft der Entwickler, die ihre Designs anbieten, um Ihnen zu helfen. 

Webflow ist großartig! Obwohl Webflow noch keine mobile App-Funktionalität unterstützt, können Sie mit ein wenig Einfallsreichtum und der Hilfe der Community die Website Ihrer Träume realisieren. Wir haben Ihnen ein paar Ideen gegeben, wie Sie Ihre responsive Webflow-Site in eine App verwandeln können, und Sie können unser Showcase mit Webflow-Vorlagen besuchen und "App" eingeben, um mehr zu sehen. Sie müssen sich nicht allein abmühen, denn Hilfe ist nur ein paar Klicks entfernt.

Viel Glück mit deiner App. Ich kann es kaum erwarten zu sehen, was du machst!

Hier finden Sie weitere in Webflow erstellte Anwendungen:

Prequel 

Anwendungen - Mobile App Webflow-Vorlage | BRIX-Vorlagen - Webflow

Allegory App | Sicher fahren. Verbunden bleiben. 

Poz Journal - Webflow 

Sollten diese Vorlagen hinzugefügt werden, die nur in Webflow angepasst und dann mit der Adapter APP konvertiert werden müssen?

Mote - Webflow zu Shopify Vorlage 

Noorde - Webflow zu Ghost Vorlage

Foodo | Webflow zu Shopify 

Joblio - Webflow zu WordPress

Multy | Webflow zu WordPress 

Und irgendwie habe ich das Gefühl, dass ich diesen Beitrag von Memberstack? hätte hinzufügen sollen.

Mitgliedschaft Vorlage #1

https://www.youtube.com/watch?v=Nwz1R8VdSX4

Jede Webflow-Website in eine Desktop-Anwendung umwandeln