Responsive Webdesign basiert auf Bildschirmauflösung oder Bildschirmgröße?

10

Für mobile Geräte ist die Auflösung tatsächlich groß, nur die Bildschirmgröße ist klein. darauf bezogen:

  • Für Webseiten - Design , zielen wir Bildschirmauflösung (zB 1920x1080)?
  • Und für mobile Apps . zielen wir auf die Bildschirmgröße ab?
Engineeroholic
quelle
Verwechseln Sie virtuelle Pixel nicht mit realen Pixeln.
DA01

Antworten:

6

Responsive Design basiert weder auf der Bildschirmauflösung noch auf der Bildschirmgröße. Stattdessen basiert das reaktionsschnelle Design auf dem Inhalt und seiner Herstellung , sodass es für alle Größen und Auflösungen geeignet ist.

Die Art und Weise, wie Sie über Responsive Design nachdenken, ist falsch. Ich nehme an, Sie haben einen konventionelleren Hintergrund im Druckdesign, ja? Das Entwerfen für das Web ist viel freier. Responsive Websites haben oft nicht die gleichen herkömmlichen Haltepunkte oder spezifischen Größen / Auflösungen, für die sie erstellt wurden, da das Web mehr als das zulässt - es ermöglicht das Erreichen aller Bildschirmgrößen. So können Sie mit jeder Größe entwerfen, die für das, was Sie entwerfen, richtig ist, solange sie angemessen sind.

Vor diesem Hintergrund besteht die beste Vorgehensweise darin, Mobile-First- Design zu entwickeln , das eigentlich als Mobile-Most-Import bezeichnet werden sollte . Dies zwingt Sie dazu, sich auf den Inhalt zu konzentrieren, der am wichtigsten und möglichsten ist, und ermöglicht es Ihnen dann, mehr für größere Bildschirme hinzuzufügen, anstatt Sie zu zwingen, mit mehr auf großen Bildschirmen zu beginnen und dann Dinge zu entfernen, wenn Sie für kleinere Bildschirme entwerfen. Weitere Informationen hierzu finden Sie in meinem Responsive Design Primer .

Wir müssen aber auch so gestalten, dass Reaktionsfähigkeit möglich ist. Die beste Vorgehensweise ist ein Live-Beispiel, sei es in Prototypform oder in einem Wireframing-Programm, kein statisches Dokument wie eine PSD. Wenn es um Entwickler geht, sollten wir reaktionsfähige Einheiten verwenden und unseren Code auf eine sinnvolle Weise strukturieren.

Wenn dies gesagt ist, sollten Sie die Dinge in Pixel angeben, dh Auflösung, nicht Bildschirmgröße.

Zach Saucier
quelle
Danke für die Antwort Kumpel. Ich bin eigentlich ein Webentwickler und Designer. Ich habe versucht, meine Frage kurz zu fassen. Deshalb habe ich mich nicht eingehend mit Details und den von mir verwendeten Methoden befasst. Sie haben Recht, Responsive Design hat keine Regeln und das, was ich meinen Teamkollegen bei der Arbeit immer sage, aber erst kürzlich habe ich festgestellt, dass es keinen Sinn macht, unsere Zeit mit dem Codieren von Medienabfragen für 468 Pixel zu verschwenden, da Handys hohe Auflösungen haben Beispiel? und ich sollte die Auflösung ins Visier nehmen, oder?
Engineeroholic
Ja, wie ich in der letzten Zeile erwähnt habe, sollten Sie sich mehr Gedanken über die Auflösung als über die Bildschirmgröße machen
Zach Saucier
Zach ... Es ist schade, dass dies kein Debattenforum ist: o) Ich denke ganz anders. Ich werde meine Antwort posten. ; o)
Rafael
1
Nach einer kurzen Recherche fand ich etwas Kritisches, das die meisten Entwickler vermissen. Wenn <meta name = "viewport" content = "width = Gerätebreite, Anfangsskala = 1.0> verwendet wird, entspricht die Browserbreite der Gerätebreite. Daher sollten Medienabfragen auf der Bildschirmgröße und nicht auf der Auflösung basieren! Das macht einen großen Unterschied, den ich lange Zeit nicht beachtet habe. XD
Engineeroholic
@Engineeroholic Das ist in meinem Responsive Design Primer, mit dem ich verlinkt habe :)
Zach Saucier
4

Gute Frage!

Meine verwirrend lange Antwort: Keine und beide

Nur ein paar Gedanken hier, die ein wenig die Widersprüche kommentieren, mit denen wir heute konfrontiert sind.

Die Technologie ist nicht das, was sie seit Ewigkeiten sein sollte.

Wir alle sollten basierend auf realen Einheiten (oder der wahrgenommenen Größe) entwerfen , mit einem gewissen Maß an Flexibilität und Freiheit, damit der Benutzer einige zusätzliche Anpassungen vornehmen kann.

Aber um die realen Messungen zu kennen, benötigen wir beide Informationen. Phisische Abmessungen und Geräteauflösung = Pixeldichte.

