Templaterie Blog

Auf alvit.de/showcases gibt viele viele Anregungen. Gesammelt wurden Beispiele von den Meistern ihrer Klasse. Ich stolperte über die Rubrik Navigation auf die Seite. Bei einigen der Beispiele wird man angesichts der Technik jedoch auf sein alternatiove Quellen oder das eigene Knowhow zurückgreifen müssen. Mein erster neugieriger Blick endete in einem 404. Nichtsdestotrotz ist das einen Tipp wert:

CSS-Showcases: Navigation

Filed under: Design
No Comments

Initially, I was hell-bent on making a perma-wide site, like Bearskin Rug or ALA, my naive brain thinking that as most of my users were viewing with at least a 1024 x 768 resolution, a fat site would be fine, until Jeremy pointed out that I was probably confusing screen resolution with window width. He was right of course. So what if the resolution is 1024 x 768 – that’s crap if most visitors have the browser at say 900px wide, ensuring they have a bit of desktop available as they browse. D’oh!

Zitiert aus Redesign Notes 1: Width-based layout von Simon Collison.

Beitrag zur optimalen Ausnutzung des Fensterplatzes unter Berücksichtigung der Veränderbarkeit in Bezug auf die Fenstergröße. Per Javascript wird die Größe in Echtzeit ermittelt und das Design entsprechend den veränderten Bedingungen angepasst. Das werde ich unbedingt ausprobieren.

Via Cameron Molls Beitrag “Should all Sites be fluid?”

Filed under: Design
No Comments

Auf der Suche nach Lösungswegen, wie man iditionsicher und supereasy einen verblockten Absatz für eine Überschrift in ein CMS integrieren kann, so dass der spätere Anwender sich nicht um Grafikprogramme oder Letterspacing sorgen machen muss, stieß ich auf viele gute Seiten … leider noch nicht auf die Lösung für etwas, das jede halbpopelige Textverarbeitung kann: eine mehrzeilige Überschrift optisch verblocken. Linktipps werden gerne entgegengenommen.

Genug geblubbert. Die Linktipps zum Thema Typografie:

Das beste zuerst — Schrifteinstellungen optimieren mit  korhoens Typeviewer

Ich habe identische Eingaben in allen drei Fenstern und diese dann auf meinem Desktop neben einander gestellt. Schön auch zu sehen, wie font-weight die Darstellung beeinflusst. Was mir am besten gefiel:

1. text {
2. font-size: .9em;
3. font-family: Trebuchet MS;
4. font-weight: normal;
5. font-style: normal;
6. font-variant: normal;
7. text-transform: none;
8. text-align: left;
9. line-height: 1.5em;
10. word-spacing: .25em;
11. letter-spacing: .15em;
12. }

Und sonst:

• Fontscrape (Freefont für Windows PC)
• Fontleech (best freefonts)
• Pixelfonts (wenns besonders futzelig gebraucht wird)
• Glashaus (absolut wunderschön gestaltete Flash-Website)
• Isaries Flashfont-Librarie (sIFR)
• Übersicht der aktuellen Methode für Typo im Web
• Mezzoblue gleich mit zwei Seiten:
  1. Image Replacement. Again.
  3. Revised Image Replacement
• Übersicht: Image-Replacement-Techniken (Gleiches Thema auf deutsch.)
• Schriften unter der Lupe
• Bulletproof graphic Linkbuttons

*Seufz* Lauter Links, die nicht wirklich mit dem Problem aus dem 1. Absatz in Bezug stehen.

