So erstellen Sie eine mobile Version Ihrer Website

Eine mobile Version Ihrer Website ist heutzutage ein Muss und die einzige todsichere Möglichkeit, Ihr Webprojekt von mobilen Geräten aus zugänglich zu machen. Also, wenn Sie Recht haben, eine Website zu starten, sind Sie verpflichtet, dieses Problem zu berücksichtigen, um es zu einem Erfolg zu machen. Sie haben bereits eine Website und möchten diese aktualisieren, um sie mobilfreundlich zu gestalten? Die unten angegebenen Informationen werden auch für Sie nützlich sein.

Es gibt heute mehrere Möglichkeiten, eine mobile Website zu starten. Die Wahl der am besten geeigneten Lösung hängt von mehreren Faktoren wie Website-Typ, Alter und Eigenschaften, Ihre eigenen Web-Design-Ziele, Fähigkeiten und Anforderungen. Die am weitesten verbreiteten Lösungen sind wie folgt:

• Responsive Design-Erstellung, wenn ein Benutzer dieselbe Website (die aufgrund spezieller CSS-bezogener Regeln unterschiedlich angezeigt wird) von Desktop- und Mobilgeräten aus besucht;
• Separate mobile Website-Version basierend auf dem Mobile-Only-Ansatz, wenn Sie zwei Schnittstellen haben, die konsistent funktionieren und sogar auf verschiedenen Domains / Subdomains gehostet werden können;
• Vollwertige mobile App, die entweder ein eigenständiges Produkt mit einer vorgefertigten Architektur sein kann, die für eine bestimmte Plattform entwickelt wurde, oder ein separates Vorschau-Tool (wie ein Webbrowser), das nur für eine Website gilt.

Jede dieser Optionen eignet sich hervorragend für die Erstellung mobiler Websites. Es liegt nur am Eigentümer, die am besten geeignete Lösung auszuwählen. Schauen wir uns jetzt die am weitesten verbreiteten (und bequemsten) Möglichkeiten der mobilen Projektentwicklung an.

Erstellen einer mobilen Version einer Website (Website Builder)

Wenn Sie noch keine Website haben, ist es sinnvoll, einen Dienst auszuwählen, der Responsive Design unterstützt und / oder über einen separaten integrierten mobilen Editor verfügt. Ein Website-Builder eignet sich am besten für diesen Zweck, da diese Plattformen hauptsächlich für die Entwicklung mobilfreundlicher Websites erstellt wurden und daher zunächst alle ihre Blöcke, Widgets und Oberflächenelemente standardmäßig reagieren. Infolgedessen werden Projekte, die mit ihnen erstellt wurden, auf Desktop- und mobilen Bildschirmen großartig angezeigt, ohne dass eine separate mobile Version erstellt werden muss. Lassen Sie uns diese Option mithilfe des Wix Website Builder überprüfen.

Wix ist der weltweit beliebte All-in-One-SaaS-Website-Builder, mit dem Sie jede Art von Webprojekt starten / verwalten können, sei es ein Blog, ein Portfolio, eine Zielseite, eine Business-Website oder sogar ein Webshop. Alle in der umfangreichen Galerie verfügbaren Vorlagen (es gibt mittlerweile über 550 davon) sowie Webseiten, die Benutzer von Grund auf neu erstellen, werden automatisch für das mobile Surfen angepasst.

Hier ist es möglich, eine Desktop- und eine mobile Website-Version separat einzurichten, aber es gibt noch keine Tablet-Vorschau-Option. Was Sie hier tun können, ist, die ausgewählten Blöcke und Schnittstellenelemente auszublenden und hier eindeutige Hintergründe zu ändern / einzurichten. Darüber hinaus verfügt Wix über spezifische mobile Funktionen wie:

• Anzeige des Schnellstartfelds (Sie können eine Anruftaste, Links zu sozialen Netzwerken / Messenger usw. hinzufügen. hier);
• Die „Up“-Taste;
• Begrüßungsbildschirm (eine Art animierter Ladebildschirm, auf dem emotionale Begrüßungen angezeigt oder eine Marke / Marke eingeführt werden können, bevor Sie tatsächlich auf eine Website zugreifen);
• Benutzerdefiniertes Farbschema für das Chrome-Browserfenster;
• Der Service der automatisierten Optimierung von Inhalten und Webseiten-Layout für mobile Geräte (dies ist eine praktische Option für Webseiten, die von unerfahrenen Designern erstellt wurden).

Wix verfügt auch über eine mobile App, mit der Sie eine Website verwalten können, wenn Sie ein Abonnement erhalten, das den Zugriff auf professionelle Business-Tools umfasst.

