• Haupt
  • >
  • Insider
  • >
  • Wie Responsive Design Sie mehr von Ihrer Website holt

Wie Responsive Design Sie mehr von Ihrer Website holt

Wir leben in einer Welt mit mehreren Bildschirmen. Ich erinnere mich, dass ich als Kind in den 80ern aufgewachsen bin und unsere fünfköpfige Familie genau EINEN Bildschirm in unserem Leben hatte. Es war das Familienfernsehen (ein Sony Trinitron, glaube ich) und wir haben damit ferngesehen, VHS-Kassetten und den Computer (wir hatten einen Commodore 64).

Aber die Zeiten haben sich geändert ... sehr. Neulich saß ich mit meiner Familie im Wohnzimmer. Zwischen meiner Frau, unserer kleinen Tochter und mir waren wir alle von Bildschirmen umgeben. Wir hatten 2 Smartphones, ein iPad, einen iPod, einen LED-Fernseher, ein Macbook, einen Wii U-Controller UND einen Babyphone.

8 Bildschirme in nur einem Raum.

Was noch verrückter ist, ist, dass jeder einzelne (außer dem Babyphone) im Internet surfen kann. Fügen Sie das der Tatsache hinzu, dass jeder eine andere Auflösung hat.

Dies kann eine sehr schwierige Situation für den modernen Webdesigner schaffen. Warum? Ihr Kunstwerk muss auf einer Vielzahl von Geräten süß aussehen.

Also, was ist der moderne Vermarkter zu tun?

Eine Möglichkeit besteht darin, mobile Bildschirme einfach zu ignorieren, da die meisten Menschen auf herkömmlichen Computern immer noch im Internet surfen. Dies ist jedoch nicht proaktiv und schränkt die Haltbarkeit Ihrer nächsten Website-Erstellung ein.

Statistiken deuten darauf hin, dass der mobile Datenverkehr im Laufe der Zeit weiter zunehmen wird, was angesichts der Beliebtheit der neuen Handheld-Geräte sinnvoll ist. Laut Mashable wurde im Jahr 2013 17, 4% des Webverkehrs über Mobilfunk abgewickelt. Dies entspricht einem Anstieg von mehr als 6% seit 2012, als 11, 1% des Verkehrs über Mobilfunk abgewickelt wurden.

Die Herausforderung

Was kann ein Webdesigner mit all diesen Optionen tun, die für internetfähige Geräte verfügbar sind? Wir haben uns einmal darauf konzentriert, die Benutzer von Smartphones zu bedienen, und ihnen eine vollständig separate mobile Version einer Website zur Verfügung gestellt. Obwohl dies in gewisser Hinsicht effektiv war, war es eine völlig separate Web-Property, die zusätzliche Entwicklungsressourcen und letztendlich Kosten erforderte. Der Inhalt musste auch in beiden Versionen gepflegt werden, was die Dinge nur komplexer machte.

Die Idee, bestimmte Geräte und Auflösungen in der heutigen Zeit gezielt einzusetzen, ist lächerlich. Es gibt mehr Auflösungen, Telefone und Plattformen als Sie auflisten können. Wenn Sie diesen Ansatz wählen, wäre Ihre Website zu dem Zeitpunkt, an dem Sie das Targeting und die Codierung für die einzelnen Geräte abgeschlossen haben, veraltet und es wäre Zeit für eine Neugestaltung. Klingt effizient, oder? Das haben wir nicht gedacht.

Interessanterweise besteht die Herausforderung jedoch an beiden Enden des Auflösungsspektrums. Immer mehr Menschen betrachten Webinhalte nicht nur auf eingeschränkten Bildschirmen (z. B. Smartphones oder Tablets), sondern auch auf wirklich hochauflösenden Bildschirmen (z. B. HDTVs).

Die "nicht ideale" Lösung

Zumindest müssen wir uns auf die Einhaltung konzentrieren. Wenn es uns in Ordnung ist, dass Benutzer schwenken und zoomen müssen, um Webinhalte auf ihrem Mobilgerät anzuzeigen (was wir eigentlich nicht sollten), müssen wir nur sicherstellen, dass unsere Websites eine gewisse Basiskonformität aufweisen. Folgendes sollten Sie tun:

  • Vermeiden Sie Flash, Quicktime oder andere Plugins, die für einen mobilen Benutzer möglicherweise nicht verfügbar sind
  • Überschreiten Sie nicht 960px, da sich sonst Personen in Scroll City befinden
  • Verwenden Sie keine Schriftarten, die kleiner als 11px sind
  • Stellen Sie sicher, dass die primäre Site-Navigation ziemlich umfangreich ist

Aber die eigentliche Frage ist, ist das gut genug? Sind wir bereit, uns mit dieser Lösung zufrieden zu geben?

Die ideale Lösung

