So erstellen Sie eine mobile Website (in 4 einfachen Schritten)
Im Oktober von 2016 übertraf die Anzahl der mobilen und Tablet-Internetnutzer zum ersten Mal die Anzahl der Benutzer von Desktop-Computern. Dieser Paradigmenwechsel diente Entwicklern als Aufruf zum Handeln, ihre gesamte Branche zu überdenken. Seitdem hat die mobile Nutzung weiter zugenommen und ist noch weiter verbreitet, und es gibt viele elegante Website-Entwicklungslösungen, die heute eingesetzt werden, um diesen Benutzern zu dienen.
Diese Lösungen sind in der Lage, Benutzern eine ähnliche Erfahrung wie auf einem Desktop zu bieten, ohne den Inhalt oder die Funktion Ihrer Website zu beeinträchtigen. Während der Aufbau einer Website, die in der Lage ist, diese Erfahrung zu schaffen, entmutigend erscheinen mag, ist es viel einfacher als Sie denken.
Es ist in der Tat so einfach, dass wir eine einfach zu befolgende 4-Schritt-Anleitung zum Erstellen einer mobilen Website zusammengestellt haben, um Ihnen den Einstieg zu erleichtern.
Wählen Sie Ihren Webdesign-Ansatz
Es gibt verschiedene Lösungen, mit denen Sie eine mobilfreundliche Website erstellen können. Während jeder Webdesign-Ansatz seine eigenen Anhänger hat, die Ihnen sagen, dass er der beste ist, sollten Sie anhand Ihrer eigenen Betrachtung der Informationen bestimmen, welcher Ihren Anforderungen entspricht.
Responsive Web Design
Responsive Web Design (RWD) verwendet anpassbare Layouts, die durch die Verwendung von proportionsbasierten Medien, Erweiterungen und Backend-Rastern ermöglicht werden. Das heißt, wenn ein Browserfenster erweitert oder verkleinert wird, folgt der Inhalt diesem und passt sich entsprechend an. Das Ergebnis ist eine Website, die sowohl auf dem Desktop als auch auf Mobilgeräten ähnlich aussieht.
Diese Kunststoff-Benutzeroberfläche wird oft mit Wasser verglichen. Sie können eine Tasse Wasser in ein Glas, einen Topf oder einen Krug gießen und das Wasservolumen bleibt trotz des Gefäßwechsels gleich.
Adaptives Webdesign
Im Gegensatz zu RWD basiert adaptives Webdesign (AWD) nicht auf einem einzigen sich ändernden Layout. Stattdessen werden unterschiedliche Layouts für verschiedene Geräte und Bildschirmgrößen verwendet. Dies bedeutet, dass Ihnen beim Anmelden auf einer Website die Seite angezeigt wird, die den Anforderungen des Geräts, das Sie gerade verwenden, am besten entspricht.
Einige können beispielsweise drei Websites erstellen: eine für Smartphones, eine für Tablets und eine für Desktops. Dies würde drei verschiedene Designs erfordern, die bis zum Aufruf durch jeden Besucher „in Bereitschaft“ bleiben würden. Anstelle einer einheitlichen Website fungiert ein AWD als maßgeschneidertes Gateway für alle Benutzer.
Der Ansatz, den Sie für die Erstellung Ihrer mobilen Website wählen, ist nur der Anfang des Designprozesses.
Verwenden Sie einen Website-Builder oder ein CMS
Sobald Sie festgelegt haben, wie Ihre Website auf verschiedenen Geräten funktionieren soll, können Sie mit dem Erstellen beginnen! Die Plattform, auf der Sie Ihre Website erstellen, ist entscheidend für die Verwendung Ihres mobilen Designplans. Für grundlegende Benutzer gibt es zwei Optionen.
Website-Builder
Website-Builder vereinfachen das Webdesign und ermöglichen es Ihnen, in nur wenigen Minuten eine vollständig anpassbare und funktionsreiche Website zu erstellen. Sie erreichen dies, indem Benutzer ein Thema oder eine Vorlage auswählen und Funktionen, die sie mögen, einfach per Drag & Drop auf ihre Webseiten ziehen und diejenigen, die sie nicht mögen, leicht entfernen können.
Die meisten Website-Builder, einschließlich des Goldstandards Wix, ermöglichen es Benutzern, einfach zu bestimmen, wie ihre Websites auf Mobilgeräten reagieren. Die Wix-Plattform basiert hauptsächlich auf adaptiven Websites, während andere Dienste wie Weebly hauptsächlich auf Responsive Design setzen. Abhängig von der Art des Ansatzes, den Sie sich für Ihre Website vorgestellt haben, können Sie sich für einen Website-Builder entscheiden, der Ihren Anforderungen entspricht.
Content-Management-Systeme
Ein Content-Management-System (CMS) ist Ihre beste Alternative zu einem dedizierten Website-Builder. CMS wie WordPress sind auf etwas mehr Computer- und Internetkenntnisse angewiesen, können jedoch mehr Funktionen bieten als Website-Builder. Darüber hinaus bietet ein CMS sowohl RWD- als auch AWD-Designs an.
Ähnlich wie Website-Builder kann ein CMS beide mobilen Designansätze nutzen, indem es sie in die Vielzahl der für Benutzer verfügbaren Themen integriert. Diese Themen können genauso reich sein wie die von Website-Buildern, aber sie dienen besser denen, denen es nichts ausmacht, sich die Hände schmutzig zu machen und ein wenig über Webdesign zu lernen.
Wenn Sie sich für ein CMS entscheiden, können Sie einfach ein mobiles Theme herunterladen, entweder kostenlos oder gegen Gebühr, und damit Ihre Website erstellen. Die meisten dieser Themen werden mit vollem Support und regelmäßigen Updates geliefert, sodass Sie sich keine Gedanken über die Wartung und Verwaltung Ihrer Website machen müssen.
Entwerfen Sie eine mobile Website
Nachdem Sie festgelegt haben, auf welcher Plattform Sie Ihre Website erstellen möchten, können Sie Ihre Website entwerfen und erstellen. Egal, ob Sie ein Blog, ein Portfolio, eine Business-Site oder sogar einen E-Commerce-Shop erstellen, Sie können die Standardprinzipien verwenden, die für jedes Site-Design erforderlich sind. Sobald Sie Ihr Design fertiggestellt haben, müssen Sie entweder einfach Ihre Website testen, um festzustellen, ob sie richtig reagiert (RWD), oder ein anderes Design für Mobilgeräte erstellen (AWD).
Das Entwerfen einer mobilen Website ist fast so einfach wie das Entwerfen einer Desktop-Website, aber es gibt einige Dinge, die Sie beachten sollten.
a. Mobile Benutzer haben im Allgemeinen eine begrenzte Bandbreite
Sie sollten immer bedenken, dass die meisten mobilen Besucher Mobilfunknetze verwenden, die ihre Bandbreite begrenzen. Daher ist es wichtig, Ihre mobile Website leicht und frei von zu viel Inhalt zu halten, der diese entscheidenden Bytes auffressen kann.
b. Mobile Benutzer möchten schnell relevante Informationen
Häufig besuchen mobile Benutzer eine Website, um relevante Informationen über die von ihnen besuchten Standorte zu erhalten, z. B. Öffnungszeiten oder Telefonnummern. Wenn diese relevanten Informationen nicht schnell und eindeutig verfügbar sind, kann dies zum Verlust eines Kunden führen. Stellen Sie sicher, dass Ihre mobile Website schnelle Links zu Kontaktinformationen und anderen relevanten Daten enthält.
c. Mobile Geräte sind weniger leistungsfähig
Desktop- und Laptop-Computer sind mit Grafikkarten und Prozessoren ausgestattet, die eine hohe Last bewältigen können. Während mobile Geräte extrem leistungsfähig sind, sind sie nicht auf die gleiche Weise gebaut. Stattdessen verlieren sie die Funktion für die Form und können daher nicht mit prozessorlastigen Inhalten umgehen, wie es ein Computer kann.
Wenn Ihre Desktop-Site diese Art von Ressourcenzuweisung erfordert, sollten Sie zweimal darüber nachdenken, einem mobilen Publikum dieselbe Art von Site zu bieten.
Inhalte organisieren
Beim Erstellen einer mobilen Website ist es wichtig sicherzustellen, dass Ihre Benutzer auf alles auf Ihrer Desktop-Website zugreifen können, während Sie weiterhin auf einem kleineren Bildschirm arbeiten können. Es gibt mehrere Überlegungen, die Sie beim Organisieren Ihrer Inhalte berücksichtigen sollten.
a. Mobile First
Mobile First ist eine der neuesten Bewegungen in der Designwelt. Es sieht vor, dass Sie zuerst Ihre mobile Website entwerfen müssen, bevor Sie in Seiten für Desktops und Tablets expandieren. Der Inhalt, den Sie für Ihre mobile Website erstellen, kann auch auf die Desktop-Version geladen werden.
Dieser Ansatz ist daher hilfreich für dynamisch bereitgestellte und reaktionsschnelle Websites, bei denen der Inhalt Ihrer mobilen Version mit dem Inhalt Ihrer Desktop-Website identisch ist.
b. Mobile Zweite
Wenn Sie bereits eine Desktop-Website haben, ist die Organisation des Inhalts möglicherweise etwas schwieriger, wenn auch nicht ganz unmöglich. Ermitteln Sie zunächst die Elemente Ihrer Desktop-Site, die Sie in der mobilen Version anzeigen müssen.
Sammeln Sie Benutzerdaten mit den von Ihnen verwendeten Standardanalysetools und finden Sie heraus:
- Der Inhalt, der für Ihre Besucher am wichtigsten ist.Was mobile Nutzer tendenziell ignorieren.Der Weg, den Ihre Besucher normalerweise gehen.
Verwenden Sie die gesammelten Erkenntnisse, um zu wissen, was auf der mobilen Website angezeigt werden soll und was nicht. Dies wird Ihnen helfen, Ihre Desktop-Site zu bereinigen. Legen Sie dann den Inhaltspfad fest, den Ihre Besucher einschlagen werden.
Nachdem Sie eine gute Vorstellung vom visuellen Fluss Ihrer Website haben, können Sie ganz einfach das ursprüngliche Design für mobile Bildschirme erstellen und direkt mit der Entwicklung mobiler Websites beginnen.
c. Navigation
Handy-Bildschirme sind klein. Dies bedeutet, dass Sie die mobilen Navigationsoptionen minimieren sollten. Erwägen Sie die Verwendung einer Lupe oder des dreizeiligen (Hamburger-) Menüs Navicon. Sobald Sie fertig sind, testen Sie Ihre Website auf den gängigen Geräten, die von bis zu 90% Ihrer mobilen Besucher verwendet werden.
d. Design for Touch
Da es unmöglich ist, mit der rechten Maustaste auf ein mobiles Gerät zu klicken oder mit den Fingern zu schweben, müssen Sie Links auf Ihrer mobilen Website platzieren, um sicherzustellen, dass Ihre Benutzer nicht versehentlich auf die falschen Links klicken. Tun Sie dies, indem Sie:
- Feedback geben, wenn der Bildschirm berührt wird.Verwenden von Schaltflächen, um zu definieren, wo Benutzer klicken können und wo nicht.Gestalten Sie Ihre Dropdown-Menüs neu.Minimierung der Texteingabe.
Und da haben Sie es! Verwenden Sie diese Informationen, wenn Sie das nächste Mal Ihre Desktop-Website für die Anzeige auf Mobilgeräten komplett neu gestalten müssen oder wenn Sie eine neue mobile Website von Grund auf neu erstellen.