So erstellen Sie eine mobile Version der CMS-Website (WordPress)

Wie jedes andere CMS achtet WordPress nicht auf ein Gerät, mit dem eine Website erreicht wird. Die Plattform stellt lediglich die in den Standardeinstellungen angegebene Designvariante zur Verfügung.

Es ist immer noch sinnvoll, hier die Dienste von Webentwicklern hervorzuheben, da WordPress eines dieser CMS ist, dessen Design sich an mobile Geräte anpassen kann (dies bedeutet, dass eine Website nicht nur für Besucher, sondern auch für ihren Eigentümer geeignet ist, der sie bearbeiten, einrichten und mit Inhalten von einem mobilen Gerät aus füllen kann). Darüber hinaus gibt es Anwendungen für Smartphones, die nicht nur für ein klassisches CMS, sondern auch für eine Cloud geeignet sind WordPress.com plattform auch.

Infolgedessen erweist sich eine mobile Website-Version in 99% der Fälle als Verdienst einer Vorlage selbst. Die einzige Ausnahme bilden spezielle Plugins oder Skripte, die Benutzer zu einem separaten mobilen Thema umleiten können (z. B. basierend auf der Bildschirmauflösung oder dem Gerätemodell).

So erstellen Sie eine mobile Website-Version mit WordPress von Grund auf neu

Wenn Sie nur planen, eine Website zu starten, ist das Problem nicht so akut – Sie müssen nur die richtige Vorlage auswählen. Das Sortiment an responsiven Themen ist selbst im offiziellen CMS-Katalog mehr als ausreichend. Sie müssen sicherstellen, dass das ausgewählte Design absolut den deklarierten Funktionen entspricht. Gleiches gilt für alternative Plattformen wie ThemeForest oder TemplateMonster.

Wenn Ihnen die Ladegeschwindigkeit und die hohen PageSpeed Insights-Parameter wirklich wichtig sind, gibt es spezielle Vorlagen, die bis zu 100 Punkte in Profiltests garantieren, wie zum Beispiel das Neve-Thema. Designs, die sich nicht an Smartphone-Bildschirme anpassen können, sind heutzutage jedoch nicht mehr weit verbreitet.

So ersetzen Sie eine WordPress-Vorlage durch eine responsive

Wenn Sie bereits eine Website für einen längeren Zeitraum besitzen und deren Vorlage veraltet ist und ursprünglich für große Bildschirmformate erstellt wurde, sollten Sie die Möglichkeit in Betracht ziehen, ein altes Website-Design durch ein neues zu ersetzen. Ein solcher Ansatz hat mehrere Vorteile, nämlich:

• Desktop- und mobile Website-Version haben den gleichen Stil;
• Die Notwendigkeit, zwei Schnittstellentypen zu verwalten, entfällt;
• Sie müssen keine komplexen Funktionen und Algorithmen schreiben, um die Bildschirmauflösung und den Gerätetyp zu definieren, den ein Benutzer zum separaten Design umleiten muss;
• Kommerzielle Themen werden häufig mit technischem Support geliefert, sodass Sie Antworten auf alle Ihre Fragen erhalten und ein neues Thema einrichten können, das nicht schlechter ist als das vorherige.

Nachteile sind auch hier verfügbar. Vorlagen werden häufig mit schriftlichen Codes für Analysen, Zähler, Anzeigenblöcke usw. geliefert. Einige von ihnen führen sogar separate Materialtypen ein, wodurch alle diese Elemente in eine neue Vorlage übertragen werden müssen. Alle möglichen Fehler können sich negativ auf die Suchmaschinenergebnisse auswirken. Wenn Sie regelmäßige Benutzer haben, gefällt ihnen die Idee möglicherweise nicht und Sie lehnen es sogar ab, Ihre Website zu besuchen. Daher müssen Sie den bevorstehenden Designwechsel gründlich analysieren, um alle möglichen Nuancen zu berücksichtigen.

So machen Sie eine veraltete Vorlage reaktionsschnell

Die Idee, eine veraltete Vorlage reaktionsschnell zu machen, ist nicht so kompliziert, wie es zunächst scheinen mag. Es ist jedoch nicht wirklich sinnvoll, es zu versuchen, wenn Ihnen Nischenfähigkeiten oder zumindest Webdesign-Grundlagen fehlen. Wie auch immer, es gibt immer die Möglichkeit, einen Webdesigner zu beauftragen, der Ihnen dabei hilft.