In diesem Fall ist Responsive Design die ideale Lösung. Die übergeordnete Idee von Responsive Design besteht darin, eine einzelne Web-Property zu erstellen, mit der die Anzeige dynamisch basierend auf dem Gerät geändert werden kann, auf dem sie verwendet wird (unabhängig von der Hardware- oder Softwareplattform). Dies gilt sowohl für Geräte mit niedriger Auflösung als auch für Geräte mit wirklich hoher Auflösung.

Das Bild oben zeigt reaktionsschnelles Design in Aktion. Es zeigt, wie die mit Responsive Design gestaltete Website auf mehreren Geräten angezeigt wird. Denken Sie daran, dass es sich immer noch um dieselbe Website handelt (wir haben keine separate mobilfreundliche Version entwickelt), die Website jedoch optimiert ist, unabhängig davon, welches Gerät unser Endkunde verwendet.

Die Realität ist, dass Responsive Design mehr die Idee ist, eine einzige Website zu haben, die auf einer Vielzahl von Geräten gut dargestellt werden kann. Es ist noch in den Anfangsjahren, aber es werden immer mehr Websites entwickelt, die reagieren.

In der Entwicklungswelt gibt es eine große Debatte darüber, wie Sie Ihre Website am besten reaktionsfähig machen können. Die Lösung, auf die wir uns hier bei New Breed gestützt haben, besteht, wie viele unserer Kollegen, darin, unsere Websites mit dem Twitter Bootstrap-Framework zu starten.

Dieses Framework verwendet ein 12-Spalten-Rastersystem, das eine reaktionsfähige Site ermöglicht. Viele der Themen und Plattformen, die wir gesehen haben (einschließlich des SeoAnnuaire COS), nutzen dieses Framework und wir waren beeindruckt von den Ergebnissen (und der Benutzerfreundlichkeit aus Sicht der Entwicklung).

Die Hinrichtung

Nachdem wir Ihr Interesse hoffentlich geweckt haben und Sie sehen, warum responsives Design wichtig ist, möchten wir Ihnen zeigen, wie Sie es in Ihrer eigenen Organisation implementieren können.

Responsive Design beginnt mit Ihrer Website, wird jedoch schnell zu einem tieferen Bestandteil Ihrer Marketingstrategie. Wie können Sie sich wundern? Wie bereits in diesem Beitrag erwähnt, ist Responsive Design ein wesentlicher Bestandteil Ihrer Webpräsenz, der immer notwendiger wird, wenn Internetbrowser ihr Verhalten ändern.

Der erste Schritt bei der Überlegung einer Neugestaltung Ihrer Website mithilfe von Responsive Design besteht darin, sich Ihre Analysen anzusehen. Mit welchen Geräten greifen Ihre Besucher auf Ihre Website zu? Wenn Sie immer noch eine Zielgruppe haben, die hauptsächlich ihren Desktop verwendet, ist ein responsives Design möglicherweise keine notwendige Änderung für Sie. Auf der anderen Seite können Sie jedoch von einer reaktionsschnellen Website profitieren, wenn Ihr Datenverkehr sein Verhalten geändert hat und Sie jetzt Tablets und Mobilgeräte verwenden, um auf Ihre Website zuzugreifen.

Werfen Sie einen Blick auf die folgenden Diagramme, in denen unsere tatsächlichen Verkehrsquellen von dieser Zeit im letzten Jahr bis heute verglichen werden. Diese Diagramme stellen die massive Verschiebung dar, die online stattfindet.

Wenn Ihre Diagramme in etwa so aussehen, empfehlen wir Ihnen, aus mehreren Gründen eine Neugestaltung Ihrer Website mit reaktionsschnellem Design in Betracht zu ziehen. Wenn Ihre Website reagiert, können Sie mit folgenden sechs positiven Effekten rechnen:

1) Erhöhte Conversions

In unserem vorherigen Beitrag im Insider-Blog haben wir darüber gesprochen, wie Sie mit einer verkaufsfertigen Website die Conversions maximieren können. Dies ist die gleiche Methode: Wenn Ihre Website für den Verkauf bereit ist (dh es gibt eindeutige Conversion-Pfade, die Ihren Käuferpersönlichkeiten zugeordnet sind), sind Sie auf dem Weg, Ihre Conversions zu maximieren.

Ein Teil einer verkaufsfertigen Website besteht darin, die Website so zu gestalten, dass sie ansprechbar ist. Da eine reaktionsschnelle Website auf das jeweilige Gerät zugeschnitten ist, das ein Besucher verwendet, wird die allgemeine Erfahrung mit Ihrem Unternehmen verbessert, und es ist weniger wahrscheinlich, dass der Benutzer zu Ihrem Konkurrenten geht.

2) Niedrigere Absprungraten

In den meisten Fällen nicht. Wenn ein Besucher Ihre Website auf einem Mobilgerät oder Tablet-Gerät durchsucht und die Website nicht reagiert, wird er die Website verlassen (dh "abspringen"). Das bedeutet, wenn sie auf Ihre Homepage klicken und zoomen oder scrollen müssen, um das Suchfeld (als Beispiel) zu finden, werden sie nur frustriert und gehen zu etwas anderem über. Dies kann sich dramatisch auf Ihre Absprungrate auswirken - in einer schlechten Weise.

Durch eine reaktionsfähige Website müssen sich diese Benutzer nicht um das Kneifen und Scrollen kümmern, um das zu finden, wonach sie suchen. Die Site passt sich an jedes Gerät an, das sie verwenden. Im Gegenzug klicken sie wahrscheinlich herum und besuchen mehr Seiten, wodurch sich Ihre Absprungrate verringert.

3) Erhöhter Seitenrang

Wir haben bereits darüber gesprochen, aber Suchmaschinen (insbesondere Google) bevorzugen jetzt reaktionsfähige Websites in den Suchergebnissen. Insbesondere wenn ein Nutzer von seinem Mobilgerät aus sucht, ist es wahrscheinlicher, dass Google ihm eine relevante Website zur Verfügung stellt, die auf Mobilgeräte anspricht.

Ihr oberstes Ziel ist es, dem Suchenden genau das zu geben, wonach er sucht. Dies bedeutet, dass er weniger enttäuscht ist, wenn er nicht findet, wonach er sucht.

4) Stärkere, einheitliche Online-Präsenz

Die meisten Unternehmen, die mobile Besucher bedienen, haben eine mobile Website. Diese Site befindet sich in einer Subdomain und sieht manchmal anders aus als die Haupt-Site. Es entspricht immer noch den Markenstandards (zumindest sollte dies so sein), fühlt sich aber nicht wie die gleiche Website an.

Aber mit einer reaktionsschnellen Website müssen Sie sich darüber keine Sorgen machen. Sie haben Ihre Hauptwebsite zu Beginn so gestaltet, dass sie auf verschiedenen Geräten gleich aussieht (obwohl sich Teile leicht verschoben haben).

5) Verringerte Entwicklungskosten

Mit einer reaktionsfähigen Site müssen Sie keine separate Site für Mobilgeräte mehr erstellen. Das heißt, Ihre Entwicklungskosten könnten buchstäblich halbiert werden. Gleiches gilt für Ihre Wartungskosten. Wir alle wissen, dass es nicht kostenlos ist, eine Website zu warten. Wenn also zwei Websites ausgeführt werden, zahlen Sie das Doppelte der Wartungskosten. Auch wenn die Neugestaltung Ihrer Website im Vorfeld möglicherweise aufwändig ist, sparen Sie auf lange Sicht Geld.

6) Ein Wettbewerbsvorteil

Wenn Ihre Wettbewerber Responsive Design noch nicht angenommen haben, hat Ihr Unternehmen die Möglichkeit, sich einen Wettbewerbsvorteil zu verschaffen. Heben Sie sich von Ihrer Konkurrenz ab - und nehmen Sie noch besser die Besucher, die ihre nicht reagierenden Websites verlassen, und wandeln Sie sie in Ihre eigenen Kunden um!

Fazit

Es ist heute wichtiger denn je, dass unsere Website über mehrere Geräte zugänglich ist. Da sich das Verhalten unserer Kunden ändert, müssen wir uns mit ihnen weiterentwickeln, und wir sind der Meinung, dass die Optimierung Ihrer Website mithilfe von Responsive Design ein Kinderspiel ist. Sie sparen nicht nur Zeit (und Kopfschmerzen), sondern senken auch Ihre Entwicklungskosten, und Ihre Website verfügt auf jedem Gerät über eine optimierte Anzeige.

Google widmet Websites, die für Handys optimiert wurden, mehr Aufmerksamkeit und verleiht diesen Websites sogar ein höheres Ranking. In der sich ständig verändernden Welt der Suche wird eine für Handys optimierte Website die Online-Sichtbarkeit erhöhen.

Wenn Sie immer noch nicht überzeugt sind, stellen Sie sich Folgendes vor: Die Besucher Ihrer Website rufen Ihre mobilen Geräte auf, unabhängig davon, ob Sie dies wünschen oder nicht. Ihre Website wurde zur Optimierung von Conversions und zur Generierung von Leads erstellt. Wenn diese Person jedoch mit ihrem Smartphone oder Tablet auf Ihre Website gelangt und nicht findet, wonach sie sucht, oder ausfällt, weil sie einen Bildlauf durchführen muss, besteht die Gefahr, dass Sie verlieren darauf aus, sie in einen Blei umzuwandeln. Grundsätzlich lässt du Geld auf dem Tisch.

Vorherige Artikel «
Nächster Artikel