Diese Woche hat mich meine Schwester Annette total positiv überrascht. Ich hatte ihr vor zwei Monaten per Email aus Bangalore ein wenig konstruktive Kritik an der Website ihrer Werbeagentur Weber AG gesandt und ein Firmen-Blog vorgeschlagen. Nun erwähnte sie ganz beiläufig am Telefon, dass sie die Website angepasst und ein Blog gestartet haben. Whow, das ging ja schnell, ich gratuliere! Die neue Website auf der Basis von Typo3 gefällt mir hervorragend, sie wirkt auf mich erfrischend, sauber und übersichtlich strukturiert, mit einer idealen Kombination von Text- und Bildelementen. Die letzten News und alle wichtigen Navigationselemente sind mit einem Klick erreichbar. Ich wünsche der Weber AG viel Erfolg mit der neuen Site und viel Spass mit ihrem neuen Blog. Auf dass es Eure Konversation mit dem Markt anregt und erweitert! Die Kommentar-Funktion funktioniert im Moment noch nicht. Die verwendete Blog-Engine sBlog kenne ich nicht, vielleicht wäre ein Umstieg auf Wordpress eine Überlegung wert?

Und offenbar hat das Blogger-Virus schnell gewirkt, denn da ist gleich ein zweites neues Blog entstanden, Golf Workout & Fitness, mit Tips zu schmerzfreiem Golfspiel für jedes Alter Liebes Schwesterherz, ich wünsche Dir viel Freude beim Bloggen und viele interessante neue Kontakte aus der Blogosphäre!

Meine Fundstücke dieses Wochenendes:

• Buttonator, ein AJAX Button Generator, mit dem sich alle möglichen Web-Buttons im Handumdrehen erstellen lassen (Quelle Dr. Web).
• Bullet Madness, eine Sammlung von über 200 praktischen Bullets, Pfeilen und Mini-Icons (von den Usern von StyleGala, das eine Fülle weiterer Webdesign-Ressourcen bietet).
• AboutUrl, das praktische Links zu allen möglichen Domain-Informationen bietet (Quelle blogSEO).

In anderen Blogs suchen nach: buttonator, bullet+madness, abouturl

Dank einem Tip von Daniela bin ich auf Vischeck gestossen, eine tolle Site mit vielen Informationen darüber, wie Farbenblinde das Web sehen. Je nach Quelle sind zwischen 5-10% aller Menschen von einer der Formen von Farbenblindheit betroffen. Webdesigner sind also gut beraten, bei der Farbauswahl diese Informationen zu berücksichtigen!

Besonders praktisch ist die Simulation von beliebigen URL’s gemäss den drei wichtigsten Formen der Farbenblindheit. Weiter gibt es eine Simulation von Bilddateien, Plugins für Photoshop und ImageJ zum Download und weitere Infos und Links. Ein Beispiel – so sieht die Erde für “Normalsichtige” aus:

So sieht sie für rot/grün Farbenblinde aus:

Und so für blau/gelb Farbenblinde:

In anderen Blogs suchen nach: webdesign, farbenblind, farbenblindheit

Cameron Olthuis hat in seinem Blog die “Top 10 CSS Tutorials” aufgelistet – eine äusserst nützliche Kollektion! Darunter sind wohl so ziemlich alle CSS Hacks, Tricks und Kniffe, die es gibt: Roll-over images, bar graphs, vertikale Menüs, formatierte Listen, floating elements, runde Ecken (eine weitere pure CSS Technik für runde Ecken findest Du hier), Schatten, Photo-Gallerien, sowie ein Stylesheet-Switcher und eine Sammlung von 40 fertigen CSS Layouts. Thank you Cameron für diese Zusammenstellung – da gibt’s für mich noch viel zu lernen Im Januar hat Cameron übrigens eine umfangreiche Liste von “75 Helpful Web Design Resources” aufgelistet, die Lektüre seines Blogs ist für Webdesigner und Online Marketeers generell empfehlenswert.

Technorati Tags: css, webdesign, tutorial

Die letzten Wochen waren ziemlich hektisch und der Umzug von der Schweiz nach Bangalore/Indien hat alle meine Zeit beansprucht. Nun habe ich mich hier bereits gut eingelebt und finde endlich wieder Zeit zum bloggen Heute morgen habe ich mich über eine tolle neue Firefox Extension gefreut, die nicht nur für CSS Webdesigner äusserst nützlich ist: View Rendered Source Chart von Jennifer Madden.

