Ich habe Tickets bestellt. Für die Bundesgartenschau nächstes Jahr in Koblenz. Das rangiert von der Größenordnung her knapp über dem verkaufsoffenen Sonntag des lokalen Gärtners im März.

Die Links zur Ticketvorbestellung sind auf der BUGA-Website schnell gefunden. Ein Klick auf den Link führt einen auf eine völlig anders gestaltete Seite, nämlich die von Koblenz-Touristik. Das sollte man auf jeden Fall so umsetzen, wenn man den eigenen Shop plant. Sobald es wichtig wird sollte der Besucher ein komplett anderes Design präsentiert bekommen, wir wollen ja nicht, dass er sich womöglich noch heimisch fühlt!

Die Validierung des Formulars erfolgt auf einer neuen Seite, eine Vorabvalidierung mittels Javascript ist nicht vorgesehen und das Formular wird auch auf der Seite, auf der die Fehler dargestellt werden, nicht erneut eingeblendet, der Besucher muss auf den Zurück-Link klicken, um mit seinen Eingaben fortfahren oder diese berichtigen zu können. Auch das sollte unbedingt bei einer eigenen Umsetzung beachtet werden, denn nur ein beschäftigter Besucher verlässt die Seite nicht irgendwann einfach so aus Langeweile!

Die Bestellbestätigung listet dann alles, was man ausgewählt hat. Und alles, was man nicht ausgewählt hat. Mit Menge 0. Sollte man dringend so umsetzen! Nur so sieht der Kunde noch einmal, was man sonst alles im Angebot hat. Und vielleicht überlegt er es sich ja dann noch einmal und ordert das eine oder andere Produkt noch nach. Sehr zu empfehlen ist dies vor allem für Shops, die mehrere hundert Produkte führen.

Als einzige Zahlungsart bietet man Vorkasse an. Auch hiervon sollte man unter keinen Umständen abweichen! Kreditkartenzahlungen sind tierisch unsicher, alle paar Wochen liest man davon, dass irgendwelche Kartennummern abhanden gekommen sind. Außerdem können selbst diese platzen, von Lastschrift und unbezahlten Rechnung mit nachgelagerten Mahnverfahren mal ganz zu schweigen. Paypal und Konsorten sind ja eh modernes Voodoo. Und Nachnahme macht nur Arbeit. Von daher ist die Beschränkung auf Vorkasse sehr zu begrüßen, man hat das Geld absolut sicher und der Kunde wird nicht dadurch irritiert, dass er aus mehr als einer Zahlungsart auswählen müsste.

Die Auftragsbestätigung, die dann auch die Kontonummer enthält, kommt nach fünf Tagen per E-Mail. Ein sehr kluges Vorgehen. Schließlich will der Kunde ja vielleicht doch noch was aus dem restlichen Angebot haben, sonst wäre es ja sinnlos gewesen, das alles mitzuschicken. Fünf Tage sind übrigens ein guter Zeitraum. Wenn der Kunde sich bis dahin nicht gemeldet hat will er auch nichts dazu ordern, andererseits vermeiden wir aber erfolgreich, dass wir bei ihm in völlige Vergessenheit geraten würden.

Nach weiteren vier Tagen nach Zahlung ist dann schließlich auch die Ware beim Kunden. Auch hier ist der Zeitraum gut gewählt, in dieser Zeitspanne fragt normalerweise niemand nach, wo seine Ware bleibt (und erzeugt somit unnötige Arbeit) und eilig hat man es sowieso nicht, wenn man im Internet bestellt, schon gar nicht kurz vor Weihnachten.

Wem dieses eCommerce-Modell zusagt muss nur eine Kleinigkeit beachten: Es funktioniert nur bei Produkten, auf denen man online ein Monopol hat.

So, genug der guten Ratschläge, jetzt mal ernst:
Liebe BUGA, ihr macht online einen auf ganz dicke Hose, mit Facebook, WKW, Twitter und noch zig anderen Diensten. Und beim eCommerce wird dann geknausert, oder wie ist es zu verstehen, dass hier eine „Lösung“ am Start ist, die sich vor allem durch vorsintflutliche Technik und lange Wartezeiten (fast zwei Wochen zwischen Bestellung und Auslieferung eines theoretisch in unbegrenzter Menge vorrätigen Produkts!) auszeichnet?

Bitte laden Sie die Daten von unserem Server http://ich-kann-mir-keine-eigene-domain-leisten.dyndns.org.

Man hat ja so eine Vorahnung, wenn man sich Daten von einem ‘Server’ laden soll, der eine DynDNS-Adresse hat. Das Unternehmen kann sich offensichtlich keine eigene Domain leisten. Verständlich, bei den aktuellen Preisen muss man sich auch als erfolgreicher Geschäftsmann fragen, ob man nicht lieber doch eine Packung Kippen pro Jahr mehr kaufen sollte – oder eben eine Domain. Und vermutlich ist der ‘Server’ auch in Wahrheit der Laptop der Sekretärin, der hinter einer lausigen DSL-Leitung hängt.

Als ob das noch nicht genug wäre kommt es beim Aufruf der Domain richtig dick:

Safari kann die Seite „http://ich-kann-mir-keine-eigene-domain-leisten.dyndns.org/“ nicht öffnen, da Safari den Server „ich-kann-mir-keine-eigene-domain-leisten.dyndns.org“ nicht finden kann.

Eine schnelle Überprüfung bestätigt:

Ja, die Wirtschaftskrise erfordert harte Maßnahmen. Da muss man sich unter Umständen sogar von kostenlosen Dingen trennen.

Also Anruf bei der Firma, um ihr mitzuteilen, dass das Kartenhaus, welches man dort für businesskritische Anwendungen benutzt, in sich zusammengefallen ist und man es doch bitte wieder aufbauen möchte:

Unternehmen: „Bei uns funktioniert alles.“
Ich: „Ich kann nichtmal den Domainnamen auflösen. Egal welchen DNS-Server ich benutze.“
Unternehmen: „Sie müssen das in Ihrem Browser aufrufen. Nicht in Ihrem, was sagten Sie gleich, DNS. Das Problem muss bei Ihnen liegen.“

Ah ja. Get lost!

Das ganze hat aber auch einen großen Nachteil: Seit heute kann die ganze Welt sehen, was da für Turnbeutelvergesser, Vorwärtseinparker und andere Spießer hier leben. Und was sie aus meinem Deutschland gemacht haben.

Daher an alle Street-View-Kritiker: Schaut aus dem Fenster und ihr werdet feststellen, es ist Herbst. Ihr könnt eure Sommerloch-Diskussion also beruhigt wegpacken und euch sicher sein, dass ihr es geschafft habt, ein paar Funktionäre und Politiker der Lächerlichkeit preisgegeben zu haben, die gemeint haben, sie müssten mal was mehr oder minder Schlaues zu der Debatte beitragen.

Ich will Street View! Jetzt! Für ganz Deutschland!

Nachdem ich ja zuletzt, nicht zu unrecht, kritisiert wurde, dass ich einfach nur draufhauen würde, hier ein paar Beispiele:

Trotz modernster Technologie komplett suchmaschinenoptimiert

Was ist denn bitte das für eine Aussage? Wieso sollten sich modernste Technologie und Suchmaschinenoptimierung ausschließen? Und auch wenn ich’s nicht so mit SEO habe: Irgendwie will mir nicht einleuchten, warum ausgerechnet Startseite für einen Blumenhändler ein wichtiges Keyword sein soll:

<title>Startseite - Blumen Hoven - Onlineshop - Maiherzen und vieles mehr</title>

Und wie war das mit modernen Technologien?

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

Drag n’ Drop (Alle Bilder können in den Warenkorb ‘gezogen’ werden)
Zoom-Funktion (Gezoomte Bilder können verschoben)

Darauf hat die Welt gewartet. Die meisten Kunden sind schon mit der normalen Warenkorbfunktionalität und dem normalen Bilderzooom mehr oder weniger überfordert.

Der Onlineshop ist XHTML valide

Das lässt sich mit jedem Shop aus den Referenzen machen, ich nehme der Einfachheit halber mal den Demoshop:
380 Errors, 46 warning(s). Der Rekord liegt übrigens bei 812 Fehlern.

