Logo techoscience.com
10 Wichtige Überlegungen Für Ihre Strategie Für Mobiles Webdesign
10 Wichtige Überlegungen Für Ihre Strategie Für Mobiles Webdesign

Video: 10 Wichtige Überlegungen Für Ihre Strategie Für Mobiles Webdesign

Video: 10 Wichtige Überlegungen Für Ihre Strategie Für Mobiles Webdesign
Video: Grundlagen Webdesign - Strategie - Interface Design - Usability erklärt 2023, Juni
Anonim

Brian Casel ist Webdesigner und Co-Moderator von Freelance Jam, der Live-Web-Show für unabhängige Profis, die das Web erstellen. Verbinde dich mit Brian auf Twitter @CasJam.

Es gibt jetzt kein Zurück mehr. Das Web ist mobil geworden. Mehr Benutzer als je zuvor greifen von mehr Orten auf mehr Geräten auf das Internet zu. Was bedeutet das für Webdesigner und Websitebesitzer? Dies bedeutet, dass wir in jedem Projekt eine mobile Strategie verfolgen müssen.

Ihre Strategie hängt davon ab, an welcher Art von Projekt Sie arbeiten. Machen Sie jedoch keinen Fehler. Sie benötigen eine Strategie für die Funktionsweise Ihrer Website (oder der Website Ihres Kunden) im mobilen Bereich. Unabhängig davon, ob Sie eine Website entwerfen, die größtenteils statisch ist (ist irgendetwas im Web wirklich noch statisch?), Eine inhaltsgesteuerte Nachrichtenseite oder eine interaktive Webanwendung, ist es am besten, einen abgerundeten Ansatz zu verfolgen - einen, der a nachdenklicher Blick auf die Benutzererfahrung Ihrer mobilen Website.

In diesem Artikel möchte ich 10 wichtige Punkte hervorheben, die Sie als Webdesigner, Entwickler oder Websitebesitzer zu Beginn Ihres Projekts zur Gestaltung mobiler Websites berücksichtigen müssen. Diese Ideen berühren alle Aspekte eines Prozesses, von der Strategie über das Design bis zur Implementierung. Es ist jedoch wichtig, diese Punkte im Voraus zu berücksichtigen, um den erfolgreichen Start Ihrer mobilen Website sicherzustellen.

1. Definieren Sie Ihren Bedarf an einer mobilen Site

Normalerweise entsteht ein Designprojekt für mobile Websites unter folgenden Umständen:

  • Es ist eine brandneue Website, die sowohl eine Desktop- als auch eine mobile Strategie benötigt.
  • Es handelt sich um eine Neugestaltung einer vorhandenen Website, die eine neue mobile Website enthalten wird.
  • Es ist eine Hinzufügung einer mobilen Site zu einer vorhandenen Desktop-Site, die sich nicht ändert.

Jeder dieser Umstände bringt unterschiedliche Anforderungen mit sich, anhand derer Sie den besten Weg für die Zukunft ermitteln können, wenn Sie die unten beschriebenen Punkte berücksichtigen.

2. Berücksichtigen Sie die Geschäftsziele

In den meisten Fällen werden Sie als Designer / Entwickler von einem Kunden beauftragt, eine mobile Website für sein Unternehmen zu entwerfen. Was sind die Geschäftsziele in Bezug auf die Website, insbesondere die mobile Website? Wie bei jedem Entwurf müssen Sie diese Ziele priorisieren und dann diese Hierarchie in Ihrem Entwurf kommunizieren. Wenn Sie Ihr Design auf Mobilgeräte übertragen, müssen Sie noch einen Schritt weiter gehen und sich auf einige der wichtigsten Ziele für das Unternehmen konzentrieren.

Nehmen Sie als Beispiel die Website für Hyundai. Wenn Sie hyundai.com in einen Desktop-Browser laden, sehen Sie als erstes große, fette Bilder, die eine emotionale Verbindung zu ihren Fahrzeugen hervorrufen. Darüber hinaus sehen Sie eine robuste Navigation, Hinweise zu verschiedenen Vorteilen des Besitzes eines Hyundai, eine Website-Suche und Links zu sozialen Medien.

Hyundai Desktop Site
Hyundai Desktop Site

Laden Sie jetzt hyundai.com in Ihren mobilen Browser und Sie haben eine abgespeckte Version der Website. Das auffälligste Merkmal ist jedoch immer noch dasselbe: ein relativ großes Bild des neuesten Fahrzeugmodells, gefolgt von mehreren anderen (für Mobilgeräte optimierten) Bildern von Fahrzeugen. Sie sehen die komplexe Navigation und andere Beschriftungen in der mobilen Version nicht. Sie entschieden sich dafür, ihre mobile Website auf ihr primäres Geschäftsziel zu konzentrieren, nämlich eine emotionale Verbindung mit ihren Autos durch mutige Bilder herzustellen.

