5 Gründe, warum sich Responsive Webdesign nicht lohnt

5 Gründe, warum sich Responsive Webdesign nicht lohnt
Dieser Artikel stammt aus Tom Ewers Managewp-Blog und bringt seine unterschiedlichen Ansichten zum derzeit beliebten Responsive Design zum Ausdruck.
„Die Umstellung auf mobiles Design ist eine größere Revolution als die PC-Revolution“ – Kevin Lynch, CTO, Adobe
Bis 2014 werden mehr Menschen mobile Geräte statt PCs für den Internetzugang verwenden, weshalb die Entwicklung barrierefreier mobiler Endgeräte zu einem der wichtigsten Themen für Webentwickler geworden ist. Daher entstand Responsive Design, das aus meiner persönlichen Sicht jedoch nicht weiterverfolgt werden sollte. Warum?
Responsive Design ist kein einheitlicher Ansatz. Ich selbst war früher ein Fan von Responsive Design und musste feststellen, dass sich viele Webanwendungen auf mobilen Bildschirmen nicht gut darstellen ließen. Ein gutes Beispiel hierfür ist Google Maps. Webseiten, die viele Bilder enthalten, eignen sich auch für Responsive Design, textbasierte Webseiten und Blogs hingegen nicht. Ich bin sogar der Meinung, dass die Implementierung von Responsive Design für solche Webseiten reine Zeitverschwendung ist.
5 Gründe, warum sich Responsive Webdesign nicht lohnt 123WORDPRESS.COM
1. „Responsive Design“ erfüllt nicht die Erwartungen der Benutzer. Die erste Regel der Usability 101 lautet: „Erfüllen Sie die Erwartungen der Benutzer.“ Am Beispiel von Blogs ist der allgemein akzeptierte Designansatz: von oben nach unten, mit Inhalt und Bildern auf jeder Seite und bereitgestellten Seitenleisten. Dieser Ansatz wurde in Millionen von Blogs verwendet, weil er den Erwartungen der Benutzer entspricht.
Wenn Sie jedoch eine mobile Website mit responsivem Design besuchen, verschwindet die Seitenleiste im Allgemeinen oder springt ganz nach oben oder ganz nach unten, also nicht dort, wo Sie sie erwartet haben. Am Beispiel von „Cats Who Code“ sieht die Desktopanzeige mit der oberen Navigation, der Seitenleiste (einschließlich der letzten Beiträge), einer kleinen Werbeleiste und einem Suchfeld wie folgt aus. Hier ist die iPhone-Schnittstelle:
Sie können sehen, dass die Navigation und die Seitenleiste verschwunden sind. Als ich weiter nach unten zog, fand ich schließlich die Seitenleiste. Sie denken vielleicht, dass dies nur ein Einzelfall ist, aber tatsächlich handelt es sich um ein typisches responsives Design. Was wir sehen möchten, ist eine Anzeige der mobilen Schnittstelle, ohne Desktop-Elemente zu opfern, was offensichtlich nicht der Fall ist.
2. Es kostet mehr Geld und dauert länger. Generell gilt: Responsive Design kostet mehr Geld als nicht-responsive Design. Wenn jemand behaupten würde, dass Responsive Design günstiger ist als die Entwicklung eines zusätzlichen mobilen Layouts, würde ich zustimmen. Aber wissen Sie, was günstiger ist als Responsive Design? Nichts!
Denken Sie auch darüber nach, wie viel Zeit Sie dafür aufgewendet haben, welchen Return on Investment Sie durch Responsive Design erzielt haben und was Sie dadurch gewonnen haben.
3. Die Leistung eines nicht reagierenden Designs ist nicht schlecht. Sehen Sie sich den Anzeigeeffekt meines eigenen Blogs auf dem Mac an:
Sehen Sie es sich auf meinem iPhone an:
Auf dem 4-Zoll-Bildschirm des iPhone lässt es sich hervorragend lesen. Wenn der Text zu klein ist, können Sie ihn mit einem Doppelklick vergrößern. Wenn Sie mit dem Lesen fertig sind, können Sie ihn problemlos wieder verkleinern. Und das Lustige ist, dass die mobilen Schnittstellen von heute so konzipiert sind, dass sie nicht reagieren, und die meisten Telefone auch damit gut funktionieren. Wenn Sie wirklich Überraschungen erleben möchten, schauen Sie sich die Desktop-Versionen dieser Websites an. Auch das Design ist schlecht.
4. Nicht gut für die Ladezeit. Wir wissen, dass mobile Geräte auf der Grundlage einer Internetverbindungsgeschwindigkeit unterhalb der Breitbandgrenze funktionieren, daher müssen Webseiten die geringste Belastung gewährleisten, um die Ladezeit zu verkürzen. Viele responsive Designs verkürzen die Ladezeit nicht wirklich, da viele Designer diese Elemente einfach verbergen, was der Optimierung des Ladens nicht nützt. Bei nicht-responsiven Designs kann „Lazy Loading“ gewählt werden. Dabei handelt es sich um eine Technik, bei der zuerst die rechenintensivsten Elemente und dann die anderen geladen werden.
5. Responsive Design ist eigentlich ein Kompromiss. Man kann sagen, dass Responsive Design eine subjektive Entscheidung der Designer ist. Sie glauben, dass die Desktop-Anzeigeoberfläche nicht mehr für die mobile Oberfläche geeignet ist, und dann haben sie das Gefühl, dass entsprechende Änderungen vorgenommen werden müssen. Wenn Benutzer eine noch unbequemere Benutzeroberfläche sehen, werden sie fragen, warum wir eine so andere und nicht sehr gute Anzeigemethode verwenden müssen. Dies verstößt gegen die zweite Regel der Benutzerfreundlichkeit 101: „Geben Sie den Benutzern nicht das Gefühl, dass sie keine Kontrolle über die Situation haben.“
Mein Punkt ist also: Dies ist nur ein Kompromiss, eine subjektive Entscheidung des Designers, und die Benutzer empfinden es nicht als großes Unbehagen, insbesondere wenn Responsive Design Geld und Zeit kostet.
Zusammenfassend habe ich diesen Artikel aus zwei Gründen geschrieben: Erstens halte ich Responsive Design in vielen Fällen für unnötig. Zweitens fehlt es im Internet eindeutig an einer Debatte zum Thema Responsive Design. Ich leugne die Theorie des Responsive Designs an sich nicht, aber Tatsache ist, dass es in vielen Fällen, die ich gesehen habe, wirklich nicht notwendig ist. Viele Menschen sind es gewohnt, zu denken, dass es selbstverständlich ist, wenn andere es befürworten, aber Sie sollten es besser aus der Perspektive eines Entwicklers betrachten und sich fragen: Ist es wirklich das, was Sie brauchen?
PS: Was ist Responsive Design? Die Gestaltung und Entwicklung der Seite soll auf das Nutzerverhalten und die Geräteumgebung (Systemplattform, Bildschirmgröße, Bildschirmausrichtung etc.) reagieren und sich entsprechend anpassen. Die konkrete Vorgehensweise umfasst viele Aspekte, darunter flexible Raster und Layouts, Bilder und die Verwendung von CSS-Medienabfragen. Unabhängig davon, ob der Benutzer einen Laptop oder ein iPad verwendet, sollte die Seite in der Lage sein, Auflösung, Bildgröße und zugehörige Skriptfunktionen automatisch zu ändern, um sich an verschiedene Geräte anzupassen.
Über managewp