Ich muss an dieser Stelle erst einmal abbrechen. Selbst die Beschäftigung mit der PHP-Funktion imagettftext() oder den Möglichkeiten und Unwegbarkeiten von Javascript (letter-spacing und font-size mit Javascript-Schiebereglern so bearbeiten, dass ein Block entsteht, der wie in der Grafik oben eine grafisch ansprechende Überschrift ergibt, die dann per Inlinestyle vom CMS in den <h [1-6]>-, bzw. in <span>-Tags übernommen werden können.

Ein weiterer Linktipp nicht nur typo-bezogen: Code-Schnipsel für Webdesigner (eine wahrhaft beeindruckende Sammlung nützlicher Dinge.)

Ornament-Bildquelle: Gutenberg.org Hans Christian Andersens Märchen

Filed under: Design
No Comments

Wenn man es erst einmal anfängt … weil ist ja Winter, nicht war. Dachte ich mache rasch einen Header für den Winter. Teste den Headerwechel im WP-Theme dKret3 und so. Und weil ich doch da ganz Privatmensch bin … ok so ganz wohl nie .. egal, wo ich dabei war, da wurdens dann doch sechs WP-Theme-Headerbilder für das dKret3, die soweit erwähnt wer für die Kreation verantwortlich (Fotografen und mich als Pixelschubserin, fair ist fair, Ich nahm dafür ein Textwidget für die Sidebar, kann aber auch im Impressum sein.), kann die Header auch gerne nutzen:

Und das mit dem Original wäre das für jeden Tag eins. Aber täglich wechseln — nö nö das tu ich nicht.<

(Das Original von Joern Kretschmer geliefert.)

Die Header kacheln zwar, sind aber nicht für’s Kacheln gemacht. Das Motiv ist so ca. auf die Länge meines Schriftzug abgestimmt. Wer einen oder alle Header für sein Weblog testen oder nutzen will, findet diese in meinem privaten Weblog auf PG4ME (die Thumbs sind mit den jeweiligen Headern verlinkt.)

Es tut gut für privat was zu machen. Man darf all die “Nein, Nein, das darfst Du kommerziell nicht verwenden!” ignorieren.

Verbesserungsvorschlag für Programmierer zum WP-Theme dKret3 von Joern Kretschmer. Vielleicht bei gelegenheit noch den Navigationshintergrund widgetizen und den Header in Kachel und Motiv unterteilen und beides widgetizen. Nur um ein ohnehin schon gutes Theme zu verbessern und man gerade nichts besseres zu tun hat.

Filed under: Design
2 Comments

Immer wieder entdeckt man im Netz Arbeiten alter Meister, die mit einem Copyright-Vermerk eines unbekannten Webdesigners versehen wurden. In vielen dieser Designs steckt die Hand eines Meisters: William Morris. Die Arbeiten von William Morris sind heute public domain. Wer also seine Website mit eine Acanthus-Blatt oder anderen Jugendstil-Motiven verzieren möchte, der muss im Netz nur nach William Morris suchen und schon hat er eine riesen Auswahl. So manche Sammlung vergißt zu erwähnen, woher die mit Filtern des Bildbearbeitungsprogrammes bearbeiteten Arbeiten stammen.

In diesen Fällen kann man getrost die Warnungen des Site-Betreibers in den Wind schießen. Wenn hier nicht mehr creative Leistung als ein Farbfilter angewendet wurde, wird aus Public Domain nicht copyright Dödi von den Oberschlaumeiern. Um sich Arger zu ersparen, erwähnt und verlinkt man diese Pappenheimer besser nicht. Generell dürfte es angebracht sein, sich nach Quellen umzusehen, die man auch benennen kann, z.B. die Wikipedia oder ein paar Beispiele, die ein Museum freundlicher Weise zur Verfügung gestellt hat:

• Marxist.org: Works of William Morris
• Wikipedia: William Morris
• Victoriana.com
• Cranbrook-Art
• achome.co.uk Morris

In den Arbeiten von William Morris steckt viel Können und viel Schweiß,
das mindeste das wir tun können ist dies durch eine ehrliche Nennung anzuerkennen.

Dies gilt auch für die vielen anderen Musterdesignern des 19. und 20. Jahrhunderts, deren Arbeiten sich in der Public Domain befinden.

Ich spreche postum den Künstlern meinen Dank aus.

Bildquelle: Image:Morris Windrush textile design 1881-83.jpg

Filed under: Design
No Comments

Da schau an, mit den entsprechenden Suchbegriffen fischt man ruckszuck aus Google auch schon einmal eine Seite, auf die man nur über eine Zwischenseite gelangt, die den Nutzer vor dem Aufruf vor Gefahr für den Computer warnt.

Link zum Warnseitehinweis von google

Nähere Informationen, wer sich warum und wieso eine solche Zwischenseite einfängt gibt es auf stopBadware.org. Das finde ich ausgesprochen angenehm, dass man nun nicht mehr unbedingt auf diesen Seiten landet. Wobei es vermutlich wieder ein ewiger Kampf sein wird und man dennoch nicht sich seiner Klicks sicher sein darf.

Mein erster Gedanke war: “Böser Webmaster!” Doch besann ich mich dann doch eines Besseren. Zumindest in einem Fall weiß, ich dass ich bei einem der zahlreichen Netzjokes/~quizz Hotlinking im Weblog hatte. So mancher wird sich an die eine oder andere Counter-Affaire erinnern, bei der im Quelltext per Script unerfreuliches auftauchte. Es genügt ein Banner, ein Counter, zwielichtes Affiliate, sorgloses Videostreaming und schon hat man sich ehe man es sich versieht etwas eingefangen, ohne dies zu beabsichtigen.

Apropos Videostreaming: der Flashplayer von Adobe muss wegen einer Sicherheitslücke derzeit upgedated werden. Wer das noch nicht gemacht hat, sollte es bald möglichst nachholen.

Filed under: Kaffeetscherl
No Comments

Es weihnachtet und eine Website bekommt ein neues Kleid. Nein kein vorweihnachtliches, ein alltägliches und eigentlich ist es auch nicht so neu. Es wurde wieder etwas geändert. Dieses Mal das Farbschema. Dies ist nun der dritte sanfte Wechsel, den das Template TC-0045a aus der Templaterie vollzieht. Fangen wir mit der jüngsten Ansicht an und bewegen uns zwei weitere Schritte zurück:

Wolf Terrarien unter neuem Management
(Ein Chamäleon hätte seine Freude an der Site.)

Davor:

Wolf Terrarien, noch unter Werner Wolfs Regie,
lässt das Template angleichen an die Site der Reptilienbörse Ulm

Uns so fing es an.

Mit diesem Template und Editland wanderte die Site von
Herrn Wolf in Google wieder auf den Top-Platz.

Es sind jeweils nur kleine Anderungen, die den Ursprung erkennen lassen und doch ändert sich der Charakter der Site durch den Farbwechsel deutlich. Weil es ein Template in einem CMS mit einem Template-System sind diese Anderungen innerhalb von 1-2 Stunden erledigt. Als eines der ersten Templates in der Templaterie ist das CSS noch nicht so intelligent aufgebaut. Spätere Generationen in der Templaterie, sind hier noch einfacher zu handhaben und schneller geändert.

Filed under: Design
No Comments

Ich habe die Erläuterung zu meinem HTML-Template-System noch einmal überarbeitet. Ein System, dass sich hoffentlich in einem Jahr oder zwei erledigt hat, so dass man mit der CSS-Anweisung position: fixed; arbeiten kann. Es fehlte ein wichtiger Hinweis zu, unteren Rand des Viewports.

Und bei der Gelegenheit habe ich auch noch einmal das Template überarbeitet. Warum mir das Templatesystem so gut gefällt, ist an dem Beispiel schön zu sehen:

Der Screenshot zeigt wie beim Skrollen der Text unter dem Header verschwindet. Wer das Fenster noch weiter verkleinert, z.B. eine Fensterbreite von 800 Pixel verwendet, der entdeckt, dass das Logo in den Wipfeln der Palme ruht.

Wer hier erst einmal den Dreh raus hat, kann die Dekor-Elemente vollkommen frei im Fenster verteilen und die Dekor-Elemente auch in Bezug zu anderen Elementen setzen. Zugegeben, in diesem Fall war ich was das in Bezug setzen betrifft nicht sehr penibel, denn wer die Schrift in Browsern wie den Firefox um zwei Schritte Vergrößert, der sieht das Ende der Hauptnavigation hinter der Palme hervorblitzen und dies wird mit jedem weiteren Schritt gravierender.

Andereseits, wird es nicht viele Nutzer geben, die mehr als zwei Schritte verwenden. Und die Seite wurde als privat deklariert. Das heißt, dass ich hier und da schon einmal auf den Nutzer preife, wenn dieser mit einem Browser bzw. Browsereinstellungen ankommt, die sich mit dem Design der Site nicht vertragen. Einmal vom Mac-Safari und dem Giftgrün abgesehen, liegt dieser Prozentsatz unter Null. Damit kann ich leben.

Filed under: Design, Webtechniken
2 Comments

Damit man eine Seite ansehen kann, muss eine Seite auf den lokalen Rechner geladen werden. Ist die Seite auf dem lokalen Rechner, ist die Seite auch im Cache des Browsers. Ist die Seite im Cache des Browser kann der Quelltext auch betrachtet werden.

Stimmt das?
Warum dann kann man bei der Seite ipselorum.html (abgelegt auf der neuen Spielwiese) keine Anweisung für Absätze finden, sind doch dort klar und eineindeutig zwei Absätze des bekannten ipse lorum publiziert. Schaut man mit dem rechtsklick nach dem Quelltext wird man bitter enttäuscht. Wenn überhaupt etwas angezeigt wird, dann nur seltsamer Zeichensalat, als sei die Datei verschlüsselt.

Apache-Kenner ahnen den Trick. Ich habe zwei, drei Minuten gebraucht, bis ich dahinter kam, wie der Trick in Beispiel 6 zusandekommt, der in dem Satirebeitrag Quelltext schützen genannt ist. Neckischer Trick.

Die Lösung sollte mit ein wenig nachdenken und jenem Linktipp schnell allen klar werden: TU HH: Zugriffssteuerung mittels der Datei .htaccess

Filed under: Kaffeetscherl
2 Comments

Oh Menno!

So giftgrün sieht das lediglich im kleine Ausschnitt nett aus.
Komplett betrachtet ist das PNG dann in diesem Ton ein wenig zu viel Chemie im Apfel … öh Appel. Ich kann also nun eine Hack für den Safari Mac OS suchen und das PNG gegen ein GIF austauschen. Oder ich ignoriere die Safari-Mac-Nutzer und vergesse so gut es geht, dass diese Nutzergruppe mit einem sehr gruseligen Giftgrün in der Site gequält werden. Huhuuuuuuh.

Der Screenshot stammt übrigens von der frisch auferstandenen Spielwiese. Dort ist auch schön kurz und knapp meine neue Template-Technik vorgestellt, die ich bei einigen meiner neuen Templaterie-Webtemplates eingesetzt habe. Es ist der erste echte Beitrag in der noch sehr junge Website. Gestern um 5.00 erblickte die Url pg4me.de das Licht des WWW und ist der offizielle Nachfolger meiner tempus creativ spielwiese.

Filed under: Design
No Comments