Wer sich den Quelltext ansieht sollte vorher sicherstellen, das er sitzt.
Ich wollte ja eigentlich ein paar Ausschnitte rausnehmen, aber allein ein Produkt auf der Kategorieseite erstreckt sich über 86 Zeilen und ist eine div-Suppe, die wirklich ihresgleichen sucht. Die komplette Semantik, die man einem solchen Quelltext mitgeben könnte, ist auf der Strecke geblieben. Im gesamten Shop ist mir kein einziges <p>-Tag über den Weg gelaufen. Überschriften ebenfalls nicht. Vernünftig ausgezeichnete Formulare sind Wunschdenken.

AJAX sollte da eingesetzt werden, wo es dem Besucher nachweislich das Leben einfacher macht und Klicks spart. Der Ajax-Onlineshop ist hingegen ein Gimmick-Monster, das keiner braucht, prinzipiell unwartbar ist und eigentlich nur das Ego der Autoren befriedigt, die damit bewiesen haben wollen, ‘das es geht’. Ja, tut es. Will man trotzdem nicht haben. Bei derartigen Verbrechen am Internet sollte man ernsthaft überlegen, ob man Leuten den Zugang zu Texteditoren verwehrt.

Kommentare mit nicht zuordenbaren E-Mail-Adressen werden nicht veröffentlicht.

…Blödsinn ist! Jetzt mal ernsthaft: Gambio, Commerce:SEO, Ecombase-Shop, xtc:Modified. Und mindestens zehn vergessen. Bei den ganzen Forks sollte man langsam echt mal aufpassen, dass man noch genug Messer im Haus hat. Ãœberall schießen die Abgabelungen mit Mini- bzw. Micro-Teams an Programmieren aus dem Boden, einen guten Frontend-Developer hat keiner und man wurschtelt lustig vor sich hin anstatt Kräfte zu bündeln – und nur bei Gambio und Ecombase ist Substanz hinter der ganzen Geschichte zu erkennen.

Ich glaub ja fast, ich mach einfach mal nen svn-tag aus meinem trunk, geb ihm nen lustigen Namen und publiziere meinen eigenen Fork. Dann hätten wir zumindest das Frontend-Problem mal im Griff.

Falls man es euch noch nicht gesagt hat: Das Netz wird mobil. Und nicht nur das, tippen auf kleinen Geräten ist nicht vergnügungssteuerpflichtig. Also tippt man so wenig wie möglich. Nur, um dann entnervt feststellen zu müssen, dass ihr eure Server nicht vernünftig konfigurieren könnt!

wyoming:~ msslovi0$ nslookup dwd.de
Server:         8.8.8.8
Address:        8.8.8.8#53
 
Non-authoritative answer:
*** Can't find dwd.de: No answer
 
wyoming:~ msslovi0$

Das kann doch nicht so schwer sein, dwd.de auf www.dwd.de weiterzuleiten, oder? Wenn’s an der Anleitung scheitern sollte, hier ist ein mod_rewrite-Tutorial für genau den Fall!

Dort gibt Hans-Peter Weber, seines Zeichens Vorstand der secupay AG, unter anderem folgendes zu Protokoll:
Unser Anspruch ist es, Zahlungen im Internet einfach, barrierefrei und trotzdem sicher für den Kunden und den Händler abzuwickeln.

Layouttabellen auf der Homepage, keine label-Elemente für die Formulare, keine Überschriften, keine Validitätsprüfung des Registrierungsformulars. In diesem Zusammenhang das Wort barrierefrei zu benutzen ist schon dreist.

Kommentare hier sind zu, bitte im Shopbetreiber-Blog kommentieren, macht ja keinen Sinn, dass die über’s halbe Internet verteilt sind.

united-domains veranstaltet aktuell einen kleinen Linkbait und schickt die große, laminierte Karte jedem, der noch bis Ende des Monats einen Link dorthin setzt (was hiermit geschehen wäre), anstatt für 29 Euro für lau.

Besser würde ich es ja aber finden, man bekäme die Karte als Bestandskunde einfach mal so. Aber man kann nicht alles haben. Das mit dem Pingback haben sie auch noch nicht so verstanden, ich werd’ dann also gleich noch ne Mail schicken müssen…

Tendenziell eher weniger. Ich möchte das integrieren, aber das ist irgendwie nur möglich, wenn man sich dabei selbst arm macht. Eine Testumgebung analog zur Paypal Sandbox fällt aus wegen gibt’s nicht. Die Folge ist eine halbseidene Integration, die, wenn sie mal genutzt wird, eigentlich immer Probleme macht. Nur: Debuggen kann man das halt nicht. Keine Ahnung, wie das eBay gemacht hat, aber da gibt’s wohl Kunden erster und zweiter Klasse.

Wobei ich mir eher wie ein Kunde der Holzstuhlklasse vorkomme. Denn wenn man den Merchant Support per E-Mail was fragt muss man sich in Geduld üben. Meine Anfrage ist auf jeden Fall seit drei Tagen offen und es gab noch nicht mal den gefürchteten Autoreply.

So wird das nichts, Moneybookers! Das ist schlicht und ergreifend ein Armutszeugnis. Sowohl technisch als auch was den Support angeht! Dann lieber Sofortüberweisung einbauen. Das funktioniert und die Akzeptanz ist ungefähr fünf mal so hoch wie bei Moneybookers.

[update]: Komisch, dass man immer erst bloggen muss. Moneybookers hat sich aber auf jeden Fall mittlerweile gemeldet und das, was am Telefon noch kategorisch verneint wurde (Testumgebung), gibt es sehr wohl und Moneybookers kann Zugänge auch in Testaccounts umwandeln. Da fragt man sich schon: Warum nicht gleich so und warum nicht schneller?

Naja, ganz so schnell ging es dann doch nicht. Sweetcron an und für sich ist flugs installiert, aber ich wollte dann doch etwas mehr. Unter anderem bringt das Standardtheme ‘Boxy’ keine Unterstützung für den last.fm-Feed mit und auch für normale Blogfeeds wie diesen hier oder den von Mister Baseball bedarf es manueller Anpassungen.

Und man will ja auch noch was dazulernen. Das Ganze ist daher ein Versuch, was mit mehr oder weniger fluiden Elementen im Webdesign geht und auch ein recht tiefer Griff in die CSS3-Kiste – seien es Schatten, Transparenzen oder irgendwelche Hintergrundeffekte. Auf alte Browser (sprich IE6) nehme ich dabei dann aber keine Rücksicht mehr. Wobei ich mich für eine sehr undezente Variante entschieden habe, der IE6-User sieht eine weiße Seite.

Plugins für Sweetcron braucht man, wenn man für bestimmte Feeds entweder bei der Ein- oder der Ausgabe mehr haben will als das bloße Einlesen der RSS-Datei, etwa die Anbindung an eine API wie ich es bei last.fm gemacht habe. Für die gängigsten Dienste sind bereits Plugins mit dabei, so unter anderem für flickr oder twitter. Letzteres habe ich dann gleich mal überarbeitet, @Replies (wieder) aktiviert und auch gleich noch Support für #hashtags eingebaut – vielleicht erwachen die ja irgendwann wieder zum Leben.

Ansonsten sind noch folgende APIs, Dienste und Goodies eingebunden, dazu in loser Folge später mehr:

• Google Maps API
• Feedburner API
• last.fm API
• InstaMapper
• Flaggenmarker von flags.blogpotato.de
• Google’s Wetter API
• Wettericons von golosiy

Unsere Kunden-Seite im Erzgebirge-Palast wurde immer unansehnlicher, gerade in Europa und den USA war die Menge an Google Markern eher ein unansehnlicher Klumpen von Markern in zartrosa.

Die Lösung

Gar nicht so einfach, aber nach einigem hin und her fiel die Entscheidung für Landesfahnen. Da aber mit den normalen Fahnen kein Blumentopf zu gewinnen war mussten neue her und letztendlich hatten diese die selbe Form wie der normale Google-Marker. Und versprochen ist versprochen: Ich hab die Tage mal meine Flaggen-Seite generalüberholt und jetzt auch die Flaggen in Form von Google-Markern hinzugefügt.

Darüber hinaus gibt es zu vielen Ländern, primär französischen Ãœberseeterritorien, jetzt auch alternative Fahnen zur Tricolore – für alle Sets. Und die letzten Änderungen bei diversen Staaten wurden darüber hinaus auch eingearbeitet.

