8 Möglichkeiten zur Optimierung Ihrer Website für Mobilgeräte
Als sich die Welt von Desktop-Computern zu mobilen Geräten verlagerte, konzentrierten sich die Designer noch stärker auf UX. Obwohl die Benutzeroberfläche eine wichtige Rolle bei der Erstellung von für Mobilgeräte optimierten Designs spielt, ist die Benutzerfreundlichkeit jetzt ebenso wichtig geworden, insbesondere da wir jetzt mehr Geräte zur Verfügung haben, auf die wir uns konzentrieren können, und die Benutzererfahrung hängt vom Gerätetyp ab.
UX ist etwas, das über die Grenzen von Grafik und Ästhetik hinausgeht. Genau wie Rahul Varshney, der Mitschöpfer von foster.fm sagt:
Ein UI ohne UX ist wie ein Maler, der ohne nachzudenken Farbe auf die Leinwand schlägt.
Rahul hatte Recht mit dieser Analogie. Sie haben vielleicht die ansprechendste, benutzerfreundlichste, einzigartigste und funktionellste Desktop-Version Ihrer Website, aber wenn Sie die mobile Erfahrung nicht in Betracht ziehen, malen Sie einfach ohne nachzudenken.
Was unterscheidet also eine gute mobile Erfahrung von einer schlechten? Es ist nicht schwer, die Schlüsselkomponenten zu trennen, die ein hoch effektives, optimiertes und benutzerorientiertes Design ausmachen. Aber hier sind ein paar Best Practices, die Sie auf dem Weg begleiten sollten:
1) Mobil-first nicht ablehnen
Wenn Ihre Website auf mobile UX ausgerichtet ist, möchten Sie vielleicht die Tradition durch die "mobile first" -Strategie brechen. Es ist nicht schädlich, diese Technik zu verwenden, wenn Sie sicher sind, dass die meisten Ihrer Benutzer über ein mobiles Gerät auf Ihre Website zugreifen. Genauso wie CodemyViews schlägt vor, dass mobiles Webdesign keine Nische ist, tatsächlich gibt es "1,2 Milliarden mobile Internetnutzer weltweit" und die Zahl scheint nicht in absehbarer Zeit zu fallen (sie wird wahrscheinlich in naher Zukunft zunehmen). Dies kann zunächst etwas schwierig sein; Aber wenn Sie bereit sind, Ihren Benutzer an die erste Stelle zu setzen, ist es einen Versuch wert.
Nur weil Sie darauf abgezielt haben, eine einfache, saubere oder auf Mobilgeräte ausgerichtete Website zu gestalten, heißt das nicht, dass sie nicht anspruchsvoll sein sollte. Karimrashid.com ist ein perfektes Beispiel dafür, wie Einfachheit und Raffinesse in ein sauberes und reaktionsschnelles, aber dennoch edles Design integriert werden können.
2) Erstellen Sie Fluid Layouts
Es gibt einfach viel zu viele mögliche Bildschirmgrößen da draußen, um auszuwählen, für welche Sie entwerfen werden. Sie müssen ein Layout erstellen, das sich so nahtlos wie möglich an alle anpasst. Glücklicherweise sind flüssige Layouts hier, um den Tag zu retten!
Auf der Grundlage von Prozentsätzen und nicht von bestimmten Messungen wie Pixeln sind flüssige Layouts zum Standard bei Web-Profis geworden. Sie können schwierig sein, aber sicherzustellen, dass so viele Menschen wie möglich Ihre Website tatsächlich verwenden können, ist die Mühe wert.
3) Ziel für die Funktionalität
Was ist Funktionalität? Es ist das, was Sie Ihren Besuchern anbieten, um Dinge schnell zu erledigen. Basierend auf dem Zweck Ihrer Website sollten alle Tools wie Standorte in der Nähe, Produktsuche, Produktbewertungen oder Währungsumrechner Benutzern dabei helfen, beabsichtigte "Funktionen" auszuführen und Ziele viel schneller zu erreichen.
Purina , ein Tiernahrungsmittelanbieter, ist ein perfektes Beispiel dafür, wie man "Funktionen" auf einer Webseite vereinfacht. Die Startseite hat ein Suchfeld, in dem Sie nach dem gesuchten Objekt suchen können. Im Folgenden sind zwei separate Spalten für die Art von Tierfutter, auf die sie spezialisiert sind. Die ganze Website ist einfach zu navigieren mit Spalte, Tasten, Werkzeuge und Design-Elemente, die Entscheidung über die beste Art von Tiernahrung - und dann den Kauf - ein Kinderspiel.
4) Identifizieren Sie Ihre Benutzer
Versuchen Sie nicht, ein Tausendsassa zu werden, weil es Sie einen typischen Benutzer kosten kann, und niemand will das. Finden Sie zuerst heraus, wer Ihre Benutzer sind. Dann ermitteln Sie ihr typisches Web-Browsing-Verhalten. Sobald das beiseite gelegt ist, finden Sie heraus, was sie antreibt. Moderne Benutzer sind von zwei Haupttypen: diejenigen, die ohne ein Ziel im Auge behalten und diejenigen, die eine Aufgabe ausführen möchten. Jede dieser Gruppen benötigt unterschiedliche "Funktionen" basierend auf ihren Bedürfnissen.
Es ist nicht schwer, die Demographie der Benutzer der The Body Shop Website zu erraten, da es Hinweise auf der ganzen Seite hinterlässt. Da The Body Shop stark auf "natürliche Inhaltsstoffe" und sozialen Aktivismus fokussiert ist, sind die monochromatischen grünen Variationen, ein Schieberegler aus natürlichen Zutaten, "grüne" Bilderauswahl, sowie Berichte über fairen Handel, Versprechen und andere soziale Ereignisse verständlich gut entwickeltes Designkonzept.
5) Immer die Bibliotheken und Richtlinien des Entwicklers nachschlagen
Basierend auf der Plattform, die Sie verwenden werden, ist es wichtig, die UI-Richtlinien genau zu betrachten. Einige Plattformen erlauben mehr Flexibilität als andere. In jedem Fall sollten einige Schlüsselkomponenten der Marke oder "Signaturen" erhalten bleiben.
Ein Apple-App-Entwickler sollte sich das ansehen Richtlinien für iOS-Benutzeroberflächen und folgen den Apple-Standards, wenn es darum geht, Grundlagen, Design-Strategien, UI-Elemente, Icon / Image-Design, etc. zu entwerfen. Der Android-Entwickler sollte dagegen alles über die Komponenten, den Stil, die Benutzerfreundlichkeit und das Layout typischer Android-Anwendungen erfahren mit Hilfe der Android-Entwickler führen .
6) Stellen Sie alle Inhalte für alle Benutzer zur Verfügung
Einige Designer entscheiden sich, anstatt alle ihre Inhalte in flüssigen Layouts zu bearbeiten, einfach, sie vor den mobilen Nutzern zu verbergen. Manchmal liegt es daran, dass das Layout schwierig ist, oder dass es für ein mobiles Layout einfach zu viel Inhalt gibt. Dies ist der falsche Ansatz.
Den Nutzern eine "abgespeckte" Version Ihrer Website oder App zu bieten, ist nicht nur unfair für mobile Nutzer, sondern kann auch ernsthafte Fehlreaktionen auslösen und Ihre Kunden verlieren. Sie müssen möglicherweise das Layout auf das Äußerste vereinfachen, Inhalte auf andere Bildschirme verschieben, um Unordnung zu vermeiden, oder einfach versuchen, alles besser zu organisieren. aber es muss da sein .
Vergleichen Sie die Desktop-Version des BBC Seite zur mobilen Version. Obwohl es einfacher ist als früher, werden immer noch alle möglichen Informationen auf dem Bildschirm angezeigt. Die mobile Version lässt dagegen einige der Bilder fallen (die in den Artikeln selbst noch verfügbar sind), behält aber alle Überschriften bei, was das Erlebnis auf einem Bildschirm in Telefongröße drastisch vereinfacht.
7) Design für die Berührung
Es ist auch nützlich, daran zu denken, dass ein Benutzer eines mobilen Geräts Finger anstelle von präzisionsfreundlichen Mauszeigern verwendet. Ihr Design sollte leicht mit Fingern aller Größen und Formen zu navigieren sein, da alle mobilen Geräte jetzt Touchscreen sind. Ein Benutzer sollte nicht zu viel drücken oder zoomen müssen, um auf etwas zu tippen oder ein Formular auszufüllen oder auf eine Schaltfläche zu tippen. Ungenaue Abgriffe sind auch bei kleinen Geräten sehr üblich, die im Design mit ausreichend großen Berührungseingaben oder Gesten berücksichtigt werden sollten, um die Arbeit zu erledigen.
Hier ist ein Berührungstabelle durch Peter-Paul Koch das könnte helfen. Beachten Sie, dass Berührungen (und andere Aktionen) je nach Browserkompatibilität und Gerät variieren können.
8) Verwenden Sie Kompressionswerkzeuge
Die Menge an Werkzeugen, die heute zur Verfügung stehen, um die Arbeit eines Designers weniger belastend zu gestalten, ist unergründlich. Sie finden Skript-Kompressoren wie HTML-Komprimierung oder Gzip Komprimierung, die automatisch unnötige Kommentare, Leerzeichen oder Code entfernt. CSS-Minifier und CSS-Kompressor und einige weitere Tools, mit denen Sie CSS-Code verketten und die Leistung verbessern können. Bildkomprimierung ist ebenso wichtig; einige, die die Größe Ihrer JPEG- und PNG-Dateien verringern, während die Qualität unverändert erhalten bleibt EWWW Bildoptimierer , smush.it , optiPNG , und JPEGTRAN .
Hier ist ein Beispiel für ein reaktionsschnelles Portfolio-Design von Ry Johnson . Die Website ist voll von spektakulären Bildern, die sich nicht von der Desktop-Version unterscheiden. Das Geheimnis des schnellen Ladens ist hier zweifelsohne die Bildoptimierung.
