Wie wichtig ist responsives Webdesign?


29

Ich habe in letzter Zeit verschiedene Meinungen zu den Vor- und Nachteilen der Verwendung von responsivem Webdesign gehört und mich gefragt, ob es für kleine Unternehmen, die auf kleine geografische Gebiete ausgerichtet sind, erforderlich ist, responsives Webdesign zu implementieren.

Einige Unterfragen, die ich diesbezüglich habe, umfassen:

  1. Ist es besser, responsives Webdesign zu verwenden, als separaten Code für verschiedene Dimensionen / Geräte zu verwenden?

  2. Kann sich dies potenziell auf SEO auswirken (positiv oder negativ)?

  3. Was sind die Hauptprobleme, auf die ich stoßen könnte, wenn ich eine Website mit dieser Entwurfsmethode für ein Unternehmen optimiere?


Sie haben gerade eine drastische Änderung an Ihrer Titelfrage vorgenommen, ohne den Inhalt tatsächlich zu ändern. Bist du dir da ganz sicher? (Hinweis: Die Antwort lautet jetzt "Nein".)
'28.

@Su‘Tut mir leid, ich nur realisiert würde vollständig die Antworten ändern , die ich erhalten würde , damit ich eine habe‚Rollback‘
Lebensdauern

1
Wie wichtig? Null bis wenig wichtig für die meisten Websites. Für eine App oder ein Tool eher (1) Responsive vs Adaptive? Variiert von Person zu Person und von Projekt zu Projekt. Kurz gesagt, keine Methode ist besser und die Verwendung hängt auch von der Zielgruppe der Website ab. (2) Beeinflusst SEO? Nein. (3) Hauptprobleme? Sie müssen mehr testen, mehr Fehler beheben und mehr Code schreiben, einige Dinge funktionieren nicht, wenn die Breite reduziert ist, und einige Dinge verletzen die TOS (Adsense), wenn Sie sie entfernen oder ändern. Hier ist 10 wichtige Funktionen für Web - Anwendungen in diesem Video , die meiner Meinung nach zu den meisten Websites gelten sowieso vimeo.com/10510576
Anthony Hatzopoulos

Antworten:


21

Es wird allgemein vorausgesagt, dass die mobile Internetnutzung in ein paar Jahren die Desktop-Nutzung übersteigt. Daher sollte eine Art von mobiler Optimierung für jedes Unternehmen eine ernsthafte Überlegung sein.

In vielerlei Hinsicht gilt dies insbesondere für kleine, lokalisierte Unternehmen: Vorhersehbarerweise konzentrieren sich viele mobile Suchvorgänge darauf, Dinge in der Nähe zu finden - denken Sie daran, einen Laden, ein Restaurant usw. zu finden.

Responsive Design ist seit Mai 2012 die von Google empfohlene branchenweit bewährte Methode für das Entwerfen von Smartphones. Einer der Hauptvorteile besteht darin, dass Sie eine Website betreiben: Eine Website zum Entwerfen, Erstellen, Verwalten und Fördern. Es ist effizient.

Aus SEO-Sicht bedeutet das Hosten einer separaten mobilen Website, z. B. beispiel.de, dass Sie zwei separate Websites optimieren und den Wert Ihres Unternehmens (PageRank, Autorität usw.) auf die beiden Standorte aufteilen müssen. Sie können dies zwar vermeiden, indem Sie Inhalte über die Benutzeragentenerkennung unter denselben URLs bereitstellen. Dies ist jedoch nicht mit Doppelarbeit verbunden (es handelt sich immer noch um zwei separate Websites), und führt auch zu weiteren technischen Herausforderungen, z. B. der Sicherstellung des Benutzeragenten Erkennung funktioniert und wird auf dem neuesten Stand gehalten, dass Suchmaschinen den richtigen Inhalt im richtigen Index indizieren usw.

Insgesamt ist Responsive Design eine elegante Lösung.

