Responsive Webdesign richtet sich nach Bildschirmauflösung oder Bildschirmgröße?

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

  • Zielen wir beim Website-Design auf eine Bildschirmauflösung ab (z. B. 1920 x 1080)?
  • Und für mobile Apps . zielen wir auf die Bildschirmgröße ab?
Verwechseln Sie virtuelle Pixel nicht mit echten Pixeln.

Antworten (4)

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

Die Art und Weise, wie Sie über Responsive Design denken, ist falsch. Ich nehme an, Sie kommen aus einem eher konventionellen Druckdesign-Hintergrund, ja? Das Entwerfen für das Web ist viel freier. Responsive Websites haben oft nicht die gleichen konventionellen Haltepunkte oder bestimmte Größen/Auflösungen, für die sie gemacht wurden, weil das Web mehr als das zulässt – es ermöglicht, dass alle Bildschirmgrößen erreicht werden können. Als solches können Sie mit den Größen entwerfen, die für das, was Sie entwerfen, geeignet sind, solange sie angemessen sind.

Vor diesem Hintergrund besteht die beste Vorgehensweise darin, Mobile-First- Design zu entwickeln , was eigentlich Mobile-Most-Important genannt werden sollte . Dies zwingt Sie dazu, sich auf die wichtigsten und möglichen Inhalte zu konzentrieren, und ermöglicht es Ihnen dann, mehr für größere Bildschirme hinzuzufügen, anstatt Sie zu zwingen, auf großen Bildschirmen mit mehr zu beginnen und dann Dinge zu entfernen, wenn Sie für kleinere Bildschirme entwerfen. Mehr dazu können Sie in meiner Responsive-Design-Grundlage nachlesen .

Aber wir müssen auch so entwerfen, dass Reaktionsfähigkeit möglich ist. Die beste Vorgehensweise dafür ist ein Live-Beispiel, sei es in Prototypform oder in einem Wireframing-Programm, kein statisches Dokument wie eine PSD. Auf der Entwicklerseite sollten wir reaktionsfähige Einheiten verwenden und unseren Code sinnvoll strukturieren.

Abgesehen davon sollten Sie die Dinge in Pixeln ausdrücken, was die Auflösung und nicht die Bildschirmgröße bedeutet.

Danke für die Antwort Kumpel. Ich bin eigentlich ein Webentwickler und -designer, ich habe versucht, meine Frage kurz zu halten, deshalb bin ich nicht tief in die Details und die von mir verwendeten Methoden gegangen. Sie haben Recht, Responsive Design hat keine Regeln und das sage ich immer meinen Teamkollegen bei der Arbeit, aber erst kürzlich habe ich bemerkt, dass es keinen Sinn macht, unsere Zeit mit dem Codieren von Medienabfragen für 468 px zu verschwenden, da Mobiltelefone hohe Auflösungen haben Beispiel? und ich sollte die Auflösung anvisieren, oder?
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... Schade, dass dies kein Diskussionsforum ist :o) Ich denke ganz anders. Ich poste meine Antwort. ;Ö)
Nach einer kurzen Recherche fand ich etwas, das die meisten Entwickler vermissen. Wenn <meta name="viewport" content="width=device-width, initial-scale=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, auf den ich lange Zeit nicht geachtet habe XD
@Engineeroholic Das ist in meiner responsiven Design-Grundlage, die ich verlinkt habe :)
„Auflösung“ ist allerdings auch kein eindeutiger Begriff. Beispielsweise beträgt die Auflösung eines iPhone 6 1242 Pixel. Aber wir müssen es uns tatsächlich als 412 für responsive Zwecke vorstellen.
@Engineeroholic, es ist ein und dasselbe. Sie müssen sich um die virtuelle Größe des Bildschirms in Pixeln kümmern, die man als „Auflösung“ betrachten könnte – zumindest ist dies die „Auflösung“, die der Browser verwendet – selbst wenn das Gerät dies nicht tut.
@Zach, ich kenne dieses Meta-Tag schon lange, aber ich habe nie im Detail darüber gelesen, um zu wissen, was es tatsächlich tut :)

