Many of you have probably used or at least heard of the famfamfam silk iconset in the past. 1000 free 16×16px icons for every purpose you can think of. Many websites or software packages are using it.

But 1000 icons means (in case you really use all of them) 1000 HTTP requests which is really a lot. And even if you’re using only ~100 icons, that’s still a lot of HTTP requesting.

For this reason I created a small CSS sprite version of the popular iconset including all 1000 icons in one single 299K png file + 1 stylesheet (56 KiB). (Filesize was reduced almost by half! (355K instead of 646K, that’s a reduction by 46%)).

Usage

Very simple. Just add a span to your markup, then add the class „icon“ and „iconname„.

Example:
<span class="icon attach"></span>

Download

Grab the file here:
http://www.manuel-bieh.de/publications/download/fff-sprites.zip

License

As the original iconset, the sprite is filed under Creative Commons Attributions 2.5

Ende Oktober 2008 ist es soweit – die neue Adobe Creative Suite 4 geht auf Tour.

Den Anfang macht am 29.10.2008 die grosse Launch Veranstaltung mit zahlreichen Partnern in Kölner E-Werk. Danach geht es auf Tour durch Deutschland, Österreich und die Schweiz.

Unsere Experten zeigen Ihnen in der ganztägigen, für Sie kostenlosen Veranstaltung alle neuen Funktionen und Werkzeuge – das sollten Sie auf keinen Fall verpassen! Gehören Sie zu den Ersten, die live die Adobe Creative Suite 4 sehen. Melden Sie sich noch heute an und sichern Sie sich Ihren persönlichen Platz!

Termine und Orte

• 29.10.2008 Köln
• 10.11.2008 Berlin
• 18.11.2008 Zürich
• 21.11.2008 München
• 25.11.2008 Wien
• 27.11.2008 Hamburg

Programm

Kreativ-Workflow mit der Creative Suite 4 Design Premium Was gibt es Neues in Photoshop CS 4 Erstellen interaktiver Anwendungen mit der Creative Suite 4 Web Premium Postproduktions-Workflow mit der Creative Suite 4 Production Premium

Die Anmeldung ist unter Tour Daten/Registrieren möglich.

Aber beeilen Sie sich, die Teilnehmer-Plätze sind begrenzt!

http://www.shortcut-to-brilliant.com/

Wie man wohl unschwer erkennen kann ist alles sehr viel simpler geworden (beabsichtigt), dafür habe ich mehr Wert auf die Typografie gelegt und darauf geachtet möglichst alle gebräuchlichen HTML-Elemente (von den Links, über Listen und Blockquotes, bis zu Codebeispielen und Headlines) vernünftig durchzustylen. Mir jedenfalls gefällts und in den nächsten Tagen sollte auch der restliche Webauftritt umgestellt werden. Dann mit Typo3 als Motor.

Achso: den IE6 habe ich bisher vollkommen außen vor gelassen, wenn Ihr mit einem 6er Explorer dieses Blog ansurfen solltet, es tut mir leid.

Künstler, Designer und Kreative aufgepasst: Ab sofort werden Arbeiten zum Thema „Begegnung in der Nordstadt“ für einen Kreativ-Wettbewerb gesucht. Eingereicht werden können Arbeiten zum Thema „Begegnung in der Nordstadt“ aus den Bereichen Malerei, Illustration, Grafikdesign, Fotografie oder einem Mix aus allem. Der künstlerischen Umsetzung werden keine Grenzen gesetzt. Es winken Preisgelder in Höhe von insgesamt 3.000 Euro. Der Wettbewerb wird ausgelobt vom 51° Nord e.V. – dem Dortmunder Kreativnetzwerk.

Alle weiteren Infos und das Formular zur Anmeldung gibt es auf der Seite von 51° Nord: http://www.51nord.de/68.html

Dann hab ich da ggf. etwas für Dich:
http://www.raphael-gmbh.de/jobs.0.html

