Bevor Sie zu lange über genaue Monitorauflösungen für Ihr Design nachdenken, sollten Sie daran denken, dass jedes moderne Webdesign responsive ist, d.h Bildschirmauflösungen. Mit einem einzigen Design müssen Sie alles unterstützen, von den kleinsten mobilen Bildschirmen bis hin zu Ultra-HD-Desktop-Monitoren.
Mit sich anpassendes Webdesign, richten Sie allgemeinere Layouts für Mobilgeräte, Tablets und Desktops ein. Wann und wie sich jedes Seitenelement für diese Layouts an seinen Platz verschiebt, wird durch spezielle Haltepunkte bestimmt, die in Ihr CSS. Diese Haltepunkte werden durch bestimmte gängige Bildschirmauflösungen bestimmt.
Sie werden zwar nicht auf bestimmte Auflösungen abzielen oder eine feste Größe für Ihre Designs einrichten, aber Sie ziehen Bildschirm in Betracht Auflösungen bei der Einrichtung von Haltepunkten und der Schaffung reibungsloser Übergänge, damit Ihre Website auf jedem Gerät gut aussieht Bildschirmgröße.
Gängige Desktop-Auflösungen
- 1280x720 Standard-HD - Du kennst das vielleicht besser als 720p. Es war die Standard-HD-Auflösung, als HD zum ersten Mal alltäglich wurde. Sie werden wahrscheinlich nicht viele neue Monitore mit dieser Auflösung finden, aber es gibt noch viele davon in freier Wildbahn, als sie populärer waren.
- 1366x768 - Die Auflösung ist etwas ungewöhnlich, aber bei kleineren Laptops und einigen Tablets sehr beliebt. Wenn Sie es mit dem unteren Ende zu tun haben Chromebooks, besteht eine gute Chance, dass dies die Auflösung ist, auf die Sie abzielen.
- 1920x1080 Am häufigsten - Wenn Sie an Desktops denken, haben Sie es wahrscheinlich mit 1920 x 1080, besser bekannt als 1080p, zu tun. Diese Auflösung ist absolut überall. Die meisten Desktop-Monitore sind immer noch 1080p, und viele Laptops in voller Größe sind es auch. Auch im Querformat findet man einen ordentlichen Anteil an Tablets in 1080p.
- 2560x1440 - 1440p ist ein weiterer seltsamer Mittelweg in der Monitorauflösung. Es ist höher als das, was Sie als 2k bezeichnen würden, aber es ist nicht ganz 4k. Das heißt, es ist eine gängige Auflösung auf dem Markt für Gaming-Monitore und eine erschwingliche Alternative zu vollem 4k. Abhängig von Ihrer Website kann es sich lohnen, 1440p zu unterstützen oder nicht.
- 3840x2160 Die nahe Zukunft - Dies ist volles 4k oder Ultra HD. Während 4k heute normalerweise High-End-PCs vorbehalten ist, sinken die Preise, die Grafiktechnologie verbessert sich und die Nachfrage nach 4k wird vom TV-Markt getrieben, wo es viel häufiger vorkommt. Es ist davon auszugehen, dass 4k in den nächsten Jahren 1080p als De-facto-Standard leicht überholen wird, daher lohnt es sich auf jeden Fall, 4k jetzt zu berücksichtigen.
Gängige Tablet-/Querformat-Auflösungen
Tablets sind möglicherweise nicht mehr so beliebt wie früher, und zunehmende Telefongrößen in Verbindung mit Convertible-Laptops scheinen ihren Marktanteil erheblich verringert zu haben. Trotzdem überschneidet sich die Bilanzierung von Tablet-Auflösungen erheblich mit Desktops und Laptops. Sie können möglicherweise Tablet-Haltepunkte verwenden, um Haltepunkte für bestimmte problematische Elemente zu erstellen, die bei bestimmten Auflösungen nicht richtig passen.
- Auch Tablet-Auflösungen sollten Sie bei Geräten im Hochformat unbedingt berücksichtigen. Nicht jeder surft auf seinem Tablet im Querformat, daher sollten Sie mindestens einen Haltepunkt für ein gewöhnliches Tablet im Hochformat hinzufügen.
- 1280x800 Eine früher übliche Auflösung - Ältere Tablets, Tablets der unteren Preisklasse und kleinere Tablets haben alle im Allgemeinen einige Fire-Tablets von Amazon, die auch immer noch 1280x800 verwenden. Dies ist eine der letzten wirklich mobilen Auflösungen auf Tablets.
- 1920x1200 Common auf 7"- und 8"-Tablets - Im Querformat können Sie sich meistens auf die gleichen Breakpoints verlassen wie bei 1080p. Wenn Sie jedoch eines davon in der Landschaft sehen, sieht die Situation ganz anders aus. Diese Auflösung ist bei vielen 7- und 8-Zoll-Tablets üblich, einschließlich Amazon Fire.
- 2048x1536 Apple-Tablets -Dies ist die gängigste Tablet-Auflösung von Apple. Es ist 1440p ähnlich genug, um einen sehr geringen Unterschied zu machen, aber auch hier ist das Porträt ungewöhnlich. In jedem Fall ist es eine gute Idee, Ihre Website mit dieser Auflösung zu testen, um sicherzustellen, dass auf iPads nichts Ungewöhnliches passiert.
Tablets mit höherer Auflösung beginnen, in Desktop-Gebiet vorzudringen. Meistens müssen Sie sie nicht einmal berücksichtigen, da die Auflösung in einen Bereich fällt, den Sie bereits berücksichtigt haben. Es ist jedoch immer eine gute Idee zu testen, um absolut sicher zu sein.
Gängige mobile Auflösungen
Mobile Geräte sind mit Abstand am kompliziertesten in der Handhabung. Es gibt so viele verschiedene Geräte, auch ältere, die noch im Einsatz sind. Es ist nicht einfach, sie alle abzudecken. Deshalb ist Mobile-First-Design so beliebt. Die Philosophie ist einfach. Beginnen Sie zuerst mit dem einfachsten mobilen Design und bauen Sie darauf für immer größere Bildschirme auf. So funktionieren auch die ältesten und kleinsten Geräte, allerdings mit weniger Inhalt und weniger Features. Die Site ist nicht gelähmt, sie zeigt einfach nur die wichtigsten und am häufigsten aufgerufenen Informationen zuerst an.
Hier ist ein interessanter Trick für den Umgang mit Telefonen; Drehen Sie die Desktop-Auflösungen auf die Seite. Sicher, es gibt ungewöhnliche Ausreißer, aber die meisten aktuellen Telefone folgen diesem Muster.
- 720 x 1280 auf älteren Geräten üblich - 720p auf der Seite war einige Jahre lang der gängigste Standard für ein mobiles Gerät. In diesem Fall müssen Sie sich keine Gedanken über den Querformatmodus machen, da er dem Desktop-720p entspricht. Bedecken Sie einfach die Portrait-Auflösung mit einer Breite von 720 Pixeln.
- 1080x1920 der Mittelweg - 1080p ist schon lange der Standard. Es ist immer noch sehr verbreitet bei Geräten der Mittelklasse. Wenn Sie nur eine mobile Auflösung unterstützen möchten, ist dies das Richtige.
- 1440x2560 aktuelles Top-End - Mobile Geräte werden immer größer und Bildschirme immer höher aufgelöst. 1440p ist ein interessanter Standard, da es eine Vielzahl von Bildschirmbreiten – in diesem Fall Längen – gibt, die in diesen Bereich fallen. Sowohl auf Desktops als auch auf Mobilgeräten ist die am häufigsten verwendete Auflösung 1440 x 2560. Dadurch erhält der Bildschirm das übliche Seitenverhältnis von 16:9. Auf Mobilgeräten ist es etwas weniger wichtig als auf Desktops, da die Länge des Geräts Ihre Designs nicht wesentlich beeinflusst.
Bevor Sie glücklicherweise nur drei mobile Auflösungen unterstützen, sollten Sie auch feststellen, dass einige Leute lächerlich alte Telefone mit winzigen Bildschirmen verwenden. Sie sollten immer eine minimale Auflösung verwenden, um sicherzustellen, dass Ihre Website auch für jemanden, der ein Telefon von mehreren Jahren verwendet, gut aussieht.
Einfache Tipps, die Sie im Hinterkopf behalten sollten
Es ist einfach, eine Reihe von Fakten über Bildschirmauflösungen und Abflüsse zu sammeln und Designs zu verspotten, und genau dann gerät man in Schwierigkeiten. Es gibt ein paar wichtige Ideen, die Sie beim Entwerfen einer Website im Hinterkopf behalten sollten, und sie gelten in den meisten, wenn nicht in allen Situationen.
- Responsive Design ist fließend - Möglicherweise verspüren Sie die Neigung, eine riesige Anzahl von Breakpoints in Ihr CSS einzubauen, um jede mögliche Bildschirmgröße und Situation zu berücksichtigen. Das ist eine großartige Möglichkeit, sich verrückt zu machen. Responsive Webdesign soll flexibel genug sein, um Lücken und Unregelmäßigkeiten auszufüllen. Wenn Sie feststellen, dass Sie zu viele statische Zahlen definieren, sei es in Medienabfragen oder für die Elemente selbst, sind Sie wahrscheinlich auf dem falschen Weg.
- Die Leute maximieren ihren Browser nicht immer - Diese Art geht Hand in Hand mit dem vorherigen Punkt. Sie können Design für Bildschirmgrößen, aber wenn jemand sein Browserfenster nicht maximiert, geht das alles in Rauch auf. Indem Sie die Dinge in Ihrem Design flüssig halten, können Sie Probleme mit unterschiedlichen Browserfenstergrößen vermeiden.
- Alles testen - Versuchen Sie, Ihre Website zu zerstören. Nur so finden Sie alle Fehler und Inkonsistenzen, die das Erlebnis eines Besuchers ruinieren. Chrome verfügt über integrierte Tools zum Testen von Geräteauflösungen mit einer vollständigen Liste beliebter Geräte, mit denen Sie arbeiten können. Sie haben immer die Möglichkeit, Ihr Browserfenster selbst in verschiedene Größen zu ziehen, um zu sehen, wie die Site in verschiedenen Größen aussieht und wie sie sich anpasst und bricht.
- Erwarten Sie nicht, dass Ihre Benutzer das Neueste und Beste haben - Dies geht zurück auf den vorherigen Punkt über ältere Telefone und kleine Auflösungen. Sie können nicht erwarten, dass die Leute neue Geräte haben. Das gilt sowohl für die Bildschirmauflösung als auch für die Rechenleistung. Laden einer Site mit zu vielen Grafiken und zu viel JavaScript ist eine gute Möglichkeit, Leute mit einem langsamen Gerät dazu zu bringen, zu gehen und nie wiederzukommen.