Typischer Mesh-Fehler (Bootstrap-Grid) oder warum sich Designer und Layout-Designer nicht verstehen

Haben Sie eine Situation erlebt, in der der Text und die Blöcke, die aus irgendeinem Grund stur in ein Photoshop-Layout passen, nicht im Layout gehorchen wollen - nicht in die durch das Layout angegebene Breite passen? In diesem Fall verwenden sowohl der Designer als auch der Layout-Designer dasselbe Raster, z. B. das Raster von Bootstrap 3.

Nachdem eine beträchtliche Anzahl von Websites überprüft wurde, kamen sie zu dem Schluss, dass es unter den Designern und Layout-Designern einen banalen Fehler gab.

Das Bootstrap-Gitter erstellt als allgemeines Beispiel für ein Gitter ein 12-Spalten-Schema, das auf Bildschirmen mit einer Breite von 1200 Pixel und mehr die Dimensionen zwischen den Spalten 30 Pixel und den seitlichen Einrückungsinhalt 15 Pixel links und rechts hat. Da die Breite der Spalten vom Designer in Pixel und vom Layout-Designer festgelegt wird - in Prozent, ist der unten beschriebene Fehler nicht sofort erkennbar.

Wie arbeitet der Designer mit dem Raster? Normalerweise wird dieses Raster von einem Dienst generiert, in Photoshop heruntergeladen und installiert. Wie arbeitet ein Webdesigner mit einem Mesh? Das Raster wird aus dem Bootstrap 3-Framework entnommen.

Was ist dann das Problem, wenn die Rastergrößen (Spalten und Abstände) gleich sind?

Der Kern des Problems liegt in der bequemen CSS-Eigenschaft "Box-Sizing" mit dem Wert "border-box", die standardmäßig im Bootstrap festgelegt ist. Aus diesem Grund berücksichtigt der Designer die Breite der Vertiefung zusätzlich zu der Breite des Inhalts (1170px plus Seitenränder von 15px rechts und links), und der Layoutdesigner schließt sie ohne Kenntnis in die Breite des Inhalts ein (1170px, einschließlich Seitenrändern von 15px, d. H. Inhaltsbreite ist 1140px). Es stellt sich also heraus, dass in den verschiedenen Phasen des Projekts zwei verschiedene Raster verwendet werden, deren Anordnung enger ist.

Dieser Fehler tritt auf, wenn andere Raster als Bootstrap verwendet werden. Anscheinend ist es mit dem Aufkommen der "Border-Box" entstanden.

Die Lösung ist einfach - passen Sie die Größe des Containers an: "container {width: 1200px;}" (1170px - Inhalt plus 15px Einrückungen rechts und links). Es ist auch notwendig, eine geeignete Anpassung des Behälters um die Anzahl der seitlichen Einkerbungen für die Bildschirme anderer Auflösungen vorzunehmen.

Es scheint mir nicht sinnvoll zu streiten, wer für die Korrektur des Fehlers verantwortlich ist. Es ist ein guter Ton für den Designer, diese Frage mit dem Layout-Designer zu klären, und für den Layout-Designer, diese besondere Verwendung der "Rahmenbox" für das Raster zu berücksichtigen. Das Korrigieren eines Fehlers in einem gemeinsamen Rahmen erhöht auch die Anzahl der Websites, die dem Design genau entsprechen.

Jetzt auch beliebt: