Templaterie Blog

Es war einmal ein cranky old IE6, der mit dem System kam und kurz nach dem ersten Start von Arcor umgebaut wurde. Es dauerte nicht lange, da zickte auch schon dieser Browser. Nicht immer, wenn es hieß getestet mit dem MSIE6, wollte mein IE6 da mitmachen. Nicht schlimm, denn mein MSIE6 ist nur zum Testen im Gebrauch und da stört es nicht wenn jQuery nicht funktioniert. Auch schadet es nicht, sich nach Skripten umzusehen, die diese Zicke von Browser akzeptiert.

Doch eigentlich wollte ich schon, dass auch mein MSIE6 kann was andere MSie6er können. Heute habe ich mich nach einem MSIE6-Standalone umgesehen und von evolt.org gezogen. Und siehe da, jQuery tut. Sollte nun ein Kunde Probleme haben, wo diese Standalone keine hat, so kann ich ihm immer anbieten, ihm einen reparierten MSie6 zuzusenden. Insbesondere einen Programmierer wird das vermutlich freuen. Bietet dies doch die Aussicht weniger Extrarunden in der Programmierung zu fahren und auf darauf auf viele fertige Skripte zurückgreifen zu können.

Filed under: Programmierung, Tools
No Comments

Nach Stunden um Stunden um Stunden um Stunden habe ich ein neues Template fertig. Nur eine klitze kleine Kleinigkeit fehlt noch: Weil dieses Template unter CC by 2.0 gestellt werden soll, liefere ich kein PHP-Mailformular mit und damit beim Klick auf das Layoutbeispiel für das Formular etwas geschieht, habe ich im Netz eine Alert-Box gesucht, die ich dem Design anpassen kann und gefunden, d.h. ich musste sie gar nicht anpassen, weil sie so witzig ist und als Alert-Box sich vom Rest ruhig abheben darf: QMessageBox auf quazzle.com scheint wie für mich geschaffen, wäre da nicht die kleine Angelegenheit mit den konkurrierenden Styleanweisungen. Das Dumme nun, der Programmierer hat die Styleanweisung im Javascript untergepracht und meine sind im Stylesheet. Ich bin kein Held in Bezug auf Javascript und das Javascript ist für meine Fahigkeiten um einiges zu kompliziert, um die Styleanweisungen aus dem Javascript zu ziehen, so dass ich wieder die Kontrolle habe.

Der durch das Script erzeugt Quelltext ist auch viel komplizierter, als nötig. So viele verschachtelte Tabellen … uphhhf

Es ist sooooooo frustrierend.

Ich werde mir ein schlichteres customizable Alert suchen müssen. Es gibt ja reichlich davon im Netz. *seufz*

Nachtrag … nach einem herzlichen “verflixt und zugenäht” und nachdem ich radikal alle Styleangaben aus Javascript entfernte und auch die Bedeutung der Variable ‘ec’ begriffen hatte, war es nicht mehr schwer. Ich bin wieder happy. Nun nur noch den Styleguide und nützliche Hinweise zum Template schreiben und alles in zwei Sprachen deutsch und englisch und dann geht’s an die Publikation an geeigneten Stellen. Yuppiiiieh.

Kann sich nur noch um … handeln.

Filed under: Design, Programmierung
No Comments

Für den letzten Beitrag benötigte ich eine geignete Darstellungsform, an der ich in meinen intensiven Surf- und Recherchetouren der letzten Tage zufällig vorbeikam. Maxdesign Definition lists – misused or misunderstood?, der die Methode widerum auf Pomage “Les listes de définitions : mal utilisées ou mal comprises ?” fand und den Artikel übersetzte. Die Methode entsprach nicht ganz meinen Bedürfnissen. Dadurch dass dem Bild die Maße zugewiesen werden, wäre ich darauf angewiesen gewesen, das Bild entsprechend den Maßen zuzuschneiden oder zu verkleinern. Beim Bloggen habe ich aber des öfteren das Bedürfnis einfach nur schnell zu publizieren (weswegen der Rohling als Codeschnipsel auch in meinen Quicktags ist.) und will mich nicht lange mit Bildzuschnitten aufhalten. Wenn das Bild ca von den Maßen passt, soll das genügen. Insbesondere im letzten Thema, wäre eine Verkleinerung den Bildes noch einmal eine Verfälschung von Originalbild zu den komprimierten Bildern gewesen. In diesem Besonderen Fall, war die Verkleinerung sowohl im Bildbearbeitungsprogramm sowie über die CSS-Eigenschaften denkbar ungeeignet. Ich führte also ein Span ein, dass ich über die Eigenschaft display: block; und der Eigenschaft overflow: hidden; zum Passpartout des Bildes gestaltete und das die Maße vorgibt.

