Webentwurf — unten am Fluss

tempa wrote this 06:20:
Hans Thoma (1839-1924), Im SonnenscheinHans Thoma
(1839-1924)
Im Sonnenschein

Vor drei Tagen publizierte ich einen Bericht in Silkester erzählt über die Wonnen und Risiken einer Webdesignerin mit gemeinfreien Werken aus dem Netz und dort einige Beispiele für Webdesigns mit Elementen aus Werken alter Meister vorgestellt. Die Beispiele, verwenden ein immer gleiches Grundmuster. Mit dem Entwurf an dieser Stelle verlasse ich dieses Grundmuster und ich verzichte auch auf erkennbare Elemente, die den Entwurf mit dem Werk Hans Thoma in Verbindung bringen. Dieser Entwurf wird voraussichtlich in Kürze in die Templaterie wandern.

Der Template-Entwurf „Unten am Fluß“ verwendet damit die besten Pixel, die im Netz zu haben sind. 😉

Webentwurf Unten am Fluß

Zur geplanten technischen Umsetzung: Der Hintergrund in diesem Entwurf ist so konzipiert, dass er sich dem Viewport anpasst: Fluß, Wäldchen und das hochwachsende Kraut im Vordergrund atmen. Der Hintergrund setzt sich aus drei Grafiken zusammen, dem Wasser (Hintergrundkachel im Body), gegenüberliegendes Flußufer in einem Header-Div oben und das Gemüse in einem Footer, wobei diese Divs ohne Inhalt sein werden und nachträglich dem Blatt untergeschoben werden. Wie so etwas funktioniert kann man in meiner Spielwiese nachschauen: Fixed Position im IE. Sowohl das Flußufer als auch das das Gemüse sind Endloskacheln, so dass auch im 3000 Fenster noch links und rechts die Landschaft zu sehen ist. Insgesamt bringt dieser Hintergrund auf stolze 50KB, die würde man den Hintergrund in eine einzige JPG-Kachel stecken vermutlich auf zwei Drittel oder die Hälfte reduzieren, doch nicht, wenn man die Proportionen im Verhältnis zum Fenster gestalten will, dann muss der Fluß und die Wiese oder Der Fluß und der Himmel oder die Wiese und der Himmel sich anpassen. Man könnte auch noch das Gestrüpp im Vordergrund mit hineinnehmen, doch die noch Höher zu machen fräße zu viele Ressourcen. Ich habe mich für Himmel und Fluß mit variabler Höhe entschieden und die Hintergrund-Elemente entsprechen angelegt. Wenn ich noch einmal 10KB drauf lege könnte ich auch Fluß, Wiese und Himmel zu ein ander in den Proportionen variable gestalten, doch das wäre ein Overkill in meinen Augen. Der Textteil in der Mitte wird mit voraussichtlich mit festen Breite da herkommen, doch hier ist das letzte Wort noch nicht gedacht. Das entscheide ich dann wenn es ich die Site umsetze.

3 Responses to “Webentwurf — unten am Fluss”

  1. creisi Says:

    Da hast Du Dir ja was vorgenommen… Ich bin gespannt auf die Umsetzung, die bestimmt nicht ganz ohne Tücken sein wird. Von wegen feste Breite für den Textteil: Warum nicht max-width? Ja, ich weiss, der IE >7 kann das nicht ohne (Javascript)-Workarounds, aber trotzdem…

  2. Silke Schümann Says:

    Feste Breite ist einfacher:

    
    #content {
      width: 740px;
      position: absolute;
      left: 50%;
      margin-left: 370px;
      background: url(images/bg-content.png) top center repeat-y transparent;
    }

    Wohingegen ich bei einer Variablen Breite den PNG-Schatten separat behandeln muss und auch sicherstellen dass dieser die gesamte Höhe einnimmt.
    Zwar kann ich auch hier Rahmendarstellung und Text trennen und einfach per fixiertem DIV den Hintergrund gestalten und muss dann nur zwei DIVs einen für den Grauwert und einen für den Schatten floaten.

    Mal sehen. Vielleicht mache ich auch ein Max-width.
    Es gibt überigens auch für max-width im

  3. Templaterie Blog Says:

    […] bei dem weder die Inhalte noch der spätere Zweck, Anwendertyp feststeht. Aber selbst bei einem Template, das sich dem Viewport proportional anpasst gibt es eine Komponente mit einer festen Pixelbreite: die Bildillustration. Will man nicht jedes […]

Leave a Reply