Responsive Webdesign Best Practices & Tipps

Da Google weiterhin mobilfreundliche Websites priorisiert, wird es immer wichtiger, eine reaktionsschnelle Website für Ihr Unternehmen zu haben. Wenn Ihre Website responsive ist, sieht sie auf allen Geräten (Handy, Tablet, Desktop usw.) gut aus.

Auch wenn es entmutigend erscheinen mag, Ihre bestehende Website zu überarbeiten, muss ein responsives Website-Design nicht schwierig sein. Im Folgenden finden Sie einige praktische Tipps und Best Practices, die Ihnen dabei helfen werden, einfach und mit wenig Aufwand ein großartiges, benutzerfreundliches Website-Produkt zu erstellen.

Definieren Sie Ihren Stil

Erstellen einer Farbpalette

Unabhängig davon, ob Sie mit einer vordefinierten Markenfarbpalette arbeiten oder Ihre eigene erstellen, denken Sie daran, genügend kontrastierende Farben einzubeziehen, damit Sie eine klar definierte visuelle Hierarchie erstellen können. Das Hinzufügen verschiedener Schattierungen von neutralen Farben gibt Ihnen viel Flexibilität in Ihren Designs.

Denken Sie zuerst mobil

Denken Sie zuerst darüber nach, wie Ihre Webelemente auf kleinen Mobilgeräten aussehen werden, und wenden Sie sie dann auf größere Darstellungsgrößen an. Sind Ihre Schaltflächen beispielsweise groß genug für einen Fingerdruck und weit genug von anderen anklickbaren Elementen entfernt?

Erstellen Sie Ihren Styleguide nach Ihren ersten Layouts, nicht vorher

Einige Leute erstellen gerne einen Styleguide und definieren ihre Webelementstile, bevor sie mit einem High-Fidelity-Prototypen oder -Mockup beginnen. Sobald die Elemente jedoch auf der Seite positioniert sind und relativ zueinander betrachtet werden, kann das Gesamtdesign der Seite verloren gehen. Erstellen Sie zu Beginn ein paar Mockups, legen Sie Ihre Stile fest und gestalten Sie dann bei Bedarf Ihre verbleibenden Seiten.

Konsequent muss nicht langweilig bedeuten

Usability-Heuristiken sind wichtig, heben sich aber auch von den Milliarden anderer Websites im Web ab. Scheuen Sie sich nicht, etwas anderes auszuprobieren, um einprägsamer zu sein und der Marke Ihrer Website zu helfen, sich von der Masse abzuheben. Ihre Website kann kreativ und auch sehr benutzerfreundlich sein. Ein großartiger UI-Designer oder Digital Art Director sollte in der Lage sein, diese beiden Elemente in Einklang zu bringen.

Zu den Elementen, die Sie vielleicht stylen und standardisieren möchten, gehören:

• Überschriftenebenen: H1, H2, H3…
• Haupt- oder Heldenbilder
• Primärnavigation
• Sekundärnavigation
• Körper Kopie
• Nummerierte und Aufzählungslisten
• Call-Outs oder Abzeichen
• Behandlung von Inhaltsbildern
• Pull-Zitat-Stil
• Widgets (Rotatoren, soziale Einbettungen, Kalender etc.)
• Große Call-to-Action-Buttons
• Sekundäre Schaltflächen oder Textlinks
• Formularelemente
• Fußnoten und legaler Mäusetyp
• Soziales Teilen

Typ

Blöcke kopieren

Spielen Sie mit Buchstabenabständen (Laufweite), Rändern und Zeilenabständen (Führung), um Ihre Hierarchie neu zu definieren. Je enger der Abstand, desto schwerer und klaustrophobischer erscheint der Text.

Denken Sie daran, dass lange Textblöcke, die von der linken Seite bis zur rechten Seite Ihres Desktop-Bildschirms verlaufen, sehr anstrengend für das Auge sein können. Verwenden Sie nach Möglichkeit einen schmaleren Kopierblock. Zu viel Abstand kann jedoch ein trockenes, zerstreutes Gefühl erzeugen.

Scheuen Sie sich nicht, es aufzulösen

Wenn Sie eine sehr inhaltsreiche Webseite haben, brechen Sie den Inhalt ein wenig mit Pull-Quotes, Callouts, Bildern, gestalteten Listen, Tabellen usw. auf. Sie können auch Ziehharmonikas, Drop-downs und Karussells einbauen, um die Seite interessant und informativ zu halten .

Ja, die Leute scrollen nach unten

Fallen Sie nicht in die altmodische Falle, zu denken, dass alles auf Ihrer Webseite über der digitalen Falte erscheinen muss. Halten Sie die wichtigsten oder überzeugendsten Inhalte weiter oben auf der Seite, um einen Benutzer weiter nach unten zu führen. Das kann eine kreative, aber aussagekräftige Überschrift, ein fesselnder Einleitungssatz oder ein starkes Bild sein.

VERBUNDEN

Die führenden Designtrends 2020

Größerer Typ

