So gestalten Sie eine Website neu, damit sie auf Mobilgeräten unglaublich aussieht
Veröffentlicht: 2016-01-24[ Proto .io ist ein Prototyping-Tool für mobile Apps, das von Unternehmern und Startups verwendet wird, um vollständig interaktive, realistische Prototypen zu erstellen, die wie echte Apps aussehen und sich anfühlen.]
Vor fünfzehn Jahren war die Neugestaltung einer Website ein viel unkomplizierteres Unterfangen – Sie entschieden einfach, wie Ihr Desktop-Erlebnis aussehen würde, organisierten Ihre Inhalte entsprechend und bauten die Website auf. Unglaublicherweise fehlt einigen Websites immer noch ein echtes mobiles Erlebnis, sei es eine separate Website-Neugestaltung oder ein gut geplantes responsives Design.
Design kann sich manchmal wie ein endloses Aufholspiel anfühlen, aber diese Experten für mobile Apps können Ihnen dabei helfen, Ihr Weberlebnis neu zu gestalten, damit es auf jedem Gerät, Desktop oder Mobilgerät gut aussieht.
So gestalten Sie eine Website für ein attraktives mobiles Erlebnis neu
Handsome (@HandsomeMade) ist ein Design- und Technologieunternehmen, dessen Kernwerte „menschenzentriertes Denken auf allen Ebenen“ und „zielgerichtet schöne und ansprechende Software“ umfassen. Creative Director Brandon Termini und Technical Director Alex Zub erklären, wie sie diese Prinzipien auf die Neugestaltung mobiler Websites anwenden:
Laut Termini liegt der Schlüssel zum Redesign einer Handsome-Website darin, einen „Mobile-First-Design-Ansatz“ zu verfolgen, der die Benutzererfahrung so elegant und benutzerfreundlich wie möglich macht. „Eine Möglichkeit, wie wir Mobile-First-Design anwenden, besteht darin, mit kleineren Bildschirmgrößen zu beginnen, was uns dazu zwingt, die Benutzeroberfläche so weit wie möglich zu vereinfachen und nur das auf den Bildschirm zu bringen, was wirklich am wichtigsten ist.“
Zub fügt hinzu: „Die Nutzung von Technologien und Best Practices – wie Responsive Design und Adaptive Design, mit ihrer kompatiblen technischen Implementierung – ist der Schlüssel. Bei vielen Produkten ist es sinnvoll, an responsiven Grid-Systemen festzuhalten, was den Aufbauaufwand vereinfacht und gleichzeitig die tolle Optik auf allen Arten von Bildschirmen beibehält.“
So gestalten Sie eine Website neu, damit sie auf Mobilgeräten schön aussieht
Wir haben Termini gebeten, einige seiner Best Practices für visuelles Design zu teilen. „Es gibt Hunderte von Geboten und Verboten, die wir im Laufe der Jahre zusammengestellt haben“, sagt er. Dies sind die drei besten Best Practices, die er bei Hübscher einführt:
- Denken Sie sorgfältig über Ihre Layout-Hierarchie nach. „Ein erfolgreiches Layout bedeutet, dass ein Benutzer in der Lage sein sollte, Sie durch das zu führen, was er in der von Ihnen beabsichtigten Reihenfolge sieht/liest. Eine gute Nutzung von Weißraum, Farbtheorie, Typografie usw. spielen dabei alle eine zentrale Rolle.“
- Verwenden Sie Farbe angemessen. „Wählen Sie Farben aus, die zu Ihrer Marke passen, und stellen Sie sicher, dass sie gut miteinander harmonieren. Verwenden Sie eine Hero-Farbe, die Sie mit wichtigen UI-Elementen wie Call-to-Action-Schaltflächen verknüpfen. Stellen Sie sicher, dass Sie an den richtigen Stellen, an denen Ihr Benutzer durch die Benutzeroberfläche fließt und nicht hängen bleibt, sparsam mit Farbe umgehen.“
- Typografie sollte angenehm für die Augen sein. „Stellen Sie sicher, dass Ihre Typografie für die Marke geeignet und auf den Geräten, für die Sie entwerfen, lesbar ist, und verwenden Sie Zierschriften sparsam.“
Testen der Neugestaltung Ihrer mobilen Website
Sobald Sie die mobile Website erstellt haben, müssen Sie sie natürlich auf Herz und Nieren prüfen, um eine großartige Benutzererfahrung zu gewährleisten. Termini sagt: „Häufiges Testen und Anpassen ist entscheidend. Beginnen Sie mit dem Testen, sobald Sie potenziellen Benutzern die ersten handgezeichneten Skizzen zeigen, und testen Sie während des gesamten Prozesses weiter, bis hin zu vollständig gebauten, entworfenen Systemen. Die Fähigkeit, Feedback zu hören, zu synthetisieren und zu iterieren, ist sehr wichtig für den Erfolg eines jeden Produkts.“
Für dich empfohlen:
Was bedeutet die Anti-Profiteering-Bestimmung für indische Startups?
Wie Edtech-Startups Indiens Arbeitskräften helfen, sich weiterzubilden und zukunftsfähig zu werden ...
New-Age-Tech-Aktien in dieser Woche: Zomatos Probleme gehen weiter, EaseMyTrip-Posts steigen...
Indische Startups nehmen Abkürzungen bei der Jagd nach Finanzierung
Digitale Marketingplattform Logicserve Bags INR 80 Cr-Finanzierung, Umbenennung in LS Dig...
Bericht warnt vor erneuter behördlicher Prüfung von Lendingtech Space
Zub fügt hinzu: „Qualitätssicherung ist ein wesentlicher Bestandteil bei der Entwicklung eines Produkts, das auf verschiedenen Arten von Geräten verwendet wird. Und da es praktisch unmöglich ist, alle möglichen Geräte im Büro zu haben, nutzen wir Online-Dienste, die den Zugriff auf Dutzende von „virtuellen“ Geräten in der Cloud ermöglichen und dies so weit wie möglich automatisieren. Mit angemessenen Investitionen in die Automatisierung ist es einfach und schnell, später geräteübergreifende Tests durchzuführen.“
Wir wollten noch mehr darüber erfahren, wie man das Redesign einer mobilen Website testet und der Qualitätssicherung unterzieht. Dafür haben wir von Simon Papineau, CEO von Crowdsourced Testing(@crowdsourcingqa), gehört. Papineau hat Crowdsourced Testing ins Leben gerufen, um einige der Schmerzpunkte zu beheben, auf die er in seiner Erfahrung beim Testen zahlreicher mobiler Apps, Websites, Spiele und mehr gestoßen war.
Was auf dem Desktop funktioniert, funktioniert nicht immer auf dem Handy – und umgekehrt
Papineau sagt: „Was Entwickler gerne vergessen, ist, dass Sie auf Ihrer mobilen Website nicht die gleiche Tiefe oder den gleichen Inhalt benötigen, den Sie auf Ihrer Desktop-Website anzeigen würden. Die Absicht, die Denkweise und das Ziel des mobilen Benutzers sind völlig unterschiedlich. Besucher werden keine 20 Minuten am Telefon verbringen, um sich über die Geschichte und das Kleingedruckte Ihres Unternehmens zu informieren.
Geben Sie ihnen stattdessen so direkt und so schnell wie möglich, was sie wollen. Wenn es Ihre Kontaktdaten sind, stellen Sie diese direkt auf die Homepage, ohne viel Schnickschnack.“
Eine der Herausforderungen, sagt Papineau, besteht darin, sicherzustellen, dass das Redesign Ihrer mobilen Website gut aussieht und auf einer Vielzahl von Geräten gut funktioniert: „Das Testen, ob Websites responsive sind, kann sehr zeitaufwändig und kostspielig sein. Das Beste, was ein Unternehmen tun kann, ist sich auf die Top 15-20 Geräte zu konzentrieren, die den Großteil seiner Besuche ausmachen. Es wird immer ein mobiles Gerät geben, auf dem die Seite nicht perfekt aussieht. Aber wenn dieses Gerät 0,05 % Ihrer Besucher ausmacht, lohnt sich der zusätzliche Entwicklungsaufwand wahrscheinlich nicht.“
So gestalten Sie eine Website mit Responsive Design neu
Bob Bentz ist Präsident von ATS Mobile (@atsMobile), einer Full-Service-Agentur für mobiles Marketing, die die Neugestaltung von Websites für Kunden aus verschiedenen Branchen überwacht. Bentz setzt sich leidenschaftlich dafür ein, dass eine Website-Erfahrung auf einem mobilen Gerät genauso gut aussieht und sich so gut anfühlt wie auf einem hochauflösenden Desktop-Monitor, und eine der wichtigsten Methoden, mit denen ATS Mobile dies für seine Kunden erreicht, ist die Verwendung von responsivem Design.
Warum Responsive Design? Eine Grundierung
„Responsive Webdesign (RWD), am häufigsten mit HTML5 entworfen, wird wahrscheinlich die Wahl in fast allen neuen mobilen Web-Builds sein“, sagt Bentz. „Es kann auch mit CSS3 und Javascript gestaltet werden. Responsive Design hat den bemerkenswerten Vorteil, dass es sehr flexibel ist, da es sich fließend an jedes Gerät anpasst. RWD funktioniert, indem es unabhängig vom Gerät denselben Code sendet und ihn dann auf der Clientseite neu anordnet, sodass dieselbe Webseite auf jedem Gerät angezeigt werden kann.“
Um Responsive Design in Aktion zu sehen, rufen Sie diesen Blogbeitrag auf einem Desktop-Bildschirm auf, falls Sie dies noch nicht getan haben (wir warten!). Sie werden feststellen, dass es mehrere Fenstergrößen gibt, bei denen die Benutzeroberfläche "unterbricht" und sich neu anordnet, sodass die Seite je nach verwendetem Gerät (und wie groß das Fenster innerhalb dieses Geräts ist) unterschiedlich aussieht.
Wie genau funktioniert also Responsive Design – und warum sollten Sie es für die Neugestaltung Ihrer Website verwenden? „Ein responsives Website-Redesign liefert den gleichen HTML-Code auf der gleichen URL, unabhängig davon, ob das Gerät des Benutzers ein Desktop, Tablet, Phablet, Smartphone, Feature-Phone oder Wearable (wie die Apple Watch) ist“, sagt Bentz. „Es kann auch je nach Bildschirmgröße der Website unterschiedlich reagieren. Entwickler können entscheiden, welche Grafiken und Inhalte für Benutzer von Mobilgeräten und Tablets verwendet werden. Text und Bilder können basierend auf jedem Browser oder jeder Bildschirmgröße angepasst werden.“
Mit Responsive Design versichern Sie sich, dass Sie nicht jedes Mal ein neues Update vornehmen, wenn sich etwas am Status Quo der mobilen Geräte ändert. „Wenn ein neues Gerät auf den Markt kommt und auf Ihre Website zugreift, ist keine zusätzliche Programmierung erforderlich, wenn die Website auf responsivem Design basiert“, sagt Bentz. „Am wichtigsten ist jedoch, dass Responsive Design die von Google empfohlene Best Practice für Design ist. Bei vielen Websites erreicht RWD eine vernünftige Balance zwischen Mobilfreundlichkeit und einfacher Implementierung.“
Best Practices im responsiven visuellen Design
Laut Bentz trägt die Berücksichtigung der folgenden Best Practices dazu bei, dass Ihr responsives Website-Redesign optimal aussieht und funktioniert:
- Ein einfacher, markanter Header. „Header und Masthead sollten einfach sein, um die wichtigsten Verkaufsargumente nicht zu beeinträchtigen. Das Logo ist das zentrale Markenbild; Ein übermäßig horizontales Logo sieht auf kleineren vertikalen Bildschirmen möglicherweise nicht gut aus.“
- Benutzerfreundliche Navigation. „Auf einem kleinen Bildschirm ist die Navigation viel schwieriger. Häufig verwenden Designer eine Navigationsschaltfläche, die durch drei horizontale Linien angezeigt wird, normalerweise oben rechts auf der Website. Dies wird als „Hamburger-Menü“ bezeichnet, weil es wie ein Burger aussieht, der von einem Brötchen umgeben ist. Einige Websites verwenden eine linke Seitennavigation, die nach außen erweitert werden kann, um den größten Teil des Bildschirms abzudecken.“
- Viele Bilder. „Es ist schwierig, zu viele Bilder auf dem mobilen Bildschirm einzufügen, aber Worte können die Benutzeroberfläche schnell überwältigen. Daher verwenden Designer oft Bildkarussells, mit denen Benutzer durch mehrere Produktbilder wischen können, anstatt den Bildschirm mit Texten zu verstopfen.“
- Intelligente Nutzung der Fußzeile. „Die Verbraucher sind es gewohnt, die Fußzeile als Navigationswerkzeug zu verwenden, und sie nimmt nicht so wertvollen Platz ein wie die Kopfzeile „above the fold“. Es sollte auch den sehr wichtigen ‚Kontakt‘-Link enthalten.“
Ein wunderschönes Website-Redesign beginnt mit einem wunderschönen Prototyp
Zu lernen, wie man eine Website für Mobilgeräte neu gestaltet, ist keine Kleinigkeit, aber ein leistungsstarkes Rapid-Prototyping-Tool zu haben, mit dem Sie die Erfahrung testen können, macht den größten Unterschied. Nachdem Sie den Text gekürzt, Elemente reduziert und Ihr Navigationsschema herausgefunden haben, können Sie schnell Feedback von Benutzern darüber einholen, ob das Redesign Ihrer mobilen Website noch benutzerfreundlich und intuitiv ist. Dann iterieren Sie, wie Termini vorgeschlagen hat, weiter, bis Sie einen Prototyp haben, auf den Sie wirklich stolz sind.