Zunächst danke ich Ihnen allen für die Antworten und wertvollen Richtlinien, es hat sicher geholfen!

Erlauben Sie mir, mein Fazit hinzuzufügen:

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

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

Um dies im wirklichen Leben zu erreichen, sollten wir ein Meta-Tag für die Ansichtsfensterbreite in die <head>HTML-Dokumente einfügen:

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

Dies weist den Browser an, die Seite mit einer Breite darzustellen, die der Bildschirmbreite entspricht, sodass sichergestellt wird, dass die Breite der HTML-Seite der Bildschirmbreite in Pixeln entspricht. Die Entwicklung kann dann einfach mit Medienabfragen geplant werden , die auf verschiedene mobile Viewport-Größen abzielen (die ziemlich nahe beieinander liegen) und visuell klarere Elemente erzeugen.

Bitte korrigieren Sie mich, wenn ich falsch liege.

Aktualisieren:

Basierend auf meiner bescheidenen Erfahrung schlage ich die folgenden Schritte für eine bessere reaktionsschnelle Website-Entwicklung vor:

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

Nach dem Testen scheint es, dass allein das Hinzufügen von Viewport-Meta Ihrer Website Noten in mobilen Testtools gibt 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 (hängt davon ab, wie komplex Ihre Website ist).