Hyundai Mobile Site
Hyundai Mobile Site

3. Studieren Sie die Daten der Vergangenheit, bevor Sie fortfahren

Wenn es sich bei diesem Projekt um ein Redesign handelt (die meisten Webdesign-Projekte finden derzeit statt) oder um das Hinzufügen einer mobilen Website zu einer vorhandenen Website, hat die Website hoffentlich den Datenverkehr mit Google Analytics (oder einer anderen Metrik-Tracking-Software) verfolgt. Es ist ratsam, die Daten zu studieren, bevor Sie sich mit Design und Entwicklung befassen.

Analysieren Sie beispielsweise, von welchen Geräten und Browsern Ihre Benutzer auf die Site zugreifen. Während Sie sicherstellen möchten, dass die Site mit Blick auf die Geräteunterstützung erstellt wurde, können Sie diese Browser als hohe Prioritäten festlegen, wenn Sie vom Entwurf über die Entwicklung, das Testen und den Start gehen.

4. Üben Sie Responsive Web Design

Mit so vielen neuen Mobilgeräten, die jedes Jahr veröffentlicht werden, sind die Tage der Überprüfung Ihrer Website in einigen Webbrowsern und des Starts vorbei. Sie müssen Ihre Website für eine große Landschaft von Desktop- und mobilen Browsern optimieren, die jeweils eine andere Bildschirmauflösung, unterstützte Technologien und Benutzerbasis bieten. Wie im bekannten Artikel Responsive Web Design empfohlen, können Sie die Desktop- und mobilen Website-Erlebnisse gleichzeitig erstellen. Um aus diesem Artikel zu zitieren:

Mithilfe der neuesten und zukunftsweisendsten Webtechnologien wie HTML5, CSS3 und Web-Schriftarten können Sie Ihre Website so gestalten, dass sie skaliert und an jedes Gerät angepasst werden kann, auf dem sie angezeigt wird. Das nennen wir Responsive Web Design.

5. Einfachheit ist golden, aber …

Als allgemeine Faustregel beim Konvertieren eines Desktop-Site-Designs in ein mobiles Format möchten Sie die Dinge nach Möglichkeit vereinfachen. Dafür gibt es mehrere Gründe. Für eine mobile Site ist es immer eine gute Idee, die Dateigröße und die Ladezeiten niedrig zu halten. Drahtlose Verbindungen sind zwar schneller als in den vergangenen Jahren, aber immer noch relativ langsam. Je schneller Ihre mobile Site geladen wird, desto besser.

Überlegungen zur Benutzerfreundlichkeit im mobilen Web erfordern auch einen vereinfachten Ansatz für Design, Layout und Navigation. Da Ihnen weniger Bildschirmfläche zur Verfügung steht, müssen Sie die Platzierung der Elemente mit Bedacht auswählen. Kurzum: Weniger ist mehr.

Wir können jedoch immer noch schöne Designs erstellen, die für Mobilgeräte optimiert sind. CSS3 bietet uns eine erstaunliche Reihe von Werkzeugen zum Erstellen von Verläufen, Schlagschatten und abgerundeten Ecken, ohne auf umfangreiche Bilder zurückgreifen zu müssen. Das heißt nicht, dass Sie überhaupt keine Bilder verwenden können.

Schauen Sie sich diese Beispiele für mobile Websites an, die eine gute Balance zwischen Einfachheit und Schönheit finden.

Einfachheit
Einfachheit

6. Einspaltige Layouts funktionieren normalerweise am besten

Wenn Sie über das Layout nachdenken, funktioniert eine einspaltige Struktur am besten. Dies hilft nicht nur bei der Verwaltung des begrenzten Speicherplatzes auf dem kleineren Bildschirm, sondern auch bei der einfachen Skalierung zwischen verschiedenen Geräteauflösungen und beim Umschalten zwischen Hoch- und Querformat.

Mithilfe reaktionsschneller Webdesign-Techniken können Sie ein mehrspaltiges Desktop-Site-Layout erstellen und an ein einspaltiges Layout anpassen. Die neue mobile Basecamp-Website leistet hierzu hervorragende Arbeit.

Basislager Bild
Basislager Bild

7. Vertikale Hierarchie: Denken Sie in zusammenklappbaren Begriffen

Verfügt Ihre Site über viele Informationen, die auf der mobilen Site präsentiert werden müssen? Eine gute Möglichkeit, Dinge auf einfache und leicht verdauliche Weise zu organisieren, besteht darin, eine zusammenklappbare Navigation einzurichten. Wenn Sie Ihre einspaltige Struktur noch einen Schritt weiter gehen, können Sie Teile großen Inhalts in Faltmodulen stapeln, mit denen der Benutzer auf den Inhalt tippen kann, an dem er interessiert ist, und den Rest ausblenden kann.

