Wichtige Tipps zum Konvertieren einer Desktop-Site in Mobile
Da mobile Geräte mittlerweile den Desktop überholt haben, ist es notwendig, dass Designer mobile Geräte entwickeln. Mobile-First ist als Technik beliebt, weil es einfacher ist, mobile Geräte zu skalieren, als Desktops herunter zu skalieren.
Manchmal wird die Wahl jedoch aus den Händen genommen. Üblicherweise finden Designer die Anpassung bestehender Desktop-Designs an mobile Geräte. Und weil einige Elemente nicht gut übersetzt werden können, müssen die Entwickler verstehen, welche spezifischen Anpassungen beim Entwurf für den kleinen Bildschirm erforderlich sind. Hier ist wie…
Umarme Minimalismus
Minimalismus ist seit Jahren im Webdesign populär, einfach weil es oft der Benutzerfreundlichkeit dient und auch gut aussieht. Wenn es um Mobile geht, ist Minimalismus jedoch weniger eine ästhetische Wahl, da es rein auf Usability basiert.
Laut der Nielsen Norman Group, Schneiden von Features ist eine Notwendigkeit im mobilen Design. Was bedeutet das für Designer, die versuchen, eine mobile Website von einem bereits etablierten Desktop aus zu erstellen?
Es bedeutet, das zu beseitigen, was für die mobile Benutzererfahrung nicht wesentlich ist. Wenn Sie beispielsweise einen E-Commerce-Store von Desktop auf Mobile umstellen, behalten Sie die gleiche Anzahl an Produkten auf der mobilen Website. Es macht nur Sinn, weil die Käufer alles finden wollen, was ein Online-Shop zu bieten hat, genauso wie der Online-Shop alles zeigen will, was er an seine Besucher verkaufen muss. Ein großes Werbekarussell für die neuesten Deals könnte jedoch vernünftigerweise etwas reduziert werden.
Navigation ausblenden
Eine der häufigsten Funktionen auf mobilen Bildschirmen ist das Hamburger-Menü, das fast allgegenwärtige kleine Icon mit drei aufeinander gestapelten horizontalen Liniensegmenten. Dies ist ein weiterer perfekter Fall, in dem die kleinere Bildschirmgröße des Mobilgeräts Entwickler dazu zwingt, Elemente zu ändern, von denen erwartet wird, dass sie auf Desktops in bestimmter Weise aussehen.
Trotz der geteilten Meinung über die Präsenz des Hamburgermenüs ist es auf mobilen Bildschirmen ziemlich allgegenwärtig, einfach weil es die beste Lösung ist, die Designer gefunden haben, um das Navigationsmenü von Desktops auf mobile Geräte herunterzuskalieren.
Schauen Sie sich die Website des berühmten Chefkochs Bobby Flay für sein Kettenrestaurant Bobby's Burger Palace an. Wie zu erwarten, ist das Navigationsmenü horizontal über der Startseite der Homepage angeordnet. Wenn Sie jedoch die mobile Version der Website aufrufen, ist das horizontale Menü nicht mehr verfügbar. An seiner Stelle ist das ordentliche und ordentliche Hamburger-Menü, genau an der Stelle des Bildschirms, wo das längere horizontale Menü auf der Desktop-Version wäre.
Walmart nutzt auch das Hamburger-Menü in seinem Desktop-to-Mobile Design-Übergang.
Auf seiner Desktop-Website zeigt Walmart die Dropdown-Liste "Alle Abteilungen" an, die auf derselben Seite eine zweite Ebene mit Navigationsoptionen öffnet. Auf der mobilen Website ist diese Funktion jedoch aufgrund der kleinen Bildschirmgröße nicht möglich, so dass ein Ersatz entwickelt wurde: Die zweite Ebene der Navigationsoptionen befindet sich im Hamburger-Menü und diese eröffnen mehr und mehr Navigationsmöglichkeiten bei jeder Auswahl - fast so, als würde man die Seiten eines Buches von links nach rechts spiegeln.
Wechseln Sie zu einer einzelnen Spalte
Im Einklang mit der Tatsache, dass einfacher ist nur besser, wenn es um mobile Design geht, werden Sie gut für Ihre Kunden tun, wenn Sie daran erinnern, dass ein einspaltiges Layout ist sauberer und einfacher für ihre Benutzer auf einem kleineren Bildschirm zu betreiben. Der große Vorteil eines einspaltigen Layouts besteht darin, dass Sie das horizontale Scrollen überflüssig machen, als hätten Sie viel Text auf einer Seite und möchten, dass Ihre Leser den Bildschirm von links nach rechts wischen, um weiterzulesen.
Wenn Sie ein einspaltiges Layout einführen, optimieren Sie die Benutzererfahrung und fordern die Benutzer auf, einfach nach unten zu scrollen, um weiterzulesen, oder auf einen Link zu klicken, den sie auf einer neuen Seite sehen möchten. Das schlägt sie zwingt, sie von links nach rechts wischen, was schwieriger ist als einfach nach unten scrollen, vor allem, wenn Sie die Daumenposition des Benutzers relativ zu dem, wie sie ein mobiles Gerät halten, betrachten.
Die Desktop-Website der Zeitung The New York Times bietet mehrere Spalten. Das ist einfach auf einem Desktop zu verwenden, wenn die Benutzer Ihres Clients den Cursor einfach von links nach rechts bewegen können, ohne Probleme mit einem Trackpad oder einer Maus.
Natürlich versteht die mobile Website der New York Times, wie sich die Dinge auf kleineren Bildschirmen ändern müssen. Daher stellt sie ein sauberes und effizientes einspaltiges Design vor, das die Benutzererfahrung steigert, da die Leser einfach mit ihren Daumen nach unten scrollen können .
Mobile Überlegungen
Aufgrund des Einflusses von Mobilgeräten auf die Nutzer müssen Designer immer für das mobile Design sorgen. Es ist nicht gut genug, einfach eine mobile Website zusammen mit der Desktop-Website zu entwerfen und diese für das mobile Design zu entwerfen!
Design for Mobile bedeutet, auf die spezifischen Anpassungen, die Sie für die Website Ihres Kunden vornehmen müssen, Rücksicht zu nehmen, wenn Sie für den kleinen Bildschirm entwerfen. Dies schließt alles ein, worüber wir gesprochen haben, vom Minimalismus im Design über das Ausblenden der Navigationsleiste bis zum Verschieben in ein einspaltiges Layout.
Indem Sie diese Best Practices in Ihre Fähigkeiten aufnehmen, erstellen Sie Websites, die perfekt für mobile Geräte geeignet sind.