Weil’s heute ins Tagesprogramm passt. Eine der besseren Friseur-Webseiten ist die von Rolf & Bernd. Die Preise sind auch Geschmacksache.

Thomas Scholz fasst nochmal zusammen, warum man im Web den Blocksatz vermeiden sollte.

Die Diskussion ist zwar schon etwas ein alter Hut. Aber da die Berufsbilder nach wie vor unscharf sind, verweise ich auch auf diesen Beitrag mit Tiefgang: Sollten (Web-)Designer HTML und CSS können?

Übersicht zu Schätzmethoden im (Web-) Projektmanagement: Spiel mit den Wahrscheinlichkeiten

Everything you Know about Clearfix is Wrong: Vielleicht nicht wirklich alles. Wichtig auch der Hinweis darauf, dass ohne Basiswissen eben alles ein bisschen schwerer ist.

Weak constructs are most often due to the fact that people do not know what block formatting contexts are and what they do.

Hier wird präsentiert, was HTML5, CSS3 und JS APIs zusammen bieten: This presentation is an HTML5 website

HTML 5, oder: Die Angst vor dem Flash-Ersatz. Premium-Videos weiterhin nur in Flash?

Und noch ein Tool-Tipp: CSSDesk ist ein Online HTML&CSS-Editor mit Live-Preview.

Mit dieser Frage beschäftigt sich auch Craig Buckler in seinem Artikel The Problem With Opera auf sitepoint.com (mit anschließender angeregter Diskussion).

Das Kernproblem liegt Wohl in einem gewissen Mangel an Usability oder zumindest intuitiver Bedienbarkeit. Optionen und Funktionen sind oft nicht dort zu finden, wo ich sie erwarte. Erwarte, weil sich bei anderen Vertretern unabhängig vom Hersteller, gewisse vertraute Bedienkonzepte etabliert haben. Es sind auch die umfangreichen und oft schwer auffindbaren Konfigurationsmöglichkeiten.

Opera is also configurable in ways which you don’t see in other applications. Perhaps that’s innovative, but it can lead to confusion. I’ve been using the application for many years but I often have difficulty locating the option I need.

Otto Normal wird es wohl so oder so ähnlich sehen. Auch weil ein Browser etwas ganz einfaches ist. Das Programm, mit dem man ins Internet geht. Und das möglichst ohne Hürden.

Few people are willing to climb the steep learning curve especially when competing browsers offer an easier and less disorientating experience.

Von daher war Opera auch für mich nie das Tool der Wahl. Auch die Tatsache, dass Opera ziemlich zuverlässig ist, was die Interpretation der Eingaben der Webdesigner angeht, ändert für mich nichts daran. Man hat mit dem Opera zwar eine ziemlich hohe Zuverlässigkeitsquote, soweit man sauberen und der Spezifikation entsprechenden Code schreibt.

Das wiegt es für mich aber nicht auf. Mein Tool der Wahl, muss mir selbst als Nutzer eine gelungene Userexperience liefern. Außerdem muss es ein Browser sein, der über einen relevanten Marktanteil und eine Vielzahl von Entwicklertools verfügt. Schon seit Jahren ist daher Firefox meine Nr. 1 und der Rest ist für mich nur zum testen da.

In einem weiteren Artikel beschäftigte sich Craig übrigens damit, warum Opera eigentlich der beste Browser der Welt sein könnte: Is Opera 10.5 the Best Browser Ever?

Simon Collisons Website besticht durch schlichte Eleganz und eigenwillig bebilderte Teaser.

Der Bithalter dieses Mal zu 2/3 deutschsprachig. So könnte das weiter gehen.

• Kuck Mama, das arbeite ich: Konzeption & Design in der Praxis
• Das lautlose Geheimnis guter Websites: Was ist eigentlich Informationsarchitektur?
• Einweg-Prototyping: Schnelle Ergebnisse mit Throwaway Prototyping
• Dort sein, wo der Kunde ist und da sein, wenn der Kunde da ist? Social Media: Dialog rund um die Uhr?
• Social Media is No Holy Grail
• Tools for concatenating and minifying CSS and JavaScript files in different development environments – Robert’s talk

Zootool gibt es schon ein Weilchen. Letzte Woche ging das Re-Design live. Habu (aka Hartmut Wöhlbier) und Bastian Allgeier aus Mannheim sind das Team dahinter. Zootool ist also »Made in Germany« – mit dem Sound des Südwestens. Grund genug, den Web-Streichelzoo mal näher vorzustellen.

Was ist Zootool?

