Templaterie Blog

Es ist noch nicht alle Hoffnung für die Redmonder verloren. Nachdem die Redmonder angekündigt hatten, dass sie ohne Targeting-Metatag mit ihrem IE8 den Kopf in den IE7-Sand stecken wollten, gab es mit Recht einiges Rumoren unter den Webdesignern (auch hier). Wer seinen Job ernst nimmt, der bemüht sich mit den Seiten aktuell zu bleiben und gemäß den Standards eine Webseite in bestmöglicher Weise zu schreiben. Wer seinen Job ernst nimmt versucht hier und da die neuen Feature einzelner Browser einzubauen, wenn diese dem Design und der Funktion dienen.

Es ist nicht der gemeinsame kleinste Nenner der Webdesign vorantreibt. Es wird der gemeinsame kleinste Nenner bedient. Das ist ein gewaltiger Unterschied, den die Redmonder so langsam doch begreifen wollen.

Langer Rede kurzes Zitat:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Quelle: MSDN.com IE-blog: Microsofts interoperability principles and IE8 via einfach für alle

Good decision!

Filed under: HTMl&CSS, Webdesigner sein, Webtechniken
2 Comments

Wer sich intensiv in CSS einarbeiten möchte, dem seien die folgenden Links ans Herz gelegt:

1. 70 Expert Ideas For Better CSS Coding
2. 53 CSS-Techniques You Couldn’t Live Without vom letzten Jahr
3. Und 50 Powerful CSS-Techniques For Effective Coding in diesem Jahr
4. Chic Chic, 32 Tipps zur Gestaltung von Tabellen
5. 25 Linktipps: CSS für Formulare

Mit bester Empfehlung des Smashing Magazins.

[Nachtrag]

1. Teil: 101 CSS techniques of all times
2. Teil: 101 CSS techniques of all times

Nun kann man sich frage wer von wem … baer generell gilt, dass diese Links im Netz schwirrenudn wer seine Bookmarks einmal leert wird vermutlich ähnliche Listen zusammenstellen können. Einiges ist definitiv doppelt, das bleibt nicht aus. Ein Dankeschön geht also auch an Noupe.com für die Zusammenstellung.

[/Nachtrag]

Was den @import ./. link des Stylesheets anbelangt, so ist das Argument der alten Browser reichlich hinfällig. Wo in der freien Netzwelt wird der Netscape 4 noch verwendet? Allenfalls die Möglichkeit ältere CSS-Versionen vorrätig zu halten, wie z.B. Saisonale Stylesheets , und für alle HMTL-Template diese an einer Stelle auszutauschen überzeugen mich vom @import, wobei es auch ein umtaufen der Stylesheets täte …

In Bezug auf den @import url(style.css) ist die Liste @import-Hacks sicher von Interesse.

Generell gilt, je weniger Hacks, desto besser.

via Vandelay Design Weekly Links

Nachtrag: Hacks:

• Die 10 besten CSS-Hacks
• 7 CSS Hacks die man verwenden sollte

Wenn man meint es zu brauchen … ich persönlich verzichte lieber auf Hacks und suche alternative Lösungen ohne Hack. Nur manchmal … manchmal eben

Excessiv: Übersicht der Methoden für runde Ecken … (Bestandteil der Liste oben. Aber gesondert erwahnenswert, wei ich finde.)

Ich ich bin noch am Ordnen und Sortieren meiner Feeds und der extrem vielen Tipps darin. Es sind so viele, dass ich primär hier einen Washout mache. Es folgen in Kürze weitere Listen nach Themen sortiert. Nicht verzweifeln … ich habe sie auch nur grob gescannt und was mir nützlich erschien auf die Platte gezogen und vermutlich wandert es unsortiert auf eine CD. Ich muss dringend meine Spielwiese auf Vordermann bringen, denn nur so werde ich die vielen, vielen Techniken und Tipps auch abrufbar haben. Aber immerhin ich habe es gesehen und wenn es CSS ist, dann wird mir dieser Beitrag helfen, es wieder zu finden. Sind ja nur rund 150 Links Um eine kleine Vorstellung zu haben: Ich hatte heute ca. 200 Fenster offen und zuletzt im Feedreader 150 Beiträge auf “Keep new” ohne ansurfen … Ich nenn das den totalen Overload und ich erinnere mich, warum ich den Feedreader zuletzt nur noch selten aufgesucht habe. Ich fühlte mich von der Menge schlicht erschlagen. Nicht mangelnde Güte der Beiträge machte mir zu schaffen, sondern die Beiträge so für mich zu verarbeiten, dass ich mit der Info noch etwas anfangen kann. Leiden wie gemeinsam.

Filed under: 1001 Linktipp, Design, Webtechniken
2 Comments

Überraschung! Statt nun mich vom Flash der BMW-Site quälen zu lassen, werde ich in HTML 4.01 Layouttabelle und Javascript inline darüber informiert, dass die Programmierer der Site nicht in Lage waren, alle gängigen Browser in das Besuchererlebnis einzuschließen. Siehe Screenshot (1:1-Ansicht via Klick auf die Vorschau)