Um Ihre anderen Fragen zu beantworten:

  1. Betrachten Sie oben, aber auch, wie schnell sich der Mobilfunkmarkt entwickelt. Je flexibler Ihre mobile Lösung ist, desto weniger müssen Sie tun, um Schritt zu halten.

  2. Hängt davon ab, womit Sie vergleichen, aber wie oben erwähnt, sind mit jeder der beiden anderen Hauptoptionen erhebliche SEO-Herausforderungen verbunden.

    Es gab Bedenken hinsichtlich des Problems des "Cloaking", dh des Versteckens von Inhalten vor Suchmaschinen, das bei den meisten Implementierungen dem reaktionsschnellen Design innewohnt. Obwohl meines Wissens von keiner der großen Suchmaschinen ausdrücklich darauf geantwortet wurde, könnte Google dies als "Best Practice" ansehen, das darauf hindeutet, dass Google in der Lage ist, zwischen dem legitimen Verstecken von Inhalten für zu unterscheiden Gründe für die Geräteoptimierung und andere, weniger legitime Verstecke aus Gründen der Manipulation.

  3. Ich denke, die größte Herausforderung besteht darin, zu bestimmen, welche Inhalte mobilen Benutzern angezeigt werden sollen. Abhängig von Ihrer Site ist dies möglicherweise kein Problem, in vielen Fällen jedoch. Die wichtigste Überlegung hierbei ist, zu verstehen, was Ihre mobilen Besucher versuchen. Zum Beispiel möchte jemand auf einem iPhone wahrscheinlich schnelle, einfache Informationen oder Transaktionen. Dieselbe Person auf einem iPad ist mit größerer Wahrscheinlichkeit an einem entspannten Surferlebnis interessiert.

Diese Frage und Antwort liest sich in den kommenden vier Jahren bemerkenswert amüsant.
Dwjohnston

12

Die Idee dahinter ist, Ihren Besuchern unabhängig vom Gerät ein optimales Surferlebnis zu bieten. Da die Anzahl Ihrer Besucher, die ein Mobilgerät verwenden, wahrscheinlich eher zunimmt als abnimmt, ist es absolut sinnvoll, diese Route zu wählen.

Für Blogs und CMS gibt es eine Reihe erschwinglicher (um nicht zu sagen billiger) Themen, die Sie sofort ausprobieren können, um zu sehen, ob Ihnen das, was Sie erhalten, gefällt.

  1. Solange Sie einen besonderen Grund haben, versuchen Sie immer, sich auf eine Codebasis zu konzentrieren. Ein Grund könnte sein, dass Sie eine spezialisierte Website wie eine "Web-App" anbieten möchten.

  2. SEO: nein. Gut und schlecht wie ein nicht reagierendes Layout.

  3. Am Anfang muss man etwas mehr planen. Welche Inhalte sollen auf dem kleinsten Gerät angezeigt werden, wie soll die Reihenfolge der Inhalte sein? Sachen wie diese. Oder: Sieht mein Inhalt in allen von mir unterstützten Dimensionen gut aus? Möglicherweise möchten Sie auch die Größe Ihrer Bilder für jede der Dimensionen optimieren, um nicht nur browserskalierte Bilder, sondern auch Bilder in Originalgröße bereitzustellen. Wenn Ihr CMS das nicht unterstützt, ist es etwas mehr Arbeit.

Wenn Sie Anzeigen von einer externen Quelle einbeziehen möchten, müssen Sie auch überprüfen, ob die angegebenen Formate gut zusammenpassen.

Bearbeiten:

Lassen Sie mich hinzufügen, dass Sie bei vorhandenen historischen Webanalysedaten (z. B. Google Analytics) auf einfache Weise die Anzahl der Benutzer von Mobilgeräten im Vergleich zu Nicht-Mobilgeräten ermitteln, die verwendeten Geräte (bis hin zur tatsächlichen Hardware) identifizieren und die Bildschirmauflösungen überprüfen können ("Sehen sie tatsächlich meine Seiten oder nur einen Teil davon und müssen scrollen?").