Die Hauptidee besteht darin, CSS-Medienabfragen hinzuzufügen, auf deren Grundlage kaskadierende Stile speziell für die erforderlichen Bildschirmauflösungen hinzugefügt werden. Schauen Sie sich jetzt das Beispiel an:

@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}

Zum Beispiel, wenn Ihr Hauptgitter so aussah:

Es wird das folgende Aussehen in HTML haben:

<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>

Stile für diese Boxen werden in CSS-Vorlagendateien platziert, wobei der Punkt am Anfang steht, was bedeutet, dass dies die CSS-Klasse ist:

.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}

Wenn wir die feste oder relative Breite für die vorgeschlagene Bildschirmauflösung durch 100% ersetzen, sieht das Raster wie folgt aus:

Um ein solches Ergebnis zu erzielen, reicht es aus, die Medienabfrage zu den Stylesheets hinzuzufügen (das unten angegebene Beispiel gilt für alle Geräte mit einer Bildschirmbreite von 1024 Pixel und darunter):

@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}

Beachten Sie, dass die in Klammern angegebenen Kommentare ausschließlich als Beispiel erwähnt werden und nicht auf den eigentlichen CSS-Code übertragen werden können.

Welche Fallstricke können bei einer solchen Responsive Design Realisierung entstehen? Leider gibt es viele von ihnen:

• Das gesamte Webseitenlayout kann verletzt werden, da nicht nur auf einer Seite verfügbare Schlüsselblöcke eine feste Breite haben können. Dies können auch Bilder, Nachrichtenblöcke auf einer Homepage / in einer Kategorie, Autorenbeschreibungsblöcke und andere Elemente sein. Es ist unmöglich, alle auf einmal zu identifizieren. Jeder von ihnen muss bearbeitet werden, sobald er identifiziert ist.
• Das Webseitenvolumen ändert sich nicht, was sich bei langsamer Internetverbindung negativ auf die Download-Geschwindigkeit auswirkt (unter solchen Bedingungen ist keine Optimierung möglich).
• Laut den Suchmaschinenempfehlungen sollten Schriftarten auf mobilen Geräten ohne Herauszoomen gut lesbar sein. Dies führt dazu, dass alle Schriftgrößen für Überschriften, Textkörper, Zitate, Listen (nummeriert und nicht nummeriert) usw. neu definiert werden müssen.
• Eine Kopfzeile und ein komplexes Menü sollten komplett neu erstellt werden. Es ist sinnvoll, nur ein kleines Website-Logo, ein Suchsymbol (wenn Sie diese Option haben) und ein Profilsymbol (wenn ein Autorisierungssystem verwendet wird) zu belassen. Ein Desktop-Menü sollte besser ausgeblendet und durch ein „Sandwich“ -Symbol (Menüsymbol) ersetzt werden. In den meisten gängigen Responsive Templates wird dies durch zwei parallele Menüs implementiert: Das erste ist für Desktop-Bildschirme gedacht und wird nur auf dem PC angezeigt, während das zweite nur für mobile Geräte gedacht ist (es wird nur auf der Grundlage derselben Medienabfragen auf mobilen Geräten angezeigt).
• Wenn sich beispielsweise die Struktur der Hauptfelder unterscheidet, wird die Seitenleiste links, aber nicht rechts angezeigt, während alle Widgets vor dem Hauptinhalt angezeigt werden, obwohl es logischer ist, sie niedriger zu platzieren.
• Abgesehen von CSS-Dateien können Website-Stile durch JS-Skripte ersetzt werden, die schwieriger zu finden und zu bearbeiten sind.

Dies sind nur einige der möglichen Fallstricke. Daher ist es sinnvoll, einen Webdesign-Experten zu beauftragen, um die Aufgabe abzuschließen.

Die Vorteile von Medienabfragen ermöglichen es, den falschen Code jederzeit zu löschen. Diese Stile werden nicht auf der Hauptwebsite angezeigt.

So fügen Sie eine responsive Website-Version mit Plugins hinzu

Einige CMS verwenden ihre eigenen Erweiterungssätze, während andere sie überhaupt nicht haben. WordPress coed mit den bemerkenswertesten Plugins für responsive Website-Erstellung, nämlich:

