Ein Projekt mit einigen Herausforderungen:
Zum einen sollte die Ladezeit “gut” sein und zum anderen war natürlich auch ein optischer Anspruch vorhanden.

Der Schwerpunkt der Seite ist die Galerie und damit natürlich ein Problem bzgl. der Ladezeit. Daher haben wir uns gegen eine Thumbnailansicht entschieden. Die etwas “größeren Kleinansichten” bieten eine gute Vorauswahl – die meisten Bilder sind nicht größer als 15kb. Die Großansichten sind alle meistens zwischen 100 und 150kb – und nur wenige Ausnahmen sind größer als 200kb.
Die Bildauswahl wurde entsprechend getroffen um die Bandbreite Schreiner-Arbeiten klar herauszustellen.

Das technische Detail für die Ladezeit sind kombinierte und komprimierte CSS- und Javascript-Files. Der Unterschied lässt sich am Besten an der Startseite festmachen: Die Entwicklerversion hat 592kb und die Liveversion hat 325kb. Wobei ca. 230kb an Bildern bei beiden Versionen gleich ist.

Aus technischer Sicht war bei diesem Projekt für uns auch wieder entscheidend folgende Rahmenbedingungen einzuhalten:

• sauberes und kleines HTML (es sollte auch jede Seite valide sein)
• “graceful degradation”: D.h. bei Nichtverfügbarkeit von Javascript und/oder CSS soll der Inhalt weiterhin zugreifbar sein
• Browserkompatibilität (die Seite funktioniert auch verhältnismässig gut im InternetExplorer 6)

Viel Spass auf der neuen Website http://www.schreinerei-braeu.de/

Zwar wird der Wechsel von CSS 2 auf CSS 3 bekanntermaßen wohl noch etwas dauern. Aber eine hilfreiche Neuerung ist das CSS3-Modul “multi-column layout”. Auch wenn es nicht mehr wirklich “taufrisch” ist, möchte ich es trotzdem kurz vorstellen. Denn wenn die Seite nicht in allen Browsern gleich aussehen muß, spart man sich dadurch verschachtelte divs – von tables gar nicht zu reden…
Geeignete Anwendungen wären, Listenaufzählungen, Navigationslisten aber auch Textebereiche.

Beispiel:

Code für Mozilla-Browser:
#TopNav ul{
-moz-column-count: 3;
-moz-column-width: 32%;
-moz-column-gap: 1em;
-moz-column-rule: solid #818285 1px;}

Über column-count wird die Spaltenanzahl definiert.

Column-width bestimmt die jeweilige Spaltenbreite. Derzeit sind alle Spalten immer gleich breit & hoch. (Das kann sich zukünftig ggf. noch ändern.)

Column-gap regelt den horizontalen Abstand zwischen den einzelnen Spalten. Der Wert darf nicht negativ sein.

Mit column-rule kann eine Trennlinie definiert werden.

Bitte nicht vergessen, für Safari-Browser wird statt “-moz” einfach “-webkit” definiert.

Umbrüche:

Um Umbrüche in die nächste Spalte gezielt zu steuern, stehen folgende Eigenschaften zur Verfügung:

• break-before
• break-after
• break-inside

Versucht Umbrüche innerhalb von p Elementen zu  vermeiden:
p { break-inside: avoid-column }

Umbruch nach Bildern:
img { break-after: column }

Umbruch vor h2:
{ break-before: column; }

Weitere Möglichkeiten:

Element über alle Spalten darstellen:
h2 { colum-span: all;}

Wer noch tiefer einsteigen möchte, dem empfehle ich dazu die Seite des W3C:
http://www.w3.org/TR/css3-multicol/

Browser Kompatibilität:

mac:

• Chrome  5
• Firefox 3.6
• Safari 4

Win:

• Chrome 4
• Firefox 3, 3.6
• Safari 4

Bisher keine Unterstützung:

• IE 6,7 und 8
• Opera 10, 10.1 und 10.5

On wednesday we’ve relaunched deam.org. The content-block is encased with a nice, white glow-effect. Of yourse not for all you IE-users out there ;-)
We’ve used the two “box-shadow”-attributes. The “-moz-box-shadow” for Firefox and the “-webkit-box-shadow” for Safari (and them derivates).

Thats what we’ve used: -webkit-box-shadow: 0 0 200px #fff;
And that “killed” my mobile safari. It has been unresponsive for several seconds. And after one interaction again unresponsive… and so on.

After stopping and starting Safari it went blank. No more interaction. Only thing that worked: Reset the cache in the prefs.

I should add that it’s a 3G iPhone (no “S”).
There are definitly some memory-issues here :-)

Now we use “-webkit-box-shadow: 0 0 20px #fff;” – doesn’t look that “smooth”, but it’s ok.

Die gibt es ja durchaus schon länger, aber ich hab sie erst durch dieses Tec-Demo für “3D CSS Effects Safari” kennen gelernt:

Der Track der in diesem Video läuft ist offiziell gar nicht zu haben (“Track 01″ vom inoffiziellen Album “9 Beats”).
Aber die offiziellen Titel haben es auch in sich – hier die Ratatat-Alben in iTunes [Affiliate-Links]:

• Ratatat, 1999
• Classics, 2006
• LP3, 2008

Es gibt die Alben auch bei eMusic. Da habe ich allerdings keine Affiliate-Links – die wollen mich nicht ;-)
Ich kann aber empfehlen den Link von Mike Yusi zu verwenden. Das Promoangebot über seine “Codepage” ist definitiv besser als das allgemeine eMusic-Angebot: 35 Songs kostenlos für einen Testlauf von 14 Tagen.

Hier der Link zur Albenübersicht bei eMusic. Und hier der Link zum Promoangebot für eMusic von Mike.

Achja: Ich bin schon gut über ein Jahr bei eMusic und kann es nur empfehlen. Und natürlich “muss” ich bei dieser Gelegenheit UCRadio empfehlen – einer meiner Lieblingspodcasts :-)

…. ich denke, ich werde in nächster Zeit noch einige Podcast-Tipps veröffentlichen – oder zumindest die, die ich schon ewig höre.

Gestern der Start und heute die notwendigen Anpassungen. Einige Teile des Blogs bleiben vorerst auf englisch, weil WordPress wohl nicht wirklich multilingual ist. Das CSS der des Default-Themes sowie die PHP-”Templates” waren relativ leicht anzupassen, so dass das Blog jetzt einigermassen so aussieht wie der Rest meiner Website.

Ich habe eigentlich nur das style.css sowie 7 PHP-Files angepasst. Die Suche hab ich nur auskommentiert, da das ja eigentlich ziemlich überflüssig ist, wenn man so wenig schreiben wird wie ich.

Soviel zum internen Geschwafel, jetzt kommt ein MVC-Post…