Zootool is about collecting, organizing and sharing your favorite images, videos, documents and links from all over the internet.

Es bietet sich also zum Sammeln von Websites, Fotos, Videos usw. an. Die Inhalte werden mit dem sog. Lasso – einem Browser-Bookmarklet – gefangen. Außerdem gibt es eine Reihe von Tools und Features zur Organisation der Beute und zum Austausch mit anderen Großwildjägern. Schnittstellen zu anderen Services, wie etwa Twitter, sind auch dabei.

Der erste Eindruck

Design ist Geschmackssache. Mir persönlich gefällt Braun und die Oberfläche wirkt aufgeräumt. Auch sonst finde ich die Gestaltung sehr gelungen. Die dunkelbraunen Holztexturen wirken sehr edel.

Zootool Startseite nach Login

Features & Funktionen

Die Oberfläche der Webanwendung dürfte Mac-Nutzern vertraut sein. Wir kennen das ein oder andere Bedienelement bereits aus unserem Betriebssystem. Aber auch alle anderen dürften, nach kurzer Eingewöhnung, gut zurechtkommen. Optisch ansprechend sind die Tools auch gestaltet.

Das Zootool nur in englischer Sprache verfügbar ist, ist für mich kein Manko. An einer deutschen Version wird aber auch schon gearbeitet.

Jagen & Sammeln

Das Lasso ist das wichtigste Werkzeug des Jägers. Mit dem Browser-Bookmarklet werden die begehrten Websites, Fotos, Videos, etc. eingefangen und in den Zoo geschickt.

Mit Aquarium und Aviary stehen zwei weitere (sekundäre) Tools zur Verfügung. Aquarium ist eine Schnellsuche für die Browser-Toolbar, mit deren Hilfe man von überall Zugriff auf die eigenen Zoobewohner hat. Aviary ermöglicht das zeitgleiche Publizieren von Beuteinhalten auf Twitter und Zootool.

Organisieren

Der zentrale eigene Arbeitsbereich nennt sich sinnigerweise Zoo. Hier werden die Jagdtrophäen gesammelt, organisiert und beschrieben. Die Inhalte lassen sich außerdem in Packs kategorisieren. Natürlich können auch Tags zur Verschlagwortung gesetzt werden.

Der Zoo (zum Vergrößern anklicken)

Teilen & Publizieren

Keine moderne Webanwendung ohne soziale Komponente. Und so kann man sich natürlich auch bei Zootool mit anderen Nutzern vernetzen. Zu diesem Zweck folgt man anderen und/oder man abonniert das Feed ihres Streams.

Darüber hinaus stehen auch Schnittstellen zur Verfügung, mit deren Hilfe man die eigene Beute in andere Kanäle seiner Wahl publizieren kann. Derzeit stehen hierfür Twitter, Delicious, Friendfeed und Tumblr bereit. Es ist denkbar bzw. wünschenswert, dass weitere Schnittstellen folgen.

Fazit

Zootool dürfte für alle Jäger und Sammler mehrere Blicke wert sein. Für mich ist es jetzt das Tool der Wahl. Meine positive Bewertung ist unabhängig davon, dass die beiden Macher aus Mannheim sind und ich Habu kenne. Die Vorgängerversion konnte mich z.B. noch nicht ganz überzeugen. Die Anzahl der Nutzer von Zootool und ihre rege Aktivität auf der Plattform, ist ebenfalls als gutes Zeichen zu deuten.

(Wer Zootool nutzt und sich mit mir vernetzen möchte findet mich unter zootool.com/user/webzeugkoffer/)

Die Website der Agentur New York Webdesign. Sehr stimmiges Webdesign mit vielen kleinen Details, die es zu entdecken gibt.

Der Kulturbanause Jonas Hellwig stellt das Konzept des Zen Coding vor. Nach etwas Einarbeitung und Umdenken im Coding verspricht es bequemeres und schnelleres Coden: Zen-HTML/CSS/Coding: Schneller, besser, cooler!

Was gilt es grundsätzlich bei der Konzeption von Websites und Inhalten für das mobile Web zu beachten? Antworten sucht das Upload Magazin: Publizieren fürs Mobile Web – Grundlagen.

Zwei Artikel zu den Themen Ausbildung und Professionalisierung im Webdesign:

• The Role of College for Web Designers
• The Sorry State of Web Design Education

Informationen im Überfluss. Ganz besonders betroffen sind die Websites der Nachrichtenmagazine und tun sich schwer bei Layout und Informationsdesign: Old News: News Sites.