<<:  Beispielcode, wie CSS mehrere Klassen abgleicht

>>:  Detaillierte Erläuterung des Anwendungsfalls für MySQL-Fremdschlüssel (FOREIGN KEY)

Artikel empfehlen

Negative Distanz (Empathie) – iterativer Prozess der gegenseitigen Beeinflussung

Negative Distanz bezieht sich auf Empathie. Vorwo...

Tutorial: Nginx-Reverse-Proxy-Konfiguration zum Entfernen von Präfixen

Wenn Sie nginx als Reverse-Proxy verwenden, könne...

Erstellen Sie ein Docker-Image mit Dockerfile

Inhaltsverzeichnis Erstellen Sie ein Docker-Image...

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

Einen Fehler melden Der Apache\Nginx-Dienst wurde...

Wie MySQL implizite Standardwerte verarbeitet

Einige Studenten sagten, dass sie auf das Problem...

Tipps zur Verwendung von Vue-Elementen und Nuxt

1. Konvertierung des Übermittlungsformats für die...

Lösen Sie das Problem der Verkleinerung des Mysql-Transaktionsprotokolls und der Protokolldateien, die zu groß zum Verkleinern sind

1. MS SQL SERVER 2005 --1. Löschen Sie das Protok...

Führen Sie die Schritte aus, um den Fehler 403 Forbidden in Nginx zu beheben.

Die Webseite zeigt 403 Forbidden an Nginx (Yum-In...

Implementierung eines Web-Rechners auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...

Auszeichnungssprache – CSS-Stil für Webanwendungen

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Analyse der Verschachtelungsregeln von XHTML-Tags

In der XHTML-Sprache wissen wir alle, dass das ul...

Mehrere Methoden zum Ausführen von SQL-Dateien unter der MySQL-Befehlszeile

Inhaltsverzeichnis Die erste Methode: Wenn die My...

JavaScript Canvas realisiert dynamische Punkt- und Linieneffekte

In diesem Artikel wird der spezifische Code für J...

Referenz zur MySQL-Optimierungslösung

Probleme, die bei der Optimierung auftreten könne...

So erstellen Sie SonarQube mit Docker

Inhaltsverzeichnis 1. Docker installieren 2. Sona...