Share
Die Voraussetzung für ein responsives Web ist nicht nur eine rein mobile Website. Es geht darum, unsere Inhalte so freizugeben, dass sie auf jede erdenkliche Weise erlebt werden können - und das im großen Maßstab. Werfen wir einen Blick auf die Design-Überlegungen hinter dem oft vernachlässigten großen Desktop-Bildschirm.
Diejenigen, die gerne mit flexiblen Layouts spielen, werden (wie ich) zweifellos einen sonderbaren Kick bekommen, wenn Sie sehen, wie sich Ihre Entwürfe bequem an kleine Viewports anpassen. Was einst ein schönes mehrspaltiges Layout war, wird zu einer ebenso schönen, kuscheligen Säule aus lesbarem Text, frei von Unordnung und unnötigem Unsinn. Aber wie viele von Ihnen denken an Ihre Layouts, die über den Komfort eines 960-Gitters hinausgehen?
Ob Sie es glauben oder nicht, es gibt Menschen, die Ihre Arbeit im HD-Breitbildformat sehen (selbst die 27-Zoll-Displays iMac und Thunderbolt von Apple haben eine Auflösung von 2560 x 1440 Pixeln.) Die Bildschirme werden immer größer, also bleibt Ihr 960px ansprechbar Layout? In der Mitte eines Ozeans treibend, ist wo.
Über fünf Prozent der Besucher von Webdesigntuts + im letzten Monat haben dies auf einem Bildschirm wie dem oben gezeigten getan, nicht eine Figur, die man sich schnuppern lassen sollte. Und bevor Sie sich über das Layout dieser Site in den Hals reißen, können Sie sicher sein, dass eine Lösung in Arbeit ist!
Wir scheinen bei 960px hängen zu bleiben, eine Breite, die durch Verwendung von Rastersystemen zum Standard geworden ist. Lange Zeit war es ungewöhnlich, Bildschirme mit einer Größe von mehr als 1024 x 768 Pixeln zu finden, sodass unsere Layouts mit fester Breite dies sicherlich nicht überschreiten konnten. 960px ist eigentlich eine großartige Figur zum Arbeiten, weil:
Probleme traten beim Zugriff auf das Internet mit kleineren Geräten auf. Größere Layouts sind unpraktisch, um durch winzige Ansichtsfenster richtig zu sehen. Daher ist unsere Aufmerksamkeit logischerweise auf dieses Problem gerichtet. Ein 960px-Layout sieht auf einem größeren Bildschirm immer noch gut aus. Deswegen denken Designer oft an responsives Webdesign, um ihre Layouts zu erstellen Handy, Mobiltelefon freundlich.
Wir sind es gewohnt, mittelgroße Layouts zu entwerfen. Aus diesem Grund ist es einfacher (obwohl viele von Ihnen das nicht zugeben), so zu visualisieren und zu entwerfen, wie Sie es immer getan haben, und dann die Dinge für das Handy herunterzuschneiden. Ihr erster Versuch, sich mit RWD zu beschäftigen, wird wahrscheinlich dazu führen, dass Medienabfragen wie folgt herabgesetzt werden (aus der Skeleton Boilerplate):
/ * alle deine ursprünglichen Styles gehen hier… * / body width: big-ish; / * Kleiner als Standard 960 (Geräte und Browser) * / @media only Bildschirm und (max. Breite: 959px) / * Tablet Hochformat auf Standard 960 (Geräte und Browser) * / @media only Bildschirm und (min -Breite: 768px) und (max-width: 959px) / * Alle mobilen Größen (Geräte und Browser) * / @media only Bildschirm und (max-width: 767px) / * Mobile Querformat bis Tablet-Portrait ( Geräte und Browser) * / @media only screen und (min-width: 480px) und (max-width: 767px) / * Mobile Portrait Size in Mobile Landscape Size (Geräte und Browser) * / @media only screen und ( Max-Breite: 479px)
Beginnen Sie groß und arbeiten Sie sich dann zu kleineren Geräten hin. Dies ist aus verschiedenen Gründen umständlich, nicht zuletzt deshalb, weil Sie sich oft auf eine maximale Layoutbreite festlegen, bevor Sie sich in andere mögliche Bildschirmgrößen begeben. Wenn Sie sich für größere Bildschirmgrößen entscheiden, müssen Sie Ihre Medienabfragen erneut abfragen.
Ein mobiler erster Ansatz bedeutet dagegen, dass Sie zuerst auf die kleinstmöglichen Bildschirme eingestellt sind und dann Ihre Medienabfragen erstellen, wenn die Ansichtsfenster größer werden. Das Beheben einer anderen Medienabfrage am Ende, da Sie einen Haltepunkt bei 2000px bemerken, ist unkompliziert.
Die naheliegende Lösung besteht darin, dass unsere flexiblen Layouts die gesamte Bildschirmbreite des Bildschirms überdecken. Einfach! Aber es gibt einen Grund, warum Sie oft sehen werden maximale Breite in responsive css auftauchen; Das Design für große Bildschirme erfordert sorgfältige Überlegungen.
Technische Hürden für einen Moment beiseite lassen, wie gestalten wir eigentlich größere Bildschirme? Ein paar Ansätze kommen in den Sinn, lassen Sie uns also logisch durchgehen.
Angenommen, es handelt sich um ein flüssiges Gitter, können wir einfach zulassen, dass sich unsere Säulen proportional ausbreiten und den verfügbaren Bildschirmbereich ausfüllen.
Das krasse Problem bei diesem Ansatz sind superseitige Textspalten. Ein Textkörper mit einer Breite von 30 cm ist für Ihr Layout ästhetisch nicht von Vorteil, aber vor allem wird die Lesbarkeit reduziert.
Die Breite einer Textzeile wird typografisch als "Takt" bezeichnet. Um die Lesbarkeit zu erhalten, sollte die Länge 45 bis 75 Zeichen betragen. Wenn zu viele Zeichen vorhanden sind, wird es für das Auge des Lesers schwierig, sich wieder über den Text zu bewegen und den Anfang der nächsten Zeile zu finden. Dies kann bekämpft werden, indem die Zeilenhöhe (Zeilenabstand) erhöht wird. Dies lässt sich leicht durch Medienabfragen zu geeigneten Zeitpunkten implementieren, ist jedoch keine vollständige Lösung.
Das CSS3-Mehrspalten-Layoutmodul sieht in dieser Hinsicht vielversprechend aus. Wenn ein Textkörper eine bestimmte Breite erreicht, löst das Aufteilen in eine entsprechende Anzahl von Spalten die Lesbarkeitsprobleme. Wir kommen uns jedoch voraus. Die Browserimplementierung von CSS3-Spalten ist immer noch inkonsistent und lässt einige typografische Details zu kurz.
Ich glaube, wir wurden warm, als wir die zunehmende Linienhöhe erwähnten, was mich zum nächsten Ansatz führt…
Halten Sie sich an mir - wie wäre es, wenn Sie einfach alles aufstocken? Sicherlich, was den Typ angeht, wäre es sinnvoll. Die Lesbarkeit steht wieder im Mittelpunkt. Größere Bildschirme werden im Allgemeinen von weiter her betrachtet. Wir betrachten Bildschirme am bequemsten mit einem Betrachtungswinkel von etwa 30 °.
Was effektiv bedeutet;
Je größer der Bildschirm, desto größer ist der optimale angenehme Betrachtungsabstand.
Dies führt zu einem optimalen Betrachtungsabstand von 3-6 Bildschirmbreiten. Hinweis: Diese Zahlen beziehen sich speziell auf das Fernsehen im Fernsehen, die Prinzipien für Desktop-Monitore bleiben jedoch gleich. Apple empfiehlt, abhängig von der Größe des Displays zwischen 18 "und 24" zu sitzen. Sie schlagen 15 "vom neuesten iPad vor, 10" von einem iPhone 4.
Dies ist ein bedeutender Bereich, daher scheint es sinnvoll, die Schriftgröße in Abhängigkeit von der Entfernung zu ändern, aus der gelesen wird.
Ems sind unser Freund hier. Durch die Einstellung Ihres Typs, der Linienhöhe und des gesamten Grundlinienraster (es gibt eine Herausforderung), kann mit relativen Maßeinheiten (ems oder rems) das Ganze sehr einfach skaliert werden.
/ * Anfangswert setzen * / html font-size: 100%; body font-size: 0.875em; / * 14px * / / * steigern, wenn die Zeit richtig ist * / @media only screen und (min-width: 768px) body font-size: 1em; / * 16px * /
Ich bin ein Fan von großen, lesbaren Typen, aber wenn Sie schon mal vorsichtig waren, Ihre Körperkopie auf 16px zu setzen, ist ein großes Bildschirmlayout vielleicht der richtige Ort, um sich die Hände schmutzig zu machen!
Fortgeschrittene CSS-Layouts sind noch weit entfernt, aber selbst in unserer Welt der Floats können wir Layouts ohne großen Aufwand umstrukturieren. Wenn das Ziel dieser Übung darin besteht, die ungenutzte Bildschirmfläche optimal zu nutzen, sollten Sie nicht einfach versteckten Inhalt wieder in das Bild einbringen?
Nehmen Sie zum Beispiel die Fußzeile. Meistens befindet es sich am unteren Rand der Seite außerhalb des Bildschirms. Das ist kein Problem; Es ist nicht genau der Platz für sehr wichtige Inhalte, aber ein Seitenfuß kann nützliche Informationen enthalten. Ziehen Sie es daher in Betracht, sie als zusätzliche Spalte an die Seite Ihres Layouts anzuheften.
Semantisch ist es immer noch ein . Das Markup gibt immer noch an, wo der Inhalt in Relation zur Hierarchie der Seite steht, aber wir können ihn frei dort setzen, wo wir möchten. Wenn Sie an einem Raster arbeiten und an einer modularen Layoutstruktur arbeiten, wird dies leichter erreichbar.
Sie können den Körperinhalt auch nach oben verschieben, indem Sie horizontale Elemente wie die Hauptnavigation neu positionieren und so ein vertikal verzerrtes Layout in eine eher horizontale Ausrichtung umwandeln.
Ich schlage vor, eine Kombination all dieser Ansätze würde Ihnen gut tun. build for mobile first, lassen Sie Ihr Layout in der Breite fließen, erhöhen Sie die Skalierung (geringfügig) und positionieren Sie modulare Elemente neu.
Schauen Sie sich an, wie das alles zusammenkommt (ich habe sogar die CSS3-Multispalten für ein gutes Maß hineingeworfen).
Es gibt immer aber doch…
Vergiss nicht den Leerraum. Leerzeichen an den Rändern eines Seitenlayouts definieren genau dieses Layout. Die leeren Bereiche eines Bildschirms fokussieren auf Inhaltsbereiche und lenken die Aufmerksamkeit des Benutzers. Füllen Sie nicht eifrig Leerzeichen aus, nur weil Sie es können.
Dies gilt insbesondere für unseren Ansatz der Neupositionierung. Ein modulares Layout kann problemlos neu angeordnet werden, sodass verborgene Inhalte sichtbar gemacht werden. Wenn Sie dem Benutzer jedoch weitere Informationen zur Verarbeitung bereitstellen, kann dies das, was Sie erreichen wollen, verwässern.
Nehmen Sie dieses Beispiel aus den letzten Sneek-Vorschlägen von Windows 8. Bei kleineren Geräten ist die gekachelte Schnittstelle sehr effektiv:
Auf größeren Bildschirmen kann es am besten als verwirrend beschrieben werden:
Das Konzept, dass "Raum da ist, um gefüllt zu werden", ist daher nicht unbedingt richtig. Trotzdem hoffe ich, dass dies Ihnen Anlass zum Nachdenken gibt und ich freue mich darauf, Ihre eigenen Erfahrungen bei der Gestaltung von Großbildschirmen zu hören.
Accentsconagua