Inhalt
- Statische VS-Flüssigkeitslayouts
- Filtern von Standard-Bildschirmgrößen
- Mobile Bildschirme
- Das goldene Gitter
Mobiltelefone, Tablets und Computermonitore haben unterschiedliche Verwendungen, Benutzer und Dimensionen, sodass die Frage bleibt, welche Layoutgröße für eine Site am besten von den Bedürfnissen der primären Benutzer dieser Site bestimmt wird. Wenn eine Site für Standardbenutzer auf einem Breitbilddisplay mit einer Auflösung von 1680 x 1040 Pixeln angezeigt werden soll, muss die Größe der Site auf den Hauptbrowserbildschirm angepasst werden. Wenn die Site für die Verwendung auf mobilen Geräten vorgesehen ist, sollte sie für einen viel kleineren Bildschirm konzipiert werden.
Statische VS-Flüssigkeitslayouts
Die erste Überlegung ist, ob die Site eine in Pixel definierte Dimension erfordert. Mithilfe von Prozentsätzen können Sie ein "fließendes" Layout erstellen, das abhängig von der Größe des Browserfensters die Größe der Bereiche dynamisch ändert. In Verbindung mit Text können flüssige Layouts die beste Wahl sein, wenn Sie eine Site mit Standard-Bildschirmauflösung und mobilen Browsern erstellen. Fluidlayouts werden durch Verwendung von "width = 100%" in der CSS-Inhaltsdeklaration anstelle von beispielsweise "width = 960x" erreicht.
Filtern von Standard-Bildschirmgrößen
Um "feste" oder flüssige Layouts zu erstellen, sollte die Breite der Divs, Wrapper oder Hauptinhaltstabellen in das Browserfenster des Benutzers passen, wobei sowohl die Bildlaufleiste als auch die Symbolleiste berücksichtigt werden. Sie sollten auch in Erwägung ziehen, für die Mehrheit zu tun. Heute verwenden mehr als 80% der Browser eine Bildschirmauflösung von über 1024 x 768 Pixeln. Das bedeutet, dass Sie dies für 1680 x 1024 Pixel tun können, aber es ist eine gute Idee, auf den Mittelgrund zu projizieren. 960 oder 980 Pixel breit sind zwei zuverlässige Messgrößen, mit denen Inhalte bequem in einem Browser angezeigt werden können, der von allen Benutzern mit einer Auflösung von 1024 x 768 oder höher verwendet wird. Das System passt auch gut auf mobile Geräte, die ganze Sites anzeigen können. Wenn es zu eng ist, ist 1080 die nächstbeste Breite. Denken Sie an die Höhe eines Standardbrowsers bei einer beliebigen Auflösung, um die wichtigsten Informationen über der "Falte" oder dem Punkt zu halten, an dem ein Scrollen erforderlich ist.
Mobile Bildschirme
Wenn Sie möchten, dass Ihre Website auf verschiedenen mobilen Geräten gut aussieht, müssen Sie dies entweder speziell für das Gerät tun oder einen speziellen Stil erstellen, der von mobilen Browsern verwendet wird, um die "mobile" Version Ihrer Website anzuzeigen. Die Auflösung von 240 x 320 ist der aktuelle Standard für die meisten Smartphones und Internetgeräte wie das iPhone. Es ist eine gute Idee, "fließende" Prozentsätze oder Layouts zu verwenden, da viele Geräte sowohl den Hoch- als auch den Querformatmodus unterstützen. Wenn Sie eine Website mit einer Breite von 320 Pixel erstellen, erscheint sie möglicherweise für den Benutzer als abgeschnitten, wenn Sie im Hochformat auf sie zugreifen.
Das goldene Gitter
Das beste System zur Bestimmung der Layoutabmessungen ist möglicherweise die Verwendung des Rastersystems. Raster berechnen perfekt ausgeglichene Bereiche innerhalb einer bestimmten Breite, um ein Gefühl für die Skalierung der Elemente im Hauptlayout oder Inhaltsbereich zu erhalten. Zu diesen Elementen gehören Werbeboxen, Balken, Werbeflächen oder Absätze. Beispielsweise hätte ein Layout mit einer Gesamtbreite von 1080 Pixeln, das mit Hilfe des goldenen Gitters aufgeteilt wurde, den Bereich für Blogbeiträge mit einer Breite von 739 Pixeln und einen rechten Balken mit einer Breite von 780 Pixeln belassen, wobei beide Seiten einen Rand haben von 10 Pixeln. Das Endergebnis ist ein perfekt abgestimmtes und ausgewogenes Layout. Sie können mit verschiedenen Rastern experimentieren, indem Sie das Rastersystem (siehe Ressourcen) besuchen.