Neues von den Dropdowns: 0.9-beta

Ich hatte ja schonmal über mein Dropdown-Plugin berichtet. Nun hat sich im Zuge meiner Arbeit in der Firma herausgestellt, dass das verwendete Stylish-Select zwar crossbrowsertauglich ist, das Styling auch ganz gut klappt, jedoch im Internet-Explorer die Renderinggeschwindigkeit bei ca. 300 Einträgen in der Liste extrem langsam ist.

Während die Liste im Firefox mit ca. 100ms und im Chrome mit ca 60ms geladen, eingefügt und gerendert wurde, hat der IE 7+8 für das Nachladen des Strings per Ajax und ein programmatisches Umwandeln in „<option>“-Tags inklusive Schreiben ins DOM und rendern der Fake-Dropdown-Liste mindestens 4000ms gebraucht.

Interessanterweise hat sich in einem Last-Test herausgestellt, dass genau die gleiche Aufgabe von meinem Plugin in einem zehntel der Zeit erledigt wird. Mit einer Renderzeit von 400ms im IE6 ist das ganze sogar noch akzeptabel um ein „on-the-fly“-Rendering beim öffnen der Liste durch einen Klick darauf laufen zu lassen.

Und nicht ohne Stolz sehe ich, dass mein Plugin im Funktionsumfang und vor allem mit der Rendergeschwindigkeit, die mich selbst überrascht hat, mit ein paar kleinen Anpassungen in allen europäischen Buchungssystemen einer Autovermietung Einzug gehalten hat.

Für euch gibts jetzt erstmal die Version 0.9 mit ein paar kleinen Verbesserungen, während ich schon wieder weiter an der Technik schraube.

Links:

Webseite: IN-LIVE-EVENTS & GASTRO

Anforderungen

Die Webseite der Firma IN-LIVE EVENTS lief bisher auf einem proprietären CMS der Firma Compose. Ein Umzug auf einen anderen Server ist natürlich mit der kompletten Neuentwicklung der Seite verbunden.

Die Entwicklung hatte den Schwerpunkt auf bestmöglicher Suchmaschinenfreundlichkeit. Dazu zählte das Konzept, dass jetzt einen eindeutigen Fokus auf die Hauptgeschäftszweige der Firma legt: Cocktails und Events.

Screenshot: www.in-live-events.de

Umsetzung

Dem System liegt als Plattform das Wikisystem DokuWiki zugrunde, dass sich durch eine einfache Erweiterbarkeit durch Plugins und eine geringe Größe auszeichnet. Das Design und die Struktur basieren grob auf dem 360.gs-Framework, die einzelnen Seiten sind mittels dem „WRAP-Plugin“ für Dokuwiki sehr individuell gestaltbar.

Die Wahl auf DokuWiki im Vergleich zu WordPress fiel aufgrund der Möglichkeit, einzelne Inhaltselemente zu bearbeiten. Durch die flexible Inhaltsgestaltung haben wir den goldenen Mittelweg zwischen Einheitlichkeit durch vordefinierte Elemente und Vielfältigkeit durch einfache Variation und Anordnung der Elemente erreicht.

jQuery.FancySelect() version 0.6 beta released

Heute morgen habe ich ein Tag für mein aktuelles Leibprojekt „jQuery.FancySelect“ erstellt und damit einer herunterladbare Version auf GitHub erzeugt.

Allerdings habe ich heute nach einer Runde Nachdenken dann nach der Arbeit noch ein wenig Zeit investiert und nach der heute morgen getaggten 0.5-beta gleich noch eine 0.6-beta nachgeschoben.

Darin habe ich die Lizenz geändert und ein paar (meiner Meinung nach notwendige) Dinge angepasst (bessere Demo der HTML-Elemente, Anzeige des aktuell markierten Elements in der Dropdown).

Der Weg zur 1.0 wird immer kürzer… Über ein „peer review“ würde ich mich übringes freuen.

Link

Der Tag an dem ich lernte, Conditional Comments zu lieben

Es gibt ja viele Möglichkeiten, eine Seite pixelgenau zu designen, so dass Sie in allen Browsern läuft gleich aussieht.

  1. Man baut die Seite aus Imageready-gesliceten Bildern in einem Tabellenlayout zusammen
  2. Man baut die Seite aus Imageready-gesliceten Bildern in einem DIV-Layout zusammen
  3. Man baut die Seite mit einem Tabellenlayout zusammen
  4. Man benutzt ordentliches (x)HTML mit CSS-Hacks
  5. Man benutzt ordentliches (x)HTML und Conditional Comments mit validem CSS
  6. Man benutzt ordentliches (x)HTML und valides CSS

Das Problem des gleichen Layouts betrifft im übrigen fast ausschließlich die Webbrowser aus Redmond. Eine valide Seite sieht in 95% aller Fälle in Firefox, Opera und Safari identisch aus. Lediglich der IE mit seinem verkorksten Boxmodel haut da quer. Der IE 8 im übrigen nur noch ganz selten.

Was nehm‘ ich denn da?

Dass wir die Punkte 1-3 vergessen können, sollte sich von selbst erklären. Tabellenlayouts sind rückständig und codeüberladen, außerdem semantisch unsinnig und barrierelastig.

Bleiben die Punkte 4-6 übrig. Wie man sieht, sind die Möglichkeiten ihrer Unsinnigkeit absteigend geordnet und dementsprechend werden wir diese drei Möglichkeiten jetzt mal durchgehen.