Zweite Bearbeitung:

In diesem Beitrag heißt es: "Mobile Websites vs. Responsive Design: Was ist die richtige Lösung für Ihr Unternehmen?" "Auf dem Google Analytics-Blog hat eine Website, die im Hinblick auf Responsive Design gestaltet wurde, folgende Vorteile:

  • Einfache Aktualisierung
  • Optimiert für Suchmaschinen
  • Hinzufügen von Konvertierungs- und Weiterleitungscodes

Die Vorteile der separaten mobilen Site:

  • Entwerfen für mobile Benutzeranforderungen
  • Quicke-Site-Erstellung
  • Tolle DIY-Möglichkeiten

Der Artikel "Responsive Design - Nutzung der Möglichkeiten von Medienabfragen" im offiziellen Google Webmaster Central Blog bietet eine schöne Einführung in die Umsetzung von "Responsive Design".

"Erstellen von für Handys optimierten Websites" bei Google-Entwicklern lautet:

"Google empfiehlt Webmastern, die branchenweit bewährten Methoden für responsives Webdesign zu befolgen, dh für alle Geräte dasselbe HTML bereitzustellen [...]"


2
Google rangiert Ihre Website tatsächlich niedriger, wenn das Laden länger dauert.
Steffan Donal

2
@Ruirize Ja, aber ... Er fragte, ob sich Responsive Design negativ auf SEO auswirkt. Und Responsive Design verlängert das Laden einer Seite nicht. Also "nein". Nur wenn du das willst
;-)

@initall - Responsive Design kann dazu führen, dass das Laden Ihrer Website auf einem mobilen Gerät länger dauert , je nachdem, wie Sie Ihre reine mobile Website gestaltet hätten. Wenn die Seitengröße geringer gewesen wäre (weniger Upfront-Inhalte, weniger Bibliotheken usw.), würde Ihre Website möglicherweise länger dauern als auf einem mobilen Gerät. Trotzdem ist es wahrscheinlich gut, stattdessen einen einzelnen Standort für Netzwerke mit geringer Bandbreite zu optimieren, aber es ist etwas zu beachten.
Nick

1
@Nick Wenn Sie eine für Mobilgeräte optimierte Site mit einer allgemeineren Site (Responsive) vergleichen, ist der Gewinner natürlich ... nicht überraschend. Dieser listet einige der Fallstricke auf: blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold
initial

3

Ich denke, es ist wichtig, zuerst zu begreifen, dass "Responsive Design" (RD) ein Modewort ist (wenn ich Breite: 100% für ein Element setze, habe ich genau dort eine RD, um zu übertreiben) und daher seine Bedeutung wichtiger erscheint als es Ist wirklich so wie am Ende ist es bedingt wie alles andere.

Muss RD implementiert werden?

Um darauf zu antworten, müssen Sie einige Definitionen angeben:

  1. Wer ist Ihre Zielgruppe?
  2. Welche Art von Publikum ist Ihr Ziel?
  3. Was ist der Zweck Ihrer Website?
  4. Von wo aus wird (in den meisten Fällen) auf Ihre Website zugegriffen?
  5. etc.

Dies ist der Marketinganalyse sehr ähnlich. Es geht darum, das richtige Medium für das richtige Publikum zu haben (vielleicht sitzt Ihr Publikum den größten Teil des Tages vor einem Computer oder ist mit dem neuesten iPhone unterwegs usw.). Tun sie beides, dann ist RD natürlich zentral.

Ist es besser, responsives Webdesign zu verwenden, als separaten Code für verschiedene Dimensionen / Geräte zu verwenden?

