06.12.2006
Klassischer Bogen in der Templaterie
TC-0014-Template-Serie im Shop || in der Galerie auf das Bild klicken
Dieser Bogen ist ein Klassiker im Webdesign. Man sieht ihn im Netz nur noch selten. Ich habe mir den Spaß gegönnt dieses alte Design in die Templaterie aufzunehmen. Einige Entwürfe waren bereits in der alten Templaterie. Sie sind also echte golden Oldies. Damals waren solche Entwürfe fette, verschachtelte Tabellenwerke. Die Templates arbeiten ohne Tabellen. Sie greifen zwar ein altes klassisches Motiv auf, doch bei der Technik arbeiten sie schlank und rank mit einem einfachen DIV-Gerüst. Und wären diese Templates nicht gleichzeitig mit dekorativen Elementen ausgestattet, könnte ich bei den meisten auch auf ein, zwei DIVs verzichten. Der Bogen verbraucht im Design zwischen 8 und 35 KB. Das ist bei heute üblichen ISDN-Verbindungen flott geladen. Da das große Bogenelement zudem als Deko-Element am Ende nachgericht wird, wäre es auch bei größeren Bögen nicht das Thema. Allerdings sind es Templates für Editland und da das Ei mit dem Text unter den Arkadenbogen wegskrollt, sind der Größe des Bogens auch hier grenzen gesetzt. Denn liegt ein Layer über dem Contenteditable, ist dieser nicht mehr zugänglich. Es macht nichts wenn ein Teil des Bereiches überdeckt ist, sofern ewin paar Buchstaben oben, unten oder links bzw. rechts hervorlugen. Das diese Designs sehr mit vorne und hinten spielen, war das bei der Arbeit gelgentlich etwas tricky und meine Gestaltungsvorstellungen mussten sich mehrfach den technischen Rahmenbedingungen unterwerfen.
Ausnahmsweise habe ich mich nicht der technischen Rahmenbedingung 800×600 unterworfen. Auch wenn die Seiten noch bedienbar sind, so sind die Entwürfe bei dieser Auflösung stark beeinträchtig. Angesichts der geringen Verbreitung und der Tatsache, dass es nur eine Beeinträchtigung nicht gleich unbenutzbarkeit darstellt, nehme ich das gerne in Kauf. Wird dieser Aspekt relevant, wird man auf die Deko-Elemente vor dem Text verzichten müssen. Dann müssten diese nach hinten auf die zweite von unten verlegt werden, so dass der Scrollbalken in keinem Fall ganz oder Teilweise verdeckt wird.
Es hat spaß gemacht. Und da ich aktuell viel Programmiertätigkeiten außer Haus geben musste, und damit viel arbeiten lasse, habe ich Zeit für noch mehr Templates. Es geht also direkt weiter. Mal sehen, welches meiner Entwürfe (aktuell liegen rund 50 unbearbeitet in den Ordnern) ich jetzt umsetze.
Nachteile eines Screenshots
Im Augenblick bin ich mehr in Stimmung in HTML und CSS umzusetzen, statt weitere Photoshopentwürfe anzulegen.
vor einiger Zeit zeigte ich jemanden meine neuste Arbeit. Die spontane Reaktion auf Lotti’s Süssware’z (Deppenapostrophen sind gewollt!) zu dem Zeitpunkt noch “Claras Bonboniere” war Manna für meine Seele und ich toppte sofort mit der aktuell noch life gestellten Demo, die ich zu Testzwecken bis zum nächsten Design life habe. Mein Gesprächspartner hat durchaus Ahnung von Webdesign und das schnuckelige Dingens machte life noch mehr Eindruck als es der Screenshot tat.
Nun hadere ich etwas mit mir. Webdesign ist openSource und viele verwechseln openSource mit Freibier. Ich hätte nicht einmal so wahnsinnig viel dagegen es life und öffentlich zu machen statt nur life und semiprivat, wenn ein reger Geldfluß mir allen Luxus, den ich mir Wünsche bescherte. Solange aber dies nicht da ist, habe ich akute Anfälle von “Erst Geld, dann Service!”
Bis ich in Stimmung bin mehr öffenltich zu machen, muss der zweite Screenshot in Flickr zum 15% verkleinerten Screenshot in der Galerie des Templates TC-0014 B im Shop genügen, der zeigt, wie der Text unter dem Bogen verschwindet. Und ja. Tabellen sind bei dem Template nicht verwendet.
Das HTML-Template sieht im Kern wie folgt aus:
<div id="tew">
<div id="tec">
<div id="tectop">
<p class="gap"> </p>
###---CONTENT6---###
</div>
<div id="tecmid">
###---CONTENT1---###
</div>
<div id="tecbom">
###---STATICCONTENT2---###
<p class="gap"> </p>
</div>
<br />
</div>
</div>
###---LISTMENU---###
<div id="teh">
<div id="logo">###---STATICCONTENT---###</div>
###---CONTENT11---###
</div>
<div id="ted1"> </div>
<div id="ted2"> </div>
<div id="ted3"><span> </span></div>
<div id="ted4"> </div>
Der Grafik-Ordner des Templates ist dabei gerade Mal runde 26KB schwer.
Und weil ich es kürzlich irgendwo las, die DIVs um die Platzhalter haben wenig damit zu tun, dass ich früher einmal Tabellen für Designaufgaben verwendete. Mitarbeiter und Geschäftsführer in Klein- und mitellständischen Unternehmen, die nicht im Webdesign oder sonst in einem designnahen Bereich tätig sind, haben keinen Nerv Absätzen Formatklassen zuzuweisen, oder Leerschritte mit em-Tags zu schreiben, um Runde Ecken eines Rahmens zu gestalten. Da müssen diese Formate vordefiniert sein und Text darf nur wenig zusätzliche Handgriffe erfordern. Eine Überschrift zuzuweisen, ist in der Regel ein Schulungsthema, dem besondere Beachtung geschenkt werden muss … das nur am Rande.
Webdesigner können ja nun darüber nachdenken, wie die Site-Grafiken zugeschnippelt sind und welche Elemente welchen DIVs zugewiesen sind. 
PS: So sah übrigens der ursprüngliche Entwurf von 2001 in der alten Templaterie, als alle Templates noch Eigennamen hatten und sämtliche Templates im Namensbuch gelistet waren 
:
Beitrag (eigentlich Beiträge) erschien bereits in “Silkester erzählt”
Filed under: Design
No Comments