Wer jetzt genauso geil auf das Bier geworden ist wie ich, sollte mit seinen Browser schnell www.becksit.de ansurfen, sich die Materialien herunterladen, und schnell anfangen. Der Wettbewerb endet am 28.02.2007!

Und irgendwie auch beneidenswert. Ich altes Freehand-Kind komm immernoch nicht wirklich gut mit Illustrator zurecht.

The World’s Most Photorealistic Vector Art:
http://basangpanaginip.blogspot.com/…ds-most-photorealistic-vector-art.html

In groß gibt’s die Bilder, und noch einige weitere, unter http://fotos.manuelbieh.de/2006-07-12/
wobei mir dabei auffällt das ich meine uralte und irgendwann mal sporadisch erstellte Galerie mal überarbeiten sollte …

Wer bin ich und was mache ich?

Ich bin junge 21 und seit einem knappen Jahr ausgebildeter Mediengestalter für Digital- und Printmedien mit der Fachrichtung Nonprint/Onlinemedien. Meine Spezialität sind sahnemäßige Umsetzungen von qualitativen Internetseiten mit Hilfe von sauber strukturiertem, semantischem XHTML und CSS. Gerne gestalte ich diese Seiten auch selbst, und, wie sich das für einen anständigen Webentwickler gehört, schrecke ich auch vor kleinen bis mittelgroßen Anwendungen in PHP und MySQL nicht zurück. Zudem ist auch die Logogestaltung ein Bereich, bei dem ich Ihnen sehr gerne behilflich bin.

Ich arbeite seit März 2005 für eigene Kunden und Agenturen, und betätige mich als Autor von Fachbeiträgen zum Thema Usability, (X)HTML und CSS. Zum Beispiel hier in meinem Weblog, bei Dr. Web Plus (kostenpflichtig) oder auch für die Webkrauts.

Einige Arbeitsbeispiele kann man hier auf meiner Seite in den Referenzen finden, gerne schicke ich Ihnen bei Interesse aber auch ein PDF zu, in welchem ich mich und meine Tätigkeiten nocheinmal kurz beschreibe. Rechnungen kann ich Ihnen selbstverständlich ausstellen, allerdings bisher nur ohne ausgewiesene Mehrwertsteuer.

Bei weiteren Fragen oder bei Interesse melden Sie sich bitte unter job@manuelbieh.de oder telefonisch unter der im Impressum angegebenen Telefonnummer. Ich freue mich auf Ihre Anfrage!

(das mit dem »Sie« war hier im Weblog übrigens mal eine Ausnahme, verzeiht mir, liebe Leser ;) )

Ten easy steps to become a famous designer

• Stefan Sagmeister
• Erik Spiekermann

Geantwortet werden sollte in möglichst kurzen Sätzen, oder auch einfach in Stichpunkten. Ziemlich viele verschiedene Meinungen waren zu hören, teilweise komplett abweichend von meiner (zugegebenermaßen teilweise sehr speziellen) Meinung.

Diese Frage kam mir gerade wieder in den Sinn, und ich finde sie eigentlich ziemlich interessant. Von daher frage ich nun Euch, meine Leser, die ja zum größten Teil aus fachkundigen Leuten bestehen. Also:

Was ist für Euch Gestaltung?

Über zahlreiche Meinungen und rege Diskussion hier in den Kommentaren würde ich mich freuen. Schönes Wochenende!

Downloadgröße ist 8 MB, und finden lässt sich PDF unter
http://www.internetworld.de/sixcms/detail.php?id=402

Ausgabe #1 wurde derweil bisher rund 350 mal heruntergeladen! Erwünscht sind diesmal auch ausdrücklich Grafiken zum Thema, nicht wie in der letzten Ausgabe hauptsächlich Fotos. Also: Gebt Euch einen Ruck, und ab mit den sachen an urbanperspectives@manuelbieh.de!