Hier Bilder aus der KategorieFrüchte und Gemüse D – M auf imagefreedom.org ( Food D – M)

Kiwano Melon

175 x 160 Pixels

Limone

300 x 265 Pixels

Feigen

247 x 164 Pixels

Und so wirds gemacht: (more…)

Filed under: Webtechniken
1 Comment

Ist das noch ein Thema … einmal davon abgesehen, dass noch immer nicht jede Bildgröße bzw. Bildvolumen im Netz Sinn macht. Auch wenn ich mit einer DSL6000, die schon relativ weit verreitet ist, ein 2MB Bild in kürzester Zeit auf meiner Platte habe, ist das kein Grund 2MB-Bilder für Illustrationen einer Website zu nehmen. Meine Goldene Regel lautet alles um die 30KB ist erlaubt und in absolute Ausnahmen auch mal 40 bis 60 KB. Damit nicht eingeschlossen sind Ansichten von Screenshots oder Fotos, die separat angesteuert werden und die man in bester Qualtität und guter Auflösung sehen will, diese kommen fast alle über 100KB oft bis zu 300KB.

Eben bat mich eine Kundin ein Bild unter 12KB zu komprimieren und ich stellt fest, dass mein Photoshop 7 das selbst bei einem kleinen Briefmarkenbildchen von 65×90 Pixel nicht schafft. Ich habe daher meinen martelalten Webrazor Smartsaver nach langer Zeit wieder angeworfen.

Kiwano Melon

PNG ca. 35KB

Es scheint, ich könnte meine Arbeiten durch die Bank noch optimieren. Stellt sich nur die Frage, ob Aufwand zu Ergebnis angesichts von DSL und SuperDSL wirklich Sinn machen. Meine Seiten sind so oder so nichts für Handysurfer. Wer eine Mail mit seinem Handy abholt und anschließend nicht abwarten kann, die Site anzusurfen, hat quälende Ladezeiten nicht anders verdient. Ich bin hier für die Langsamkeit des Seins.

Zum Spaß hier noch der Vergleich. Basis ist ein Bild aus dem Public Domain (imagefreedom.org).

Photoshop 7 Komprimierungen

Beispiele wurden nicht via speichern für’s Web abgespeichert. In Photoshop ist das die Option der Wahl, will man Bilder im Web publizieren. *räusper*

Qualität: 0

JPG 21,5KB

Qualtität: 5

JPG 25,7KB

Qualität 12

JPG 52,8KB

Webrazor JPG-Smartsaver

Qualtität: 20%

JPG 3,1KB

Qualtität: 60%

JPG 5,6KB

Qualtität: 100%

JPG 24,8KB

Erstaunlich wie groß die Unterschiede sind. Ich vermute, Photoshop schreibt in die Datei halbe Romane, dass diese Unterschiede zustandekommen, den in Bezug auf die Bildqualität, einmal von der Dateigröße abgesehen, geben sich die Bilder zu mindest bei diesem relativ unkritischen Motiv nicht viel. Hinweise zu den Gründen und Verfahren (Links) werden gerne entgegen genommen.

Ich hätte mich wohl auch mit der Option Save for Web näher beschäftigen sollen. Die Kompressionsraten sind in diesem Modus deutlich höher als in diesem Vergleich der Vergleich hinkt damit gealtig. Autsch. Ich denke wohl anders als die Entwickler von Adobe. Für mich ist speichern speichern, ob für Web oder Druck bestimme ich in den Optionen zum Bild. HIer noch einmal einen Unterschied zu machen wäre mir nicht in den Sinn gekommen und dass der Unterschied so erstaunlich groß ist, für mich eine Überraschung.

Hier noch ein Text zu JPG-Komprimierung: Fotocommunity.de: “JPEG”

Filed under: Tools
No Comments

Die Methode hatte ich total vergessen:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Quelle: Min-Height Fast Hack (vom 21.9.2005) im Blog von Dustin Diaz

Min-width

selector {
  min-width:500px;
  width:auto !important;
  width:500px;
}

… und IE7 kommt damit gut zurecht. Da werde ich in meiner aktuellen Arbeit an einigen Stellen die IE-behaviour im IE-Sheet wieder rauswerfen. Viel zu schnell übersieht man dort die Angaben und vergißt diese mit abzuändern, wenn sich was ändert.

via stylephreak Anthony Eggert, der aktuell sein Weblog neu aufsetzt und viele alte Artikel in der neuste-Artikel-Spalte hat.

Übrigens musste ich feststellen, dass die Lightbox-Technik meinen Surfstil mit “öffnen im nächsten Tab” beeinträchtigt. Sein CSS-Only-Menu verliert dabei das CSS (diese Javascriptlinks sollten gekennzeichnet sein. Hmpfh)