Angesichts der hohen Qualität des Opera-Browsers kann ich eine Meldung bezüglich mangelnder Kompatibilität nur als mangelnde Befähigung des Verantwortlichen für die Site des BMW-Konzerns interpretieren. Ich hätte nicht gedacht, dass mir heute noch mit dem Opera auf nur einer Site, die auf sich was hält, jener alte Schwachsinn oder Ahnliches begegnet:

Zugegeben: BMW schließt die Opera-User nicht aus, wie das die Grafik vermuten lässt, sie informiert nur den Opera-User über Inkompatibilität und überlässt es im weiteren dem Opera User, ob er den Browser wechselt oder austestet wie schlecht oder gut die Site wirklich programmiert ist.

Ich habe den Browser übrigens gewechselt, weil der Firefox seit geraumer Zeit ziemlich mies in der Performanz ist und ich Java und Flash mit dem FF meide und lieber mit dem Opera solche Seiten aufsuche. Der Opera setzt seltener aus. Den IE setze ich für’s surfen nur im Notfall ein. BMW fällt nicht unter die Kategorie Notfall. Ich überlege noch, ob ich nach diesem Blogeintrag mir die BMW-Seite noch antun will oder nicht. Ich tendiere zum “oder nicht”!

Filed under: Webmarketing, Webtechniken
1 Comment

Smashingmagazine stellt Websites vor, die Handzeichnungen für Webdesign-Elemente verwenden. Hierbei handelt es sich überwiegend um Flashsites. Und zugegeben die Zeichnungen sind schön, es macht Spaß die Seiten abzuklappern. Mel Kadel zeichnet herrlich (übrigens keine Flashsite, sonder iFrame und Javascript). Auch (diesmal Flashsite) Heather Sloane macht Spass. Preise für gutes Webdesign habe ich bisher aber noch nicht gesehen (ich habe nicht alle angesehen, manche Vorschau reizt mich schlicht nicht). Gute Zeichner sind nicht notwendigerweise gute Webdesigner. In meinem persönlich favorisierten Fenster 1280×1024 begeisterte mich das Kontaktformular von Christian Sparrow:

Wie bei einer Flashsite so üblich keine Direktverlinkung möglich, was aber nicht das schlimmste Übel ist, denn das Formular hielt dem Screenshot 1024×768 nicht stand:

Wie man nur unschwer erkennen kann ist nun der Sendbutton hinterm Horizont verschwunden. Auch wenn ein Klick auf das kleine Hochhaus neben dem spitzen Hochhaus vermutlich die Sendefunktion noch beinhaltet, so ist das Formular damit im Grunde untergegangen. Hier fehlt für kleinere Auflösungen definitiv eine Skrollfunktion oder aber (schließlich ist es eine Flashsite) ein Zoomfaktor.

Wie dem auch sei, das Formular selbst in seinem schlichten gezeichneten Stil ist etwas, das man wohl getroßt auch ins eigene Repertoir aufnehmen kann. Auch Packpapier bzw. brauner Zeichenkarton als solches ist nicht so ungewöhnlich, dass man sich schämen müsste, macht man ein eigenes Design damit. Zeichenelemente als solches sind auch nicht so abwegig. Allein die Idee des gebastelten Kindertheaters mit den Wolken am Bändel und das ganze drum und dran, ist so unique und schön, es fiele mir nicht im Traum ein, das zu plagiatieren. Das finde ich einfach klasse. Fast perfekt, (more…)

Filed under: Design, Webtechniken
No Comments

Mit dem Microsoft Internet Explorer Version 7, kurz MSIE7 ider auch IE7, wurden erstmalig Websites von einem Browser aus dem Hause Microsoft fast wie von standard-konformen Browsern dargestellt. Websites, die stark auf Hacks im CSS gesetzt hatten mussten stark nachgearbeitet werden.

Ich hatte schon den Conditional Comment bei meinen Sites im Einsatz und in 90% der Fälle genügte es den conditional comment, der den IE generell ansprach abzuändern, so dass er nur noch IE der älteren Version kleiner 7 ansprach und die Site wurde dargestellt wie sie sollten. Die restlichen 20% erhielten ein neues Stylesheet, das mit zwei drei Zeilen die Problemchen des IE7 adressierte.

Aus dem Malheur mit den Hacks zu lernen und stärker auf conditional comments zu setzen, traut Microsoft den Webdeisgnern nicht zu. Ergo frieren sie die Entwicklung für alle ihre Browser standardmäßig ein und machen die Weiterentwicklung zur Ausnahme, die expressis verbi speziell per meta-Tag angefordert werden muss. Ich denke ich werde wie in dem neuen Artikel auf A List Apart von Jeremy Keith “They shoot browser, don’t they?” per default IE=edge wählen, so dass ich eine Site nur dann anfassen muss, wenn in Redmond mit dem neuen Browser der Standard wieder einmal gebrochen wird und ich per ‘conditional comment’ für diesen einen Browser Sonderkonditionen definieren darf.