Ich meine, ich hab schonmal mobiles Webdesign gemacht, sogar für Geld, als das ganze noch WAP hieß und eher schrottig war. Aber das neue mobile Webdesign ist vielversprechend und Jens hat zwei interessante Bücher zum Thema vorgestellt, die ich mir unbedingt auf meinen Stapel noch zu lesender Bücher legen sollte. Aber obendrauf. Mobile Web Development als englisches und Mobiles Webdesign: Webseiten für mobile Endgeräte als das erste deutsches Buch zu dem Thema (von Webkraut Manuel Bieh).

Und dann hab ich letztlich noch ein interessantes Buch ausgegraben, das in Zusammenhang mit dem iPhone und dessen Positionsbestimmungsmöglichkeiten auch sehr interessant zu sein scheint: Mobile Fahrplanauskunft: Grundlagen, Konzepte und Methoden mit GPS, J2ME und Web Services. Fahrplanauskunft und deren programmiertechnische Umsetzung hat mich schon immer faszieniert. Aber dazu müsste ich mich erstmal in XCode einarbeiten.

Wie dem auch sei, viele interessante Themen für die nächste Zeit.

So wird das mal nichts. Von wegen Rekord und so.

Was ist daran so schwer zu verstehen? Tabellenfrei heißt nicht zwangsläufig, dass man die überall rausmachen muss, sondern nur da, wo sie rein layouttechnischen Charakter haben. Typisches Beispiel für eine Tabelle: Der Warenkorb.
commerce:SEO, dass damit wirbt, ein tabellenfreier, SEO-optimierter Shop zu sein, hat natürlich auch dort die Tabellen eliminiert. Und ein Blick in den Quelltext der Startseite zeigt auch schreckliches:

<div align="center">
  <div id="page_container">
    <div id="page_inner_container">
      <div id="innerBox">
        <div id="outerContainer">
          <div id="innerContainer">
            <div id="wrap">
              <div id="middle">
                <!-- Hauptteil -->
                  <div class="mainbody">
                    [...]
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Will man nicht haben. Wirklich nicht. Für die Seite, die den Shop bewirbt, ein tabellenbasiertes Joomla-Template zu nutzen, zeugt auch von Weitblick.

• Es sieht sehr unordentlich aus, man muss dreimal hinschauen, um Orte ausmachen zu können
• Man kann die Blogs nicht direkt anklicken, sondern muss den Blognamen dann an Google verfüttern, wenn dieser nicht zufällig identisch mit der Domain ist

Warum macht man das ganze nicht mit beispielsweise Google Maps? Man könnte reinzoomen, über das Infofenster nützliche Informationen wie etwa die URL des Blogs anzeigen und so weiter und so fort. Und mit etwas Aufwand kann man das ganze auch optisch hübsch machen…

via aptgetupdate.de

Zum Heulen war mir dann aber zu Mute, als ich mir die Homepages der Kandidaten von CSU und SPD angesehen habe:
Verpöntes Tabellenlayout bei Ralf Völkl von der SPD. Optisch genauso schrecklich wie der Code selbst, im Impressum eine freenet-Adresse. Bei ‘Politische Aktivitäten’ landet man ohne Vorwarnung beim SPD-Stadtverband, dessen Homepage optisch dummerweise genauso aussieht – sieht man mal vom Logo im Kopf ab. Nur dass einen der Klick auf ‘Home’ eben nicht mehr zurück auf die Homepage von Völkl bringt. Früher, als das Netz noch jung war, hatte die SPD mal einen Web-Baukasten, um solchen stümperhaften Auftritten, die ja von der Außenwirkung her auf die ganze Partei zurückfallen, entgegenzuwirken. Den gibt es auch heute noch unter internetbaukasten.spd.de – leider hat sich auch dessen Codestruktur größtenteils erfolgreich gegen die Entwicklungen der letzten Jahre zur Wehr gesetzt.

Weit übler sieht es aber bei oben schon angesprochenem Abgewatschten aus. Joachim Doppel präsentiert sich auf einem schlecht komprimierten JPEG grimmig und bringt im Jahr 2008 seit zehn Jahren überholte Technologien wie Frames an den Start. Ähnlich antiquiert erscheint auch das Wahlprogramm, in dem das Internet, etwa in Form einer breitbandigen Anbindung der Stadt an das Netz der Netze, mit keinem Wort erwähnt wird. Mittlerweile ist die Homepage ebenso aus dem Netz verschwunden wie Doppel aus dem politischen Leben Nordoberfrankens. Und das ist gut so. Und das (Ab)Wahlergebnis überrascht nicht mehr wirklich.

Wolfgang Beiergrößlein von den Freien Wählern hat keine eigene Kandidatenhomepage. Wir haben uns für die Baseball-EM 2001 Gedanken gemacht, ob es sinnvoll ist, eine eigene Homepage dafür ins Netz zu stellen – und haben das damals dann auch getan. 2008 sollte sich eine solche Frage aber definitiv erledigt haben!

Wie bitte sollen Leute, die das Internet nicht begreifen und darüber hinaus offensichtlich die falsche Agentur haben, die sie berät, eine Stadt von über 17.000 Einwohnern in die Zukunft führen?

Aber die nächste Generation steht zum Glück schon Gewehr bei Fuß und zeigt wie es geht: Mit einem frischen Internetauftritt präsentiert sich der diesmal im Rennen um die Bürgermeisterkandidatur noch unterlegene Bernd Liebhardt im Internet. Zwar ist auch hier, politisch wie webtechnisch, noch nicht alles Gold, was glänzt. Aber die Homepage legt die Meßlatte so hoch, dass sie von den anderen nur erreichbar wäre, finge eine Agentur, die unter Web Development mehr versteht als das zielgerichtete Mausschubsen durch die Frontpage-Oberfläche, nochmal ganz von vorne an. Gleiches gilt für das politische Programm. Schade, dass die Stadt darauf sechs Jahre wird warten müssen.

Die in Ruby on Rails realisierte Tumblelog-Software sieht nett aus, lässt sich schnell in Betrieb nehmen (kein Download, das Hosting übernimmt Soup), erlaubt dennoch eine eigene Domain und die Idee eines Tumblelogs mit flickr und Mister Wong-Integration, in das man lustig kleine Sachen reinstopft, gefällt mir (was nicht heißt, dass ich meine Ansichten zu Twitter geändert hätte, aber das ist ja auch kein Tumblelog, sondern Bullshit).
Also mal eben registriert, die Farben auf orange geändert und – was ist denn das? Leider ist beim Quelltext der Name Programm: Tagsuppe, dass einem schlecht wird. Danke. Ohne mich. Ich hab mir jetzt mal Chyrp ernsthaft angesehen. Erscheint mir das bessere Soup zu sein.

[tags]soup.io, tumblelog, chyrp, webstandards[/tags]

Die Lösung von Florian Schimanke gefiel mir eigentlich schon recht gut, minus dem manuellen Aufwand, Icons und HTML-Seiten erstellen zu müssen. Für beides musste also eine Lösung her. Die Sache mit der Weiterleitung lässt sich mittels php ja leicht lösen, indem man die Ziel-Seite einfach als Parameter übergibt. Icons für die Seiten gibt es prinzipiell auch – die Favicons nämlich. Die sind aber weder png noch in der passenden Größe. Andreas Demmer hat aber auf seiner Website ein nettes Script, welches zu externen Links die Favicons raussucht und hinter dem Link als PNG einblendet. Von der Webkrauts-Liste weiß ich, dass er das mit ImageMagick macht.

Also alles in einen Topf geworfen und herausgekommen ist fav-clip.com.

URL eingeben, Formular absenden, aus dem Favicon der Seite wird ein iPhone-taugliches PNG erzeugt, bookmarken, fertig. Technisch bedingt läuft ein Aufruf des Bookmarks über fav-clip.com, das nur zur Info für alle, die gleich wieder ‘Datenschutz!’ schreien. Ein Logging dieser Anfragen findet über das reine Server-Log hinaus nicht statt!

Known Issues:

• Weiterleitungen werden derzeit nicht berücksichtigt. Es ist der URL der Zielseite anzugeben, damit es funktioniert.
• Das und ein nicht vorhandenes Icon resultiert in einem schwarzen Icon!
• Es wird versucht, die Hintergrundfarbe des Icons zu ermitteln und den Canvas passend zu setzen, was nicht immer zuverlässig klappt.
• Ich hab vorher noch keine Seite für iPhone/iPod touch gemacht. Das sieht also alles sehr alpha aus, was es auch ist.