Das Design reizt den CSS 2 Umfang schon sehr aus, ich habe viele :after, :before und andere Pseudoelemente benutzt, mit verschachtelungen (#marginalie > ul li …) gearbeitet, aber dennoch darauf geachtet das die Seite möglichst kompatibel zu allen gängigen Browsern ist. Außen vor blieb, wie sollte es anders sein, natürlich mal wieder der IE, der eine absolut simple Version der Seite bekommt, die im Funktionsumfang allerdings nicht eingeschränkt ist. Nur halt nich so schön.

Wer möchte kann ja einmal ein wenig rumklicken, und wer rumklickt der wird evtl merken das ich von »Du« auf »Sie« umgestellt habe. (Hier im Weblog behalte ich das Du weiter bei). Das hat den Grund das ich mich seit einigen Monaten selbstständig durchschlagen muss, und die Seite nun weniger als Spielwiese, als als erste Basis zur Kundengewinnung nutzen möchte.

Sollte also irgendwer da draußen Aufträge in Sachen xhtml/css/barrierefreiheit/usability/… zu vergeben haben, hallo! hier bin ich! ;)

Zur Abwechslung mal was lustiges zum heutigen Tage.

Schlecht gekennzeichnete Links

Ich finde fast nichts geht darüber, Links so zu kennzeichnen, dass diese nicht als solche zu erkennen sind. Da gibt es dann Beispiele, in denen dunkelgraue, nicht unterstrichene Links sich inmitten von schwarzem Fließtext befinden. Manuel sagt: So nicht!
Links sollten meiner Meinung nach, möglichst immer unterstrichen sein, oder in einer Textfarbe, die sich deutlich von sonstigen Auszeichnungen (wichtiger Text in Fett, noch wichtigerer Text in rot, etc …) unterscheidet.

Unterstrichener Text

Zusätzlich zur (im optimalen Fall benutzten) Unterstreichung von Links, sollten diese auch eine andere Farbe bekommen. Dies muss nicht wie Usability Gurus behaupten das standard Link-Blau sein, sollte sich aber dennoch merklich vom Fließtext abheben. Andernfalls sollte man auf unterstrichene Stellen im Text verzichten, und stattdessen auf die dafür vorgesehenen Elemente <em> oder <strong>, also kursiven oder fetten Text, für Auszeichnungen zurückgreifen. Auch wenn die Zeit, in der ein text-decoration: none; bei Links noch nicht möglich war bereits lange vorbei ist, so identifizieren sehr viele Leute, mich eingeschlossen, unterstrichene Stellen im Text auch weiterhin mit Verlinkungen.

Zu kleine Schrift

Wird von sehr vielen Designern viel zu häufig schlecht angewandt und verwendet. Schriftgrößen unter (je nach Schriftart) 12 bis maximal 11px sollten höchstens für Kleingedrucktes (daher wohl auch der Name!) benutzt werden. Kein Mensch tut sich freiwillig (am Monitor) einen längeren Text an, der in einer 10px Arial gesetzt ist. Beste Erfahrungen habe ich persönlich mit Schriftgrößen im Bereich von 12 — 16 Pixeln machen können, bei allem was darüber hinaus geht wird die Schrift an Windows PCs ohnehin hässlich zu fett.

Zu große Schrift

Nicht nur zu kleine Schrift kann sehr unleserlich sein, in letzter Zeit wurde ich häufig darauf angesprochen, warum ich so oft recht große Schriftgrade benutze. Und in der Tat, bei einer Zeilenlänge von 500 Pixeln ist eine 16 Pixel große Schrift definitiv zu viel. Entgegen Behauptungen von Fachbüchern, in denen sehr häufig eine Zeilenlänge von 40—60 Zeichen als optimal für den Bildschirm angegeben wird, bin ich der Meinung, dass mindestens 60 Zeichen bis maximal 90 Zeichen das Optimum sind.

Zu lange Zeilen / »Flüssige Layouts«

