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

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?

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.

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.

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

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.