Halten Sie sich für eine responsive Website generell an eine Schriftgröße von 14-18 Pixel. Verwenden Sie im Allgemeinen einfache Sans- oder Serifenschriften für diese größeren Textblöcke und halten Sie sie auf einem hellen Hintergrund mit einer mäßig kontrastierenden Schriftfarbe. Die Hauptüberschrift kann größer sein, aber denken Sie daran, dass sie möglicherweise etwas kleiner gestaltet werden muss, nachdem ein Haltepunkt in mobiler Größe erreicht wurde.

Geben Sie Farbe ein

Der Trick bei der Schriftfarbe besteht darin, dass sie genügend Kontrast zum Hintergrund haben sollte, damit Sie sie gut sehen können, aber was viele Designer nicht wissen, ist, dass Schrift manchmal zu kontrastreich sein kann und das Auge hart wirkt, sodass sie zu vibrieren scheint beim Betrachten. Versuchen Sie, hellere Schrift auf dunklerem Hintergrund sparsam und nur für kleinere Textblöcke zu verwenden.

Geben Sie Gewicht ein

Dickere Schriftarten können in kleineren Größen schwer lesbar sein und können dazu führen, dass sich die Seite bei größeren Größen dunkel und schwer anfühlt. Dünne und helle Schriftarten sehen auf Retina- und Retina-Bildschirmen gut aus, können aber auf vielen Bildschirmen mit Standardauflösung schwach aussehen.

Navigation

Hamburger!

Der Navicon ist die Ikone, die auch wie ein kleines Sandwich oder Hamburger mit drei Stapellinien aussieht. Wenn Sie der Meinung sind, dass Ihre allgemeine Benutzerdemografie mit Online-Technologien nicht so vertraut ist, fügen Sie immer das Wort „Menü“ über oder neben dem Navicon ein . Bisherige Benutzerstudien zeigen, dass ein Benutzer eher dazu neigt, Ihre Website zu durchsuchen, wenn Sie das Wort Menü oder Navigieren neben oder über dem Navicon einfügen.

Fügen Sie am Ende der langen Scroll-Seite eine „Zurück zum Anfang“-Schaltfläche ein

Untersuchungen haben uns gezeigt, dass viele Benutzer von Mobilgeräten nicht wissen, wie sie in ihrem mobilen Webbrowser einfach zum Anfang einer Webseite springen können. Um dieses Problem zu lösen, stellen Sie unten auf Ihrer Webseite eine Schaltfläche "Zurück nach oben" bereit. Dies ermöglicht einem Benutzer einen einfachen Zugriff auf die Site-Navigation, wenn sie nicht in der Fußzeile gespiegelt ist.

Eine weitere Option ist die Erstellung eines Sticky-Navigationssystems. Dies ist eine Top-Site-Navigationsleiste, die immer oben auf Ihrem Bildschirm bleibt, egal wie weit Sie auf der Seite nach unten scrollen. Wenn Sie sich für diesen Weg entscheiden, stellen Sie sicher, dass Ihre Sticky-Navigation nicht höher als 100 Pixel ist, da Ihnen sonst bei kleineren Darstellungsgrößen der Platz für Ihren Seiteninhalt ausgeht.

Design-Glossar:

Aufbieten, ausrufen, zurufen
ein kurzes Stück Text, das stärker als der Rest der Seite gesetzt ist und Aufmerksamkeit erregen soll.

Block kopieren
ein gruppierter Absatz oder eine Reihe von Textabsätzen.

Die (digitale) Falte
Wird im Website -Design verwendet (zusammen mit „ above the scroll“), um auf den Teil der Webseite zu verweisen, der ohne Scrollen sichtbar ist. Da die Bildschirmgrößen stark variieren, gibt es keine festgelegte Definition für die Anzahl der Pixel, die die Faltung definieren.

Serife
ein leichter Vorsprung, der bei bestimmten Schriftarten einen Buchstabenstrich abschließt.

Serifenlos
Eine serifenlose , serifenlose , gotische, serifenlose oder einfach serifenlose Schrift ist eine Schrift, die am Ende der Striche keine kleinen vorstehenden Merkmale aufweist, die als „ Serifen “ bezeichnet werden. Der Begriff kommt vom französischen Wort sans , was „ohne“ bedeutet, und „ serif “ vom niederländischen Wort schreef, was „Linie“ bedeutet.

Typ (typografisches) Gewicht
relative Dunkelheit der Zeichen einer Schriftart, die sich aus der relativen Dicke der Striche ergibt, ausgedrückt als hell, fett, extra fett usw.

Benutzer
eine Person, die etwas benutzt oder betreibt, insbesondere einen Computer, ein Gerät oder andere Maschinen.

Ansichtsfenster
ein gerahmter Bereich auf einem Anzeigebildschirm zum Betrachten von Informationen.

Weißer Raum
im seitenlayout, in der illustration und in der skulptur wird der weiße raum oft als negativer raum bezeichnet. Es ist der Teil einer Seite, der nicht markiert ist: Ränder, Bundstege und Zwischenräume zwischen Spalten, Textzeilen, Grafiken, Figuren oder gezeichneten oder abgebildeten Objekten.