Hängt von der Komplexität der Benutzeroberfläche ab und davon, wie Sie sie verwenden. In den meisten Fällen kann eine typische Seite mit verschiedenen CSS-Sätzen für die verschiedenen Anzeigen gerendert werden. Komplexere oder anspruchsvollere Benutzeroberflächen erfordern jedoch möglicherweise andere Ansätze, sodass es sinnvoll sein kann, je nach verwendetem Gerät (z. B. Google Maps, Multitouch-Oberfläche) eine andere Seitenstruktur und -strategie zu präsentieren.

Kann es SEO beeinflussen (positiv oder negativ)?

Bei SEO geht es mehr um Inhalte als um Design. Nur Google weiß, ob sie Design, aber Design / Layout gewichten, aber im Allgemeinen, wenn Ihr Inhalt von hoher Qualität ist, wird dies mehr gewichtet als das tatsächliche Design.

Was sind die Hauptprobleme, auf die ich stoßen könnte, wenn ich eine Website mit dieser Entwurfsmethode für ein Unternehmen optimiere?

Design für das falsche Publikum. Analysieren Sie Ihr Ziel und liefern Sie nach Möglichkeit aktuelle technische Daten (z. B. Besucherprotokolle mit Informationen zur Plattform usw.).

Neue Technologie ist immer riskant, ref. das HTML5-Problem für Facebook. Es ist zu diesem Zeitpunkt noch nicht ausgereift und wirft verschiedene Probleme auf, die denen des IE6 im Vergleich zu Standardproblemen ähneln.

Halte es so einfach wie möglich. Ausgefallene Webseiten sind nur eine sehr kurze Zeit wertvoll, bis der Benutzer Ihre Seite tatsächlich verwenden muss. Wenn es eine halbe Sekunde dauern muss, bis eine Überblendung für jeden Klick abgeschlossen ist, geht der Benutzer ziemlich schnell verloren. Sachen wie diese.


1
Ein klares Nein zu einigen Teilen Ihrer Antwort: Mischen Sie nicht "responsives Design" mit "flexiblen" oder "flüssigen" Konzepten. Abhängig von der Bildschirmgröße kann ein responsives Design "fixiert" aussehen, da es von Medienabfragen abhängt, je nach Browserbreite ein anderes CSS zu liefern. Es ist nicht "Breite: 100%". Ich würde es nicht als "Modewort" bezeichnen, denn es ist ein vernünftiges Konzept, eine gute Antwort auf ein aktuelles Problem und nicht nur ein Hype. In Bezug auf SEO: Zumindest hat Google einige Anstrengungen unternommen, um einzelne Layouts im Vergleich zu Layouts anderer Themen zu erkennen. nochmal: der rd an sich ist nicht schlecht oder gut, hängt von deinem inhalt ab.
Uhr

1
100% hinter dem "festen" Kommentar, obwohl es schlammiges Wasser ist. Meine reaktionsschnellen Stellen bei der Arbeit wurden mit flüssigen internen Elementen repariert. Ich würde argumentieren, dass es im Moment ein kleines Modewort ist, aber ich stelle mir sehr bald vor, dass es nur Webdesign / Entwicklung heißen wird. Ich denke, die SEO-Auswirkungen könnten sich ergeben, wenn Unternehmen eine mobile Website haben, anstatt zu reagieren ... aber ich habe keine Ahnung, wie sich diese SEO auswirkt.
DBUK,

2

Ich habe die anderen Antworten überflogen, verzeih mir, wenn ich überflüssig bin ... Ich mache jeden Tag über 8 Stunden am Tag Responsive Design ... Meine Kunden möchten es, weil sie möchten, dass mobile Benutzer ein "einzigartiges" Design haben. Erfahrung, meine Arbeitgeber wollen es, weil es von Google als bevorzugte Methode gerühmt wird und gut rationalisiert. (und wenn von Google als die Art und Weise gerühmt, etwas zu tun, das höchstwahrscheinlich am besten für SEO funktioniert)

Ist es besser, responsives Webdesign zu verwenden, als separaten Code für verschiedene Dimensionen / Geräte zu verwenden?

