Wie komme ich an eine mobile Website? 4 Möglichkeiten und welche für dich die beste ist!
Wir fassen also zusammen: Es muss eine Website für Mobilgeräte her.
Du bist schon komplett eingelesen und willst sofort mit dem Bau deiner mobilen Website starten? Dann findest du hier die passenden Abkürzungen:
Mehr zum Sonderfall Progressive Web-App gibt es als kleines Schmankerl von mir obendrauf.
Für alle anderen starten wir mit den Grundlagen!
1. Responsive Design
Die erste Methode ist das Responsive Design. Dieses wird besonders häufig für den Bau mobiler Websites eingesetzt. Die Basis deiner responsive-Umsetzung ist das CSS deiner Website.
Auch Google ist Fan dieser Technologie und legt sie Webmaster ans Herz. Ich zitiere:
Google empfiehlt responsives Webdesign, weil dieser Ansatz am einfachsten zu implementieren und zu verwalten ist.
Was ist Responsive Design?
Beim Responsive Design passt du deinen HTML-Code und dein CSS so an, dass die Bildschirmgröße des Endgeräts erkannt und die Abbildung deiner Website automatisch angeglichen wird.
Kurz: Aus großen Bildern werden kleine, manche Elemente werden ausgeblendet oder eingeklappt. Zu kleine Schriften werden vergrößert, usw.
Das funktioniert über relative Werte in %-Angaben. Klingt abstrakt? Kein Problem, hier ein Beispiel:
Du hast eine Webseite konzipiert, auf der ein Bild liegt. Im Responsive Design ist festgelegt: Eine Bildschirmbreite von 1024 Breite ist ein kleiner Desktop-Bildschirm. Hier wird das Bild in 100 % Größe ausgespielt. Werden stattdessen nur z. B. 480 Pixel erkannt, verkleinert dein Design das Bild beispielsweise auf 50 % seiner ursprünglichen Größe.
Responsive Elemente werden in relativen Angaben an das Display angepasst
Der grundlegende Aufbau deiner Page bleibt dabei – mehr oder weniger – erhalten. Die größte Änderung besteht darin, dass Elemente, die zuvor nebeneinander angezeigt wurden. Für kleine Displays übereinander gestapelt werden.
Für welche Websites ist Responsive Design geeignet?
Responsive-Lösungen eignen sich vor allem für kleinere, nicht ganz so umfangreiche Seiten. Dazu zählen beispielsweise Blogs, Portfolios oder kleinere Unternehmensseiten.
Logisch, denn je weniger Seiten und Inhalte du hast, desto weniger Elemente können in der responsiven Anzeige falsch dargestellt werden. Desto weniger musst du per Hand fixen.
In der “freien Wildbahn” wird das System aber oft wegen der geringeren Kosten trotzdem auch für komplexere Projekte eingesetzt. Hier ist es wichtig, dass du dich laufend mit deiner Seite und einer fehlerfreien Darstellung deiner Inhalte beschäftigst.
Wie baue ich eine Website im Responsive Design?
Generell kannst du deine responsive Seite auf drei Wege erstellen.
Szenario 1: Hast du die Page von Webdesigner:innen erstellen lassen? Dann kontaktiere diese und bitte um eine responsive Umsetzung. Die Profis werden wissen, was du meinst.
Szenario 2: Selbst coden. Für diesen Step musst du allerdings HTML und CSS beherrschen. Hier heißt die Lösung, selbst fit auf dem Gebiet sein oder einen Webmaster zur Hand haben.
Einer der beiden Punkte trifft zu? Großartig! Dann noch die Frage: Wie viel Vorerfahrung hast du bzw. dein Webmaster mit responsivem Design?
Wenn du wirklich einen kompletten Crash-Kurs brauchst, dann empfehle ich den Leitfaden “Learn Responsive Design” der Google Developer.
Du bist auf dem Gebiet Responsive Design noch nicht fit? Dann hilft dir der Google-Leitfaden
Screenshot: trusted.de
Quelle: web.dev
Du brauchst nur ein bisschen Inspirationen? Dann habe ich hier für dich einen wertvollen Artikel von IONOS für dich, der dir smarte Tipps zur technischen Umsetzung von Responsive Designs liefert.
Zum selbst Coden musst du dich gut mit HTML und CSS auskennen
Screenshot: trusted.de
Quelle: ionos.de
Auch nützlich sind Code-Bibliotheken wie zum Beispiel GitHub oder W3 Schools. Hier findest du nützliche Code-Snippets, die du in dem Coding-Tool deiner Wahl im HTML deiner Seite einfügst.
Tipp: Ich persönlich nutze zum Coden gern Visual Studio Code, da hier alles übersichtlich dargestellt und auf die eigenen Bedürfnisse angepasst werden kann.
Szenario Nummer 3: Deine Webseite per Homepage-Baukasten (bzw. per CMS mit responsiven Themes wie WordPress) erstellen. Wie das funktioniert, habe ich dir am Beispiel von Jimdo und Webador weiter unten mal skizziert.
Egal für welchen Weg du dich entscheidest, im Kern landest du aber bei allen diesen Methoden bei bestimmten “Bausteinen”, mit denen du responsive Seiten umsetzt. Ein paar der wichtigsten findest du hier (damit du wenigstens mal davon gehört hast):
- Fluid Grids sind Raster, auf denen das Design einer Website aufbaut. Elemente werden dabei an vertikalen und horizontalen Linien ausgerichtet. “Fluid” beschreibt die Fähigkeit des Grids, sich über prozentuale Angaben an die Größe des Displays anzupassen.
- Flexible Bilder (auch responsive Images) können je nach Gerät einfach auf die passende Größe skaliert werden. Dabei gibt es sehr unterschiedliche Methoden, um Bildern responsives Verhalten “beizubringen”. Speichere das Bild z. B. in verschiedenen Auflösungen oder nutze spezielle CSS-Codes.
- CSS-Media-Queries sind dazu da, um die Maße des Bildschirms beim User abzufragen und Inhalte entsprechend anzuzeigen. Auf dieser Basis definieren die Queries, wie Inhalte dargestellt werden.
Info: Die Media-Querries erfassen unterschiedliche Daten. Das sind etwa die Maße des Browserfensters, die Größe des Endgeräts, die Bildschirmauflösung, die Geräte-Orientierung (Hoch- oder Querformat) und die genutzten Eingabe-Optionen (Tastatur, Maus, Touch, Spracheingabe, etc.)
Alle diese Punkte lassen sich über den HTML-Code bzw. das CSS deiner Website anpassen.
Vor- und Nachteile von Responsive Design?
Der größte Vorteil bei dieser Methode ist, dass du deine Webseite nur einmal bauen musst. Im Vergleich zum Bau einer zweiten, separaten Mobilseite, spart dir das einiges an Zeit und auch Kosten.
Außerdem bist du mit einem responsiven Design gut auf neue Endgeräte mit ungewöhnlichen Display-Größen vorbereitet. Looking at you, Apple!
Wenn du deine Seite responsiv baust, funktioniert sie auch mit künftigen Display-Größen
Screenshot: trusted.de
Quelle: squarespace.com
Einer der größten Nachteile ist hingegen, dass du lange für die Mobilanpassung brauchst, wenn du eine große und komplexe Seite betreibst. Hier ist einfach die Chance sehr groß, dass irgendwo Darstellungsfehler auftreten, die du manuell beseitigen musst.
Auch gibt es Probleme, wenn der Browser deiner User veraltet ist. Diese Browser-Versionen können die responsiven Befehle teilweise nicht auslesen und stellen deine mobile Seite nicht korrekt dar.
Das ist zwar nicht dein Fehler; den Schaden hast du aber trotzdem.
Info: Browser, die auf den Gebrauch responsiver Seiten ausgelegt sind, umfassen die aktuellen Versionen von Chrome, Firefox, Edge, Opera und Safari.
Anleitung: So baust du eine responsive Website (am Beispiel Jimdo und Webador)
Wenn du deine Webseite selbst responsiv machen möchtest, ist ein Homepage-Baukasten die schnellste, günstigste und einfachste Lösung. Schauen wir uns die mal genauer an.
Du hast hier eine große Auswahl vor der Nase, denn so gut wie jeder moderne Website-Baukasten – zumindest alle, die ich bislang in der Hand hatte – bietet dir eine responsive Website.
Bis auf Wix, das seine Designs adaptiv gestaltet. Aber ich greife vor.
Beachte, dass es trotzdem nicht komplett egal ist, welchen Anbieter du für deine mobile Seite wählst. Wie krass die Unterschiede ausfallen können, zeige ich dir am Beispiel Jimdo und Webador.
Viele Baukästen bieten responsive Website-Designs, die Editoren unterscheiden sich aber stark
Screenshot: trusted.de
Quelle: jimdo.com
Beginnen wir mit Jimdo. Hier hast du beim Start die Möglichkeit, dein Webdesign mit Optionen für eigenen Code zu gestalten.
Nehmen wir mal an, du bist kein Master-Coder bzw. eine Master-Coderin. Wir nutzen also die Option “ohne Programmierer”.
Stellen wir uns so schnell und einfach wie möglich eine mobile Seite zusammen
Screenshot: trusted.de
Quelle: jimdo.com
Anschließend richten wir die Page ein, mit Projekttitel und einigen Angaben. Das ist in ein paar Minuten erledigt.
Folge den einfachen Schritt-für-Schritt-Anleitungen
Screenshot: trusted.de
Quelle: jimdo.com
Nach einigen Klicks und Angaben zum gewünschten Design sind wir auch schon im Editor. Und eigentlich auch am Ende, denn damit ist deine mobile Seite quasi auch schon fertig.
Jimdo generiert nämlich eine komplett fertige, responsive Seite, die du nur noch mit wenigen Klicks auf deine Ansprüche anpasst.
Außerdem kannst du nun oben rechts auf die Vorschau klicken und die KI-generierte Seite auch in der Mobilansicht bewundern.
Info: In der Creator-Version von Jimdo stehen dir weitere Vorschau-Ansichten wie Tablet und Querformat zur Verfügung.
Wechsle in der Vorschau zwischen der Desktop-Ansicht …
Screenshot: trusted.de
Quelle: jimdo.com
Jetzt kommt allerdings der Moment, der die meisten Baukästen unterscheidet: Du kannst die mobile Version der Website nicht direkt bearbeiten.
Bei Jimdo ist es so, dass du immer die Desktop-Variante verändern musst, um deine mobile Seite anzupassen. Die mobile Variante ist in den meisten Fällen sehr gut und schick anzusehen.
Tipp: Die Jimdo-Variante würde ich dir empfehlen, wenn du besonders schnell eine einfache mobile Seite bauen willst. Getreu dem Motto “Dafür tut es das schon”.
Aber vielleicht willst du doch mehr Kontrolle über das Design deiner mobilen Version? In diesem Fall ist ein Anbieter wie Webador eher was für dich.
Auch hier startest du mit einem einfachen Einrichtungsprozess, dem du Schritt für Schritt folgst. Dazu gehört etwa die Vergabe eines Seitentitels und einer Designvorlage.
Richte deine Seite flott mit Webador ein
Screenshot: trusted.de
Quelle: webador.de
Wie auch bei Jimdo erstellt Webador dann für dich per KI einen Website-Prototypen, der für dich mit Bildern und Textinhalten gefüllt wird. Den passt du nun nach deinen Vorstellungen an. Aber eben nicht zwingend in der Desktop-Version!
Webador erstellt für dich via KI eine Seite mit Platzhalter-Inhalten
Screenshot: trusted.de
Quelle: webador.de
Klickst du oben links auf die Mobilansicht, wechselst du nicht nur in eine starre Vorschau wie bei Jimdo, sondern kannst hier direkt deine Website für Mobilgeräte getreu dem Ansatz “Mobile First” zusammenbauen.
Vergiss dabei nicht: Responsive! Alles, was du in der Mobilversion baust, wird für den Desktop übernommen.
Anders als bei Jimdo kannst du hier also deine Texte, Abschnitte, Bilder und Co. direkt für deine mobile Version optimieren. Dazu würde ich dir auch unbedingt raten, denn so stellst du sicher, dass deine mobile Page schick und gut zu bedienen ist.
Zusätzlich warten angepasste Tools auf dich, wie die mobile Leiste. Hiermit blendest du wichtige Zusatzinformationen ein.
Webador lässt dich deine Seite im wörtlichen Sinne “mobile first” bauen, wenn du das willst
Screenshot: trusted.de
Quelle: webador.de
Du siehst also, was die Mobiloptimierung für responsive Seiten betrifft, ist Baukasten nicht gleich Baukasten.
Aber soviel erstmal zum Responsive Design. Wie sieht das ganze bei der Alternative adaptive Design aus?
2. Adaptive Design
Die zweite Methode ist das adaptive Design (manchmal auch “dynamic serving” genannt). Es gilt als die komplexere Version eines Responsive Designs, kann aber für manche Anwendungsfälle die bessere Lösung sein.
Was ist adaptive Design?
Beim adaptive Design hinterlegt du auf deinem Webserver nicht nur eine, sondern zwei oder mehr Versionen deiner Website. Wenn dein User auf deinen Webserver zugreift, erkennt der Server die Geräteinformationen (vor allem die Bildschirmdimensionen) und spielt die passende Version aus.
Preisfrage: Woher weiß der Server, ab wann welche Version ausgespielt wird?
Hier wird es “adaptiv”: Du legst nämlich einen Maximalwert für die Bildschirmbreite fest, der als Breakpoint bezeichnet wird. Ab einem bestimmten Breakpoint, wird eine entsprechende Webseite ausgespielt.
Info: Dein CSS und/oder dein Browser-Agent kann die Auflösung bzw. Art des zugreifenden Geräts erkennen und verwendet die passende Version aus deinem “Website-Depot”.
Für welche Websites ist adaptives Design geeignet?
Das adaptive Design ist für Seiten mit großer Komplexität interessant. So stellst du sicher, dass alle Inhalte und Elemente für die jeweilige Ansicht optimiert sind.
Solche Pages sind beispielsweise Online-Shops, Vergleichsportale oder sehr umfassende Informationsseiten.
Wie baue ich eine Website im adaptive Design?
Auch hier gelten die drei Szenarien aus dem Responsive Design: Wenn du die Seite bei einer Agentur oder einem Freelancer in Auftrag gegeben hast, frage dort einfach nach einer adaptiven Umsetzung.
Wenn du selbst codest (oder dein Webmaster), dann nutze Code-Bibliotheken wie GitHub, um fehlendes Wissen zur Umsetzung mit HTML und CSS auszugleichen. Oder um dir Inspirationen zu holen; das kann auch nützlich sein!
Nutze Bibliotheken wie GitHub zur Umsetzung deiner Website
Screenshot: trusted.de
Quelle: github.com
Weg Nummer drei: Die Webseite mit einem entsprechenden Homepage-Baukasten bauen. Beispielsweise mit Wix. Hier geht es zur Anleitung.
Aber wie funktioniert denn eine adaptive Seite nun?
Im Endeffekt erstellst du hier die Website mindestens zweimal – einmal für Smartphones, einmal für Desktops. Deswegen auch “mindestens”, denn je nachdem, welche Geräte und Bildschirme du unterstützen willst, kannst du auch eine Version für Tablets bauen. Und so weiter.
Damit auch immer die passende Version deiner Page ausgespielt wird, bzw. damit du die richtigen Breakpoints setzt, solltest du die entsprechenden Display-Größen kennen.
Ich habe dir hier die groben Kennzahlen zu üblichen Geräten einmal mitgebracht:
| Gerätedisplay Typ | Bildschirmbreite |
|---|
| Kleines Smartphone | Bis zu 480 Pixel |
| Durchschnittliches Smartphone | 480 bis 768 Pixel |
| Tablet/Phablet* | 768 bis 1.024 Pixel |
| Kleiner Desktop-Bildschirm | 1.024 bis 1.200 Pixel |
| Großer Desktop-Bildschirm | 1.200 bis 1.920 Pixel |
| Sehr großer (UHD) Desktop-Bildschirm | Mehr als 1.920 Pixel |
* Falls du mit dem Begriff nicht vertraut bist: ein Phablet bzw. Smartlet ist eine Zwischengröße zwischen Smartphone und Tablet. Oder schlicht ein Smartphone mit sehr großem Display.
Vor- und Nachteile von adaptive Design?
Einer der Vorteile besteht darin, dass Elemente auf deiner Website nicht “jede Ansicht können” müssen. Was auf deiner mobilen Seite platziert ist, ist auch für mobil optimiert und wird so ausgespielt. Die Fehlerquote für Anzeigefehler sinkt.
Der größte Nachteil ist natürlich der größere Aufwand. Seiten mehrfach zu bauen, kostet viel Zeit. Wenn du auch noch jemanden dafür bezahlst, kommen auch größere Kosten obendrauf.
Info: Eine Ausnahme bildet die Erstellung per z. B. Wix-Baukasten, wo die adaptive Seite automatisch für dich generiert wird. Aber dazu gleich mehr.
Ein weiterer Nachteil: Die Erkennung des Endgeräts ist nicht immer superpräzise. Das passiert vor allem, wenn es neue Geräte wie etwa das neuste iPhone etc. gibt, deren Display-Einstellungen nicht mit deinen vorgefertigten Breakpoints übereinstimmen. Das bedeutet einen größeren Pflegeaufwand.
Anleitung: So baust du eine adaptive Website (am Beispiel Wix)
Vergiss nicht: nicht jeder Baukasten arbeitet adaptiv. Ich konnte für dich allerdings einen ausfindig machen!
Ausgerechnet Platzhirsch Wix bietet dir adaptive Seiten an.
Mit Wix erstellte Seiten (abseits von “Studio” sind laut Wix-Blog adaptiv
Screenshot: trusted.de
Quelle: wix.com
Die gute Nachricht ist: Du musst für eine adaptive Mobilseite bei Wix lediglich eine Website über Wix.com erstellen. Zusätzliche Anpassungen braucht es nicht.
Hinweis: Anders sieht es bei der Verwendung des Wix-Tools “Wix Studio” aus. Hier sind die mobilen Designs responsive.
Um also eine adaptive Seite zu bauen, meldest du dich bei Wix.com an und erstellst eine neue Website. Dabei musst du eine Sache beachten: Wenn du eine neue Website anlegst, dann wähle im Startbildschirm die Option “Mit dem Wix Editor erstellen”.
Folge im Anschluss den Anweisungen der Einrichtung.
Achte darauf, den richtigen Editor auszuwählen
Screenshot: trusted.de
Quelle: wix.com
Du hast die Möglichkeit, deine Page mit und ohne KI-Hilfe einzurichten.
Für meinen Test habe ich die Variante ohne KI gewählt, da der Prozess einfach etwas schneller geht. Hast du alle deine Unternehmensangaben gemacht, spuckt dir Wix eine Webseite aus, die du nach deinem Gusto anpasst.
Stelle dir zuerst deine eigene Webseite zusammen
Screenshot: trusted.de
Quelle: wix.com
Wie bei Jimdo und Webador hast du die Möglichkeit in eine mobile Ansicht zu wechseln.
Dabei schade: Du musst alle Inhalte in der Desktop-Ansicht bearbeiten. Anpassungen in der Mobilansicht sind nur eingeschränkt möglich; immerhin kannst du aber zum Beispiel einzelne Elemente, die du auf Mobile nicht brauchst, ausblenden lassen oder ein wenig verschieben.
Hier gilt wie bei den anderen Anbietern auch: Was du in der mobilen Variante änderst, gilt auch für die Desktop-Version. Achte also darauf, dass deine Page in beiden Ansichten gut aussieht.
Erstelle deine adaptiven Inhalte in der mobilen Ansicht des Wix-Editors
Screenshot: trusted.de
Quelle: wix.com
Für einen letzten (oder zwischenzeitlichen) Kontrollblick kannst du auch in die Vorschau-Ansicht wechseln. Dort siehst du die finale Ansicht deiner neuen adaptiven Website.
3. Getrennte Websites (Desktop vs. Mobil)
Wenn du auf eine Domain stößt, die mit “m.” beginnt oder auf “.mobi” endet, dann wird dir eine Seite angezeigt, die konkret für die Verwendung auf Mobilgeräten erstellt wurde.
Das heißt, hier existieren mehrere Versionen einer Seite, die müssen aber nicht zwingend den gleichen Inhalt abbilden.
Wann ergibt eine separate Mobile Website Sinn?
Die Erstellung einer eigenen mobilen Seite erachte ich vor allem in zwei Fällen besonders sinnvoll. Zum einen, wenn du mit deiner Desktop-Variante und der mobilen Version zwei unterschiedliche Ziele verfolgst.
Beispielsweise, wenn du hauptsächlich über den Desktop verkaufen, aber die mobile Seite als Landingpage nutzen möchtest.
Eine .mobi-Adresse bekommst du bei einem Domain-Registrar wie z. B. IONOS
Screenshot: trusted.de
Quelle: ionos.de
Ein weiterer Grund kann sein, dass du deine Page als besonders mobilfreundlich promoten willst. Ist eine Seite mit dem Label “mobile Optimierung” ausgestattet, wird sie in den mobilen Suchergebnissen auch entsprechend besser gelistet.
Für wen ist diese Vorgehensweise die Richtige?
Ich empfehle dir diese Vorgehensweise für umfangreiche Websites mit viel Content. Hier kannst du beispielsweise den kompletten Umfang an Inhalt auf der Desktop-Seite platzieren und eine entschlackte “Kompaktversion” für mobile Geräte aufsetzen.
Wie baue ich eine separate Website und was muss ich dabei beachten?
Wenn du das nötige Know-how hast, dann codest du selbst. Auch hier ist beispielsweise GitHub dein bester Freund.
Alternativ lässt du die Profis einer Agentur ran. Die wissen dann schon, was sie tun.
Du könntest in der Theorie auch hier als No-Coder:in einen Baukasten verwenden, allerdings bedeutet das unnötig doppelte Arbeit, da hier ja Optionen für responsive/adaptive Versionen am Start sind, wo du unnötige Inhalte wie bei Wix einfach ausblenden kannst.
Info: Separate Websites (Desktop und mobil) werden auf dem Markt eigentlich kaum noch verwendet. Für die mobile Optimierung kommen inzwischen vor allem responsive Lösungen zum Einsatz.
Vor- und Nachteile von getrennten Websites
Zu den Vorteilen gehört die eindeutige Auszeichnung deines Contents als “für Mobilgeräte gedacht”. Das macht sich positiv bei den Suchergebnissen für mobile Seiten bemerkbar.
Ein Nachteil: Du musst hier besonders aufpassen, keine doppelten Inhalte, auch “Duplicate Content” zu erstellen.
Findet Google zum Beispiel deine beiden Pages, macht der Crawler schnell einen auf die Prinzen und identifiziert deinen Inhalt zu Unrecht als “alles nur geklaut”. Als Folge wird deine Seite schlechter ranken oder wird sogar von der Indexierung ausgeschlossen.
Hinweis: Du kannst diesem Problem entgehen, indem du die sogenannten Canonical Tags verwendest. Damit kennzeichnest du eine deiner Pages als das (kanonische) Original und kopierte Seiten, wie eben deine Mobilseite, werden nicht als unzulässige Content-Dopplung erkannt.
Den Canonical Tag nutzt du auf der jeweiligen Inhaltsseite deiner “Kopie”. Du öffnest dafür den Quellcode deiner Page und nutzt folgenden Code, um deine Page als Ableitung deiner Originalseite zu kennzeichnen:
Kennzeichne Content mit dem Canonical Tag, um nicht aus der Indexierung zu fallen
Wenn du dir den Tag direkt in dein HTML kopieren willst, here you go:
<link rel="canonical" href="http://www.beispielseite.de/URL-Originalpage"/>
Denke nur dran, die Platzhalter in der Domain durch deine eigenen Angaben zu ersetzen.
4. Native App
Die “radikalste” Anpassung auf mobile Geräte ist die Entwicklung einer eigenen App. Was diese Methode dir bietet, erfährst du hier:
Was ist eine native App?
Eine App ist nicht nur eine Webseite, sondern gleich ein komplettes Programm. Eine App halt. Du weißt, was eine App ist!
Das heißt, das Userinterface, Menüs und Co. sind auf das Betriebssystem des Endgeräts zugeschnitten und nicht nur eine optische Anpassung der Website-Inhalte auf ein anderes Display-Format.
Info: “nativ” wird eine App dann genannt, wenn sie wirklich auf ein Mobilgerät heruntergeladen wird. Es gibt noch die progressive Web-Apps (PWA), die eine Webanwendung mit App-ähnlichen Funktionen darstellen. Mehr dazu hier.
Wann ist es klug, eine App statt einer Website anzubieten?
Eine eigene App würde ich dann empfehlen, wenn du über lange Zeit Kundendaten tracken und auswerten möchtest. Außerdem kann es sinnig sein, eine App für Services anzubieten, die auch unterwegs viel genutzt werden, wie zum Beispiel Fahrplanauskünfte, Navigation oder Kommunikation.
Wegen der hohen Kosten lohnt sich die Erstellung einer eigenen App aber kaum für Selbstständige und KMUs, große Unternehmen haben eher das Budget für ein solches Vorhaben.
Wie mache ich eine Website zu einer App?
Die Antwort ist hier relativ einfach: Gar nicht. Eine App ist nämlich keine Webseite. Daher hinkt der Vergleich mit Lösungen wie z. B. dem responsive und dem adaptiven Design.
Wenn du deine “Webseite” zur App machen willst, musst du also einfach gesprochen eine vollwertige App designen und programmieren.
Hier kommst du ohne Profis also nicht weiter. Oder?
Nope! Inzwischen gibt es auch immer mehr Anbieter, die ihre eigenen App-Baukästen zur Verfügung stellen. Dazu zählen etwa folgende:
- Wix
- AppYourself
- Open as App
- Good Barber
- Appy Pie
- Swiftic
- und weitere
Wenn du also eine Website-App bauen willst, ohne coden zu müssen, dann ist auch das mit den richtigen Zusatztools möglich.
Vor- und Nachteile von nativen Apps
Ein riesiger Vorteil ist, dass du nicht das Design an Desktop- und Mobilversion anpassen musst. Du kannst dich voll und ganz auf dein angepeiltes Endgerät konzentrieren. Auch alle Funktionen und die Performance sind von vornherein auf dein Endgerät angepasst.
Eine App kannst du auf Endgeräte wie Smartphones, Tablets oder sogar Smartwatches anpassen
Screenshot: trusted.de
Quelle: play.google.com
Obendrein kannst du umfassende Tracking-Funktionen in deine App einbauen. So erhältst du jede Menge wertvolle Daten zur Verwendung deiner App, ihrer Verbreitung und vieles mehr.
Einer der größten Nachteile sind die Kosten. Die Entwicklung und dauerhafte Pflege einer App sind nämlich nicht grade günstig – außer natürlich du bist erfahren genug, um die App einfach selbst zu entwickeln.
Sonderfall: Progressive Web-App
Die Progressive Web-App ist ein Sonderfall – sie ist nämlich weder Fisch noch Fleisch. Du hast es hier mit einer responsiven Website zu tun, die aber Eigenschaften und Elemente einer nativen App aufweist.
Info: Selbst Profis sind sich oft nicht einig, ob eine PWA nun eine eigenständige Methode der Mobiloptimierung darstellt. Sie nutzt bestehende Technologien aus responsiver Optimierung und App. Darum schneide ich das Thema hier für dich nur kurz an. Mehr Kerninformationen zu diesem Web-Zwitter findest du zum Beispiel bei IONOS.
PWAs, wie sie auch kurz genannt werden, sind für viele Unternehmen wegen ihrer speziellen Eigenschaften eine interessante Zwischenlösung.
Die Vorteile: User müssen sich nicht ewig eine App mit vielen MB herunterladen. Eine PWA nimmt deutlich weniger Speicherplatz in Anspruch. Oder gar keinen Je nach App kommt eine PWA nämlich auch ohne Download aus.
Außerdem funktioniert sie Geräteunabhängig und auch offline. Ein Plus gegenüber einer klassischen Website. Wer im U-Bahntunnel surft, muss also nicht mit Verbindungsabbrüchen kämpfen.
Aber es gibt auch Nachteile, wie etwa der Entwicklungsstand der Technologie. Sie funktioniert oft nicht auf allen Geräten fehlerfrei und nutzt die Funktionen von mobilen Endgeräten wie Bluetooth nicht voll aus.
Hinzu kommen Anbieter wie Apple, die sich der Technologie hartnäckig verweigern.
Info: So hatte Apple PWA bereits als Option für iOS-Geräte implementiert, diese Funktion aber zumindest im EU-Raum Anfang 2024 wegen “Sicherheitsbedenken” wieder entfernt. Dass PWA mit ihrer Unabhängigkeit von App-Stores eine mögliche Konkurrenz zum hauseigenen Apple-Store darstellen, sei an dieser Stelle ebenfalls erwähnt.