Es stellt sich jedoch heraus, dass Bildschirmgeräte erst vor einigen Jahren damit beginnen, die Pixeldichte zu deklarieren. Und einige deklarieren es nicht gegenüber dem Server, sondern machen nur viel Werbung darüber. (Aka Ipad, Iphone)

Die Bildschirmauflösung kann vom Betriebssystem erkannt werden, da unbedingt ein entsprechendes Signal gesendet werden muss. Für die tatsächliche Bildschirmgröße benötigen wir jedoch eine große Datenbank für jedes Modell. Nicht gut.

Das lässt uns nur mit dieser Bildschirmauflösung, dass es einige Informationen sind, die wir kennen können.

Das Design eines großen FullHD-Monitors unterscheidet sich jedoch grundlegend von der gleichen Auflösung eines Mobilgeräts. Beide 1920x1080. Autsch.

Ein Sonderfall ist, dass wir bei Projektoren keine Ahnung von der Projektionsentfernung und der Entfernung der Betrachter haben.

Eine Teillösung sind die Medienabfragen und Vektorelemente usw.

Eine kurze Antwort

Für das Webdesign: Zumindest bis wir etwas Besseres finden.

Flüssigkeitsauslegung (Prozentsätze) und natürlicher Durchfluss, gut definierte Abschnitte.

  • 1920 breit

  • mit Medienabfrage wahrscheinlich um 1280

  • und / oder um 1024

  • wahrscheinlich bei 720

  • und 480.

mit Geräteerkennung für zusätzliche Unterstützung.

Für mobile native Apps

Da es sehr spezifisch ist, befolgen Sie einfach die Richtlinien der Marke in Bezug auf Benutzeroberfläche und Symbole.


Bearbeitet.

Warum auf einem FullHD-Mobilgerät eine kleine Bildschirmauflösung wählen?

Ein Smartphone hat eine echte Auflösung von FullHD, aber normalerweise deklariert es dem Server und dem Browser eine kleine Auflösung. Sie können diese Google-Lösung unter https://www.google.com/search?q=what+is+my+screen+resolution testen, damit die Medienabfragen funktionieren.

Rafael
quelle
Was ist mit der Höhe? und dies ist etwas, auf das ich heute bei der Arbeit gestoßen bin, als ein Kunde eine reaktionsfähige Website ohne vertikalen Bildlauf angefordert hat (sehr seltsam!). Dies war ein großes Problem bei allen Auflösungen und wird zu vielen Medienabfragen führen! Schließlich verwendete ich eine Mischung aus flüssigem Design, 1 Medienabfrage und CSS-Trick. wo ich zum ersten Mal in meinem Leben eine Fußzeile mit der Position absolut und bottom = 0 gemacht habe, damit sie für lange Bildschirme unten bleibt. (wo ich es falsche Codierung finde) Daher habe ich nur Medienabfrage für Bildschirme verwendet, die kürzer als Inhalt sind. Auf diese Weise musste ich nur 1 Abfrage verwenden
Engineeroholic
3

Zunächst einmal vielen Dank für die Antworten und wertvollen Richtlinien, es hat sicher geholfen!

Gestatten Sie mir, meine Schlussfolgerung hinzuzufügen:

In der Praxis ist die Ausrichtung auf mobile Bildschirmauflösungen kein gutes UX, die Auflösung ist für den kleinen Bildschirm zu hoch, Schriftarten sind zu klein zum Lesen, Symbole sind zu klein zum Klicken usw.

Es ist also besser, das Design basierend auf der tatsächlichen Größe des Ansichtsfensters zu erstellen! Auf diese Weise basiert es darauf, was ein Benutzer sehen und fühlen kann.

Um dies im wirklichen Leben zu erreichen, sollten wir ein Meta-Tag mit der Breite des Ansichtsfensters in die <head>HTML-Dokumente einfügen:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dadurch wird der Browser angewiesen, die Seite mit einer Breite zu rendern, die der Bildschirmbreite entspricht, sodass sichergestellt ist, dass die HTML-Seitenbreite der Bildschirmbreite in Pixel entspricht. Die Entwicklung kann dann einfach mit Medienabfragen geplant werden, die auf verschiedene Größen von mobilen Ansichtsfenstern abzielen (die etwas nahe beieinander liegen) und visuell klarere Elemente erzeugen.

Bitte korrigieren Sie mich, wenn ich falsch liege.


Aktualisieren:

Aufgrund meiner bescheidenen Erfahrung schlage ich die folgenden Schritte für eine reaktionsschnellere Website-Entwicklung vor:

1- Verwenden Sie das View-Port-Meta (siehe oben), um das Ranking der Webseite in den mobilen Suchergebnissen laut Google zu verbessern. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html

Nach dem Testen scheint das Hinzufügen von View-Port-Meta allein Ihrer Website Noten in mobilen Testtools zu verleihen. Https://developers.google.com/speed/pagespeed/insights/

2- Vielleicht möchten Sie den Mobile-First-Ansatz anwenden. Es ist immer einfacher, größer als kleiner zu werden (abhängig davon, wie komplex Ihre Website ist).