• Jetpack – Die automatisierte Funktion zur Erstellung mobiler Versionen wurde seit März 2020 eingestellt;
• WPtouch – ist in kostenlosen und kostenpflichtigen Versionen verfügbar, die Erweiterung verfügt über eigene Plugins und Themen wie separate Cache-Organisation Plugin, Web App Creation Plugin, Image Optimization Plugin, AMP Creation Plugin etc. Der Wechsel vom Desktop zum mobilen Thema mit WPtouch ist abgeschlossen, ohne die URLs der Webseite zu ändern, was für SEO sehr wichtig ist;
• WP Mobile Menu – responsives Menü für mobile Geräte (es wird Ihnen nützlich sein, wenn Sie ein sperriges und komplexes Menü der Desktop–Website-Version durch ein responsives und kompaktes Menü für mobile Geräte ersetzen müssen);
• WP Mobile Detect – Das Plugin definiert zunächst, dass eine Person ein mobiles Gerät verwendet, und liefert das Ergebnis als True / False-Wert. Dies macht es für die Implementierung der Template-Switch-Option oder für die Anzeige bestimmter Schnittstellenblöcke anwendbar;
• WP Mobile Edition – Das Plugin kann WordPress-Websites in voll funktionsfähige Web-Apps konvertieren. Benutzer können ihren Smartphone- / Tablet-Desktops ein Website-Symbol hinzufügen, um es im Vollbildformat (ohne Frames und Browser–Tabs) zu verwenden;
• Mobile Smart – Ein Plugin erkennt, dass sich das Gerät auf die mobile Klasse bezieht, und wechselt dann die Themen auf die alternative, die mit mobilen Geräten kompatibel ist. Eine Pro-Version kommt mit integrierter Unterstützung von mobilen Menüs, spezielle Widgets, Plugin-Management-Option (ein separater Satz kann für mobile Geräte zur Verfügung gestellt werden), Domain-Switch (für die Umsetzung der korrekten Arbeit von zwei unabhängigen Website-Versionen) usw.

Webentwickler haben dafür gesorgt, dass die Erweiterungen nicht beansprucht wurden, da viele Websitebesitzer beschlossen haben, auf responsive Vorlagenversionen umzusteigen. Daher wurden die meisten dieser Plugins über einen längeren Zeitraum nicht aktualisiert, was zur Inkompatibilität mit der aktuellen Version der Plattform führen kann. Die einzige Ausnahme ist WPtouch.

Die Arbeit mit jedem Plugin hat seine eigenen Besonderheiten. Einige von ihnen bieten vorgefertigte mobile Vorlagen an, während andere empfehlen, Erweiterungen von Drittanbietern herunterzuladen oder eigene zu erstellen.

Wenn Sie es vorziehen, mit einer mobilen Website-Version auf der Subdomain / alternativen Adresse zu arbeiten, dann sind hier die Nuancen, die Sie beachten sollten:

• Dies sind verschiedene Websites für die Suchmaschinen und es ist wirklich schlimm, dass ihr Inhalt nicht eindeutig ist;
• Damit die Suchmaschinen die URL „kleben“ und verstehen, dass es sich um dieselbe Website handelt, sollten alle Linkattribute ordnungsgemäß organisiert sein:
• • Attribut link … rel=“alternate“ href=“URL-mobile Seite“ – für Desktop–Versionen;
  • Attribut link … rel=“canonical“ href=“URL-Desktop-Webseiten“ – für mobile Vorlagen.
• Wenn der Inhalt auf verschiedenen Webseitenversionen unterschiedlich ist, besteht die Gefahr, dass Sie Sanktionen für Cloaking (zum Ersetzen von Inhalten) erhalten.

So erstellen Sie eine mobile Version der HTML-Website

Soweit HTML-Websites keine dynamischen Funktionen haben, können Sie die Bildschirmauflösung eines Geräts nicht analysieren und basierend auf dem Ergebnis von einer Desktop-Vorlage zum mobilen Thema wechseln. Sie müssen lediglich das Layoutraster und die Stile der problematischen Elemente vollständig neu gestalten.

Wir haben bereits überprüft, wie das geht – dies geschieht über Medienabfragen. Am schwierigsten anzupassen sind Layouts mit fester Breite und Position der Elemente.

Ohne spezielle Nischenkenntnisse und CSS / HTML-Code-Immersion wird nichts funktionieren. Es ist sinnvoll, entweder von Anfang an einen Webdesign-Profi zu beauftragen oder das Design in ein anderes zu ändern, das Sie kaufen oder bestellen können, oder einfach eine brandneue Webseite von Grund auf neu zu entwickeln, beispielsweise mit dem Mobirise Offline Website Builder. Schließlich kann es höchste Zeit sein, auf die Cloud-Infrastruktur umzusteigen und sich für einen Online-Website-Builder zu entscheiden.

Separate Websites für Mobilgeräte und Desktops oder eine Website: Was ist besser?

