Bei der Arbeit an einer Website ist es nicht sehr richtig, bestimmte Annahmen zu treffen, ohne sich auf reale Daten zu verlassen. Daher ist es sehr wichtig, die Verantwortung für die Überprüfung von Websites in Browserfenstern unterschiedlicher Breite und Höhe zu übernehmen.
Warum Seiten in Browserfenstern unterschiedlicher Höhe überprüfen?
Gute Frage. Bevor ich zu Beispielen und Szenarien für die Verwendung solcher Überprüfungen übergehe, möchte ich auf die Probleme eingehen, die bei Websites auftreten, die nicht für die Arbeit in unterschiedlichen Höhen geeignet sind. Dies wird Ihnen helfen, besser zu verstehen, was als nächstes vor sich geht.
Die falschen Annahmen über die Verwendung einer Website zu treffen, ist einer der wichtigsten Faktoren, die sich negativ auf die Arbeit eines Webdesigners auswirken. Zum Beispiel wäre es falsch zu erwarten, dass die Site verwendet wird, indem der Browser auf Vollbild erweitert wird. Stattdessen müssen Sie mit dem Schlimmsten rechnen.
Annahmen und Wirklichkeit Das
Obige ist eine Illustration meiner Worte. In Wirklichkeit arbeiten nicht alle Benutzer mit Browsern so, wie es der Designer vorschlägt. Ich selbst bin auf Websites gestoßen, die in Browserfenstern mit reduzierter Höhe schlecht aussehen.
Browser-Entwicklertools
Die vertikale Größenänderung des Browsers ist nicht die einzige Möglichkeit, die Höhe des Ansichtsfensters zu beeinflussen. Wenn beispielsweise die Entwickler-Symbolleiste geöffnet wird, wird auch ein Teil des vertikalen Raums entfernt.
Die Entwicklersymbolleiste nimmt einen Teil des Browserfensters ein. Das
Öffnen der Entwicklertools kann das Design Ihrer Website beschädigen oder Probleme aufzeigen, die niemand erwartet hat. Der hervorgehobene Bereich des Bildes repräsentiert die aktuelle Höhe des Ansichtsfensters. Wenn Sie die Entwicklertools öffnen, während Sie die Site auf einem kleinen Laptop-Bildschirm anzeigen, wird nur ein kleiner Bereich der Seite angezeigt.
Lassen Sie uns über eine wichtige Frage nachdenken: "Ist es möglich, die Benutzererfahrung der Website zu verbessern, während Sie sie in einem kleinen Browserfenster anzeigen?" Ich kann diese Frage positiv beantworten. Ich denke die Theorie ist genug für uns. Lassen Sie uns einen "vertikalen" Ansatz zum Stylen von Seiten lernen.
"Vertikales" CSS
Einige Designer und Entwickler konzentrieren sich auf das Erscheinungsbild der Seite, das in Fenstern unterschiedlicher Breite akzeptiert wird. Gleichzeitig überschatten sie die Untersuchung des Seitenverhaltens in Fenstern unterschiedlicher Höhe. Und das ist sehr wichtig. Beispielsweise arbeitet jemand an einem Seitendesign und hat Anweisungen erhalten, wie eine Komponente in Browserfenstern unterschiedlicher Breite aussehen soll. Was ist mit Fenstern unterschiedlicher Höhe?
Bei einem großen Telefon füllen Navigationselemente den verfügbaren vertikalen Raum aus. Bei einem mittleren Telefon werden Schriftgröße und Abstand verringert. Auf einem kleinen Telefon ist nicht genügend vertikaler Platz vorhanden, um alle Elemente anzuzeigen. Daher werden sie in 2 Spalten platziert.
Diese Abbildung zeigt ein Navigationsmenü, dessen Erscheinungsbild an die Höhe des Ansichtsfensters angepasst wird. Ziel des Designers ist es, dass das Menü den gesamten ihm zur Verfügung stehenden Platz ausfüllt. Auf kleineren Bildschirmen verringern sich die Schriftgröße und der Abstand zwischen den Menüelementen. Wenn der Telefonbildschirm sehr klein ist (z. B. beim iPhone 5), werden Elemente in zwei Spalten angezeigt. Diese Site-Nutzungsszenarien werden häufig übersehen. Infolgedessen passen sich Websites entweder überhaupt nicht an, um auf Bildschirmen unterschiedlicher Höhe zu arbeiten, oder sie optimieren sie nur, wenn ein Website-Besucher ein Problem meldet.
CSS kann uns dabei helfen, die Site an unterschiedliche Ansichtsfensterhöhen anzupassen. Wir sprechen nämlich über zwei Haupttechniken:
- Medienabfragen basierend auf der Höhe des Ansichtsfensters.
- Die Maßeinheit für das Ansichtsfenster.
Medienabfragen, die die Höhe des Ansichtsfensters berücksichtigen
Wie Sie wahrscheinlich bereits wissen, können Sie Medienabfragen in CSS verwenden, die die Breite des Ansichtsfensters berücksichtigen:
@media (min-width: 700px) {
.element {
/* do something.. */
}
}
Medienabfragen, die die Höhe von Browserfenstern berücksichtigen, sind jedoch weitaus seltener:
@media (min-height: 500px) {
.element {
/* do something.. */
}
}
/* */
@media (orientation: landscape) {
.element {
/* do something.. */
}
}
Maßeinheiten bezogen auf das Ansichtsfenster
Die Verwendung von Maßeinheiten, die sich auf die Größe des Ansichtsfensters beziehen, kann zur Verbesserung der Benutzererfahrung auf Websites beitragen. Unter Berücksichtigung der Höhe des Ansichtsfensters können Sie beispielsweise den vertikalen Abstand zwischen Elementen anpassen.
.hero__title {
margin-bottom: calc(10px + 5vh);
}
Je größer das Browserfenster ist, desto größer ist der Abstand zwischen den Elementen.
All dies scheint eine nette Kleinigkeit zu sein, die nichts wirklich beeinflusst, sondern nur, bis Sie eine ähnliche Seite auf einem großen Monitor anzeigen - wie ein 27-Zoll-iMac-Display. Dann stellt sich heraus, dass die Höhe des Ansichtsfensters zu hoch ist. Aber wir haben zum Glück eine Möglichkeit, die Größe zu begrenzen
margin-bottom. Dies kann beispielsweise auf folgende Arten erfolgen:
- Medienabfragen verwenden.
- Verwenden von CSS-Vergleichsfunktionen.
Die erste Methode (Medienabfrage) hat sicherlich eine bessere Browserunterstützung. Das Wesentliche ist, den Maximalwert
margin-bottomin Fällen zu begrenzen, in denen die Seite auf sehr großen Bildschirmen angezeigt wird.
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}
Die zweite Möglichkeit ist die Verwendung einer CSS-Funktion
clamp(). Bei der Auswahl der an diese Funktion übergebenen Werte legen wir in diesem Fall die minimale Einrückungsgröße fest 10px, die der maximalen - entspricht 50px, und die Werte zwischen diesen beiden hängen von der Größe des Browserfensters ab.
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}
Wenn Sie an diesem Thema interessiert sind, lesen Sie meine Artikel zu Maßeinheiten in Abhängigkeit von der Größe des Seitenansichtsfensters und den CSS-Funktionen .
Im Folgenden werden die verschiedenen Möglichkeiten erläutert, wie Sie "vertikale" Medienabfragen verwenden können.
Beispiele und Szenarien
▍Seitenelemente, die sich beim Ändern der Höhe des Browserfensters überlappen
Dieses Beispiel zeigt eine Seite mit einem Titel und einer Abbildung im oberen Bereich. Die Höhe dieses Teils der Seite
100vhentspricht 100% der Höhe des Ansichtsfensters.
Der obere Rand der Seite mit einer Höhe von 100vh
Es sieht alles sehr gut aus, aber nur bis die Höhe des Browserfensters abnimmt. Der obere Rand der Seite ist nicht hoch genug, um die Abbildung und den Text aufzunehmen. Infolgedessen überlappen Elemente am oberen Rand der Seite den Inhalt anderer Abschnitte der Seite.
Wenn Sie die Höhe des Browserfensters verringern, wird das Design
beschädigt . Beachten Sie, wie sich die Bilder mit dem Abschnitt der Seite unter dem oberen Rand der Seite überschneiden. Dies geschieht aufgrund der Tatsache, dass sie nicht genügend Platz haben. Schauen wir uns den Code für dieses Beispiel an.
Hier ist das Markup:
<div class="hero">
<div class="hero__wrapper">
<div class="hero__content"><!-- content --></div>
<img class="hero__thumb" src="figure.png" alt="" />
</div>
</div>
Hier sind die Stile:
.hero {
height: 100vh;
}
.hero__thumb {
flex: 0 0 550px;
width: 550px;
}
Betrachten wir verschiedene Optionen zur Lösung solcher Probleme:
- Sie können dem Bild feste Abmessungen (Eigenschaften
widthundheight) geben, nicht nur seine Breite (width). Der Mangel an Eigentumheightist einer der Gründe für unser Problem. - Sie können die Eigenschaft
height: 100vhnur dann auf den oberen Bereich der Seite anwenden, wenn die Höhe des Ansichtsfensters größer ist700px(natürlich variieren die in der Medienabfrage verwendeten spezifischen Werte je nach Ihrer Situation).
Sie können beide Ansätze kombinieren und eine zuverlässigere Lösung für solche Probleme erhalten:
.hero__thumb {
width: 400px;
height: 300px;
object-fit: contain; /* */
}
@media (min-height: 700px) {
.hero {
height: 100vh;
}
}
Daher haben wir entschieden, dass "vertikale" Medienabfragen ein stabiler und nützlicher Mechanismus sind. Die Verwendung eines Werts
100vhist jedoch ein riskantes Geschäft, denn selbst wenn Sie die Größe des Bildes begrenzen können, kann es vorkommen, dass die Größe des Textes nicht begrenzt werden kann. Wenn sich beispielsweise herausstellt, dass der Text im oberen Bereich der Seite länger ist, werden wir mit einer neuen Variante des Problems konfrontiert, mit dem wir bereits vertraut sind.
Text überlappt einen Abschnitt der Site, in dem er nicht sein sollte.
Um dieses Problem zu beheben, können Sie
heighteine Eigenschaftanstelle einerEigenschaft verwendenmin-height. Wenn bei diesem Ansatz der Inhalt eines Abschnitts größer ist, als er enthalten kann, nimmt seine Größe zu und sein Inhalt deckt den nächsten Abschnitt nicht ab.
@media (min-height: 700px) {
.hero {
min-height: 100vh;
}
}
▍Fester Seitentitel
Es ist nichts Falsches daran, dass der Seitentitel beim Scrollen an einer Stelle bleibt. Sie müssen jedoch sicherstellen, dass dieser Titel nur dann eine feste Position hat, wenn auf dem Bildschirm genügend vertikaler Platz vorhanden ist.
Behobener Seitentitel
Hier wird die Site im Querformat angezeigt. Beachten Sie, dass die Überschrift zu viel vertikalen Platz einnimmt. Ist es für den Benutzer wichtig? In den meisten Fällen nein. Sie können jedoch die Benutzererfahrung bei der Arbeit mit der Website verbessern, indem Sie auf die folgende Medienabfrage zurückgreifen:
@media (min-height: 700px) {
.site-header {
/* position: fixed position: sticky */
}
}
Bei diesem Ansatz im Querformat wird der Titel nicht festgelegt.
▍Entblenden von Gegenständen, die weniger wichtig sind als andere
Ich habe dies im Navigationsmenü von Twitter bemerkt. Es handelt sich nämlich um eine Kombination aus "vertikalen" Medienabfragen und dem Priority + -Muster .
Ausgewählte Elemente werden ausgeblendet, wenn nicht genügend Speicherplatz zur Verfügung steht.
Wenn sich die Höhe des Ansichtsfensters ändert, werden weniger wichtige Elemente (Menüelemente
BookmarksundLists) zu UnterelementenMore. Dies ist ein gutes Beispiel für die Verwendung von "vertikalen" Medienabfragen.
.nav__item--secondary {
display: none;
}
@media (min-height: 700px) {
.nav__item--secondary {
display: block;
}
}
Und hier ist mein Tweet, der die Anwendung dieses Ansatzes auf Twitter analysiert.
▍Navigation und Ändern der Höhe des Ansichtsfensters
Das nächste Beispiel bezieht sich auf das vorherige. Es gibt eine vertikale Navigationsleiste (Seitenleiste, Seitenleiste). Wenn die Höhe des Ansichtsfensters klein ist, können Sie den vertikalen Abstand zwischen den Navigationselementen geringfügig verringern, wodurch das Erscheinungsbild der Seite geringfügig verbessert wird.
Abstand zwischen Elementen und Höhe des Ansichtsfensters
Hier sind die Stile für dieses Beispiel:
.nav__item {
padding-top: 4px;
padding-bottom: 4px;
}
@media (min-height: 700px) {
.nav__item {
padding-top: 10px;
padding-bottom: 10px;
}
}
Und hier können Sie sich ein Video dazu ansehen.
Darüber hinaus kann angemerkt werden, dass in einer solchen Situation auch die Schriftgröße geändert werden kann, was, wenn die Höhe des Browserfensters verringert wird, noch mehr Platz für die Elemente bietet.
▍ Seitenoberteil und Ansichtsfensterhöhe
Der obere Bereich der Seite benötigt freien vertikalen Platz, um etwas "Luft" zu erzeugen. Die Abmessungen dieses Bereichs können von der Höhe des Ansichtsfensters abhängen.
Je höher die Seite, desto mehr "Luft".
So sehen die Stile für dieses Beispiel aus:
.hero {
padding-top: 24px;
padding-bottom: 24px;
}
@media (min-height: 700px) {
.hero {
padding-top: 40px;
padding-bottom: 40px;
}
}
▍Modale Komponenten
Wie Sie vielleicht bereits wissen, wird erwartet, dass modale Komponenten mindestens horizontal zentriert sind. Es kann jedoch erforderlich sein, ein solches Element vertikal auszurichten. Dies ist möglich, behindert jedoch die Änderung der von solchen Elementen ausgegebenen Datenmenge.
Wenn das Modal die richtige Datenmenge enthält, sieht es wie unten gezeigt sehr gut aus.
Richtiges Modalelement
Hier sind die Stile für dieses Element:
.modal__body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
Wenn jedoch mehr Text im selben Element angezeigt werden muss, ist nicht alles so gut. Das Element füllt nämlich den Bildschirm vertikal aus und der Benutzer kann nicht durch seinen Inhalt scrollen.
Modal Element Too Tall
Dieses Problem tritt aus folgenden Gründen auf:
- Für das Modal ist keine Höhe angegeben.
- Das Element ist vertikal zentriert (dies beschleunigt das Problem).
Hier ist das CSS, das diese Probleme behebt:
.modal__body {
position: absolute;
left: 50%;
top: 3rem;
transform: translateX(-50%);
width: 500px;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
}
@media (min-height: 700px) {
.modal__body {
top: 50%;
transform: translate(-50%, -50%);
}
}
Beachten Sie, dass hier Eigenschaften
min-heightund verwendet werden min-width. Das erste besteht darin, das Element auch dann gut aussehen zu lassen, wenn es kurzen Text anzeigt. Und mit der zweiten können Sie die Höhe auf einen bestimmten Wert beschränken, anstatt ihm eine konstante Höhe zu geben.
Modales Element zur Anzeige von Langtexten
Ergebnis
Wenn Sie Websites unter Berücksichtigung der Eindrücke entwerfen, die Benutzer durch die Arbeit mit ihnen erhalten, ist es am besten, ihr Design basierend auf der Breite und Höhe des Browserfensters zu erstellen. Es mag jemandem seltsam erscheinen, Seiten in Fenstern unterschiedlicher Höhe zu testen, aber solche Tests rechtfertigen sich. Hier sprach ich über die Bedeutung eines "vertikalen" Ansatzes für das Site-Design, wie Seiten gestaltet werden, um sie in Ansichtsfenstern unterschiedlicher Höhe korrekt anzuzeigen, und sah mir Beispiele an. Ich hoffe, Sie finden das alles nützlich.
Achten Sie darauf, wie die von Ihnen erstellten Webseiten in Browserfenstern unterschiedlicher Höhe aussehen?