Auch beim Prototyping ist es ratsam möglichst schnell, möglichst konkret zu werden. Man läuft sonst Gefahr wichtige Details zu übersehen.

In other words, even though you’re doing all the “right” things by prototyping and iterating, are you still leaving out too much detail and falling foul of the Romeo and Juliet effect?The Romeo & Juliet effect, and how it applies to design

Aus diesem Anlass auch nochmal der Hinweis auf einen Artikel, den ich im April 2009 geschrieben habe: Es gibt keine automatische Hohmpäidsch.

Typekit bleibt für mich eine Option. Wenn auch mit Abstrichen, was die kostenlose Version und Ladezeiten betrifft.

Wie man aktuell sehen kann, Es wird im unteren rechten Bereich meines Blogs der Website ein Hinweis und Link zu Typekit eingeblendet. Das ist das Manko der kostenlosen Version. Update: Aktuell setze ich Typekit nicht mehr ein. Der Test ist für mich zunächst mal beendet. Ich überlege noch und werde mich bald entscheiden, ob ich ein Upgrade auf die 1. kostenpflichtige Version mache. Für den Einsatz von bis zu 5 Schriften auf einer Domain werden $24,99/Jahr fällig.

Handhabung von Typekit

Typekit einzusetzen ist so einfach, wie es im Sommer angekündigt wurde. Ich habe es kurz ausprobiert und wende Typekit aktuell auf die Überschriften (Artikelüberschriften) angewendet. Zum Einsatz kommt kam die Schrift „Dustismo“. Aktuell stehen 66 Schriften zur Verfügung.

Schriftsatz auswählen

Man wählt sich eine Schrift und muss dann noch ein paar Kleinigkeiten anpassen.

• Selektoren auf die die Schrift angewendet wird
• Schriftstile, die man zur Verfügung haben will (die dann jeweils vom Typekitserver geladen werden)
• Fallback
• (Subsets kommen demnächst noch dazu)

Bearbeitung der Schriftsatzoptionen

Im Prinzip muss man dann nur noch die zwei Zeilen Javascript in den head-Bereich der Website einfügen und schon kann Typekit arbeiten. Je nachdem welche Selektorenmethode man gewählt hat, muss auch die CSS-Datei noch angepasst werden.

In jedem Fall hat man Typekit bereits nach wenigen Minuten einsatzbereit.

Einfluss auf die Performance

Der Einsatz von Typekit hat Einfluss auf die Ladezeiten. Das ist klar, hält sich aber noch in Grenzen. Bei meinem Blog, angewendet nur auf die Überschriften, macht das etwa eine halbe Sekunde extra aus. Exzessiver habe ich es nicht getestet. Es ist aber wohl damit zu rechnen, dass sich die Ladezeiten weiter erhöhen, je mehr Elemente angesprochen werden.

Fazit

Ich lass’ die Sache mal ein paar Tage weiterlaufen und entscheide mich dann entweder für das kleine o.g. kommerzielle Paket oder verzichte ganz auf Typekit. Die Einblendung des Typekit-Links ist dauerhaft keine Option für mich.

Die Handhabung von Typekit ist jedenfalls kinderleicht und eröffnet so auf bequeme Weise mehr Vielfalt im Schriftenwald. So viel bleibt bisher festzustellen. Die Frage ist, ob einem der Hinweislink oder eine Ivestition von $25/Jahr und etwas höhere Ladezeiten die Sache Wert sind.

Schnell und am besten kostenlos Usability testen. Feine Sache. Denn oft bleibt einem nichts anderes übrig, wenn die Budgets für große Tests nicht da sind. (Kostenlose) Schnelltests ersetzen natürlich nicht professionell konzipierte und von Experten durchgeführte Tests. Auf diesem Weg kommt man aber zumindest zu ersten Verbesserungsansätzen, z.B. für die eigene Website.

Nachdem ich vor einiger Zeit mal den Five Second Test vorgestellt habe, stelle ich hier eine weitere Möglichkeit vor. Usabilla ist ein weiteres Onlinetool, das schnell eingerichtet ist und das Sammeln von visuellem Feedback ermöglicht.

Create an online test and start collecting visual feedback for your website or image in five minutes.

Die folgenden Screenshots von meinem ersten Testdurchlauf sollen einen ersten Eindruck von diesem Tool vermitteln.

Test anlegen und beschreiben

In der vorliegenden Testversion können max. 500 Nutzer befragt werden.

Seite (Screenshot) auswählen, die getestet werden soll

Es können eine oder mehere Seiten pro Test angegeben werden.

Übersicht des gerade angelegten Tests