Diese Extension gefällt mir noch besser als View Formatted Source, weil damit die ganzen div und span Verschachtelungen auf einen Blick in verschiedenen Farben graphisch sichtbar werden. Perfekt geeignet sowohl für Webdesign-Einsteiger als auch für Profis. Die Bedienung ist völlig easy, rechtsklick in irgendeiner Webseite und ein Klick auf “View Rendered Source Chart”. Hier geht’s zum Download (Quelle: Lifehacker)

Zurück in der kalten Schweiz stelle ich fest, dass wieder einiges passiert ist auf unserem Planeten. Eine ideale Übersicht dazu bietet mir Newsvine. Dieser neue “Social News Aggregator” wurde nach zweimonatiger Betaphase am 1.3.06 öffentlich lanciert.

Newsvine gefällt mir aus mehreren Gründen auf Anhieb sehr gut. Erstens imponiert dieser neue Web2.0 Dienst mit  hervorragendem Webdesign und demonstriert, wie auch eine komplexe Site mit CSS auskommen kann. Zweitens zieht Newsvine den Community Ansatz von digg weiter und ermöglicht das Kommentieren und Bewerten von News-Berichten in 11 Kategorien ebenso wie von “Seeds” (von Usern gepostete Links wie bei digg) und von User-Kolumnen! Sogar eine Chat-Funktion steht zu jedem einzelnen Beitrag zur Verfügung. Es erscheint mir jedoch fraglich, ob diese breit genutzt werden wird. Drittens kann bei Newsvine jeder User auf einfachste Art und Weise selbst zum Kolumnist werden und erhält dafür einen Revenue Share von den Ads auf seiner Kolumne von 90% – 10% gehen an den Referrer. RSS- und JSS-Funktionen sowie intuitive Suche nach Regionen und Tags runden das positive Bild ab.

Nicht nur TechCrunch ist des Lobes voll. Die Kombination der oben beschriebenen Faktoren bedeuten IMHO, dass Newsvine das Potenzial hat, zum “digg für die Massen” zu werden, zumindest in Nordamerika. Eigenwerbung wird auf Newsvine unterbunden, doch der Anreiz für Publizisten ist mit den Revenue Shares sehr attraktiv. Wie in der Blogosphäre entscheidet das Publikum darüber, was lesenswert ist und was nicht. Die Grenzen zwischen klassischen Medienberichten und “Self Publishing” verwischen immer mehr. Da Newsvine wie andere, ähnliche Sites sehr US-zentriert ist, sehe ich ein beträchtliches Potenzial in der Regionalisierung von solchen Social News Portalen auf einzelne Kontinente/Sprachräume. Was meint Ihr dazu?

Technorati Tags: newsvine, social+news, web2.0, digg

Oft braucht es einen Anstoss von aussen, um das Offensichtliche zu erkennen…Oder die Betrachtungsweise einer Frau, um ein wenig Ordnung in männliches Chaos zu bringen…Vielen Dank an bluetime für Deinen Kommentar! Er hat mich dazu angeregt, das Design dieses Blogs etwas zu überarbeiten. Und wenn wir schon dabei sind: Deine Sites Engel und Erotica gefallen mir beide sehr gut – nicht nur vom Design her Erotica ist ein gutes Beispiel dafür, wie ein Erotikblog aussieht, wenn es von einer Frau gemacht wird: wirklich ästhetisch und hocherotisch!

Ich habe erkannt, dass ich mein Blog in den sechs Wochen seines Bestehens bereits überladen hatte und dass die Übersicht darunter litt. Mein Ziel war deshalb nicht ein komplettes Redesign, sondern vor allem eine klare Abgrenzung zwischen dem Content und den Navigationsspalten. Dabei habe ich auch noch an vielen anderen Details rumgebastelt und mich zwischendurch mal wieder über IE geärgert…

Runde Ecken haben mir schon immer besser gefallen als Ansammlungen von eckigen Quadraten. Ich habe entdeckt, dass es zig verschiedene Möglichkeiten gibt, um runde Ecken für beliebige Boxes mit CSS hinzukriegen. Ich habe die Methode von webbe.de benutzt, weil sie genial einfach ist! Die auf diesem Blog sichtbaren runden Ecken werden mit wenigen Zeilen CSS und HTML Code erzeugt. Dank einem Trick mit übereinandergelegten Kasten kommt diese Methode völlig ohne (Hilfs-) Bilder oder Javascripts aus. Funktioniert auf IE und Firefox einwandfrei für jedes <div>!