Gewolltes Verhalten:

• Evtl. vorhandene Apple-Touch-Icons der Seite werden ignoriert.

Sieht dann übrigens so aus: Screenshot.

FOCUS und eBay sind automatisch generiert. Hatte ich eigentlich schon erwähnt, dass es doof ist, die Spiegelreflex rausholen zu müssen, um ‘Screenshots’ vom touch zu machen?

Verbesserungsvorschläge, Bugs und alles weitere bitte in die Kommentare.

[tags]iphone, ipod, ipod touch, apple-touch-icon, apple-touch-icon.png, favicon, fav-clip.com, fav-clip[/tags]

Im iPhone Dev Center erläutert Apple, wie man hier ein eigenes Icon vorsehen kann. Es gibt zwei Möglichkeiten:

1. Ãœber ein Metatag im Headbereich der Seite

    <link rel="apple-touch-icon" href="/customIcon.png"/>

2. Indem man eine Datei mit dem Namen apple-touch-icon.png in den Root-Folder der Webpräsenz legt

FÃœr beide Varianten gilt: Das Icon sollte genau 57×57 Pixel groß sein – andernfalls skaliert Safari sich das ganze passend zurecht. Den Glas-Effekt legt ebenfalls Safari drüber und schneidet bei der Gelegenheit etwas vom eigentlichen Bild ab, wodurch man für ein Logo die 57 Pixel nicht vollends ausreizen sollte. Hier haben sich, nach einigen Experimenten, 54 Pixel für das Logo bei einer Arbeitsfläche von 57 Pixeln als brauchbar erwiesen, während andernorts von gar nur 45 Pixeln als ‘sichere Größe’ gesprochen wird. Auch sollte das Bild keinen transparenten Hintergrund haben, der wird andernfalls nämlich schwarz.

via Daring Fireball

[tags]icon, apple-touch-icon, favicon, apple, ipod touch, iphone[/tags]

Und Kunde von Yahoo! zu sein heißt, eine Black Box zu besitzen, der man den Namen SpamGuard gegeben hat und die offensichtlich nach dem Zufallsprinzip Mails in den Spamfolder sortiert. Und Kunden von Yahoo! scheinen von diesem Spamfolder darüber hinaus nichts zu wissen.

Versucht man das Verhalten des Spamfilters zu eruieren wird man Zeuge des Zufallsprinzips: Beim Versand von zehn gleichlautenden E-Mails von zehn verschiedenen Rechnern landen fünf davon im Spamfolder, fünf nicht. Warum das so ist lässt sich anhand der Header-Daten nicht ermitteln. Yahoo! hat es nicht nötig, dort irgendwelche Gründe, die sie dazu veranlasst haben, die Mail als Spam anzusehen, reinzuschreiben. Das ist dann die Black Box.

Konfrontiert man den deutschen Yahoo!-Support mit diesem Problem bekommt man erstmal einen Textbaustein, im Anschluß daran etwas allgemeines Blabla zu SpamGuard, der ja so toll selbstlernend sei, geht aber der eigentlichen Fragestellung, warum fünf der zehn Mails Spam waren, die anderen fünf aber nicht, konsequent aus dem Weg. So konsequent, dass man seit 22. Dezember auf Tauchstation ist und nicht mal mehr Anstalten macht, mit Textbausteinen auf Mails zu antworten. Yahoo! hat’s halt nicht nötig…

[tags]yahoo, spamguard, policy, spam, support[/tags]

[tags]chyrp, weblog, tumblelog, software, php, mysql[/tags]

Nachdem gestern aber keine Zeit war, das zu laden, dachte ich mir, das mache ich heute morgen. Klassischer Fall von ‘Denkste’:

Sorry, aber in welcher Zeit leben wir eigentlich? Telefonflatrate, Handyflatrate, DSL-Flatrate, aber die Unterstützung von Macbay/macnews.de für einen deutschen Shareware-Entwickler hört da auf, wo das Trafficlimit, das in der Preisübersicht nicht einmal erwähnt ist, erreicht ist? Klar dürfte es einen gewissen Ansturm gegeben haben, nachdem, um nur einige zu nennen, TUAW, MacNotes, Macuser.com, Daring Fireball und eben macnews.de darüber berichtet haben. Aber das ist ein Peak, der in weniger als einer Woche wieder deutlich abflauen dürfte!

Aber es gibt ja zum Glück eine Hand voll Mirror-Server. Leider ist die Liste derzeit auch nicht erreichbar. Daher für alle, die iCab laden wollen, an dieser Stelle die Mirror-Server:

TU Clausthal, Deutschland (HTTP, FTP)
TU Wien, Österreich (HTTP, FTP)
The AusMac Archive, Australien (FTP)

[tags]icab, browser, 4.0, download, mirror, traffic[/tags]

Das Handy klingelt (respektive vibriert):

Ich

Slovig

Sie

Hallo Herr Solvig, mein Name ist Name der Redaktion bekannt von T-Mobile. Ich würde gerne die Datenschutzerklärung mit Ihnen durchgehen

Ich

Wenn Sie von T-Mobile sind, dann haben Sie doch sicher auch meinen richtigen Namen

Sie

Herr Solvig

Ich

Nein

Sie

Herr Solvig, ich will doch eigentlich…

Ich

…was verkaufen.

Sie

Nein. Sie hören mir gar nicht richtig zu!

Ich

Doch, sie wollen irgendeine Datenschutzerklärung mit mir durchgehen, können aber meinen Namen nicht richtig ablesen und hier rufen dauernd Leute an, die mit unterdrückter Rufnummer irgendwas verkaufen wollen!

Sie

Dann sagen Sie mir doch, wie es sich ausspricht

Ich

Lesen Sie es doch einfach von links nach rechts vor

Sie

Ich glaube, wir beenden das Gespräch hier lieber

Ich

Soll mir recht sein

Kurzer Web-Exkurs: Das obige ist als Definitionsliste ausgezeichnet. Ich teile die Meinung von Mark Norman Francis nämlich überhaupt nicht und nutze Definitionslisten gerne und immer dort, wo die limitierten Möglichkeiten von (X)HTML nichts vorsehen, mit dem man irgendwie einen Bezug zwischen zwei Sachen herstellen könnte. Bezeichnend auch für Francis, dass er auf eben diesen Einwand in den Kommentaren nicht einmal Anstalten macht, Alternativen aufzuzeigen. Muss wohl daran liegen, dass es keine gibt…

Weiter im Text. Kontrolle muss sein, also kurz bei der Kundenhotline von T-Mobile angerufen. Und die Call-Center-Mitarbeiterin erstmal gebeten, meinen Nachnamen vorzulesen. Hat geklappt. Und ein Kontakt von irgendeinem Mitarbeiter wäre auch nicht vermerkt.

Bei der Gelegenheit habe ich dann auch noch erfahren, dass ich mir ein neues Endgerät aussuchen darf. Ich werde meine Entscheidung aber noch mal überdenken müssen. Denn wenn ich ein DVB-H-fähiges Handy holen sollte und diese TotgeburtTechnik durch den Vorstoß von ARD und ZDF tatsächlich auch in Deutschland nutzbar wird, steht als nächstes die GEZ auf der Matte. Und denen ist es wurscht, ob man das nutzt oder nicht. Endgerät vorhalten == zahlen. Danke, verzichte. Oder anders ausgedrückt: Ich hole mir ein Motorola F3. Kein Radio (für das ich sowieso zahle), kein Fernsehen (das ich nicht habe und auch nicht brauche), einfach nur Telefon und SMS.

[tags]t-mobile, dvb-h, motorola, fernsehen, gez[/tags]

Derweil ist 3.04 SP2.2 noch nicht dem Betastadium entwachsen, aber es ist mal anzunehmen, dass 3.1 einfach eine umgelabelte 3.04 SP2.2 sein wird. Damit steht zu befürchten, dass sich Template-technisch nicht wirklich etwas verbessert, denn das mit der ersten SP2.2-Beta gelieferte tabellenlose Template ist eher ein schlechter Witz in Bezug auf Semantik gewesen, ähnlich denen, die man vor einem Jahr im Shop verkauft hat.