(x)HTML mit CSS-Hacks

CSS-Hacks sind kleine „Tricks“, die Interpretationsfehler bei Browsern ausnutzen um bestimmte CSS-Anweisungen nur für bestimmte Browser zugänglich zu machen. Diese Technik ist relativ zielgenau, auch weil es dafür entsprechende Zielhilfen gibt. Problem an der Geschichte ist, dass es leicht möglich ist, das CSS damit invalide zu machen, was zukünftig nicht vorhersehbare Bugs im Rendering noch nicht erschienener Browser erzeugen kann.

(x)HTML und Conditional Comments mit validem CSS

Die sauberste Möglichkeit, einem Rendering, dass von einzelnen Versionen des IE (und es ist in 95% aller Fälle mindestens einer der IEs der querschießt) zerschossen wird, zusätzliche CSS-Regeln beizubringen, sind CSS Conditional Comments. Hier werden zusätzliche CSS-Anweisungen für den Internet Explorer eingebunden. Dabei kann man sowohl ein paar zusätzliche Regeln mittels eines <style>-Tags einbringen oder einfach direkt ein zusätzliches Stylesheet einbinden.

Nachteil ist natürlich, dass diese Methode nur auf Internet-Explorer-Versionen unter Windows anwendbar sind. Meine bisherige Erfahrung hat aber gezeigt, dass Hacks/Workarounds im großen und ganzen nur für den IE nötig sind. Meistens auch unterschiedliche Lösungen für unterschiedliche Versionen.

Vorteil bei dieser Technick ist das Aufrechterhalten sämtlicher Validität in HTML und CSS, auch wenn man in den IE-Stylesheets unter Umständen Hacks einsetzt. Durch die Einbindung der Conditional Comments in Form eines speziell syntaktischen HTML-Kommentars werden andere Browser diese einfach ignorieriern und nicht ins DOM aufnehmen, wie es der IE tut, sofern er mit der Zielversion des Kommentars übereinstimmt.

Die restlichen 5% von Problemen, die sich damit nicht lösen lassen erfordern meist etwas Nachdenken über die CSS-Struktur und wie man Dinge anders beschreiben könnte. Allerdings muss man auch hier eventuell die IE-Styles dann nachpflegen, besonders wenn man am HTML etwas ändert.

(x)HTML mit validem CSS

Die „reinste“ Möglichkeit von allen. Erstrebenswert, aber eine Herausforderung, die sich gewaschen hat. Pixelgenaues Arbeiten ohne irgendwelche Kniffe ist kaum möglich. Für einfache Designs geht das bestimmt noch so halbwegs, aber dieses Blogdesign käme schon nicht ohne Extraregeln für den IE 6 aus, wenn ich ihn unterstützen wollte – was ich nicht will.

Vorteil ist bei dieser Methode eine sehr hohe Zukunftssicherheit, während man sich hier nicht allzusehr auf pixelgenaues Arbeiten versteifen sollte. Irgendein IE macht immer einen Strich durch die Rechnung.

Zusammenfassung

Wenn möglich, ohne Hacks, ohne Conditional Comments und Co. Wenn aber unbedingt hier im IE und da was im IE gemacht werden muss (wofür es natürlich mehrere Gründe geben kann, meistens ist es ein Kundenwunsch), dann am besten mit Conditional Comments.

Links

Es wird heiss.

Momentan bin ich bzw. sind wir noch am Sachen zusammensuchen, nach meiner Abschlussprüfung will ich richtig loslegen. Das Projekt „SUA“ wird vermutlich Mitte bis Ende Mai starten. Wir wollen ja genug für euch haben.

Macht euch auf einen ganz besonderen Marathon gefasst.

Tools of Trade – Mein Werkzeug

Vor ca. acht Monaten habe ich mir ein Herz gefasst und meinen Rechner zuhause im Selbstversuch auf Linux umgestellt. Vor 6 Monaten habe ich mein Windows das letzte Mal gebootet. Hauptsächlich ist der Desktop-Rechner für mich Multimedia-Center (Musik, Filme) und Internet-Zugangspunkt, allerdings benutze ich auch diesen Rechner als Arbeitsgerät für Design und Programmierung. Unter Linux. „Tools of Trade – Mein Werkzeug“ weiterlesen

Guter Code hilft der Seite: Wildtiermaler Thomas Schwarz

Angesichts der häufiger hier aufschlagenden Besucher, die bei Google „wildtiermaler“ eingegeben, behaupte ich mal, dass meine These, dass man mit einem schlanken, CSS-basierten, strukturiertem Quellcode auch ohne viel drumherum schon gute Ergebnisse erzielen kann:

Platz Zwei bei Google (auf dem fünften dann ich) und Platz 1 und 2 bei Yahoo sprechen für sich, oder? Und das ohne zusätzliches SEO, keine Anmeldungen bei Suchmaschinen, keine Promotions, kein Linktausch etc. Nur reines, statisches HTML.

Kaufmännische Schulen Hanau

Zum Anfang des Schuljahres 2007 werden die Kaufmännischen Schulen 1 und 2 der Stadt Hanau zusammengelegt. Im Zuge der Zusammenlegung wurden die bisherigen Schulhomepages unter einem neuen Design und mit einem komplett neuen Logo neu gestaltet und inhaltlich integriert.

Der Großteil meiner Arbeit war dabei die Umsetzung des Designs in XHTML und CSS, sowie die Integration des Templates in das TYPO3-System. „Kaufmännische Schulen Hanau“ weiterlesen