Das animierte GIF zeigt, was bei Invidious passiert, wenn ich das Browserfenster um einige Pixel einschränke.
Das Layout der Elemente auf der Seite ändert sich vollständig: Das ursprüngliche dreispaltige Layout ändert sich plötzlich in ein einspaltiges Layout, und das erste ist der Inhalt dieser kleinen Spalte, die sich am linken Rand befand und völlig unwichtige Informationen enthielt.
Ich bin sicher, dass ich nicht der einzige bin, der oft darauf stößt. Persönlich mag ich es, wenn meine Browserfenster eng genug sind, aber in den letzten zehn Jahren haben Webseiten begonnen, auf diese Präferenz zu reagieren, als ob ich eine mobile, funktional abgespeckte Version der Seite wollte. Hier gibt es ein großes Problem und nicht nur eines.
Räumliche Gasbeleuchtung
Eines der grundlegenden Konzepte für das Design des Macintosh, der ersten wirklich kundenorientierten grafischen Benutzeroberfläche, ist die Idee , Mensch-Maschine-Interaktionen bei der Arbeit mit einem Computer räumlich anzuordnen. Der Benutzer wurde von der Notwendigkeit entlastet, sich Textbefehle zu merken, um Dateien auf der Festplatte anzuordnen, und bot die Möglichkeit, die Dateien so zu mischen, dass sie visuell waren, und - hier ist es die Einsicht - sich an ihre Position zu erinnern, als ob sie sich in Platz. Der Benutzer kann sich erinnern, wo er die Datei abgelegt hat, und es ist nicht so wichtig, wie die Datei heißt . So erinnern wir uns, wo wir die Brieftasche, die Schlüssel oder das wichtige Dokument abgelegt haben.
Diese Idee der räumlichen Ausrichtung ist für die Gestaltung jeder Benutzeroberfläche und insbesondere des Webdesigns von grundlegender Bedeutung. Wenn ein Benutzer Ihre Website immer wieder besucht, findet er nach und nach heraus, wie hier alles funktioniert. Je mehr Zeit Sie dem Entwerfen Ihrer Website widmen, desto effizienter können Benutzer sie verwalten und desto mehr wird ihnen Ihre Website gefallen. Haben Sie sich jemals gefragt, warum es im Web so viele hochkarätige Skandale im Zusammenhang mit Redesign gibt? Hier ist deine Antwort. Benutzer mögen es nicht, wenn die Anstrengungen, die sie zur Beherrschung der Site unternehmen, nach Lust und Laune des Designers durchgestrichen werden, dass der Designer sich einfach mit der alten Site langweilt.
Dies ist genau das Problem, das ich mit Responsive Design habe. Die meisten reaktionsschnellen Designimplementierungen ähneln im Wesentlichen der Neugestaltung Ihrer Website, wenn der Benutzer die Größe des Fensters ändert. Das ungeheuerlichste Beispiel dieser Art ist, wenn aus einer horizontalen Menüleiste eine vertikale wird. Alles, woran sich der Benutzer visuell über die Position der Links auf dem Panel erinnern konnte, fliegt in das Rohr! Dachten Sie, diese Option wäre hier versteckt? Nein, sie ist da!
Standortübergreifende Inkonsistenz
Aber selbst wenn Benutzer Responsive Design nicht mögen, führt kein Weg daran vorbei. Viele Beispiele für das sogenannte Responsive Design werden mithilfe von Medienabfragen mithilfe von CSS implementiert - im Wesentlichen bedingte Anweisungen, die den Browser anweisen, eine Reihe von CSS-Regeln durchzusetzen, wenn bestimmte Bedingungen erfüllt sind, z. B. wenn die Breite des Browserfensters überschritten wird oder nicht eine bestimmte Anzahl von Pixeln überschreiten ... Die genaue Nummer wird in diesem Fall vom Webdesigner ausgewählt. Dementsprechend wählen zwei verschiedene Webdesigner fast nie die gleiche Breite.
Ich denke, jeder wird zustimmen, dass wir auf einem Desktop-PC die meisten Webseiten lieber in einem Layout voller Breite anzeigen. Es gibt Ausnahmen, in denen die verengte Version der Seite bequemer ist., aber sie sind selten, wenn nicht isoliert. In der Regel ist das Arbeiten mit einer Webseite in voller Breite viel schöner und einfacher.
Um nicht mit verengten Versionen von Webseiten umgehen zu müssen, muss der Benutzer die Breite des Browserfensters selbst anpassen, um sicherzustellen, dass die Seite in das gesamte Fenster passt. Da jedoch zwei Webdesigner in ihren Medienabfragen fast nie dieselbe Breite angeben, ist es für einen Benutzer unmöglich, eine Fensterbreite anzupassen, die garantiert zu einer Vollversion einer Webseite passt, es sei denn, der Benutzer gibt auf und ist zufrieden Vollbildmodus oder ein zu breites Fenster. Es ist jedoch wichtig, dass der Benutzer nicht nur Zugriff auf Vollversionen von Webseiten hat, sondern auch viele Fenster gleichzeitig im Bereich hält. Aus diesem Grund muss die Breite eines einzelnen Fensters begrenzt werden.
Es scheint, dass der Benutzer die Fenstergröße einfach nicht anpasst, wenn er auf einer Webseite landet, für deren Anzeige ein breiteres Fenster erforderlich ist. Schließlich musste der Benutzer vor dem Aufkommen des reaktionsschnellen Designs so handeln, als es einfach war, zwischen Webseiten mit einer bestimmten festen Breite zu wechseln. Die Realität ist jedoch nicht so einfach: Auf nicht reagierenden Seiten ist klar, ob Sie die Größe des Fensters an die gesamte Seite anpassen müssen. Und auf einer reaktionsschnellen Webseite sagt nichts dem Benutzer: „Hey! Die ganze Seite passt jetzt nicht in ein Fenster wie das Ihre. " Es gibt keine Bildlaufleiste oder Inhaltsbeschneidung. Bestenfalls (oder vermutlich am schlimmsten) gibt es ein Hamburger-Menü oder eine andere seltsame "mobile-ähnliche" Oberfläche.
Was soll der Benutzer tun?
Es wird der Gedanke geweckt, dass der Benutzer dieses Problem lösen könnte, indem er die Unterstützung für Medienabfragen im Browser deaktiviert. Wenn es nur so einfach wäre! Die Wurzel des Problems liegt darin, dass es unter Webdesignern üblich ist, einer Medienabfrage ein Design in voller Breite zuzuweisen und standardmäßig eine mobile Version bereitzustellen . Durch Deaktivieren von Medienabfragen erhalten wir auf solchen Seiten genau das Gegenteil.
Es wäre rationaler, den Browser irgendwie zu zwingen, den Stylesheets und Skripten auf allen Webseiten dieselbe benutzerdefinierbare Breite zuzuweisen. Dies ist schon aus Datenschutzgründen wünschenswert.
Die ideale Lösung besteht darin, die Möglichkeit bereitzustellen, eine Medienabfrage (falls vorhanden) zu identifizieren, die die volle Breite für die Site ermöglicht, und diese zu aktivieren, während alle anderen Medienabfragen im Zusammenhang mit der Auswahl der Fensterbreite deaktiviert werden. Dies kann möglicherweise als Browsererweiterung mit JavaScript erfolgen, bei der alle Medienabfragen im Stylesheet analysiert und bei Bedarf selektiv entfernt werden.
Was soll ein Webdesigner tun?
Ich habe diesen Abschnitt zum letzten Mal verlassen, da er der wichtigste ist. All dies bringt uns zu einer einfachen Schlussfolgerung: Webdesigner müssen lange und gründlich darüber nachdenken, wie sie Responsive Design implementieren können .
Auf einer höheren Ebene sollte man sich die Frage stellen, was die allgemeine Bedeutung von Responsive Design ist. Auf jeden Fall ist dieses Design sehr nützlich: Moderne Benutzer greifen von einer Vielzahl von Geräten mit unterschiedlichen Bildschirmbreiten auf das Internet zu, und dieses Problem wird mithilfe eines reaktionsschnellen Designs gelöst. Aber vielleicht liegt das Problem beim Responsive Design in der Überverallgemeinerung einer solchen Lösung. Es wurde entwickelt, um jede erdenkliche Bildschirmgröße zu unterstützen. Aber sind Bildschirme wirklich so vielfältig? Sie sind vielmehr standardisiert und in wenige, leicht identifizierbare Kategorien unterteilt. Wie diese:
- Desktop-PC / Laptop
- Das Tablet
- Smartphone
Wäre es für den Benutzer nicht viel bequemer, wenn das Site-Design für jede dieser Bildschirmgrößen separat erstellt würde? Dann könnte der Benutzer sinnvoll Zeit damit verbringen, die Site-Oberfläche zu lernen, da sie auf allen Geräten des gleichen Typs konsistent aussehen würde.
Ich kann nicht glauben, dass ich das sage, aber es könnte besser sein, den Benutzeragenten in der einen oder anderen Form wieder zu erkennen:
let mobile = navigator.userAgent.match(/Mobi/); let ipad = navigator.userAgent.match(/iPad/); let android = navigator.userAgent.match(/Android/); if (mobile && !ipad) this is a phone else if (ipad || android) this is a tablet
Der obige Code mag unvollständig sein, aber ich denke, er deckt viele grundlegende Dinge ab. Stellen Sie einfach sicher, dass Sie standardmäßig die PC-Version der Website verwenden, da nicht alle PC-Browser JavaScript einheitlich unterstützen, aber alle Smartphones und Tablets.
Unsere Server können für die Entwicklung und das Hosting von Websites verwendet werden.
Registrieren Sie sich über den obigen Link oder indem Sie auf das Banner klicken und erhalten Sie 10% Rabatt für den ersten Monat der Anmietung eines Servers einer beliebigen Konfiguration!