Seiten bei denen sich die Zeilenlänge an das Browserfenster anpasst sind in der Regel eine feine Erfindung. Dies jedoch nicht für Leute wie mich, die mit einer Bildschirmauflösung von 1600 × 1200 Pixeln unterwegs sind. Für diese Randgruppe wird das Lesen von Texten derartiger Internetseiten verdammt erschwert. Ich ziehe mir jedenfalls in diesen Fällen in der Regel das Browserfenster kleiner, oder skaliere die meist ohnehin schon recht große Schrift. Für uns Webentwickler wurde vom W3C daher das extrem praktische max-width als CSS 2.1 Standard verabschiedet. Mein Tipp für Textcontainer: width: 100%; max-width: 600px; (Werte beliebig austauschbar ;) )

Zeilenhöhe auf Standardwert

Standardmäßig beträgt die Zeilenhöhe im Browser 1em, also der angegebenen Schriftgröße für einen Text. Unabhängig von der Schriftgröße hängt Text dabei jedoch sehr eng »aufeinander«, das Auge verrutscht daher beim Lesen sehr schnell in der Zeile, was ein angenehmes Lesen sehr erschwert. Faustregel ist hier, Zeilenabstand mindestens so groß wie der Abstand zwischen zwei Wörtern. Ist das Leerzeichen in der eingestellten Schriftgröße also 4 Pixel breit, sollte der Abstand der Zeilen ebenfalls mindestens 4 Pixel betragen. Gute Erfahrungen habe ich hier mit Werten zwischen 130 — 160 % gemacht.

Nervige PDF-Downloads im Browserfenster

Fast jeder kennt es, man klickt einen Link, dieser ist aber zufällig ein Speicherintensives PDF, und die nächsten 30 Sekunden reagiert der eigene Browser somit mal einfach garnicht. Dies muss nicht sein, Links zu PDFs sollte man daher immer kennzeichnen. Dies funktioniert bei anständigen Browsern meistens mit einer Zeile CSS-Code automatisch. Wie genau das gemacht wird, beschrieb ich bereits vor einiger Zeit in einem anderen Artikel.
»Links zu PDFs im Browser kenntlich machen«

Deaktivierte Navigationspunkte

Darüber streiten sich die Geister, sicherlich gibt es Vorteile, aber auch Nachteile. In meinen Augen überwiegen jedoch, aus Usability-Sicht, klar die Nachteile. Es geht darum ob Links zu aktuell angewählten Menüpunkten weiterhin »klickbar« bleiben. Ein Vorteil soll ja sein, dass man klar erkennt in welcher Rubrik der Seite man sich befindet. Für meinen Teil allerdings nicht wirklich nachvollziehbar, da man derartige Kennzeichnungen auch auf Links anwenden kann. Ein klares Argument dafür, gewählte Menüpunkte aktiv zu lassen, also den Link in die Rubrik nicht zu entfernen, ist auf jeden Fall, dass man auch bei nicht vorhandener Brotkrumen-Navigation stets auf die oberste Ebene zurückkommt, sollte man sich auf einer Unterseite befinden. Meine Empfehlung daher: Links von gewählten Menüpunkten immer Link bleiben lassen.

JavaScript Links

Auch dies ist in meinen Augen eins der schwersten Verbrechen was Web-Usability angeht: Links über die der User keine Kontrolle hat. Solche Links haben meist die Form:
<a href="javascript:neuesFenster('start.html');">, <a href="javascript:void();" onclick="window.open('seite2.html');" > oder ganz pervers: <a href="javascript:showpage(6671379);">. Doch auch das muss nicht sein. Dem User wird somit zum einen die Möglichkeit genommen Links während des Lesens im neuen Fenster (Shift+Mausklick), oder im neuen Tab (Strg+Mausklick oder mittlere Maustaste) zu öffnen, zum anderen haben User mit deaktiviertem JavaScript oftmals keine Chance durch die Seite zu navigieren. Dieses Usability-Ungeheuer trifft man all zu häufig in automatisch generierten Bildergalerien an, in denen es damit nicht möglich ist sich schnell hintereinander mehrere Bilder in Tabs anzeigen zu lassen. Aber auch komplexe CMS’ erzeugen teilweise derartige »Un-Links«. Dabei gibt es eine, unglücklicherweise immer noch recht unbekannte Möglichkeit, Links in neuen Fenstern zu öffnen, ohne dabei User auszuschließen oder in ihrer Entscheidungsfreiheit einzuschränken. Auch dazu schrieb ich bereits vor einiger Zeit einen kleinen Artikel
»Neues Fenster für Links unter xhtml 1.0 strict«
Jede Funktion sollte damit eigentlich so umgeschrieben werden können, dass der onclick-Handler nur bei eingeschaltetem JavaScript ein neues Fenster öffnet, die Seite dadurch aber für jedermann benutzbar bleibt.