Ich würde sagen, es ist besser, ja. Der größte Teil Ihres Codes ist derselbe, was weniger Arbeit bedeutet als das Schreiben einer iPhone-App, einer Droiden-App, einer iPad-App oder einer Kindle-App.

Kann sich dies potenziell auf SEO auswirken (positiv oder negativ)?

Vom Design her finde ich es neutral; Aus statistischer Sicht schneiden meine responsiven Designs jedoch sehr gut ab. Kunden lieben sie, und Kunden lieben es, sie zu nutzen.

Was sind die Hauptprobleme, auf die ich stoßen könnte, wenn ich eine Website mit dieser Entwurfsmethode für ein Unternehmen optimiere?

Das ist zunächst etwas schwierig. Sie müssen einige Nachforschungen zu Medienabfragen anstellen und sollten möglichst einige Mobilgeräte zum Testen haben. Beachten Sie, dass das Ändern der Größe Ihres Fensters auf Ihrem Desktop in der Nähe liegt. Die Darstellung des Internets auf Mobilgeräten ist jedoch manchmal anders als erwartet. Ich habe zum Beispiel eine responsive Site entworfen, bei der ich eine BG-Wiederholung für den Header verwendet habe und die sich auf dem Desktop über den gesamten sichtbaren Bereich erstreckt. Unter iOS wird es jedoch aus irgendeinem Grund gekürzt ...

Ich empfehle, etwas Responsive Design zu lernen und auszuprobieren. Schauen Sie sich diese Seite für einen schnellen Start an: http://html5boilerplate.com

Um die Frage im Titel zu beantworten: Es ist wichtig und es ist wichtig, dass Sie sich dessen bewusst sind und wie Sie dafür entwerfen. Sollten Sie sich entscheiden, es nicht zu verwenden, sollten Sie bereit sein, diese Haltung zu verteidigen, da Ihr Kunde möglicherweise eingestellt ist auf diesen Entwurf haben. Nach meiner Erfahrung lieben Kunden und Kunden das reaktionsschnelle Design. Zufriedene Kunden und zufriedene Kunden sind für mich Grund genug, dem nachzugehen :)


1

Responsives Webdesign ist von entscheidender Bedeutung - wenn Sie eine neue Website erstellen, MÜSSEN Sie dafür sorgen, dass Ihre Website reaktionsschnell ist. Bereits jetzt stammen 50% des Datenverkehrs von Mobilgeräten und Tablets, und dies wird nicht nur zunehmen, es wird auch die eindeutig dominierende Form der Internetnutzung sein.

Für kleine Unternehmen, die auf kleine geografische Gebiete ausgerichtet sind, ist dies sogar noch kritischer. SEO wird für ein neues kleines Unternehmen sehr schwierig. Wenn Ihr Produkt jedoch gut ist, können Sie die Anzahl der Personen maximieren, die das teilen, was Sie tun.

Wenn es darum geht, soziale Medien zu lesen, verwenden die Menschen heute meist mobile Geräte - in der Regel morgens im Bett und abends im Bett.

Wenn Ihre Website auf einem Mobilgerät nicht mehr verwendet werden kann, gehen alle Freigaben, die Ihre relevante Zielgruppe erreichen, verloren. Das willst du nicht. Es ist wichtig, dies zu vermeiden.

In Bezug auf responsiven oder separaten Code: Der Hauptnachteil von responsivem Design ist, dass es nicht so schnell ist wie separate Codebasen. Dieser Geschwindigkeitsverlust wird vernachlässigbar sein, sicherlich im Fall eines kleinen lokalen Unternehmens, bei dem andere Faktoren in den Sinn kommen, warum die Website 0,2 Sekunden langsamer ist als andere.

Der große Vorteil von Responsive Design ist, dass Sie dieselbe Codebasis beibehalten. Dies reduziert Wartungskosten, Testkosten und Entwicklungskosten.