3- Wenden Sie ein hybrides Reaktionssystem an, eine Mischung aus adaptiven (flüssigen) und reaktionsfähigen (CSS-Medienabfragen), um dies zu erreichen:

  • Verwenden Sie den Prozentsatz für die Breite und die horizontalen Ränder / Polster. (Vertikale Ränder können eine feste Pixelgröße haben, wenn Sie möchten. Scrollen ist kein Problem mehr.)

  • Verwenden Sie em für Schriftarten. Wenn Sie die Schriftgröße für den Textkörper (oder HTML) in der Medienabfrage ändern, werden alle CSS-Elemente an diese Größe angepasst. Die Verwendung von px macht es zu einem Albtraum, da Sie sich für jede CSS-Klasse und entscheiden müssen Ändern Sie die Schriftgröße.

  • Bewegen Sie die Divs nach links, damit sie korrekt auf den verfügbaren Platz ausgerichtet sind (oder nach rechts, wenn Ihr Design dies erfordert).

4- Definieren Sie die Haltepunkte und verwenden Sie dazu ein reaktionsschnelles Testwerkzeug . Ich verwende die auf Firefox reagierende Entwurfsansicht. Verkleinern Sie einfach die Breite, bis Sie den Punkt erreichen, an dem die Website fehlerhaft wird (z. B. 500 Pixel).

Wenden Sie die neuen CSS-Regeln in der Medienabfrage für diesen Haltepunkt (500 Pixel) an.

5- Denken Sie daran, die Qualität und Klarheit der Website zu bewahren! Wenn Elemente unklar und zu nahe beieinander liegen, erweitern Sie die Elementbreite, um die Containerbreite zu belegen, und lassen Sie sie vertikal stapeln.

und denken Sie daran, eine neue Schriftgröße für den Körper anzugeben, damit alle Unterelemente eine größere Schrift erben und besser lesbar werden.

6- Wiederholen Sie den Reaktionstest und definieren Sie Ihren zweiten Haltepunkt. Höchstwahrscheinlich erhalten Sie nicht viele Haltepunkte, da wir hier ein flüssiges Design verwenden und sich hier die Verwendung von Prozentsätzen auszahlt!

Ich habe vorher an einer großen Website mit schweren Designelementen gearbeitet und es waren nur 2 Medienabfragen erforderlich :)

Hoffe das wird helfen

Engineeroholic
quelle
2
Wenn Sie eine hilfreiche Antwort finden, sollten Sie sie positiv bewerten, also zeigen Sie es
Zach Saucier
Sie sollten für die virtuelle Bildschirmauflösung entwerfen . Bildschirmgröße ist eine falsche Bezeichnung , wie Sie tatsächlich nicht auf bestimmten Zoll oder cm Abmessungen zu entwerfen.
DA01
Darüber hinaus könnte die anfängliche Skalierung auf eine riesige Webseite angewendet werden. Es wird dann einfach verkleinert, um zu passen, was nicht reagiert.
DA01
@ZachSaucier, ich würde gerne die Antworten meiner Colleges verbessern. Leider kann ich nicht, weil mein Ruf weniger als 15 ist! Ich denke, dieses Verbot sollte aufgehoben werden.
Engineeroholic
@ DA01, ja Bildschirmgröße ist eine Fehlbezeichnung, es ist nur ein allgemeiner Begriff. Slangy sagt Bildschirmgröße hier beziehen sich auf die Bildschirmabmessungen in Pixel (nicht als Bildschirmauflösung).
Engineeroholic
2

Wie eine reaktionsfähige Seite erneut fließt, hängt von den Abmessungen des Ansichtsfensters (nicht des Bildschirms) in virtuellen Pixeln (nicht realen Pixeln) ab.

Wenn auf einem herkömmlichen Desktop mit 1 virtuellem Pixel = 1 realem Pixel Ihr Browser auf 1000 Pixel Breite eingestellt ist, wird die Seite entsprechend angepasst.

Auf einem iPhone 6, bei dem 1 virtuelles Pixel (Apple nennt diese Punkte ) = 3 reale Pixel, ist die Browserbreite die Bildschirmbreite und der Inhalt würde auf die 417px-Breite zurückfließen (obwohl dies tatsächlich 1242 reale Pixel sind).

Es ist also etwas seltsam, dass bei den obigen Beispielen das Gerät mit den weniger realen Pixeln tatsächlich als breiteres Ansichtsfenster in einem ansprechenden Layout angesehen wird.

DA01
quelle
Obwohl dies wahr ist, denke ich immer noch, dass das Wichtigste darin besteht, sich auf das reaktionsschnelle Design zu konzentrieren, nicht auf den Bildschirm, auf dem es angezeigt wird
Zach Saucier
@ZachSaucier umm ... ich stimme zu? Ich denke? Ich weiß es nicht. Es ist ein und dasselbe, nicht wahr? Bei Responsive Design geht es darum, eine Vielzahl von Ansichtsfenstern zu berücksichtigen. Sie scheinen Hand in Hand zu gehen. Es reagiert nicht, wenn Sie nicht auch über die verschiedenen Größen nachdenken, in die es fließen wird.
DA01
Was ist mit den letzten 9px passiert?
Janus Bahs Jacquet