Fluid, Feste und Elastic Web Design, erklärt

Bei der Verwendung von CSS, um eine Website gibt es drei primäre Layout-Typen zur Verfügung Webdesigner. Dieses Tutorial soll Ihnen die Informationen die Sie wissen müssen, um dazu beitragen, dass eine informierte Entscheidung bei der Wahl, wie Sie Ihre Website-Projekte Design Arm.

Die Optionen

Die drei primären Layouts für die Bestimmung der Breite von Websites -. Fluid, Feste und Elastic Alle haben ihre eigenen Vorzüge. Es gibt auch Nachteile, diese Design-Patterns, so ist es wichtig, die beste Situation, in der jede Art von Layout verwenden wissen.

Fluid-Layouts

Auch als ein flüssiges Layout genannt, ist die Attraktion dieser Art von Layout die volle Nutzung der Bildschirm Immobilien, so dass Sie eine Menge von Inhalten auf Ihrer Webseite bekommen können. Die Flüssigkeit Layout ermöglicht es Designern, nicht angeben, ein Wrapper Breite. Anstatt den Inhalt Ihrer Website wird von der Betrachtung Breite der Browser des Benutzers ermittelt, was bedeutet, dass Sie sich keine Gedanken über minimale und maximale Dimensionierung der Informationen zu sorgen. Websites, die eine Flüssigkeit Layout verwenden sind Amazon und Play .

Die Flüssigkeit Layout kann zu Problemen mit Browsern wie IE, der nicht Eigenschaften, die Sie verwenden möchten, um maximalen Breiten von Inhalten festlegen kann. Dies verbunden mit der Tatsache, dass das Ausfüllen Web-Seiten mit Inhalt kann aus Usability-Sicht schlechte oft stellt den Menschen vor Verabschiedung der Layout-Format.

Festes Layout

Wie der Name andeutet feste Layouts stoppen Sie den Browser aus mit der Freiheit zu-Text-Format, wie es für richtig hält, dies ist eine der beliebtesten Techniken, die auf das Web, mit Websites wie Facebook und die BBC die Anwendung des Design. Das bedeutet im Wesentlichen, dass die Breite Ihrer Inhalte enthalten ist und bleibt fest, egal was, dies in der Regel erfolgt über einen sogenannten Wrapper, oder Container, die alle Inhalte in sich birgt. Die feste Breite Design kann nach links, Mitte oder rechts von der eine Seite gesetzt werden, sehr leicht.

Der eigentliche Gewinn bei der Arbeit mit einer festen Breite-Design ist, dass man Bilder und Design rund um die Betrachtung gesetzt, dass Ihre Breite wird immer die gleiche sein. Dies ist eine echte positive, wenn Sie ein Banner Bild, zum Beispiel, die sich als 900px Bedürfnisse wollen, werden Sie nicht zu Problemen bei der Größenänderung, Fragen, die Sie mit einem Fluid Design begegnen würde.

Der Nachteil einer festen Konstruktion ist jedoch der Totraum, dass Sie mit dem Ihr Design nicht füllen Sie die Seite verlassen werden. Eine feste Breite Design kann auch dazu zwingen, Designern, Prioritäten zu setzen. Wie eine Website wächst und Inhalt konkurriert Top-Platzierung, muss sie noch innerhalb einer bestimmten Breite passen.

Elastic-Layout

Das endgültige Design Stil ist so elastisch bekannt. Oft mit Flüssigkeit Layouts verwirrt, ermöglichen elastischen Layouts einer Website proportional auf den Bildschirm auf betrachtet wird. Dies kann erreicht werden entweder mit ems oder% betragen. Wenn ein Benutzer die Textgröße ihren Web-Browser erweitert den Rest der Web-Seite wird auch erweitern, da die Messungen an Variablen im Gegensatz zu Größen gesetzt beruhen. Hotmail hat vor kurzem ihre Website entwickelt zu einem elastischen Design zu verwenden. Wenn man sich die Schriftgrößen betrachten, werden Sie bemerken, dass sie in Prozentzahlen sind so eingestellt, das die meisten User Setup zu machen.

Von den drei Design-Stile ist dies die am wenigsten beliebt, weil es die am wenigsten positiv auf der Erfahrung des Anwenders ist. Seine variable Natur kann es problematisch für einen Benutzer zu erleben. In Kombination mit einem Mangel an Unterstützung des Browsers auf Plattformen wie IE6, macht dies das Design unbeliebt Designer, die zu meiden den Browser Kompatibilitätsprobleme wollen.

Roundup

Es gibt Stärken und Schwächen, alle Design-Muster, die ich erwähnt habe. Durch Abwägen der Vor-und Nachteile können Sie eine fundierte Entscheidung vor Antritt Ihrer nächsten Web-Projekt zu machen. Sie kennen die Probleme und Lösungen zu Problemen, bevor sie auftreten.