Sperre der rechten Maustaste

Gerne wird auch heute noch bei einigen Seiten die rechte Maustaste blockiert (dabei ist der »Trick« ja schon sooowas von ausgelutscht …). Dies soll zumeist »Diebe« daran hindern an bestimmte Snippets im Quelltext, oder an Grafiken zu gelangen. Oftmals wissen entsprechende Seitenbetreiber nicht, dass sich das Bild zum Zeitpunkt in dem es angezeigt wird, bereits auf der Festplatte im Browsercache befindet. Eine solche »Funktion« hindert aber niemanden daran ein Bild, spätestens mittels Screenshot, zu klauen. Jedoch hindert es Leute die über das Kontextmenü Textpassagen kopieren, oder die Seite lokal speichern möchten. Ganz davon abgesehen gibt es mittlerweile glücklicherweise Extensions mit denen die Funktion der rechten Maustaste uneingeschränkt erhalten bleibt.

Flashseiten, Music-Player und keine Stop-Funktion

Ich weiß ja nicht ob ich die Funktion im Flashplayer noch nicht gefunden habe weil ich sie einfach nicht gefunden habe, oder weil es sie schlicht nicht gibt. Jedenfalls kann ich nicht behaupten nicht gesucht zu haben. Aber ich höre in der Regel, wenn ich am Rechner sitze Musik über WinAmp. Wenn ich eine Seite aufrufe, auf der Musik im Hintergrund läuft, dann find ich das ja ganz nett, allerdings steh ich nicht gerade auf »Sandwich-Composings« was Musikstücke angeht. Sprich, ich muss entweder mein WinAmp ausschalten, oder die Musik der Website. Da ich mir die Musik die ich höre generell ganz gerne selbst aussuche, ist es nicht selten vorgekommen das ich eine Seite die ich besucht habe genauso schnell wieder verlassen habe, wie ich gekommen bin — auf Grund des fehlenden Stop-Buttons. Daher: Musik, aber kein Ton-Aus-Knopf = Todsünde!

Reine Infoseiten + Flashtext

Im Gegensatz zu leider scheinbar sehr vielen Flash-Entwicklern weiß ich, dass es möglich ist, Texte in Flash dynamisch so einzubinden, dass diese hinterher problemlos aus dem Flashfilm mit der Maus kopiert werden können. Leider sieht man jedoch sehr häufig auf Seiten, auf denen ich die ein oder andere Textpassage kopieren und weiterverschicken möchte so statisch ist, dass mir nichts anderes übrig bleibt, als den Text abzutippen. Böser Fehler, vor allem auf Seiten die auf Grund des Lehrgehalts ein kopieren zulassen sollten.

Falsche Ordnung des Tabindex’

In der Regel geht ein Browser Formular-Eingabefelder in der Reihenfolge durch, in der sie im Quelltext stehen. Ausnahmen gibt es, wenn für einige Elemente das Attribut tabindex gesetzt ist. Generell ist gegen die Benutzung von tabindex nichts einzuwenden. Jedoch sollte man darauf achten, dass die Reihenfolge des Index in einer logischen Reihenfolge bleibt. Habe ich beispielsweise ein Formular in dem ich abwechselnd Pflichtfelder und optionale Felder habe, wäre es sehr unklug erst die Pflichtfelder, und dann erst die optionalen Felder anzuspringen. Es würde schlichtweg zu lange dauern, bis ein User wahrgenommen hat, dass der Cursor bereits 2 Felder weiter ist.