Filed under: Webtechniken
No Comments

Häufig behandle ich Formulare Stiefmütterlich und belasse diese in welchem Design auch immer der Browser die verschiedenen Elemente darstellt. Entsprechend schwach ausgeprägt ist mein Wissen über die Möglichkeiten. Ich gehe in Bezug auf die stiefmütterlich behandelten Formularen mit einem großen Prozentsatz meiner Kunden konform. Hier und da aber gönne ich mir auch in Bezug auf Formulare die Extrameile.

Es wurde Zeit mich einmal wieder zu informieren, was in Bezug auf Formulare im Netz schon vorhanden ist:

1. Roger Johansson hat in seinem Blog 456 Berea^St im Beitrag Styling form controls with CSS, revisited das für mich umfassenste und aufschlußreichste beigetragen, um eigenständig sich an die Gestaltung des Formulars zu machen. Auch was die verschiedenen Optionen anbelangt, arbeitet man an Templates und nicht an einem konkreten Projekt, bei dem zunächst nur ausgearbeitet werden muss, was in den Projekt genutzt wird.
2. Stu Nichols hat in seinem CSS-Playground einen Mini-Formular-Zengarden eingerichtet: A form with style
3. Cameron Adams zeigt mit seinem Blue Man was Formulare können, wenn man Sie nicht in ein Tabellen-Korsett zwingt: Form layout templates
4. Einen mehr als Berechtigten Rant bezüglich der Art und Weise wie Formulare in Browser integriert wurden, wie unflexible und inkongruent diese sich in den verschiedenen Browsern geben, schrieb Erich Meyer in einem lesenswerten Beitrag: Formal Weirdness.
5. Und damit folgt Lucian Slatineanu vom badboy mit seinem Beitrag Nice Forms, da er mit seinem Javaskript die festen Browservorgaben umschifft, die die Gestaltung von Formularen so frustrierend macht.
6. Um sich Arbeit zu sparen kann man entweder Stu Nichols Vorlage verwenden oder aber dieses Form-Template um anschließend seine eigenen CSS-Eigenschaften zur Gestaltung des Formulares zu vergeben. Prabhath Sirisena auf Nidahas zu Formularen liefert an folgender Stelle das Form Template. Es lebe die Bequemlichkeit.

Es gibt noch viel weitere Beiträge, die man als Anregung für die eigene Gestaltung heranziehen kann: ALA: Prettier Accessible Forms, Veerle: Styling forms in CSS, Picment: Fun with forms — customized input elements, Mezzoblu zu Labeling Formfield, Chris Ramakers, skyrocket concepts: semantisch korrekte horizontale Formulare step 1 – 2 – 3, Malarkey: optionale Formularbereiche ausblenden, Brand spanking New: AutoSuggest: An AJAX auto-complete text field, Live-validation und das Formular spricht mit dem User. Urputzig!, Nicholas Rougeux, C82, Scrollende Checklisten als alternative zu Selectfeldern, Formassembly mit einer ganzen Sammlung von gestylten Formular-Templates (Unter der Haube im Formgarden sieht’s trübe aus. Die Lektion zum Thema “Inline- und Blockelemente” wurde noch nicht durchgenommen.), …

Datenblatt-Formular das aussieht wie ein Datenblatt für Webapplikationen, in denen zum Beispiel ein Tutor, Sachverstädniger oder Vorgsetzter seine Bewertungen zur Übergabe an die Datenbank einträgt.

… es gibt sicherlich noch mehr und wer eine Adresse kennt, die hier unbedingt noch fehlt, die Kommentare sind offen.

Filed under: Design, Projektplanung
2 Comments

Alright you Nielsenites you, that didn’t go quite like I expected. It’s probably my fault for calling it ‘Best Practices’ in the first place — what we’re looking to create is more a crib sheet of practical advice, something for reference when a designer gets stuck while using CSS specifically. [...] While nobody wants a blue, underlined link world, and we’ll be debating for ages the best way to size fonts, this is what I was getting at: “a CSS Best Practice is a one sentence action statement, a ‘thou shalt’ or ‘thou shalt not’ (paraphrased, of course) that highlights a specific issue, be it browser compatibility, code integrity, or whatever else can actually be considered factual (instead of opinion).”

Beachtenswerte Quelle: Mezzoblue: CSS Crib Sheet?

Die in meine Augen sehr sinnvollen Gebote für Webdesigner in dem was nach dem Zitat folgen, wurden von vier recht guten Ratschlägen in einem Beitrag unter der Bezeichnung “Best Practice“

