Share
Responsives Webdesign ist heutzutage ein Muss. Angesichts der steigenden Anzahl von Benutzern, die ihre mobilen Geräte verwenden, um vor dem Kauf eines Produkts zu recherchieren und sich über die neuesten Nachrichten zu informieren, kann sich Ihr Unternehmen eine nicht reagierende Website nicht leisten.
Wenn Sie die Tatsache hinzufügen, dass Google in ihrem Suchalgorithmus mobile Websites bevorzugt, wird deutlich, dass responsives Design bestehen bleibt. Wenn Sie Ihre Website gerade erst auf den Weg bringen, helfen Ihnen die Tipps für responsives Webdesign, die in diesem Artikel beschrieben werden, eine attraktive und responsive Website. Und wenn Sie eine bestehende Site umgestalten, sind die gleichen Tipps ebenfalls hilfreich.
Die folgenden Tipps zum mobilen Website-Design und Responsive Design stellen sicher, dass Ihre Website sowohl reaktionsschnell als auch mobil ist. Hier sind einige unserer besten Tipps für responsives Webdesign:
Verstehen Sie, dass Menschen Websites auf Desktop-Computern anders verwenden als auf mobilen Geräten. Erwägen Sie, Ihre Website-Besucher zu befragen oder mithilfe von Analysen herauszufinden, warum sie mit einem mobilen Gerät auf Ihre Website zugreifen und auf welche Seiten und Elemente sie am häufigsten zugreifen. Diese Informationen helfen Ihnen zu verstehen, welche Seiten und anderen Elemente Ihrer Website auf kleineren Bildschirmen verfügbar sein müssen.
Wenn Sie beispielsweise Ihre Website schnell durchsuchen, um auf Ihre Kontaktinformationen zuzugreifen, stellen Sie sicher, dass Ihre Kontaktseite in der mobilen Navigation angezeigt wird.
Bevor Sie Ihre Site entwerfen, ist es hilfreich, zuerst das Layout zu planen. Tatsächlich erstellen die meisten Webdesigner zunächst ein Drahtgitter und dann das visuelle Design der Website, bevor sie sich dem Codierungsteil zuwenden. Auf diese Weise können Sie nicht nur genau das gewünschte Look and Feel erstellen, sondern auch Sie oder Ihr Designer können die Vorlage anpassen und nahtlos in Ihre Marke integrieren.
Stellen Sie sicher, dass Sie mehrere Prototypen Ihrer Website erstellen und diese auf verschiedenen Bildschirmgrößen testen, um sicherzustellen, dass das Enddesign ansprechend ist. Hier einige Werkzeuge, mit denen Sie responsive Prototypen erstellen können:
Die Navigation ist der wichtigste Teil einer Website. Es dient als Wegweiser für Ihre Besucher und ermöglicht ihnen den einfachen Zugriff auf andere Seiten Ihrer Website. Bei Desktop-Versionen Ihrer Website weist Ihre Navigation normalerweise sichtbare Links zu allen wichtigen Seiten auf. Auf mobilen Geräten verwenden Sie normalerweise ein Hamburger-Symbol, um die dahinter liegenden Links auszublenden.
Dies ist jedoch nicht immer der beste Ansatz, da einige Benutzer möglicherweise nicht erkennen, dass sie auf das Symbol klicken müssen, um das Menü anzuzeigen und frustriert zu bleiben, da sie keine anderen Seiten besuchen können. Ein besserer Ansatz wäre es, die wichtigsten Menüpunkte auch auf kleineren Bildschirmen sichtbar zu machen und für die restlichen Links das Hamburger Menü zu verwenden. Sie können auch Links zu anderen Seiten in den Text Ihrer Homepage einfügen, um die Navigation zu erleichtern.
Bilder spielen eine wichtige Rolle beim Design Ihrer Website. Sie können Ihnen dabei helfen, eine emotionale Verbindung zu Ihren Besuchern aufzubauen und ihnen zu ermöglichen, das Produkt, das sie kaufen möchten, zu visualisieren. Daher ist es entscheidend, dass Ihre Bilder für das Web optimiert werden.
Dies bedeutet, dass die Bilder im entsprechenden Format gespeichert werden sollen - JPG für fotografische oder szenische Bilder und PNG-8 für Symbole und Logos, die einen transparenten Hintergrund erfordern. Darüber hinaus sollten Sie die Bildgröße mit einem Tool wie TinyJPG reduzieren und die Verwendung von Bildern erwägen, die für verschiedene mobile Haltepunkte optimiert sind, um Skalierungs- und Bandbreitenprobleme zu reduzieren.
Eine andere Möglichkeit, Responsive Design anzusprechen, besteht darin, zuerst eine mobile Version Ihrer Website zu entwerfen. Auf diese Weise können Sie sehen, wie Bilder, Text, Logos und andere Elemente auf kleineren Bildschirmen aussehen. Wenn sie ohne Probleme angezeigt werden, sollten Sie keine Probleme damit haben, Ihr Design an größere Bildschirme anzupassen.
Medienabfragen wurden zunächst als Teil des ursprünglichen Vorschlags für CSS skizziert, wurden jedoch erst Realität, als Browser 2012 offiziell Unterstützung für sie hinzufügten. Die Hauptaufgabe von Medienabfragen besteht darin, dass Sie das Layout Ihrer Website optimieren können für verschiedene Bildschirmbreiten.
Bei der Verwendung von Medienabfragen reagiert der Inhalt auf unterschiedliche Bedingungen auf bestimmten Geräten. Kurz gesagt: Eine Medienabfrage überprüft die Auflösung, Breite und Ausrichtung des Geräts und zeigt die entsprechenden CSS-Regeln an. Ein Beispiel für eine Medienabfrage sieht folgendermaßen aus:
@media screen und (min-width: 500px) Ihre CSS-Regeln hier
Natürlich müssen sich Formulare auf Ihrer Website an die Breite und Größe des Bildschirms anpassen. Sie können jedoch noch einen Schritt weiter gehen und sicherstellen, dass die Eingabefelder den richtigen Tastaturtyp auslösen. Sie können dies einfach tun, indem Sie Ihren Formularfeldern Eingabeelemente hinzufügen.
Felder, für die eine Texteingabe erforderlich ist, wie Name, E-Mail-Adresse, Adresse usw., sollten eine Texttastatur auslösen, während jedes Eingabefeld, für das eine Nummer erforderlich ist, sofort die numerische Tastatur auslösen soll. Dies verbessert die allgemeine Benutzerfreundlichkeit Ihrer Website sowie die Benutzererfahrung.
Vergessen Sie nicht, den Schaltflächen auf Ihrer Website besondere Aufmerksamkeit zu schenken. Da der Bildschirm so wertvoll ist, fällt es leicht, in die Falle zu fallen und die Tasten so zu verkleinern, dass sie auf dem Bildschirm liegen. Dies macht sie jedoch auch schwieriger zu klicken.
Stellen Sie sicher, dass Ihre Tasten leicht zu erkennen sind:
Wenn es um die Größe geht, sollten Sie die Auffüllung Ihrer Schaltfläche in Betracht ziehen, um den klickbaren Bereich zu vergrößern. Sie können auch den Empfehlungen für das Materialdesign bezüglich der Zugänglichkeit der Tasten folgen und sicherstellen, dass sie 36 dB hoch sind. (1dp = 1px).
Wenn es sich um Text handelt, möchten Sie sicherstellen, dass der Text auf kleineren Bildschirmen lesbar ist. Eine gute Größe für Ihre Körperkopie ist 16px oder 1em. Passen Sie dann die Größe Ihrer Überschriften entsprechend an. Gleichzeitig sollten Sie die Zeilenhöhe Ihres Textes auf 1,5 cm einstellen, um sicherzustellen, dass Ihre Absatzzeilen genügend Atemraum haben.
Ein weiterer Tipp für das Design mobiler Websites ist die Verwendung einer lesbaren Schrift. Vermeiden Sie dekorative oder Skript-Schriftarten für Textkopien oder in Ihren Menüelementen, da sie schwer lesbar sind, insbesondere auf kleineren Bildschirmen.
Einer der größten Trends, der sich langsam in das Webdesign einfügt, ist die Verwendung von Mikrointeraktionen. In den vergangenen Jahren galten Animationen und interaktive Funktionen für die Mehrheit der Unternehmenswebseiten als "schön". Da sich Designer jedoch zunehmend auf die Benutzererfahrung konzentriert haben, ist die Verwendung von Animationen, insbesondere in Formularen, in den Vordergrund gerückt.
Sie bieten Benutzern ein schnelles Feedback, das besonders für mobile Geräte nützlich ist, anstatt die Seite erneut zu laden. Dadurch kann die Bandbreitennutzung erhöht werden. Betrachten Sie dieses Beispiel eines australischen Leasingunternehmens. Ich habe sie über ihre Verwendung von Mikrointeraktionen angesprochen. Das hatten sie zu sagen:
Unser Checkout-Formular wurde entwickelt, um Sydneysiders zu erleichtern, ein Reinigungsangebot für das Leasing zu erhalten. Wir wollten wirklich die Tatsache betonen, dass es wirklich sofort war und nichts tat dies mehr als durch die Verwendung einer Mikrointeraktion. Wenn Sie ein Angebot anfordern, wird eine Quittung hinter dem Formular animiert, und der Gesamtpreis Ihrer Anleihe wird angezeigt. Wir haben das Gefühl, dass dieser kleine "Ta-da" -Moment unsere Abschlussraten während des Bestellvorgangs wirklich erhöht hat.
Ein weiteres großartiges Beispiel für Mikrointeraktionen ist die Website von Le Cafe Noir Studio. Ihr Online-Shop verfügt über animierte Herzen, die Ihren Bildschirm überqueren, wenn Sie einen Artikel in Ihren Warenkorb legen, und vermittelt sofort ein Gefühl der sofortigen Wertschätzung Ihrer Kunden:
Sie können viel Zeit beim Entwerfen einer responsiven Website sparen, wenn Sie Ihrem Workflow ein responsives Framework hinzufügen. Ein HTML-Framework wie Bootstrap, das in einer HTML-Vorlage verwendet wird, ist ein guter Ausgangspunkt, wenn Sie einfache, statische Websites erstellen möchten.
Sie können auch vorgefertigte responsive WordPress-Themes nutzen, wenn Sie eine komplexere Website erstellen und ein Blog in Ihre Marketingstrategie integrieren möchten. Frameworks wie diese sind auch eine gute Wahl, wenn Sie kein erfahrener Programmierer sind, sondern alles selbst machen möchten.
Minimalistisches Design ist in den letzten Jahren aus gutem Grund immer beliebter geworden. Es beseitigt das Durcheinander, macht es Besuchern leichter, sich auf Ihre Inhalte zu konzentrieren, die Conversion-Raten zu verbessern und Ihre Website schneller zu laden, da weniger Elemente verwendet werden. Es eignet sich auch gut für responsives Webdesign, da Sie wichtige Website-Bereiche hervorheben und auf Ihre Handlungsaufforderungen aufmerksam machen können.
Durch das Einfügen von Share-Schaltflächen auf Ihrer Website kann Ihr Inhalt besser sichtbar gemacht werden und der Traffic erhöht werden. Freigabebuttons können Ihren Inhalt jedoch häufig blockieren, was das Lesen auf kleineren Bildschirmen erschwert. Vergewissern Sie sich, dass die Share-Schaltflächen auf kleineren Bildschirmen gut skalierbar sind, indem Sie sie auf einem mobilen Gerät testen oder in Betracht ziehen, sie auf Bildschirmen mit weniger als 768 Pixeln zu deaktivieren.
Sobald Sie die oben genannten Tipps für responsives Webdesign implementiert haben, lohnt es sich zu prüfen, ob Ihre Website jetzt reagiert. Es gibt zahlreiche Online-Tools, mit denen Sie die Reaktionsfähigkeit Ihrer Website testen können. Hier sind die drei wichtigsten Tools, die wir Ihnen empfehlen sollten:
Google hat eine eigene Version des mobile-freundlichen Tests und ist ziemlich unkompliziert. Sie geben die URL Ihrer Website ein und klicken auf Analysieren, und warten Sie dann auf die Ergebnisse. Wenn Ihre Website mobil ist, wird eine grüne Bestätigungsmeldung angezeigt. Wenn dies nicht der Fall ist, zeigt der Test Ihnen die Gründe, warum Ihre Website den Test nicht bestanden hat, und zeigt Ihnen Ressourcen an, um die Probleme zu beheben.
Screenfly von QuirkTools zeigt Ihnen, wie Ihre Website auf verschiedenen Bildschirmgrößen aussehen wird. Dieses Tool hilft Ihnen nicht weiter, indem Sie nützliche Tipps und Vorschläge hinzufügen. Sie können jedoch sehen, wie Ihre Website auf Smartphones, Desktops und sogar großen Fernsehbildschirmen angezeigt wird.
Schließlich können Sie mit MobileTest.me ein bestimmtes mobiles Gerät auswählen, Ihre URL eingeben und mit Ihrer Website interagieren, als ob Sie sich auf dem angegebenen Gerät befinden. Dieses Tool ist besonders nützlich, weil Sie sehen können, wie Ihre Website auf einem mobilen Gerät funktioniert, Formulare und Schaltflächen testen und verstehen, ob Ihre Besucher eine gute Benutzererfahrung haben. Sie können es alleine oder zusammen mit den beiden oben genannten Tools verwenden, um sicherzustellen, dass Ihre Website wirklich reaktionsfähig ist.
Das Erstellen eines responsiven Webdesigns ist nicht mehr optional. Es ist eine Notwendigkeit. Responsives Webdesign macht es für jedermann einfacher, Ihre Website ohne Probleme anzuzeigen und kann den Ruf Ihrer Marke sowie Ihre Conversion-Raten beeinflussen. Mit den responsiven Webdesign-Tipps und -Tricks oben können Sie Ihre geschäftliche Website großartig aussehen lassen, unabhängig davon, welches Gerät Ihre Besucher verwenden, und sicherstellen, dass sie auch eine hervorragende Benutzererfahrung haben.
Accentsconagua