Unklug belegte Accesskeys

Beim Gebrauch von Accesskeys sollte man vorsichtig sein, denn schnell kommt es zu Konflikten mit Browserinternen Shortcuts. Habe ich auf einer Seite einen Link »Deutsche Version«, sollte ich mir zweimal überlegen ob ich den entsprechenden Accesskey auf D lege, oder ob ich meinen Usern die Option offen lasse, mittels ALT+D das Datei-Menü in meinem Browser aufzurufen.

Zu lange oder zu allgemeine Seitentitel

Google und auch andere Suchmaschinen mögen das title-Element. Ich mag das Teil auch. Denn ebenso mag ich es, wenn ich in meinen Bookmarks, von denen mir in der Übersicht rund 40 Zeichen des Seitentitels der gebookmarkten Seite angezeigt werden, sehen kann, um welche Seite und evtl. sogar Unterseite es sich handelt. Ein guter Titel hätte demnach kurz und prägnant in etwa die Form:
ManuelBieh.de » Weblog » Usability. Ich sehe so bereits auf dem ersten Blick welche Seite gemeint ist, und muss nicht erst das erweiterte Lesezeichenmenü meines Firefox öffnen. Zusätzliche Beschreibungen im Titel sind in meinen Augen aber ebenfalls ok, und oft sogar von Vorteil. So könnte ich, wenn ich den genauen Namen einer gesuchten Seite nicht mehr weiß, ich aber weiß das sie sich in meinen Bookmarks befindet, ganz einfach nach einigen Keywords suchen. Dazu könnte sich ein Titel in etwa der Form ManuelBieh.de » Weblog » Usability, Benutzerfreundlichkeit im Internet, Accessibility unter Umständen sehr gut eignen. Zum einen für Suchmaschinen, zum anderen für den User, der auf den ersten Blick klar erkennt worum es geht, aber auch die Möglichkeit hat nach vielen Schlagworten innerhalb seiner Bookmarks zu suchen.

Die angesprochenen Punkte sind wie erwähnt lediglich Erfahrungswerte von mir, Kunden und auch Freunden. Ich habe bisher keinerlei größeren Befragungen oder Beobachtungen bei Dritten angestellt. Die Liste ist für mich aber recht plausibel, und ich würde gerne mit Euch über die Punkte diskutieren, denen Ihr nicht zustimmt oder bei denen Ihr der Meinung seid das sie definitiv fehlen. Ich habe mich jedenfalls beim Schreiben am »durchschnittlichen« Internetuser orientiert, mich also bemüht aus der Sicht von Computer Neulingen, aber auch von Computerversierten Nutzern zu sprechen. Spezielle Dinge, die die Erstellung barrierefreier- oder Flash-Seiten betreffen, habe ich bewusst erstmal aussen vor gelassen, beziehungsweise nur angeschnitten. Dürfen aber selbstverständlich gerne mitdiskutiert werden.

Hallo Manuel,
ich hätte da einen kulturellen Beitrag für deinen weblog.
Über Deine Unterstützung durch eine Erwähnung oder einen Beitrag würde ich mich sehr freuen.

Auf den allerersten Blick macht die Seite auf mich einen guten Eindruck mit ebensoguten und professionellen Arbeiten, kostenlos ist’s noch dazu, wieso also nicht:

Die neue Internet Galerie augensound.de will eine Community für künstlerische Werke aller Art schaffen. Das Portfolio der Künstler reicht von 3D über Fotografie bis hin zu Illustrationen und traditioneller Malerei. Auch stilübergreifende Gruppenarbeite lassen sich finden. Künstler haben die Möglichkeit, Ihre Werke kostenlos zu veröffentlichen und zu präsentieren, die dann kommentiert und bewertet werden können.
Durch den dynamischen Aufbau dieser Internet „Vernissage“ verändert sich das Erscheinungsbild täglich durch den Einfluss der Community. Es wird somit immer etwas neues Geboten. Neue Künstler sind immer Willkommen.

www.augensound.de