Schauen Sie sich die mobile Website für Major League Baseball an. Am oberen Rand der Seite befindet sich eine Schaltfläche mit der Bezeichnung "Teams". Durch Tippen auf diese Option wird die Seite erweitert und die 30 Teams werden vertikal auf der einspaltigen Seite aufgelistet.

MLB Mobile
MLB Mobile

8. Gehen Sie von "Klickbar" zu "Klopfbar"

Im mobilen Web erfolgt die Interaktion über Fingertipps und nicht über Mausklicks. Dies schafft eine ganz andere Dynamik in Bezug auf die Benutzerfreundlichkeit.

Bei der Konvertierung von einem Desktop- in ein mobiles Site-Design müssen Sie Ihre "anklickbaren" Elemente - Links, Schaltflächen, Menüs usw. - erneut aufrufen und sie "tippbar" machen. Während sich das Desktop-Web gut für Links mit kleinen und präzisen aktiven (anklickbaren) Bereichen eignet, erfordert das mobile Web größere, klobigere Schaltflächen, die leicht mit dem Daumen gedrückt werden können.

Darüber hinaus gibt es im mobilen Web keinen Schwebezustand. Wenn etwas für den Hover eingerichtet ist (z. B. ein Dropdown-Navigationsmenü), geschieht dies meistens beim ersten Tippen, wenn es auf einem mobilen Gerät angezeigt wird. Das zweite Tippen auf der mobilen Site bewirkt das, was der erste Klick auf der Desktop-Site bewirkt. Dies kann bei mobilen Benutzern zu Verwirrung führen. Dies bedeutet, dass Sie die Schwebezustände für mobile Benutzer überarbeiten müssen.

9. Geben Sie Feedback zur Interaktion

Wenn Sie von Interaktion sprechen, müssen Sie sicherstellen, dass Sie offensichtliches Feedback zu allen Aktionen geben, die im Front-End Ihrer mobilen Website ausgeführt werden.

Wenn der Benutzer beispielsweise auf einen Link oder eine Schaltfläche tippt, empfiehlt es sich, dass diese Schaltfläche den Status visuell ändert, um anzuzeigen, dass auf sie getippt und die Aktion gestartet wurde. Es ist üblich, dass ein weißer Link auf dem iPhone beim Tippen vollständig blau wird. Dieses visuelle Feedback ist den meisten Benutzern bekannt, und Sie sollten es nutzen.

Eine weitere bewährte Methode besteht darin, Ladezustände für Aktionen einzuschließen, deren Laden etwas länger dauern kann. Verwenden Sie ein animiertes Ladebild, um anzuzeigen, dass gerade etwas läuft. Basecamp Mobile leistet hervorragende Arbeit, indem es beim Laden der nächsten Seite ein sich drehendes Lade.gif" alt="Image

Denken Sie daran, dass in den Desktop-Browsern verschiedene Indikatoren integriert sind, die anzeigen, dass gerade etwas läuft. Mobile Browser machen dies nicht so offensichtlich, daher ist es wichtig, visuelles Feedback in das Design Ihrer mobilen Website einzubauen.

10. Testen Sie Ihre mobile Website

Wie bei jedem Projekt müssen Sie Ihre mobile Website auf so vielen Geräten wie möglich testen. Ohne all diese Geräte zu besitzen, kann es etwas schwierig sein, Wege zu finden, um jedes Gerät genau zu testen. Dabei wird das Entwickler-SDK für die Plattform (wie das iPhone SDK und das Android SDK) installiert und webbasierte Emulatoren zum Anzeigen anderer mobiler Plattformen verwendet.

Dieser Artikel enthält eine ausführliche Beschreibung des Testens einer mobilen Website auf den beliebtesten Plattformen.

Es kann losgehen!

Hoffentlich gab dieser Artikel einen Einblick, als Sie ein neues Designprojekt für mobile Websites starten. Stellen Sie sicher, dass Sie in den Kommentaren unten weitere Tipps hinterlassen, die Sie beim Entwerfen für das mobile Web nützlich finden.

ford_logo_driveone
ford_logo_driveone

Interessiert an mehr mobilen Ressourcen? Schauen Sie sich Mashable Explore an, eine neue Möglichkeit, Informationen zu Ihren bevorzugten Mashable-Themen zu finden.

Brian Casel

Brian Casel schreibt wöchentlich einen Newsletter, um Freiberuflern und Gründern beim Aufstieg zu helfen. Nehmen Sie an seinem kostenlosen Crashkurs in Productizing Your Service teil. Verbinde dich mit Brian… Mehr

Beliebt nach Thema