Schließlich wird Mircrosoft auch in Zukunft mit den IE ein Stück Software haben, das mit dem zurecht kommen muss, was wir Webdesigner liefern. Wenn ich per DocType-Deklaration einen gängigen Standard vorgebe mit dem ANY BROWSER zurecht kommen sollte, dann erwarte ich, dass neue Generationen das tun. Das Mehr, das Neue, das Avangardistische in neuen Browsern, wie es immer noch der ‘inline-block’ darstellt, den ich erst so langsam über -moz-gedöns (display:-moz-inline-stack;) im Stylesheet einführen kann man immer noch in separaten Stylesheets via conditional comments einführen, zumindest solange bis die Anweisung in allen gängigen Browsern verstanden wird.

Soweit es mich betrifft ist in Opera und Firefox und Safari der conditional comment längst überfällig. Es ist ja nicht so, dass diese Browser in allen Dingen perfekt sind.

Filed under: Webtechniken
5 Comments

Thickbox bietet die Möglichkeit Bilderserien über rel="serie-x" mit einander zu verknüpfen. Dies ist rein auf Javascript basiert und bezieht sich stets auf die Bilder die aktuell in der Seite angezeigt werden. In Wordpress verteilen sich diese Bildserien über mehrere Seiten und schon ein schichtes <––more––> wirft die ganze Idee der Bildfolge aus dem Konzept. Geschweige denn Bildfolgen über mehrere Blogbeiträge, ggf. über Monate und Jahre zu einer stattlichen Zahl angewachsen.

Dem Plugin Thickbox fehlt an dieser Stelle eine Verwaltung, die die zusammengehörigen Bilder in einer Tabelle sammelt und per Ajax zum Blättern anbietet.

Jetzt fehlt noch ein Programmierer, der seine Zeit opfert. *unschuldig guck*

Zugegeben, dem more-Problem könnte man mit folgender Lösung begegnen:

<?php if (!is_single()){ ?> <a href="Link zum Bild" rel="serie-x" title="Bildtitel"> class="thickbox"<span class="hide"> </span></a> ... <?php }?>

Vorausgesetzt natürlich man ist firm genug mit PHP, dass man es wagen kann PHP in Beiträgen zuzulassen. Ich habe die Variante noch nicht getestet, doch wenn Conditional Tags funktioniert wie auf der Seite beschrieben, dann müsste es funktionieren. Dies löst das Problem mit <––more––>. Es ist nicht umsetzbar sämptliche Bildserien auf diese Weise in Beiträge unterzubringen, d.h. vermutlich schon, wenn man so diszipliniert ist, diese Liste separat zu führen und jeweis in den conditional tag per Copy&Paste klatscht.

Filed under: Programmierung, Webtechniken
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

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

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

Position absolute heißt, ein Element aus dem Fluß nehmen und absolut (= mehr oder minder unabhängig von den restlichen Elementen) davor und danach zu stellen. Elemente hängen mit dieser Stylesheet-Angabe gewöhnlich wie nasse Wäsche an der Leine. Nachfolgende Elemente rutschen unter darüberliegenede Elemente. Das ist eine gewünschte Eigenschaft dieser CSS-Anweisung. Höhenunterschiede liegen wenn überhaupt im 1-Pixelbereich und auch nur bei den nachfolgenden relativ gesetzten Elementen. Nicht so bei absolut gesetzten nachfolgenden Elementen. Das ist eine Eigenschaft des CSS, die — so mein bisheriges Verständnis — im Browser interpretiert wird. Heute habe ich mich von 1und1 eines besseren belehren lassen müssen.

Nicht dass ich nicht immer noch der Überzeugung bin, dass “position: absolute” laut W3C genau so funktioniert und mein CSS in dieser Beziehung (k)einen Fehler (je nach Hoster ) aufweist, doch wurde gestern ein Template nach abgeschlossener Entwicklung auf den 1&1-Server meines Kunden geladen und plötzlich gilt diese Regel nicht mehr. Was zum Henker stellt 1&1 auf seinen Servern an, dass plötzlich zwei absolut übereinenander gelegte HTML-Elemente gegeneinander verschoben sind, Standards ihre Gültigkeit verlieren? Und etwas das im Browser (also beim Client auf dessen lokalen Rechner) interpretiert wird, nun vom Hostingplatz abhängig ist.

Logisch, dass 1&1 das Problem beim Designer sieht und ich meine Zeit und meine 14ct/Min nutzlos verschwendet habe. Ich bin fassungslos und reichlich irritiert! Ich habe dank des zeitnahen Hinweises von Mathias Bank (Co-Producer in diesem Projekt), in diesem Fall für 1&1 exklusiv die Positionsanweisung für das zweite Element herausgenommen. Dies müsste eigentlich zu einem Darstellungsfehler führen … zumindest auf jedem anderen Hosting-Platz und ich bin bespannt, wann dies auch bei 1&1 der Fall sein wird. Ich bin im Moment nur froh, dass ich kaum Kunden bei 1&1 habe, denn es erspart Diskussionen mit meinen Kunden, wenn von heute auf morgen die Darstellung der Website zerschossen ist, weil Designregeln wieder gelten.

Filed under: Design, Webtechniken
1 Comment