Es gibt einige sinnvolle Features in 3.04 SP2.23.1, darunter ein Plugin-Manager und die Möglichkeit, Multistores anzulegen. Schaut man sich die Screenshots im Beta-Forum an, dann wohl darüber hinaus noch jede Menge Eye-Candy im Admin-Bereich. Gerade aber mit Multistore und Plugin-Manager dürfte eines klar sein: Ein Update von 3.04 SP2.1 auf 3.04 SP2.23.1 ist selbst bei einem nur minimal modifizierten Shop eher unmöglich. Selbst wenn man alle Änderungen gut dokumentiert hat dürften die Code-Änderungen so weitreichend sein, dass das keinen Spaß machen wird.

Bleibt zu hoffen, dass man Altlasten beseitigt hat, Markup im php-Code beispielsweise, was das entfernen von Layouttabellen zur wahren Herausforderung gemacht hat, oder die inkonsequente Implementierung der Sprachen Рneben den im Beitrag angesprochenen Punkten sind in 3.04 SP2.1 unter anderem die Betreffzeilen der E-Mails, welche der Shop verschickt, nur in einer Sprache m̦glich.

[tags]xt:c, xt:commerce, xtcommerce, beta, 3.04 SP2.2, 3.1, multishop, bugs[/tags]

Nachdem sich in der Liste der Beitragsschreiber einige zumindest für mich eher unbekannte Namen finden, wollte ich dann doch mal wissen, wie man eigentlich Webkraut wird. Die Frage konnte mir aber auch die Homepage nicht beantworten…

[tags]web, html, webkraut, mitgliedschaft[/tags]

Irgendwie einen Monat zu früh ist David derweil mit den Wünschen für 2008 dran, macht man doch so was eher, wenn es auf das Jahresende zugeht. Aber, da Weihnachten ja vor der Tür steht, hier mein Wunschzettel, vielleicht bringt der Nikolaus ja das ein oder andere davon.

1. Fokusieren auf den User
   Kam auch ganz zum Schluß im Podcast zur Sprache, aber man kann es nicht oft genug sagen:
   Die Besucher unserer Seite müssen das Ziel unserer Arbeit sein. Nicht Google. Über letzteres können wir genau dann reden, wenn Google uns ein Produkt abgekauft oder einmal bei uns im Blog kommentiert hat. Also nie.
2. Mehr Menschen mit der Botschaft des semantischen HTMLs erreichen
   Standardkonformität ist ein Weg dorthin, aber ich kann dem Validator auch eine standardkonforme Frame- oder Tabellenseite vorsetzen. Und nur, weil man den Tabellenwust in eine Div-Suppe umstrickt wird nichts besser, nur anders.
   [update]: Stefan Nitzsche bringt es im aktuellen Beitrag zum Webkrauts-Adventskalender sehr schön auf den Punkt: Validität und Semantik
3. Internet Explorer 8
   Hoffentlich. Mit weniger Bugs und mehr Unterstützung aktueller Techniken, was direkt zu Punkt vier führt…
4. Mehr CSS3-Support
   CSS3 macht das Leben in so vielen Bereichen einfacher und es wäre wünschenswert, wenn bis Ende 2008 eine signifikante Anzahl an Usern Browser benutzt, die CSS3 zumindest in weiten Teilen beherrschen.
5. IE6-Marktanteil auf unter 5%
   Nicht sofort, aber bitte bis Ende des Jahres. Auch das würde so vieles einfacher machen…

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IBAF</title>
</meta></head>
 
<frameset rows="*,1" frameborder="no" border="0" framespacing="0">
  <frame src="http://s29178.gridserver.com/" name="mainFrame">
  </frame><frame src="index.html" name="bottomFrame" scrolling="No" noresize="noresize">
</frame></frameset>
<noframes><body>
</body></noframes>
</html>

Da fällt mir nichts mehr zu ein. Da sind die deutschen Fußballvereine ja richtige Waisenknaben dagegen. Hinter dem Frameset geht es übrigens keinen Deut besser weiter.

index.html ist im übrigen das Framset, es referenziert also auf sich selbst. IIS scheint aber schlau genug zu sein, sich da nicht in einer Endlosschleife zu verrennen.

Mir gefällt das neue Layout. Sowohl optisch als auch vom Code her (sieht man mal von dem ganzen nicht ausgelagerten CSS ab…). Ich hätte das nur gerne auch in meinem Haus-und-Hof-Browser Safari. Aber das Zurücksetzen zu Hause hat nur den Effekt gehabt, dass ich ihm jetzt bei jedem Passwortformular erneut verklickern muss, ob ich das Passwort speichern will. Keine Ahnung, nach welchen Kriterien Amazon welche Version ausliefert…

Mal zum Geldausgeben vormerken. Vorher sollte ich mich aber mal durch die übrigen Bücher, die hier ungelesen rumliegen, durcharbeiten…

Zumindest beim Intro macht die Neue Boden gut. Kein Flash-Gezappel mehr, man landet direkt auf der Startseite. Die kommt in Gelb, Weiß und, tja, Grün daher. Und gerade letzteres passt irgendwie gar nicht dazu. Was das mit dem Frame soll erschließt sich einem hingegen nicht. Ein Verband sollte genug Geld haben, sich eine vernünftig konfigurierbare Domain leisten zu können. Aber zumindest hat man an einen entsprechenden Noframes-Bereich gedacht.

Auch sonst wirkt der Aufbau durchdachter, die Navigation ist beispielsweise als Liste ausgezeichnet. Ob sie auch richtig verschachtelt lässt sich nicht ermitteln, die Informationen sind noch recht dünn und ob da noch Unterpunkte sind, lässt sich nicht sagen. Es hagelt nämlich direkt Javascript-Fehler und das, wo in Zeiten von Suckerfish eben genau das für Dropdown-Menüs doch eigentlich unnötig ist. Die Navigation steckt dann unnötigerweise in einer einzeiligen Tabelle mit genau einer Zelle. Ob das Joomla zuzuschreiben ist, keine Ahnung. Aber ich weiß schon, warum ich mit diesem CMS einfach nicht warm werde. Großer Pluspunkt der Seite übrigens, dass man nicht 10km gegen den Wind erkennt, dass es eine auf Joomla basierende Website ist, wie das bei vielen anderen der Fall ist…

Auch im weiteren Verlauf sind immer wieder Tabellen zu finden, wo man sie nicht erwarten würde (richtige Tabellen und Spielergebnisse sucht man indes vergeblich, ganz unten rechts findet sich dann doch ein Hinweis auf Baseball-Score – wenn man schon einen externen Dienst dafür nutzt sollte man prominenter darauf hinweisen) und die Sache mit den Listen ist alles andere als konsequent umgesetzt. So sind beispielsweise die Termine auch eine unsortierte Liste, für diesen Fall wäre aber eine Definitionsliste wesentlich besser geeignet. Und eine aussagekräftigere Formatierung. Links, die man nur daran erkennt, dass sich irgendwann der Mauszeiger verändert, sind schlicht und ergreifend unbrauchbar. Genauso wie graue oder weiße Schrift auf grauem Hintergrund. Andere Navigationen kommen hingegen einfach als HTML-Klumpen daher. Im Fließtext stechen Links dann fast schon wieder zu stark heraus, Schriftart und Laufweite sind vom eigentlichen Text deutlich abweichend.

Überschriften sucht man in den Newsartikeln ebenso vergeblich wie Absätze. Dafür gibt es reichlich direkt in den Quelltext geschriebenes Javascript und hin und wieder Inline-CSS. Den Validator auf die Seite loszulassen macht fast keinen Sinn, denn obwohl vom Doctype her HTML 4 ausgeliefert wird, tummeln sich im Source zahlreiche XHTML-Schreibweisen.

Alles in allem eine tief liegende Messlatte für die noch ausstehenden Reaunches von BBSV und SWBSV (beide ca. sechs Jahre alt).

Bislang konnte man nur mit Hilfe eines API-Keys und entsprechenden Javascript-Kenntnissen Karten einbinden, ab sofort geht das ganz einfach über ein Codeschnippsel, welches Google fertig aufbereitet nach einem Klick auf ‘URL zu dieser Seite’ anbietet.

Die Karte merkt sich die Einstellungen des Betrachters, über das Anpassen kann man darüber hinaus auch noch den genauen Ausschnitt, das Zoomlevel und die Größe der Karte anpassen.

Größere Kartenansicht

Damit dürften Google Maps in Beiträgen in Kürze ähnlich stark aus dem (Blog-)Boden schießen wie Videos.

