Das erste, was die meisten Designer beim Erstellen ihrer Webseite berücksichtigen, ist, was Auflösung zu entwerfen für. Was dies wirklich bedeutet, ist zu entscheiden, wie breit Ihr Design sein soll. So etwas wie eine Standard-Webseitenbreite gibt es nicht mehr.
Warum eine Auflösung in Betracht ziehen?
1995 waren die Standardmonitore mit 640 Pixel mal 480 Pixel die größten und besten verfügbaren Monitore. Dies bedeutete, dass sich Webdesigner darauf konzentrierten, Seiten zu erstellen, die in Webbrowsern gut aussehen, maximiert auf einem 12-Zoll- bis 14-Zoll-Monitor bei dieser Auflösung.
Heutzutage macht die Auflösung von 640 x 480 weniger als 1 Prozent des meisten Website-Traffics aus. Die Leute verwenden Computer mit viel höheren Auflösungen, einschließlich 1366 x 768, 1600 x 900 und 5120 x 2880. In vielen Fällen funktioniert das Entwerfen für einen Bildschirm mit einer Auflösung von 1366 x 768.
Heute haben die meisten Leute große Breitbildmonitore und sie maximieren ihr Browserfenster nicht. Wenn Sie sich also entscheiden, eine Seite zu gestalten, die nicht mehr als 1366 Pixel breit ist, wird Ihre Seite wahrscheinlich auch auf großen Monitoren mit höheren Auflösungen in den meisten Browserfenstern gut aussehen.
Browserbreite
Ein häufig übersehenes Problem bei der Festlegung der Breite einer Webseite ist die Größe der Browser Ihrer Kunden. Maximieren sie ihre Browser insbesondere auf Vollbildgröße oder halten sie sie kleiner als den Vollbildmodus?
Nachdem Sie die Kunden berücksichtigt haben, die maximieren oder nicht, denken Sie an die Browsergrenzen. Jeder Webbrowser verwendet eine Bildlaufleiste und Ränder an den Seiten, die den verfügbaren Platz von 800 auf etwa verkleinern 740 Pixel oder weniger bei 800 x 600 Auflösungen und etwa 980 Pixel bei maximierten Fenstern bei 1024 x 768 Auflösungen. Das nennt man Browser Chrom und es kann den nutzbaren Platz für Ihr Seitendesign wegnehmen.
Seiten mit fester oder flüssiger Breite
Die tatsächliche numerische Breite ist nicht das einzige, was Sie bei der Gestaltung der Breite Ihrer Website berücksichtigen müssen. Sie müssen auch entscheiden, ob Sie eine feste Breite oder Flüssigkeitsbreite. Mit anderen Worten, werden Sie die Breite auf eine bestimmte Zahl (fest) oder auf einen Prozentsatz (flüssig) einstellen?
Feste Breite
Seiten mit fester Breite sind genau so, wie sie klingen. Die Breite ist auf eine bestimmte Zahl festgelegt und ändert sich nicht, egal wie groß oder klein der Browser ist. Dieser Ansatz kann gut sein, wenn Ihr Design genau gleich aussehen soll, egal wie breit oder schmal die Browser Ihrer Leser sind, aber diese Methode berücksichtigt Ihre Leser nicht. Personen mit Browsern, die schmaler als Ihr Design sind, müssen horizontal scrollen, und Personen mit breiten Browsern haben viel freien Platz auf dem Bildschirm.
Verwenden Sie zum Erstellen von Seiten mit fester Breite bestimmte Pixelzahlen für die Breite Ihrer Seitenaufteilungen.
Flüssigkeitsbreite
Seiten mit flüssiger Breite (manchmal auch als Seiten mit flexibler Breite) variieren in der Breite, je nachdem, wie breit das Browserfenster ist. Diese Strategie führt zu Designs, die sich stärker auf den Kunden konzentrieren. Das Problem bei Seiten mit flüssiger Breite besteht darin, dass sie schwer zu lesen sein können. Wenn die Scanlänge einer Textzeile länger als 10 bis 12 Wörter oder kürzer als 4 bis 5 Wörter ist, kann es schwierig sein, sie zu lesen. Das bedeutet, dass Leser mit großen oder kleinen Browserfenstern Probleme haben.
Um Seiten mit flexibler Breite zu erstellen, verwenden Sie Prozentsätze oder ems für die Breiten Ihrer Seitenaufteilungen. Machen Sie sich mit dem CSS vertraut maximale Breite Eigentum. Mit dieser Eigenschaft können Sie eine Breite in Prozent festlegen, aber dann so begrenzen, dass sie nicht so groß wird, dass die Leute sie nicht lesen können.
CSS-Medienabfragen
Die beste Lösung ist heutzutage die Verwendung von CSS-Medienabfragen und Responsive Design, um eine Seite zu erstellen, die sich an die Breite des Browsers anpasst, in dem sie angezeigt wird. Ein responsives Webdesign verwendet denselben Inhalt, um eine Webseite zu erstellen, die funktioniert, egal ob Sie sie mit einer Breite von 5120 Pixeln oder einer Breite von 320 Pixeln anzeigen. Die unterschiedlich großen Seiten sehen unterschiedlich aus, enthalten aber den gleichen Inhalt. Bei der Medienabfrage in CSS3 beantwortet jedes empfangende Gerät die Abfrage mit seiner Größe und das Stylesheet passt sich dieser bestimmten Größe an.