Zu den blauen unterstrichenen Links kann ich nur sagen, wenn ich nur blau unterstrichene Links kenne, dann kann ich keinen Sinn für alternative entwickeln. Ich lebe dann in einer triesten grauen Welt voller Uniformen und einem verkümmerten Sinn für die Abenteuer und den Spaß am Entdecken. Diese “Don’t make me think!”-Regel ist eine Regel der Monopolisten, der totalitären Caesaren, das ist Panem et Circensis um möglichst bequem und möglichst effektiv den letzten Penny aus dem Volk zu quetschen. Don’t make me think erstickt Kreativität und damit Individualismus. Individualismus setzt voraus, dass man sich mit den Besonderheiten eines Individuums auseinandersetzt. Ich schweife ab …

So! Das nur kurz zwischenrein notiert. Parallel habe ich einen anderen Beitrag zum Thema Formulare in Arbeit in einem der nun 46 offen Registern in zwei Browsern (opera + ff) und kehre zu diesem zurück. Schließlich wollen die 46 Fenster geschlossen werden. Die beiden Offtopic-Fenster können damit zugemacht werden. womit es nur noch 44 offene Fenster sind. wird sich in der nächsten halben Stunde oder vollen Stunde noch ein paar Mal ändern.

Filed under: Projektplanung
No Comments

Eine ganze Sammlung neckischer CSS-Textspielereien, wie das folgende Beispiel, fand ich auf Mandarindesign.com:

Die Beispiele passen nicht in jedes Rahmendesign auf Anhieb. Mit etwas Geschick, hat man es aber schnell raus. So musste ich ein wenig an den Eigenschaften schreiben, damit das gewählte Beispiel nicht den Rahmen sprengt. In den Beispielen wird auch nicht sonderlich auf Semantik geachtet … Dinge, die man im späteren Einsatz letztlich noch berücksichtigen sollte, also H3 oder H4 verwenden, wenn es seine Überschrift ist, die sich so schmuck neben den Text stellt.

Filed under: Design
No Comments

Auch wenn das bald hinfällig ist, weil die IE4-6 bald ausgestorbene Browserfossile sein werden, so habe ich mir doch noch ein PHP-Skript gebastelt, dass für diese alten Microsoft-Browser PNG-Bilder per Span und einem IE-Transparenzfilter einbindet.

Das Land Transpngvanien wo dem PNG im MSIE 4-6 die Farbe ausgesogen wird … harr

Das ist alles noch kleines PHP-Einmaleins, mit dem ich noch zurechtkomme. Ja, ich weiß, dass Header-Informationen nicht verlässlich sind: Opera-Falseflags und gelegentlich wird es abgeschaltet. Das ist dann “Tough luck”.

In bezug auf MSIE 4-6 dürfte das aber dann schon die große Ausnahme sein, weswegen mir die Lösung auch ausgesprochen gut gefällt. Nicht zu letzt mag ich diese Lösung für PHP-Files weil ich bei den Bildern die Größenangabe automatisch ausgegeben bekomme.

Weitere Quellen:

1. ALA-Artikel zu PNG Tranparenz
2. Kleiner Javascript-Trick um die Bodyfarbe zu wechseln
3. Nachtrag: Link zu einer Javascript-Lösung, die auch Hintergrundgrafiken beherrscht: Transparent PNGs in Internet Explorer 6 (Das Thema hat konjunktur wie ich bei der Gelegenheit festellen konnte.)

Filed under: Programmierung
No Comments

Litmus hat ein witziges kostenloses Tool zum Download der Community bereit gestellt. Wer will kann nun ich Echtzeit Microsoft.com oder Mozilla.org oder jede andere Site im Internet oder auf der lokalen Platte redesignen. CSSVista liefert drei Fenster:

1. vertikal über die gesamte Höhe: alle CSS-Stylesheets per Karteireiter im Zugriff,
2. horizontal halbe Höhe: den Internet Explorer und
3. horizontal untere Hälfte: den Firefox.

Im CSSVista Cache hat man die Möglichkeit, alle CSS-Dateien zu jeder beliebigen Seite zu bearbeiten und das Ergebnis der Anderunge unmittelbar zu beobachten. Es ist kein echter Editor, was man unmissverständlich daran merken kann, dass die in Editoren üblichen Einblendfenster zum Autoausfüllen fehlen oder jegliche andere Methode, keine Hilfe zu den Eigenschaften geboten wird und vor allem die Speicherfunktion fehlt. Wer es dennoch als “Editor” einsetzen will, kann sich mit Copy&paste und seinem üblichen Editor behelfen.

Witzig ist es alle mal und wenn man lernen möchte ein anschauliches Werkzeug um die Effekte unmittelbar zu sehen, die die Anderung der Eigenschaften im CSS-Stylesheet mitbringt.

Filed under: Tools
No Comments