Ein kleiner IE Bug ist noch drin, vielleicht werde ich mich morgen dranmachen. Ich hoffe, dass das angepasste Design besser gefällt und freue mich über Kritik und Anregungen! Es gibt noch viel zu lernen…

Technorati Tags: css, webdesign, erotikblog, runde+ecken

Mit seinem vorgestern veröffentlichten Artikel “In Search of the Holy Grail” bei A List Apart hat Matthew Levine einen interessanten neuen Beitrag in der Diskussion um den “heiligen Gral” im Webdesign geliefert. Der “heiliger Gral” ist ein klassisches Layout mit 3 Spalten, 2 fixen Sidebars rechts und links, einem bewegliches Zentrum für den Content sowie Header und Footer. In der Diskussion geht es darum, dieses Layout mit möglichst sauberem CSS Code und hoher Browserkompatibilität abzubilden.

Der CSS Code von Levine wurde inspiriert vom von mir bereits früher gerühmten, brillianten One True Layout. Levine verzichtet auf Kompatibilität mit älteren Browsern. Um IE 5.5 zu unterstützen muss zu seinem Code ein Box Model Hack hinzugefügt werden. Der Vorschlag von Levine bietet folgende Vorteile:

1. Bewegliches Zentrum und zwei Sidebars mit fixer Breite
2. Der Code für das Zentrum erscheint zuerst im Source (wichtig für SEO!)
3. Irgendeine der drei Spalten kann die längste sein
4. Es wird nur ein zusätzliches div im HTML-Code der Seite benötigt
5. Einfaches CSS mit minimalen Hacks/Patches für IE6

Der Artikel von Levine hat eine lebhafte Diskussion entfacht. Levine erntet viel Lob, viele Anregungen und einige Kritiker bestreiten mit unterschiedlichen Begründungen, dass dies der heilige Gral sei. Dank dem Feedback hat Levine heute bereits eine neue Version veröffentlicht, die einen IE Bug behebt. Auch wenn Levine’s Vorschlag noch nicht der “perfekte” heilige Gral ist, so ist er doch zumindest ein äusserst wertvoller Beitrag in dieser spannenden globalen CSS Webdesign Diskussion. Ich werde auf jeden Fall bald mit seinem Code experimentieren für eine neue Site

Technorati Tags: css, webdesign, holy grail, heiliger gral, 3-column layout, dreispaltiges layout, box model hack

Kanadische Forscher haben gemäss einer neu veröffentlichten Studie nachgewiesen, dass ein erster entscheidender Eindruck einer Website in der Auffassung des Besuchers bereits nach 50 Millisekunden entsteht. Sie haben eine hohe Korrelation festgestellt zwischen der Beurteilung des “visual appeals” einer Website nach 50ms und nach 500ms. Dieser allererste Eindruck in 1/20-Sekunde entscheidet also bereits darüber, ob eine Site gefällt oder nicht. Wenn die Site gefällt, wird der Benutzer darauf verweilen und wahrscheinlich Links anklicken. Und sonst ist ja bekanntlich dieser Button schnell geklickt

Telepolis beschreibt weitere Details: “Viel sehen, vor allem viele Einzelheiten, kann man in dieser kurzen Zeit nicht. Man kann die Seite nicht abscannen, sondern man nimmt einige ihrer “ins Auge springenden” Eigenschaften wahr.” Ansonsten resultierte aus der Studie mit Erkenntnissen wie “die Internetbenutzer seien auch im Hinblick auf das Webdesign “puritanisch” geworden, sie wollen die Information so einfach und schnell als möglich bekommen” nichts Neues. Unter realen Bedingungen nimmt sich der User ja schon ein bisschen mehr Zeit, um sein Urteil zu bilden. Die Studie zeigt wohl vor allem, wie schnell man mit miserablem Design Besucher vergrault…

Der Artikel “In search of the One True Layout” zeigt detailliert auf, wie die letzten Design-Hürden mit CSS übersprungen werden können: Totale Layout Flexibilität (beliebige Spalten auf beliebigen Positionen), Spalten gleicher Höhe und vertikale Positionierung beliebiger Elemente über Spalten hinweg. Die Site positioniseverything.net bietet viele weitere interessante Artikel, diverse Demos und viele Infos zu Internet Explorer Bugs und dazugehörigen Hacks.