In der Übersicht erhält man Informationen zum Inhalt des Tests und dessen Status. Später dann gelangt man von hier auch zu den Testergebnissen.

Ansicht für Testnutzer mit Toolbar für weitere Testoptionen

Die Testnutzer erhalten zunächst kurze Anweisungen zur Durchführung des Tests. Oberhalb des Screenshot bietet die Toolbar weitere Optionen.

Klicks der Testnutzer werden markiert

Die Antworten geben die Testpersonen in Form von Klicks. Das schränkt u.U. bei der inhaltlichen Gestaltung des Tests etwas ein. Allerdings können zusätzlich noch Notizen angebracht werden (s. nächster Screenshot).

Testpersonen können auch Notizen hinzufügen, um ihre Auswahl näher zu erläutern

Die Ergenisse der Tests werden in Form von Datenpunkten und/oder Heatmaps aufbereitet und dargestellt. Die Testauswertung erfolgt damit hauptsächlich an Hand visualisierter Klicks der Testpersonen. Zum Teil geben zusätzlich hinzugefügte Notizen weitere Hinweise. Die gesammelten Datenpunkte (Koordinaten) lassen sich außerdem als CSV-Datei exportieren und auswerten.

Testauswertung mit Heatmap

Usabilla sucht noch Betatester. Zu weiteren Konditionen konnte ich noch keine Informationen finden und warte noch auf eine Antwort per Mail. So wäre es interessant zu wissen, ob es später eine kostenlose Variante gibt und wie ggf. weitere Tarife aussehen. Mittlerweile gab es Antwort auf die Mail:

There will be a free trial version that allows you to test one page within a domain, with 50 participants. Depending on your further needs, that is, amount of pages and participants, you can upgrade your account.

Wie bereits kurz erwähnt, schränkt die überwiegend visuelle Dokumentation die Testgestaltung u.U. etwas ein. Dazu muss man Usabilla mal etwas ausführlicher testen, um beurteilen zu können, wie flexibel man als Tester dann tatsächlich ist.

Um also auch dieses Tool näher beschreiben zu können, werde ich selbst wieder einen etwas konkreteren Test aufsetzen. Wenn sich wieder ein paar Teilnehmer finden, kann ich dann ausführlicher beschreiben, inwieweit Usabilla eine gute und günstige Alternative darstellt. Wie z.B. hier damals zum 5-Sekunden-Test: 5 Sekunden sind keine Ewigkeit – Erkenntnisse aus einem Schnelltest

Um zuverlässige Testergebnisse zu erhalten, sollte man sich nur auf das verlassen, was man gesehen und gefühlt hat. Gerade erschien mit der “Xenocode Browser Sandbox” ein neues Tool, dass Webdesignern schnelle Tests verspricht. Vom Grundgedanken her ist das ganz gut. Scheinbar lässt aber die Ausführung (noch) stark zu wünschen übrig. Deshalb schrieb Dirk Jesse dazu: Xenocode Sandbox-Browser – Finger weg!

Darüber hinaus liefert er Hinweise und Links zu besseren Alternativen. Man hat zwar vordergründig zunächst mal mehr Arbeit. Aber baut man sich systematisch eine Testumgebung auf, kann man lange davon profitieren. Außerdem laufen die Browser dann wirklich in der Umgebung, für die sie gedacht sind. Nicht irgendwo virtuell und Web basiert.

Oder macht Ihr eine Testfahrt im Hof des Händlers?

Das Blog Some Random Dude. Ein aufwendig gestaltetes Blog, mit ungewöhnlichem Farbschema. Brauntöne dominieren. Mit viel Liebe zum Detail werden Hovereffekte mit Javascript gepimpt.

Bei deaktiviertem Javascript gibt’s leider keinen Hintergrund, die linksbündige Ausrichtung gefällt mir auch weniger. Trotzdem ein schönes Blog.

Die Links dieses Mal absolut konzentriert auf Webdesign.

• CSS: Dirk Ginaders Sammlung von CSS-Hacks. Falls man sie doch mal braucht. CSS Voodoo – Die dunke Kunst der CSS Hacks
• Webdesign: Eine Sammlung von Webdesign Best Practices Web Design+
• Webdesign & Webstandards: Zum Thema Prioritäten setzen. Webstandards? SEO? Effizienz? Reines Gewissen? Vernunft? Markup debates: rank priorities, code accordingly (via CSS Globe)
• Accessibility Tool: Browser-Bookmarklet für einen Schnelltest auf Barrierefreiheit. Quick Accessibility Page Tester