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/

Weil ich doch immer mal wieder gefragt werde, hier mein Startscreen mit den Apps, die ich definitiv am meisten benutze:

Zeile 1:

1. Kalender: von Apple
2. Einstellungen: von Apple (wäre wirklich schön, wenn manche Einstellungen direkter erreichbar wären… so um z.B. mal schnell das WLAN deaktivieren zu können; aber das will Apple offensichtlich nicht)
3. Fizz Weather: Kostet derzeit 2,99€ und ist klein, schnell und reicht mir von der Aktualität ganz gut. Die Niederschlagswahrscheinlichkeit ist das wichtigste feature für mich.
4. Live Ticker: ist kostenlos und ohne zweifel der schnellste Fussball-Ticker im App-Store – inkl. Push.

Zeile 2:

1. Uhr: von Apple; Wecker – ganz wichtig ;)
2. Kamera: von Apple
3. iPod: von Apple
4. OmniFocus: Kostet derzeit 15,99€ und ist vor allem deshalb genial, weil es auch eine Desktop-Version gibt. Dieser ToDo-Manager ist vielleicht nicht günstig, aber seinen preis wert. Vor allem da man zur Synchronisation einen eigen SSL-WebDAV-Server verwenden kann. Man muss seine Daten also niemand Drittem anvertrauen und kann trotzdem mobil sein.

Zeile 3:

1. Echofon: Die Pro-Version kostet 3,99€ und die Light-Version mit Werbung ist kostenlos. Kleiner und schneller Twitter-Client. Allerdings funktioniert bei mir das Push grundsätzlich nicht. Aber das muss nicht zwingend am Hersteller liegen.
   Es gibt noch einen Client für MacOS mit dem eine Synchronisation von gelesenen Tweets läuft. Die funktioniert prima und ist durchaus hilfreich.
2. Facebook: Kostenlose App. Sehr hakelig in der Bedienung, aber ganz praktisch für unterwegs.
3. Minigore: Kostet derzeit 0,79€ und ist ein netter kleiner Zeitvertreib. Aber Achtung bei Updates: Nicht immer gleich einspielen, weil die Qualitätssicherung nicht so wirklich prickelnd ist…
4. Canabalt: Schon jetzt ein Klassiker für 2,39€. Einfaches Spielprinzip. Und doch recht lange spielbar.

Zeile 4:

1. DB Navigator: Kostenlos und wirklich gut. Durch das iOS4-Update ist die Optik aber ein wenig in Mitleidenschaft gezogen worden…
2. Pocket WM: Kostenlos und ein guter Begleiter zur WM2010.
3. iBooks: kostenlos von Apple (expliziter Download) – praktisch auch zum Lesen von PDF-Dokumenten unterwegs (Sync via iTunes).
4. MobileRSS Pro: Kostet derzeit 2,39€ und ist mein Ersatz für NewsRack, das mir einfach viel zu langsam geworden ist. Die App muss ja schliesslich “nur” mit dem GoogleReader synchronisieren.

Zeile 5 sind die Standard-Apple-Apps…

Alle Links zum App-Store sind Afiliate-Links.

Seit dem Wochenende kursiert der Link zum Vuvuzela-Filter im Netz. Und von verschiedenen Seiten bekommt man als NurWM-Fussball-Fan Facebook-Gruppen (1, 2) und Spielgel-Artikel (1, 2, 3) um die Ohren geschmissen.

Wenn man sich dann aber diese wunderbare Statistikaufbereitung der Zeit ansieht, dann wird einem klar: Lärm ist sehr subjektiv.

Gut, ich muss es präzisieren: “nervend” ist subjektiv.
Denn wenn ich von Kommentatoren Satzfragmente wie “der Ex-Schweini ist jetzt Herr Schweinsteiger” höre, dann frage ich mich schon was denn so schlimm an ein bisschen Trötensound ist.

Da sehne ich mich doch gleich in die Zeit zurück in der ich zum einen mehr davon hatte und zum anderen PayTV noch richtig, richtig gut war. Ja genau, ich spreche von DF1. Ich war damals noch grosser Formel1-Fan -  da gab es noch echte Gewinner; Sport-Helden sozusagen. Und es gab eine wunderbare Funktion: Originalsound ohne Kommentator.

Tja, sowas gibt es ja leider nicht im öffentlich rechtlichen bzw. FreeTV. Und Sky (oder wie heisst das gerade?) ist definitiv keine Option mehr…

Am Sonntag habe ich daher meinen eigenen Filter ausprobiert; man beachte das Symbol rechts unten:

Ok, ein bisschen still war es dann ja schon…

Es handelt sich um eine Firefox-Erweiterung für Webentwickler, mit der sich durch eine Zoom-Funktion (bis 3200% Vergrößerung) pixelgenau Abstände messen und Farbwerte analysieren lassen.

Der PixelZoommer kann den Schritt über ein Bildbearbeitungsprogramm überflüssig machen, so dass bei der Entwicklung von Web-Projekten direkt im Browser Größen und Abstände analysiert und Farbwerte aufgenommen werden können.

Ich finde, es ist ein praktisches und übersichtliches Tool, das hilft Zeit zu sparen und etwas schnell zu prüfen.

Hinweis:
Derzeit ist es  auf der  offiziellen Mozilla-Seite noch als experimentelles Add-on gekennzeichnet. Bis zum finalen Status sind daher alle Benutzer zum Testen eingeladen.

Offizielle Seite mit genaueren Infos und Video-Demonstration:
http://matthiasschuetz.com/pixelzoomer/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