Unschön an der ganzen Geschichte ist, dass Google den Link zur größeren Ansicht mit Inline-CSS zwanghaft blau formatiert…

Früher hab ich sowas ähnliches benutzt wie das, was 1&1 in seinen FAQ als einfaches backup beschreibt. Das trägt aber die Bezeichnung ‘simple’ nicht zu unrecht. Das ganze eignet sich nur, wenn das Backupvolumen bei einigen 100MB pro Tag legt, zumal hier jedes Mal ein Vollbackup generiert wird. Daher habe ich mittlerweile eine rsync-Implementation am Start.

Gerne hätte ich das ganze dann noch einmal vom Backup-Server auf mein heimisches RAID gespiegelt (wie schon gesagt, Paranoia), aber durch die Vielzahl an Dateien hat der rsync am Mac mini eine Laufzeit jenseits von gut und böse.
Daher habe ich ein Auge auf Amazon S3 geworfen: Günstiger Online-Speicherplatz und die Sorge, dass die Daten morgen noch da sind, hat jemand, der dafür jeden Monat einen Scheck vom Bücherversender bekommt. Also flugs einen Account eingerichtet, nach einem Tool gesucht, dass über die Kommandozeile den Speicherplatz ähnlich rsync beschicken kann, in s3sync auch gefunden und mal eben eine erste Testdatei an Amazon geschickt.

Das klappt auch wunderbar. Dummerweise ist die Datei leer, wenn sie online ist. Sagt zumindest der S3 Browser. Und lädt demzufolge auch nur ein leeres File auf die Platte zurück. Nicht so ganz im Sinne des Erfinders. Das ebenfalls im Paket befindliche s3cmd löst aber das Problem. Testweise habe ich mal ein Päckchen mit 4GB gemacht und hochgeladen. Und zwar nicht von meinem DSL-Anschluss aus, sondern direkt von einem breitbandigst angebundenen Server an einem deutschen Standort, so, wie es idealerweise zukünftig auch automatisch laufen sollte. Ich habe den Upload um 9:45 gestartet. Fertig war dann das ganze um 19:45! Da fällt mir echt nichts mehr ein. In der Zeit hätte ich das auch auf eine CD brennen und mit einem Linienflug irgendwo auf einem Server in den Staaten deponieren können. Es ist mir ein Rästel, was sich Amazon bei der Anbindung gedacht haben mag…

Allerdings sind bei der Filemantgroup zwei Unterschiede festzustellen: button hat keine height-Angabe und der rechte Teil der Tür ist, anders als bei den ALA Sliding Doors, der Kurze.

Demo

Der Hover-Effekt funktioniert im IE6 nicht, da der die Pseudoklasse :hover nur auf a-Elemente anwenden kann. Aber mal ehrlich: Who cares?

Eine Frage, die, um genau zu sein am Nikolaustag des Jahres 1997, also vor mittlerweile fast zehn Jahren, eigentlich hinreichend und erschöpfend in vier Panels beantwortet wurde.

Deshalb steht rechts auch Webdeveloper.

Aber um dem ganzen noch etwas mehr Substanz zu geben: Ich mache schlicht und ergreifend mehr, als Pixel durch die Gegend zu schieben (was mein Verständnis des Begriffs ‘Designer’ ist). Ich arbeite mit php und Perl, gelegentlich auch mit Shell-Scripten, schreibe Markup und CSS und manchmal betätige selbst ich mich auch als Pixelschubser. Darin bin ich aber nicht sonderlich gut.

[tags]webdesigner, webdeveloper, web designer, web developer, php, perl, markup, css[/tags]

Es verrät auf einen Blick, wie groß welches Element wirklich wird und setzt Paddings und Margins farblich gesondert ab. Kann Firebug auch, aber XRAY spart den Griff zum Taschenrechner. Bis auf einen kleinen Schönheitsfehler: Borders lässt es im mac-affinen halbtransparenten Fenster leider unter den Tisch fallen, zählt sie aber, korrekterweise, bei der Gesamtbreite mit dazu, wie im Screenshot schön zu sehen.

pingdom bin ich gerade am testen, nachdem zumindest mit Firefox die Registrierung funktioniert hat. Für 70% weniger scheint mir das Tool dann auch attraktiv genug…

Wenn ich so spontan Bedarf an einer neuen Stelle hätte, ich würde mich wohl eher bei Jog bewerben. Dessen Ausschreibung finde ich wesentlich ansprechender als das doch recht steife 3st-Blabla. Problem daran: Ich spiele kein WoW und Herford liegt vielleicht nicht am Ende der Welt, aber auf jeden Fall kurz davor. Ansonsten genau meine Kragenweite.
Bei Gerrit ist die initiale Herausforderung sicherlich größer oder anders ausgedrückt: Schwieriges Erbe, das ein Nachfolger da antritt. Eigentlich müsste ich mich ja bewerben, denn im Zuge immer stärkerer Kürzungen bei der Pendlerpauschale kann es in Zukunft eigentlich nur von Vorteil sein, in der Stadt zu arbeiten, in der man lebt. Aber da sowohl mein Design- als auch mein Typografieverständnis eher rudimentär ausgebildet sind, lassen wir das lieber.

[tags]job, webdev, web[/tags]

Dazu fallen mir spontan zwei Sachen ein:

• Auch durch eine Ausweitung der Vertriebskanäle wird man ein in der derzeitigen Form auf lange Sicht totes Medium nicht retten können.
• Solange ‘Fernsehen’ in Deutschland immer noch gleichbedeutend damit ist, dass man der staatlich gedeckten Mafia einen Obulus abdrücken muss, um (dann auf einem mickrigen 2-Zoll-Display) dämliche 9Live-Shows konsumieren zu dürfen, wird sich das schon mal gar nicht durchsetzen.

[tags]gez, dvb-h, fernsehen, tv[/tags]

Das Template selbst kommt im schlichten Grau. Auch wenn Björn dieses nur als Grundlage für die eigene Arbeit ansieht, ein Antialias hätte dem Schriftzug ‘Your Logo here’ trotzdem gut zu Gesicht gestanden. Die Buttons kommen im Web 2.0-Look, ein Photoshop-Vorlage wäre aber zum schnellen Ändern von Buttontexten hilfreich. Es gibt aber zwei verschiedene Arten Buttons, nämlich gelbe und schwarze. Zusammen mit den diversen nicht veränderten Originaldateien, wie etwa den hässlichen Kundengruppe-Icons oder den Bewertungssternen, trägt das nicht unbedingt zur Ãœbersichtlichkeit bei.

Ãœbersichtlich gestaltet sich hingegen der Quelltext. Leider gilt aber für die Boxüberschriften das bereits zum RedRiver-Template gesagte: Die Wahrscheinlichkeit, dass es sich dabei um die wichtigsten Ãœberschriften auf der Seite handelt und daher der Einsatz von h1 gerechtfertigt ist, dürfte gegen null gehen. Diese wäre für den eigentlichen Header, der das oben angesprochene Bild enthält, wesentlich besser geeignet und man hätte sich einen div-Container gespart. Außerdem ist es unter SEO-Gesichtspunkten sicherlich sinnvoller, dass Bild als Hintergrundbild einzubinden und den Text beispielsweise mit der Phark-Methode ‘verschwinden’ zu lassen – wenn es denn überhaupt unbedingt ein Bild im Header sein muss. Auch sollte der anklickbar sein. Meine Hand neigt stark dazu, den Schriftzug zu klicken, um zurück auf die Startseite zu kommen, was derzeit nicht von Erfolg gekrönt ist.

An den Header schließt sich die als Liste realisierte Navigation an. Allerdings ist nicht schlüssig, warum die Liste selbst noch einmal in einen div-Container verpackt und für was das leere <a id="navigation" name="navigation"></a>-Element. Wenn es da nur darum geht eine Sprungmarke zu setzen, das lässt sich auch nur mit einer ID erreichen, was alle modernen Browser mittlerweile als Anker nutzen können. Auch sonst finden sich innerhalb der Anchor-Tags noch einmal span-Elemente, die nicht nur auf den ersten Blick überflüssig erscheinen.

