HTML & CSS Archive

Dass die verschiedenen Browser Webseiten nicht immer gleich anzeigen, ist ein alter Hut. Trotzdem scheint diese Erkenntnis nicht bis zur Fullservice-Agentur Advico Y&R, die ja auch für die Free Internet-Kampagne von Sunrise verantwortlich zeichnet, durchgedrungen zu sein. Deren Schwester-Agentur Futurecom lässt seit einigen Wochen auf deren Frog-Blog nämlich nur kommentieren, wer mit dem Internet Explorer surft. Mit Firefox hingegen ist weit und breit kein Kommentarformular zu sehen. Dafür aber Schnipsel von HTML-Kommentaren:

Trotz zweimaligem Hinweis darauf hat sich bis heute nichts geändert. Schade. Erst recht für eine Agentur, die Ihre Kompetenz in Sachen Webdesign so hervorhebt:

Sie wollen nicht einfach eine Website, sondern eine, die überzeugt. Ein Auftritt, der ganz im Zeichen des optimierten Dialogs mit Ihren Kunden steht.
[…]
Sie möchten mit Designern und Textern zusammenarbeiten, deren oberstes Gebot Funktionalität heisst und die überraschende, kreative Umsetzungen und Ideen für sämtliche Kommunikationsprozesse entwickeln.

Na dann warte ich mal, bis das oberste Gebot der Funktionalität umgesetzt ist und sich so wieder ein optimierter Dialog führen lässt…

[Update] 18:42 Uhr
Eines muss man den Jungs lassen: Sie reagieren schnell. Knapp eine halbe Stunde nach Veröffentlichung dieses Beitrags, war auch schon der erste Leser aus dem Hause Futurecom hier auf dem Blog. 40 Minuten später war Andi Widmer, CEO von Advico Y&R am Telefon und in der Zwischenzeit ist die Firefox-Kompatibilität wieder hergestellt. Chapeau!

Über 80 Ajax-basierte Fertiglösungen für den Webworker listet das Smashing Magazine im Artikel „80+ AJAX-Solutions For Professional Coding„. Vom Auto-Completer über Ajax-Formulare, Gallerien, Menüs, Tabs bis hin zu diversen Animationen ist alles dabei. Eine interessante Fundgrube…

(via yigg)

Mit immer schnelleren Internetverbindungen vergisst man schnell einmal sich darüber Gedanken zu machen, wie lange die eigene Webseite eigentlich zum laden im Webbrowser benötigt. Diverse Speed-Tests helfen dabei, diese Zeiten zu ermitteln und geben auch (mehr oder weniger) brauchbare Tipps zur Verbesserung der Performance:

• Webwait
  Live-Test, der sich automatisch wiederholt und damit einen Mittelwert liefern kann. Keine Aussage über die verschiedenen Verbindungen
• Webscale
  Ausführliche Auswertung der Ladezeiten, inkl. Angabe der geschätzten Ladezeit nach Verbindungsart
• Web Page Speed Report
  Ausführliche Auswertung der Ladenzeiten, Angabe der geschätzten Ladezeit nach Verbindungsart sowie Warnungen und Tipps zur Verbesserung der Ladezeit.
• OctaGate SiteTimer
  SiteTimer zeigt nicht nur die Ladezeit, sondern auch, wieviel Zeit zwischen dem Verbindungsaufbau und dem Erhalt der ersten Bytes vergeht. Leider keine Angabe der geschätzten ladezeit nach Verbindungsart.
• Full Page Test
  Als Vorbild für den Full Page Test diente erklärtermassen OctaGate SiteTimer, so dass sich Full Page Test nur durch die etwas hübschere Darstellung von SiteTimer unterscheidet.

Und wenn ich mir die Ergebnisse so anschaue, sollte auch ich meinen Code wieder einmal etwas optimieren…

Wer seine Webseiten nicht in einem Editor schreibt, der Sonderzeichen automatisch in das entsprechende HTML-Pendant konvertiert, wühlt sich auf der Suche nach dem entsprechenden Code meist durch die vielen Listen, die im Web existieren. Viel bequemer gehts mit dem HTML Entity Character Lookup, der neben dem gesuchten Zeichen gleich auch noch Vorschläge für ähnliche Zeichen liefert:

(via pixelgraphix)

HTML-Newsletter mit CSS zu erstellen ist gar nicht so einfach. Erst recht nicht, wenn das HTML-eMail von den diversen Mailclients auch richtig angezeigt werden soll. Offenbar macht gerade Microsofts Outlook 2007 ziemlich Probleme, seit dort die Rendering-Machine von Word zur Anzeige von eMails eingesetzt wird.

Wie es um die CSS-Unterstützung von Mailclients steht und wo die Fallstricke liegen, zeigt der überarbeitete „Guide to CSS Support in Email“ von Campaign Monitor.

(via F-LOG-GE)

Eine Liste mit 19 Punkten, was man beim Schreiben einer Website unterlassen sollte, hat Josiah Cole zusammengestellt. Um hier nur zwei zu nennen:

• If your website does not work in Firefox, welcome to 2007 DUMBASS.
• Just because a technology is new, or you just discovered it does not make it suitable to put on a business website, JUST BECAUSE you can.

Die meisten Punkte sind zwar wohlbekannt, aber es kann nicht schaden, immer mal wieder daran erinnert zu werden…

(via Ayom)

Dass Formulare nicht immer langweilig gestaltet sein müssen, zeigt der CSS Design-Wettbewerb bei Dr. Web. Die Aufgabe bestand darin, ein vorgegebenes Formular mittels CSS möglichst schön zu gestalten. Und die Ergebnisse der 42 Teilnehmer können sich allemal sehen lassen. Doch schon erstaunlich, was sich mit CSS und ein paar Grafiken alles machen lässt.

Bis zum 11. Dezember läuft die Abstimmung, welches denn nun die schönste Umsetzung ist.

Mehr als ein Jahr ist seit meinem kleinen Linkdump mit Howto’s und Cheatsheets vergangen. Höchste Zeit also, die Liste mal wieder zu aktualisieren und etwas besser zu strukturieren. Zugegeben, das Einordnen in die „richtige“ Kategorie war nicht immer ganz einfach, aber ich bin mir sicher, dass ihr das eine oder andere nützliche Cheatsheet findet:

Auf der Suche nach Inspiration für ein neues Blog-Design? Oder soll es gleich ein kostenloses neues Design sein? Bitte sehr:

• CSS Web Layouts
• Free CSS Templates
• CSS Design Templates
• Solucija
• Open Source Templates
• Open Web Design

Noch viel mehr zum Thema CSS gibts aber in der (fast) unendlichen Liste von Dr. Web: CSS Quellensammlung CSS.

Wer hat nicht schon mal auf ein Suchergebnis geklickt und ist unvermittelt auf der XML-Seite eines RSS-Feeds gelandet. Frank Bültge sorgt mit seinem Post „WP – RSSFeed mit CSS gestalten“ für Abhilfe.
Er zeigt am Beispiel eines WordPress RSS-Feeds auf, wie sich mit ein wenig CSS und einem kleinen Eingriff in die Datei wp-rss.php ein Hinweis in die XML-Seite einbauen lässt, um dem Besucher den „richtigen“ Weg zu weisen.