Wie oben erwähnt, ist eine mobile Website ein Muss für jeden Geschäftsinhaber. Dies ist ein todsicherer Weg, um eine qualitativ hochwertige Geschäftspräsentation im Web sicherzustellen, Traffic zu generieren und die unübertroffene Benutzererfahrung zu garantieren. Die Frage ist: Ist es sinnvoll, zwei separate Website-Versionen für mobile und Desktop-Bildschirme zu erstellen oder eine responsive Website zu erstellen, die auf beiden Gerätetypen gut angezeigt wird?

Im Allgemeinen ist das Starten einer responsiven Website eine effektivere und praktischere Lösung. Es entfällt die Notwendigkeit, zwei verschiedene Websites mit verschiedenen Domains / Subdomains, URLs und interne Struktur zu erstellen. Solche Websites verwirren Besucher oft und können Probleme auslösen, wenn es um SEO-Optimierung, Internet-Marketing und andere verwandte Werbemethoden geht. Stattdessen erhalten Sie ein Projekt, das auf Desktop- und mobilen Bildschirmen gleich gut angezeigt wird.

Wie viel kostet eine mobile Version einer Website?

Die Kosten für eine mobile Website-Version hängen im Allgemeinen von der Plattform ab, mit der Sie sie starten. Wenn Sie sich für einen Online-Website-Builder wie Wix entscheiden, ist dieser möglicherweise absolut kostenlos, da Sie mit dem System standardmäßig Websites erstellen können, die für Mobilgeräte geeignet sind. Mit dem kostenlosen Wix-Plan können Sie jedoch keinen eigenen Domainnamen verbinden, wodurch es unmöglich wird, das Beste aus Ihrer Projektleistung herauszuholen.

Soweit Wix eine unverwechselbare und vielseitige Preispolitik hat, können Sie jeden seiner Pläne zum Starten einer Website auswählen. Berücksichtigen Sie einfach Ihre Webdesign-Ziele, den Projekttyp und die Spezialisierung sowie das Budget, in das Sie investieren möchten, und wählen Sie das am besten bevorzugte Abonnement aus. Jeder Wix-Plan enthält eine breite Palette von Besonderheiten und Bedingungen, die sich auf die Endkosten auswirken. Das günstigste Website-Abonnement kostet Sie 13 USD / Monat, während der Preis für den günstigsten Business Basic-Plan bei 23 USD / Monat beginnt.

Haben Sie sich entschieden, WordPress für die responsive Website-Erstellung zu verwenden? Dann hängen die Kosten des Projekts letztendlich vom Preis der Plugins ab, für die Sie sich entscheiden. WordPress-Erweiterungen sind in der Regel als kostenlose positioniert, aber ein Teil ihrer Funktionen wird nach dem Upgrade auf die Pro-Version weiterhin verfügbar. Die Kosten für WPtouch Pro liegen beispielsweise zwischen 79 und 359 US-Dollar pro Jahr. Genau aus diesem Grund erscheint es sinnvoll, auf eine vorgefertigte responsive Vorlage umzusteigen. Solche Themen werden einmal gekauft, während ihre Kosten etwa $ 40-80 ausmachen. Falls Sie sich dennoch entscheiden, einen professionellen Webentwickler mit der Neugestaltung eines veralteten Themas für Sie zu beauftragen, werden die Kosten je nach Komplexität des Projekts individuell besprochen.

Fazit

Es ist kein Geheimnis, dass jede Website eine mobile Version haben sollte, um bei der heutigen Zielgruppe gefragt zu bleiben. Es gibt fast nur Menschen, die ihre mobilen Geräte nicht zum Surfen im Internet verwenden und nach den Diensten und Produkten suchen, die sie benötigen. Daher hängt der Prozess der mobilen Optimierung Ihrer Website letztendlich von der ausgewählten Plattform ab.

Wenn Sie gerade planen, eine Website zu starten, ist es sinnvoll, einem der beliebtesten Online-Website-Builder den Vorzug zu geben. Wix wird für diesen Zweck am besten funktionieren. Wenn Sie bereits eine Website mit CMS wie WordPress betreiben, ist es besser, sie durch ein responsives Thema zu ersetzen. Plugins, die mobile Unterstützung bieten, können jedoch recht teuer sein, während eine vollständige Neugestaltung der Vorlage eine echte Herausforderung darstellt, insbesondere wenn Sie die Aufgabe unabhängig bewältigen möchten.

Wie auch immer, es macht keinen Sinn, eine separate mobile Version Ihrer Website zu erstellen. Sie werden Probleme im Zusammenhang mit der Projektentwicklung und deren weiterer Unterstützung haben. Eine weitaus einfachere und vernünftigere Lösung besteht darin, Ihre Website von Anfang an mobil ansprechbar zu machen.