3- Wenden Sie ein Hybrid-Responsive-System an, eine Mischung aus adaptiven (flüssigen) und responsiven (CSS-Medienabfragen), um dies zu erreichen:

  • Verwenden Sie Prozent für Breite und horizontale Ränder/Auffüllungen. (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. Auf diese Weise passen sich alle CSS-Elemente an diese Größe an, wenn Sie die Schriftgröße für den Textkörper (oder HTML) in der Medienabfrage ändern. Die Verwendung von px macht es zu einem Albtraum, da Sie sich für jede CSS-Klasse entscheiden müssen und seine Schriftgröße ändern.

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

4- Definieren Sie die Unterbrechungspunkte , verwenden Sie dafür ein reaktionsfähiges Testtool. Ich verwende Firefox Responsive Design View, verengen Sie einfach die Breite, bis Sie den Punkt erreichen, an dem die Website fehlerhaft wird (z. B. 500 Pixel), das ist ein Haltepunkt, markieren Sie sie.

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

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

und denken Sie daran, dem Hauptteil eine neue Schriftgröße zuzuweisen, damit alle Unterelemente eine größere Schriftart erben und besser lesbar werden.

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

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

Hoffe das hilft

Wenn Sie eine Antwort hilfreich finden, sollten Sie sie positiv bewerten, also zeigen Sie es
Sie sollten für die virtuelle Bildschirmauflösung entwerfen . Die Bildschirmgröße ist eine falsche Bezeichnung, da Sie nicht wirklich nach bestimmten Zoll- oder cm-Abmessungen entwerfen.
Außerdem könnte eine anfängliche Skalierung auf eine riesige Webseite angewendet werden. Es wird es dann einfach verkleinern, um zu passen, was nicht reagiert.
@ZachSaucier, ich würde gerne die Antworten meiner Colleges positiv bewerten. Leider kann ich nicht, weil mein Ruf weniger als 15 ist! Ich denke, dieses Verbot sollte aufgehoben werden.
@ DA01, ja, die Bildschirmgröße ist eine falsche Bezeichnung, es ist nur ein allgemeiner Begriff. Der umgangssprachliche Ausdruck „Bildschirmgröße“ bezieht sich hier auf die Bildschirmabmessungen in Pixeln (nicht als Bildschirmauflösung).
Ich habe nicht gesagt, dass Sie <meta> einfügen und aufhören sollen. Wenn Sie weiter gelesen haben, habe ich erklärt, dass Sie Medienabfragen verwenden, um responsive Regeln für Webelemente festzulegen. Ich füge hier hinzu, dass ich die Verwendung von Fluid-Responsive-Mix als bewährte Methode empfunden habe, bei der die Elementbreite in Prozent (%) angegeben ist und Elemente bei kleiner Breite 100 % Breite einnehmen können, daher Nachbarelemente auf eine neue Zeile verschieben. Natürlich ist die Verwendung von Schwimmern von entscheidender Bedeutung.
Es ist ein bisschen herablassend, dass Sie eine Antwort gepostet haben, um sie Leuten zu erklären, die dieses Thema eindeutig viel besser verstehen als Sie. Außerdem ist das Entwerfen für die tatsächliche Bildschirmgröße eine etwas verrückte Idee mit 232 verschiedenen Bildschirmgrößen, die ich zuletzt überprüft habe. Sie sollten mit Schwellenwerten für die Bildschirmbreite entwerfen (dh 320px bis 480px sollten aussehen ...) und nicht mit bestimmten Werten. Sie werden feststellen, dass es bald außer Kontrolle gerät, wenn Sie versuchen, für bestimmte Größen zu entwerfen.
Ich glaube, Sie haben meinen Punkt einfach missverstanden, Englisch ist nicht meine Muttersprache, und ich bin auch nicht ins Detail gegangen und habe Schritt für Schritt erklärt, wie man das perfekte responsive Design erstellt, da dies nicht das Ziel meiner Frage war. Meine Frage war, was soll ich anvisieren (was soll ich mit Auflösung oder Größe anfangen).
@Dom, gestatten Sie mir zunächst, mich vorzustellen, ich bin ein Webentwickler und -designer mit 3 Jahren Erfahrung und hatte viele erfolgreiche Projekte mit großen Unternehmen in meiner Region. Ich habe anspruchsvolle Websites mit hochwertigem Design erstellt. Ich hoffe, ich bin nicht herablassend oder anmaßend. Tatsächlich habe ich meine Frage gepostet, um Meinungen für bewährte Verfahren zu sammeln, anstatt sie mir zu erklären, wie ich sagte, ich habe es viele Male und erfolgreich getan. Zweitens gibt es natürlich viele Bildschirme und natürlich werde ich nicht jeden einzeln ansprechen, ich werde meinen Plan in der Antwort posten, um ihn weiter zu erklären
@Dom, überprüfen Sie bitte den Update-Bereich, Ihr Feedback wird geschätzt (ich wollte über mehr Details wie Bildprobleme schreiben, aber ich denke, das wird die Antwort zu lang und langweilig machen ^^)
@ZachSaucier, habe gerade +15 Ruf bekommen. Ich habe endlich abgestimmt :)
Obwohl dies nicht unbedingt falsch ist, sind die von Ihnen gegebenen Tipps eher kontextspezifisch. Es würde einen großen Aufsatz erfordern, um richtig zu erklären, was Sie hier zusammenfassen. Ich persönlich habe aufgehört zu versuchen, es von Grund auf neu zu erstellen, da dies viel effizienter von einem Team und nicht von einer Einzelperson erledigt wird. Wenn Sie viel Arbeit sparen möchten, werfen Sie einen Blick auf das Material Design Framework von Google. Es vereinfacht den gesamten Prozess erheblich und ist nicht schwer zu verstehen.
Ich denke, es ist zu einfach, ein Framework zu verlangen, in meiner Arbeit erledigen wir die meiste Zeit Responsive in weniger als einem Tag, die größten Projekte dauerten 2 Tage. Auch auf diese Weise können wir garantieren, dass es für alle Arten von hochgrafischen Websites funktioniert.

Tolle Frage in der Tat!

Meine verwirrende lange Antwort: Keine und beides

Hier nur einige Gedanken, die ein wenig die Widersprüche kommentieren, mit denen wir heute konfrontiert sind.

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

Wir alle sollten auf der Grundlage von realen Einheiten (oder wahrgenommenen Größen) entwerfen , mit einem gewissen Maß an Flexibilität und Freiheit, um dem Benutzer einige zusätzliche Anpassungen zu ermöglichen.

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

