320, 768 und 1024. Bedeutet diese Nummer etwas für dich?
Nein, es ist nicht der Da-Vinci-Code, sondern die Breite in Pixel, die viele Designer mit der Breite von Mobilgeräten, Tablets und Desktops in Verbindung bringen.
Das Problem dabei ist, dass mein Handy nicht 320 Pixel breit ist, mein Tablet ist nicht 768 Pixel breit und mein Desktop-Bildschirm ist sicherlich nicht 1024 Pixel breit. Es gibt Hunderte von verschiedenen Bildschirmgrößen auf einer Vielzahl von verschiedenen Geräten und dennoch denken wir an reaktionsfähiges Webdesign als 320, 768 und 1024.
Ich habe viele Websites gesehen, die diese drei Haltepunkte für ihre Designs verwenden und einfach 3 statische Layouts erstellen, die in der nächstgelegenen Breite zentrieren.
Dies ist besser als eine altmodische, statische Desktop-Seite, da sie mindestens eine Spalte, eine vereinfachte Version für Mobilgeräte und eine touchfreundliche Version für Tablets bereitstellt, aber warum würden Sie dann alle anderen Bildschirmgrößen verprellen, indem Sie sie nicht verwenden Berücksichtigung?
Sicher, das Design wird immer noch auf den anderen Größen funktionieren, aber was passiert, wenn Sie ein Tablet haben, das kleiner als 768 ist? Sie werden die mobile Erfahrung auf einem Tablet bekommen! Und wenn es auf einem Laptop-Bildschirm kleiner als 1024 angezeigt wird? Wir schicken ihnen einfach das Tablet-Layout und lachen über sie, weil sie keine der 3 Bildschirmgrößen haben, die wir für angemessen halten.
Wenn Sie Ihre Responsive-Layouts erstellen, sollten Sie immer versuchen, so viele Dimensionen wie möglich in Prozent festzulegen. Auf diese Weise wird sichergestellt, dass Ihr Inhalt gleichmäßig über verschiedene Bildschirmgrößen wächst und schrumpft, und zwar proportional zum Gerät, auf dem er angezeigt wird. Dieser Ansatz stellt auch sicher, dass Ihr Inhalt immer 90% (oder soviel Sie bestimmen) des Bildschirms ausfüllt, anstatt möglicherweise 50% des Bildschirms, da der Inhalt auf einer Bildschirmgröße zentriert ist, die einige Pixel kleiner als die nächste ist verfügbarer Haltepunkt
Bei der Auswahl Ihrer Haltepunkte sollten Sie Ihre Entscheidungen immer danach treffen, wo der Inhalt bricht und nicht auf den Bildschirmbreiten des Geräts. Statt ein Design zu erstellen und es dann an den iPad-Bildschirm anzupassen, sollten Sie herausfinden, mit welcher Breite Ihr Inhalt zu kämpfen hat.
Ich tendiere dazu, mit einem 1400 Wide Design zu beginnen und den Browser langsam kleiner zu machen, bis ein Stück Inhalt das Layout durchbricht oder kurz davor steht. Das bestimmt dann meinen nächsten Haltepunkt. Es spielt keine Rolle, ob es bei 1200, 800 oder 673 ist, wenn der Inhalt immer noch funktioniert, warum sollte dann das Layout geändert werden?
Sie werden feststellen, dass Sie mit seltsamen Haltepunkten wie 477 oder 982 enden und dass Sie 2, 6 oder 10 verschiedene Haltepunkte haben können. Der Punkt ist, dass der Inhalt eher entscheidet als die beabsichtigten Bildschirmgrößen, auf denen er angezeigt werden soll.
Mit der Anordnung der verschiedenen Geräte und Bildschirmgrößen, die jeden Monat veröffentlicht werden, ist es unmöglich, eine Reihe definitiver Haltepunkte für unsere reaktionsfähigen Projekte zu bestimmen. Die Wahrheit ist, dass wir, während wir eine Variable wie die Bildschirmbreite verwenden, um unsere Responsive Layouts zu bestimmen, Schwierigkeiten haben, ein perfektes Layout für jede unterschiedliche Größe zu liefern, aber indem wir ein paar der obigen Tipps befolgen, können wir zumindest den Inhalt sicherstellen wird immer so gut wie möglich angezeigt.
Welche Haltepunkte verwenden Sie normalerweise? Vermeidest du Haltepunkte überhaupt? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Breites Bild über Shutterstock.