Das erste, was die meisten Designer beim Erstellen ihrer Webseite berücksichtigen, ist die Auflösung, für die sie entworfen werden soll. Was dies wirklich bedeutet, ist die Entscheidung, wie breit Ihr Design sein soll. Es gibt keine Standard-Website-Breite mehr.
Warum eine Lösung in Betracht ziehen?
1995 waren die Standardmonitore mit einer Auflösung von 640 x 480 die größten und besten verfügbaren Monitore. Dies bedeutete, dass Webdesigner sich darauf konzentrierten, Seiten, die in Webbrowsern gut aussehen, auf einem 12 bis 14 Zoll großen Monitor bei dieser Auflösung zu optimieren.
Heutzutage macht die Auflösung von 640 x 480 weniger als 1 Prozent des Website-Verkehrs aus. Menschen verwenden Computer mit viel höheren Auflösungen, darunter 1366x768, 1600x900 und 5120x2880. In vielen Fällen funktioniert das Entwerfen für einen Bildschirm mit einer Auflösung von 1366 x 768 Pixeln.
Wir sind an einem Punkt in der Geschichte des Webdesigns, an dem wir uns nicht viel um die Auflösung kümmern müssen. Die meisten Benutzer verfügen über große Breitbildmonitore und maximieren ihr Browserfenster nicht. Wenn Sie also eine Seite entwerfen, die nicht mehr als 1366 Pixel breit ist, wird Ihre Seite in den meisten Browserfenstern wahrscheinlich auch auf großen Bildschirmen mit höheren Auflösungen gut aussehen.
Browser-Breite
Bevor Sie sich fragen, "Okay, ich mache meine Seiten 1366 Pixel breit", gibt es mehr zu dieser Geschichte. Ein oft übersehenes Problem bei der Festlegung der Breite einer Webseite ist, wie groß Ihre Kunden ihre Browser behalten. Maximieren sie ihre Browser insbesondere auf Vollbildgröße oder halten sie sie kleiner als der Vollbildmodus?
Bei einer informellen Befragung von Mitarbeitern, die alle ein unternehmenseigenes Standard-Notebook mit einer Auflösung von 1024x768 verwendeten, konnten zwei ihre Anwendungen maximal nutzen. Der Rest hatte aus verschiedenen Gründen unterschiedlich große Fenster. Dies zeigt, dass 85 Prozent der Benutzer, wenn Sie das Intranet dieses Unternehmens mit einer Breite von 1024 Pixeln entwerfen, horizontal scrollen müssen, um die gesamte Seite zu sehen.
Denken Sie nach dem Konto für Kunden, die maximieren oder nicht, an die Browsergrenzen. Jeder Webbrowser verfügt über eine Bildlaufleiste und Ränder an den Seiten, die bei 800x600-Auflösungen den verfügbaren Platz von 800 auf etwa 740 Pixel oder weniger und bei maximierten Fenstern bei 1024x768-Auflösungen um 980 Pixel reduzieren. Dies wird als Browser "Chrome" bezeichnet und kann den für Ihr Seitendesign nutzbaren Platz wegnehmen.
Seiten mit fester oder flüssiger Breite
Die tatsächliche numerische Breite ist nicht das einzige, worüber Sie nachdenken müssen, wenn Sie die Breite Ihrer Website entwerfen. Sie müssen auch entscheiden, ob Sie eine feste Breite oder Flüssigkeitsbreite haben. Mit anderen Worten, werden Sie die Breite auf eine bestimmte Zahl (fest) oder auf einen Prozentsatz (Flüssigkeit) 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. Dies kann nützlich sein, wenn Ihr Design genau gleich aussehen soll, unabhängig davon, wie breit oder eng die Browser Ihrer Leser sind. Diese Methode berücksichtigt jedoch nicht Ihre Leser. Benutzer, deren Browser schmaler als Ihr Design ist, müssen horizontal scrollen, und Benutzer mit großen Browsern haben viel freien Platz auf dem Bildschirm.
Um Seiten mit fester Breite zu erstellen, verwenden Sie einfach bestimmte Pixelnummern für die Breite Ihrer Seitenteilungen.
Flüssigkeitsbreite
Seiten mit Flüssigkeitsbreite (manchmal als Seiten mit flexibler Breite bezeichnet) variieren je nach Breite des Browserfensters in der Breite. Auf diese Weise können Sie Seiten entwerfen, die mehr auf Ihre Kunden ausgerichtet sind. Das Problem bei Seiten mit Flüssigkeitsbreite ist, dass sie möglicherweise schwer lesbar sind. 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. Dies bedeutet, dass Leser mit großen oder kleinen Browserfenstern Probleme haben.
Verwenden Sie zum Erstellen von Seiten mit flexibler Breite einfach Prozentwerte oder Ems für die Breite Ihrer Seitenteilungen. Sie sollten sich auch mit der CSS-Eigenschaft max-width vertraut machen. Mit dieser Eigenschaft können Sie eine Breite in Prozent festlegen, sie dann jedoch so einschränken, dass sie nicht so groß wird, dass sie nicht gelesen werden kann.
Und der Gewinner ist: CSS Media Queries
Heutzutage ist es die beste Lösung, CSS-Medienabfragen und responsives Design zu verwenden, um eine Seite zu erstellen, die an die Breite des Browsers angepasst wird. Ein responsives Webdesign verwendet den gleichen Inhalt, um eine Webseite zu erstellen, die funktioniert, unabhängig davon, ob Sie sie in einer Breite von 5120 Pixel oder 320 Pixel anzeigen. Die unterschiedlich großen Seiten sehen unterschiedlich aus, enthalten aber den gleichen Inhalt. Bei der Medienabfrage in CSS3 antwortet jedes empfangende Gerät mit seiner Größe auf die Abfrage, und das Stylesheet wird an diese bestimmte Größe angepasst.