Aber es stellt sich heraus, dass Bildschirmgeräte erst vor einigen Jahren damit beginnen, die Pixeldichte anzugeben. Und einige deklarieren es nicht gegenüber dem Server, sondern machen nur viel Werbung dafür. (auch bekannt als Ipad, Iphone)

Die Bildschirmauflösung kann vom Betriebssystem erkannt werden, da es zwingend erforderlich ist, ein entsprechendes Signal zu senden, aber für die reale Bildschirmgröße benötigen wir eine riesige Datenbank für jedes Modell. Nicht gut.

Das lässt uns mit nur dieser Bildschirmauflösung zurück, dass es sich um einige Informationen handelt, die wir wissen können.

Aber es ist völlig anders, für einen großen FullHD-Monitor zu entwerfen, als für die gleiche Auflösung auf einem mobilen Gerät. Beide 1920x1080. Autsch.

Ein Sonderfall ist der bei Projektoren, da wir keine Ahnung von der Projektionsentfernung und der Entfernung des Betrachters haben.

Eine Teillösung sind die Medienabfragen und Vektorelemente usw.

Eine kurze Antwort

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

Fließendes Design (Prozente) und natürlicher Fluss, gut definierte Abschnitte.

  • 1920 breit

  • mit Medienabfrage wahrscheinlich bei 1280

  • und/oder bei 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 eine kleine Bildschirmauflösung auf einem FullHD-Mobilgerät wählen?

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

was ist mit der höhe? und das ist etwas, das ich heute bei der Arbeit erlebt habe, als ein Kunde eine reaktionsschnelle Website ohne vertikales Scrollen angefordert hat (sehr seltsam!). Dies war ein großes Problem für alle Auflösungen und wird zu zu vielen Medienanfragen führen! schließlich habe ich eine Mischung aus flüssigem Design, 1 Medienabfrage und CSS-Trick verwendet; wo ich zum ersten Mal in meinem Leben eine Fußzeile mit absoluter Position und unten = 0 erstellt habe, damit sie bei langen Bildschirmen unten bleibt. (wo ich es falsch finde) Daher habe ich die Medienabfrage nur für Bildschirme verwendet, die kürzer als der Inhalt sind. Auf diese Weise musste ich nur eine Abfrage verwenden

Der Reflow einer responsiven Seite basiert auf den Abmessungen des Darstellungsbereichs (nicht des Bildschirms) in virtuellen Pixeln (nicht in echten Pixeln).

Wenn auf einem herkömmlichen Desktop, auf dem 1 virtuelles Pixel = 1 echtes Pixel ist, Ihr Browser auf eine Breite von 1000 Pixel eingestellt ist, wird die Seite entsprechend neu umgebrochen.

Auf einem iPhone 6, wo 1 virtuelles Pixel (Apple nennt diese Punkte ) = 3 echte Pixel, ist die Browserbreite die Bildschirmbreite und der Inhalt würde neu umfließen, um die Breite von 417 Pixeln zu erreichen (obwohl das eigentlich 1242 echte Pixel sind).

Es ist also etwas seltsam, dass bei den obigen Beispielen das Gerät mit den weniger echten Pixeln tatsächlich als breiterer Darstellungsbereich in einem responsiven Layout gesehen wird.

Obwohl dies zutrifft, denke ich immer noch, dass es wichtig ist, sich auf das ansprechende Design zu konzentrieren, nicht auf den Bildschirm, auf dem es angezeigt wird
@ZachSaucier ähm ... ich stimme zu? Ich finde? Ich weiß nicht. Es ist ein und dasselbe, nicht wahr? Beim responsiven Design geht es darum, verschiedene Größen von Darstellungsbereichen zu berücksichtigen. Sie scheinen Hand in Hand zu gehen. Es reagiert nicht, wenn Sie nicht auch an die verschiedenen Größen denken, in die es fließen wird.
Was ist mit den letzten 9px passiert?
Responsive Webdesign richtet sich nach Bildschirmauflösung oder Bildschirmgröße?
AntwortenHierDatenschutz-Bestimmungen1y, 1v