Im Hauptbereich ist die Breacrumb-Navigation keine Liste, ein Umstand, der sicherlich der Tatsache, dass sich das Markup hierfür in den php-Dateien findet, geschuldet ist. Die Kategorien werden als korrekt verschachtelte Liste ausgegeben, der dafür erforderliche php-Code ist noch um ein gutes Stück kompakter und aufgeräumter als meine Adaption von gunnART’s Anpassungen. Das CSS hingegen kaskadiert nicht, wodurch Einrückungen und auch hover-Effekte nur bis zur vierten Ebene vorhanden sind, was sich bei den Einrückungen in Hinblick auf die Ãœbersichtlichkeit durchaus argumentieren lässt, beim Ãœberfahren mit der Maus oder beim Auswählen einer Kategorie ab der fünften Ebene sollte dieser Zustand aber ersichtlich werden. Allerdings muss man vielleicht auch noch mal ans Reißbrett und die Shopstruktur überdenken, benötigt man tatsächlich derart tief verschachtelte Kategorien.

Zu den Boxen selbst habe ich ja schon angemerkt, dass die Überschrift erster Ordnung eher fehl am Platz ist. Auffällig ist auch, dass bei allen Boxen die Überschrift außerhalb eines div-Containers steht, während dieser selbst mitunter nur ein weiteres Blocklevel-Element, etwa eine unsortierte Liste, enthält. Da es kein Element gibt, mit dem sich die gesamte Box ansprechen lässt und die Einzelelemente auch nicht durch ID referenzierbar sind ist ein einfaches Ausblenden oder Umgruppieren nur über das Markup, nicht jedoch über CSS möglich. Als Beispiels mag hier der Erzgebirge-Palast dienen:

<div class="box" id="boxContent">
	<h4>Mehr &uuml;ber...</h4>
	<ul>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/3/content/AGB" class="normal">AGB</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/1/content/Versandinformationen" class="normal">Versandinformationen</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/10/content/Zahlungsmoeglichkeiten" class="normal">Zahlungsmöglichkeiten</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/11/content/Widerrufsrecht" class="normal">Widerrufsrecht</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/7/content/Kontakt" class="normal">Kontakt</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/70/content/Newsletter-RSS-Feeds" class="normal">Newsletter/RSS-Feeds</a></li>
	</ul>
</div>

Etwas mehr Aufmerksamkeit verdient die Besteller-Box. Wenn das keine sortierte Liste ist, was dann? Ich tendiere hier zu einer ol-dl-Kombi (leider scheint Björn Seibert den experimentellen Bereich eingestellt zu haben, deshalb hier auch kein Link, da mittlerweile auch der Google-Cache die Seite nicht mehr enthält), was dann in etwa so aussehen könnte:

<div class="box" id="boxBestseller">
	<h4>Unsere Bestseller</h4>
	<ol>
		<li>
			<dl>
				<dt>Testprodukt 1</dt>
				<dd>83,00 EUR</dd>
				<dd>zzgl. Versandkosten</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt>Testprodukt 2</dt>
				<dd>55,00 EUR</dd>
				<dd>zzgl. Versandkosten</dd>
			</dl>
		</li>
	</ol>
</div>

Und bei einem div, der den Klassennamen hrDiv hat und eine horizontale Linie erzeugt, fragt man sich durchaus, warum man nicht einfach das dafür gedachte hr-Element benutzt, bei dem ich sowieso der Meinung bin, dass es zu Unrecht ein Schattendasein führt, da wohl noch immer viele damit die aus den Anfangszeiten des Webs bekannten Trennlinien assoziieren, ohne sich der Gestaltungsmöglichkeiten mittels CSS auch für dieses Element bewusst zu sein.
Das gilt im übrigen auch für die Definitionsliste, die sich für weit mehr sinnvoll einsetzten lässt, als ihr Name vermuten lässt. Entsprechende Ideen mag das obige Beispiel vermitteln, dass sich auch problemlos etwa auf die Rezensionsseite übertragen lässt.

An der ein oder anderen Stelle laufen einem br-Elemente über den Weg, deren einzige Aufgabe offensichtlich darin besteht, einen float zu clearen, was sich eigentlich auch an ein sowieso notwendiges Element binden lassen sollte.

Björn setzt für das Template auf den Transitional-Doctype von XHTML 1.0. Wer das ganze gegen die Strict-Variante validieren will muss neben den hier gegebenen Tipps zur Validitätsverbesserung unter anderem auch noch ein font-Tag im Checkout eliminieren. Das steckt nämlich in den Sprachdateien beim ‘Bearbeiten’-Link.

Alle Formularelemente haben derzeit keine ID, wobei hier als pirmärer schuldiger aber der Shop selbst anzusehen ist. Mit etwas Aufwand an den PHP-Dateien lässt sich aber auch das realisieren, evtl. geht es sogar mit Smarty-Funktionen, ohne die Sourcefiles ändern zu müssen. Nach Auskunft von Björn ist da wohl auch was in Arbeit. Damit würden sich dann auch Formulare besser und zugänglicher gestalten lassen.

Ab und zu laufen einem dann doch noch Tabellen über den Weg. Die dürften aber, wie etwa die Auflistung der Seiten beim Produktlisting oder auch im Checkout-Prozess größtenteils im Source befinden und von daher mit einem Template nicht eliminierbar sein. Apropos Checkout-Prozess: Habe ich eigentlich schon erwähnt, dass ich so langsam aber sicher die Silk-Icons von famfamfam.com nicht mehr sehen kann?

Die einzige berechtigte Tabelle, nämlich der Warenkorb, ließe sich von der Zugänglichkeit her noch verbessern, Anregungen dazu mag das Beispiel auf macx.de liefern.

Alles in allem bietet das YAML-Template eine solide Grundlage für die eigene Entwicklung eines CSS-basierten und weitestgehend layouttabellenfreien Templates, das nicht nach ‘Stange’ aussieht. Bei der Gestaltung des ganzen helfen, nachdem eine Buttonvorlage ja fehlt, möglicherweise die von Deziner Folio zur Verfügung gestellten Ebenenstil- und Verlaufsvorlagen für Photoshop.

Ich hab ehrlich gesagt, keinen großen Bock, mich da einzulesen. Die Software soll einfach machen. Aber svnX als GUI für den Mac ist hässlich, umständlich zu bedienen und eigentlich nichts anderes, als ein simpler Aufsatz auf das Kommandozeilentool.

Versions, von den Machern von Disco, verspricht das Blaue vom Himmel:

Pro or rookie, Versions is the tool you need.

Versions makes version management painless and worth the effort

Na da bin ich mal auf die in Kürze erscheinende erste Beta-Version gespannt. Zumindest optisch dürfte Versions svnX um Längen schlagen. Hoffen wir mal, dass man anders als bei Disco mehr auf die inneren Werte gesetzt hat, denn auf Eye Candy.

via Schockwellenreiter

[tags]versionmanagement, subversion[/tags]

Der Quellcode ist eine komische Mischung aus DIV-Suppe, Tabellenlayout und wenigen semantisch korrekten Tags, denn für die Hauptnavigation wurde tatsächlich eine Liste benutzt. Die dann vorsorglich in einem DIV-Container gepackt wurde. Eine korrekte Verschachtelung ist auch nicht gegeben, die Einrückungen werden lediglich mit CSS optisch bewerkstelligt. Die dafür nötigen Styleangaben stehen direkt im Head-Bereich der Seite und sind für jede Tiefe neu angegeben, das ganze gibt es dann noch einmal für aktive und nicht aktive Punkte in der Form tiefe1 und tiefe1_aktiv. Die Information, dass man im class-Attribut auch mehrere Klassen angeben kann, scheint bei der ausführenden Agentur noch nicht angekommen zu sein.
Die Versalschrift hingegen liefert das CMS direkt so aus und wird nicht über Stylesheets erreicht, was in der Breadcrumb-Navigation dazu führt, dass versal und normal geschrieben Navigationspunkte ein komisches Bild abgegeben.

Auch bei den Formularen hat sich noch jemand Gedanken gemacht, mit fieldset, legend und label/id-Paaren sind zumindest diese codetechnisch übersichtlich und zugänglich gestaltet. nobr, nicht geschlossene br und img-Tags und fehlende alt-Attribute bei eben diesen haben aber in einem Dokument, das angeblich XHTML 1.0 Transitional sein soll, definitiv nichts verloren.

Einen Narren gefressen hat man am DIV-Element. Anders ist nicht zu erklären, warum man nicht einfach hr nutzt, um eine horizontale Linie zu erzeugen, sondern einen leeren DIV-Container, dem die Klasse trennerhoriz10px zugewiesen wird. Ein ähnliches Bild auch bei den Artikeln:

<div class="datum">Erschienen am 25.05.2007 00:00</div>
<div class="stichzeile">NACH DEM WOHNUNGSWECHSEL  </div>
<div class="ueberschrift">Von der Telekom abgehängt</div>
<div class="untertitel">Coburger ärgert sich über „Willkür“ / DSL-Anschluss angeblich nicht möglich </div>
<div class="autor"></div>
<div class="vorspann"> Alfred Schwietalla zweifelt am Servicegedanken und an der Kundenfreundlich-keit von Deutschlands größtem Telekommunikationsanbieter.</div>
<div></div>

Überschriften mit h-Tags? Luxus! UTF-8 kodierte Sonderzeichen (im Original die Anführungszeichen bei Willkür, WordPress korrigiert das aber automatisch) im als ISO-8859-1 ausgelieferten Dokument? Wen stört das schon!

Am Ende bleibt leider nur ein weiterer misslungener Relaunch. Qualitätsstandards sind in der Branche leider noch ein Fremdwort und so sparen sich viele Agenturen die Investition in Aus- und Weiterbildung ihrer Mitarbeiter. Für den abgelieferten Pfusch müssen sie sich sowieso nicht verantworten, weil die Auftraggeber, wie schon Jens Grochtdreis festgestellt hat, eben selten vom Fach sind und daher gute nicht von schlechter Arbeit unterscheiden können.

[tags]xhtml, css, webdevelopment, webstandards, accessibility, relaunch, kritik[/tags]

Ich liebe die Funktion:
In Google eingeben: Germany local time

Gemacht und – sieht aus wie jede andere SERP auch. Also mal ein bißchen rumgespielt und tatsächlich: Flunkert man Google etwas an, etwa, indem man behauptet, englischsprachig zu sein (hl=en als Parameter statt hl=de), dann bekommt man auf genau die gleiche Abfrage plötzlich auch noch die Information, wie spät es in Deutschland gerade ist: Germany local time. OK, das weiß ich, aber wenn ich mal eben sehen will, ob Arnie gerade frühstückt oder schon beim Mittagessen ist, sehr praktisch.

Und noch was ist mir dabei aufgefallen: Googla Australia kommt auf den SERPs optisch wesentlich modernen daher. Codetechnisch leider nicht. Trotzdem fühle ich mich gerade wie ein Google-User zweiter Klasse…

[tags]google, serp, layout, local time[/tags]

[update 2]: Auch meine Buttons wachsen nicht in der Höhe mit, wie sich das Manuela Hoffmann für die „Sexy CSS Buttons� wünscht. Eine entsprechende Anpassung dürfte eher unkritisch sein, scheint mir aber derzeit nicht wirklich Sinn zu machen, solange eben Firefox rumzickt.

[update 3]: Für alle, die etwas tiefer in die Materie einsteigen wollen: Eric Meyer beleuchtet als Reaktion auf Kommentare zu seinem Artikel Reset Reloaded die Probleme sehr ausführlich und auch Roger Johansson nimmt sich aktuell dem Thema an.

[update 4]: Eric Eggert hat den Artikel von Eric Meyer für die Webkrauts ins Deutsche übersetzt.

Oder: Wer ist hier eigentlich der Böse?

Ich nutze bereits seit einiger Zeit button anstelle von input – primär deshalb, weil dann auch Safari dem Button nicht mehr durch CSS zugewiesene Styles verweigert.

Dass das Ganze nicht unproblematisch ist, ist keine neue Erkenntnis. Vor allem der Internet Explorer kann mit dem Element eher leidlich umgehen. Hat man mehr als einen button mit Submit-Funktion im Formular, ist beim Explorer nicht feststellbar, welcher gedrückt wurde – er peilt es einfach nicht. Und auch der margin, den der IE rechts und links zwanghaft an den Button setzt, ist immer wieder ärgerlich, zumindest dafür gibt es aber Hacks, um das Problem aus der Welt zu schaffen.

Die heutige Aufgabenstellung hört sich eher unspektakulär an: Rote Formularbuttons sind gewünscht, mit einem leichten Verlauf im Rot, abgerundeten Ecken und Schlagschatten. Das ganze soll sich natürlich dynamisch an die Laufweite des Buttontextes anpassen.

Alles kein Problem. Nach alter Sliding Doors-Schule im Photoshop zwei Bilder gemacht, eine Handvoll CSS in die Tastatur geklimpert und schon erinnert an die zwei häßlichen grauen Standardbuttons nur noch der gleichlautende Text im Beispielbild.

button {
	background: #FFF url(/img/button-right.gif) no-repeat right top;
	border: none;
	color: #FFF;
	font-weight: bold;
	height: 30px;
	margin-bottom: 1em;
	padding-right: 20px;
	text-align: center;
}
 
	button span {
		background: url(/img/button-left.gif) no-repeat top left;
		display: block;
		line-height: 25px;
		padding-left: 14px;
		height: 30px;
	}

Erster Versuch in Safari
Erster Versuch in Opera

Dass der IE da eine andere Meinung hat überrascht wenig, aber es verwundert dann doch, dass auch Firefox das ganze nicht so darstellt wie gedacht.

Erster Versuch im Internet Explorer
Erster Versuch im Firefox

Die Probleme mit dem IE lassen sich mit wenigen Handgriffen und eben dem Hack von Jehiah zurechtbiegen. Man sollte aber bei der width-Angabe anstatt 1 besser 0 schreiben und für die guten Browser ein Attribut im Selektor benutzen, das bei einem Submit-Button auf jeden Fall da ist, beispielsweise type.

	button {
		background: #FFF url(/img/button-right.gif) no-repeat right top;
		border: none;
		color: #FFF;
		font-weight: bold;
		height: 30px;
		margin-bottom: 1em;
		overflow: visible;
		padding-right: 20px;
		text-align: center;
		width: 0;  /* IE fix */
	}
 
		button[type] {
			width: auto;  /* cancel ie fix for other browsers */
		}
 
		button span {
			background: url(/img/button-left.gif) no-repeat top left;
			display: block;
			line-height: 25px;
			padding-left: 14px;
			height: 30px;
		}

Zweiter Versuch im Internet Explorer

Was dann aber doch erst die halbe Miete ist. Ein white-space: nowrap sorgt schließlich dafür, dass auch der restliche Text erscheint.

Dritter Versuch im Internet Explorer

Bleibt noch Firefox. Der wehrt sich mit Händen und Füßen. button span ergänzt um

	button span {
		[...]
		left: -3px;
		position: relative;
		top: -1px;
		[...]
	}

bringt Firefox auch zur Räson. Anders kommt man dem margin, den er beharrlich zwischen Button und span-Element setzt, nicht bei. Die Lösung hat nur einen Schönheitsfehler: Die Darstellung in allen anderen Browsern ist zum Teufel, das span-Element sitzt dort einen Pixel zu hoch und drei Pixel zu weit links. Was nicht wirklich eine Ãœberraschung ist. Für den IE könnte man hier jetzt wieder mit Conditional Comments gegensteuern, aber was ist mit den anderen Browsern? Leider macht dieser Bug in Firefox die Benutzung von button anstelle von input nahezu unmöglich – zumindest wenn die Gestaltung über einfaches Umfärben von Vorder- und Hintergrundfarbe hinausgeht. -moz-top und -moz-left wären in dem Fall hilfreich, Hacks für den Firefox findet man nirgends, da eigentlich immer der IE der Böse ist. Dies ist wohl die berühmte Ausnahme, um die Regel zu bestätigen…

Auch sonst zeigt sich Firefox bei Formularelementen von seiner launischen Seite.

body {
	font-size: 70%;
}

scheint ihn für die Buttons überhaupt nicht zu interessieren. 100% ist die Schrift dann aber auch nicht groß, eher irgendwas dazwischen. Auch Safari ist in dem Fall nicht hundertprozentig akkurat, aber doch näher an der Vorgabe als Firefox:

Schriftgrößenprobleme im Firefox
Weniger gravierende Schriftgrößenprobleme in Safari
In beiden Fällen hat der erste Absatz eine Schriftgröße von 100%, der Button und der zweite Absatz von 70%.

Schönes Minenfeld, das Gestalten von Formularelementen. Wollen wir mal hoffen, dass die Firefox-Entwickler das schnellstmöglich in den Griff bekommen.

[tags]xhtml, css, forms, button, styling, firefox, margin[/tags]