Die große Sache in der SEO ist heutzutage "Website-Qualität" - Website-Qualität ist schwer zu messen, aber im Allgemeinen verwendet Google Bounce Rate und Time on Site, um dies zu messen. Wenn Ihre Website mobil ist, werden 50% Ihres Traffics eine hohe Absprungrate und eine hohe Anzahl von Besuchern mit geringem Engagement aufweisen (weniger als 10 Sekunden auf der Seite).

Dies setzt Sie dem Risiko von Google-Strafen aus - sehen Sie sich Google Panda und die neue (letzte Woche) Exact Match-Domain an Strafen , die beide Websites für "niedrige Qualität" bestrafen.

Die Hauptprobleme, denen Sie bei der Optimierung einer Website für ein Unternehmen mit dieser Methode begegnen könnten, sind, dass es sich um ein neues Schlagwort handelt, das jeder braucht. Es gibt also Cowboys, die für etwas unglaublich Leichtes lächerlich hohe Preise verlangen.

Ich habe zum Beispiel kürzlich eine Website erstellt, die einen Shop, ein Forum, einen Bereich für Fragen und Antworten sowie verschiedene andere Seiten, Blogs usw. enthält, die innerhalb eines Tages für alle Geräte voll funktionsfähig sind.

Hier sind die Grundlagen für das, was Sie tun müssen:

  1. Passen Sie die Körperpolsterung und die Ränder an
  2. Bewegen Sie die Menüs auf der linken oder rechten Seite in Dropdown-Listen, und verstecken Sie sie möglicherweise unter einer Optionsschaltfläche oben.
  3. Ändern Sie die Größe von Containern und verwenden Sie die Breite 100%, wo Sie können
  4. Ändere alle deine Bilder auf 100% Breite
  5. Entscheide, welche Dinge nicht auf dem Telefon benötigt werden (Werbung?) Und entferne sie (Anzeige: keine)

Hier ist ein Beispielcode:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

Das bedeutet, dass Sie mit einer Klasse von "Advertbox" alles von Smartphones entfernen (mit einer maximalen Breite von 480px) und die Body Margin reduzieren.

Wenn Sie eine neue Site erstellen, ist dies noch einfacher, da Sie sicherstellen können, dass Sie ein übersichtliches Design mit schönen übersichtlichen Klassen und einem für alle Geräte geeigneten Design erstellen.

Ich hoffe das hilft!


1

Ich möchte mich nur mit einer anderen Perspektive einschalten:

Nein, es ist nicht obligatorisch oder sogar empfohlen. Es kommt darauf an, wer Ihre Zielgruppe ist. Sehen Sie sich Ihre Analysen an und sehen Sie, wie viel Prozent von Mobilgeräten stammen. Gibt es bei Mobilgeräten einen signifikanten Rückgang im Vergleich zu Ihren Desktop-Benutzern?

Um ein Beispiel zu geben, wo ich arbeite, reagiert unsere Site nicht. 90% unserer Zugriffe kommen jedoch von Desktop-Benutzern, und die Absprungraten und die Abschlussraten für Ereignisse sind auf Desktop-, Mobil- und Tablet-Computern nahezu identisch.

Solange es keine Rechtfertigung für eine Änderung gibt, besteht für uns kein finanzieller Anreiz, dies zu tun. Das Sprichwort, dass pauschale Aussagen wie 50% der Nutzer mobil sind oder dass etwas nur anwendbar ist, wenn alle Nutzer Ihre Zielgruppe sind. Ansonsten ist seine Logik völlig irrelevant und schlecht zu befolgen.

Sie müssen nur den Prozentsatz der Nutzer auf Mobilgeräten anzeigen, auf die Sie abzielen. Insbesondere für B2B-Anwendungen werden die meisten Menschen in ihrer Freizeit nicht auf ihre Telefone schauen. Sie erhalten von Montag bis Freitag Datenverkehr auf Desktop-Computern.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.