Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

Themenserie: redesign

19.10.09

La Renaissance

Schon seit ich dieses Blog gestartet habe, arbeitete ich an einem Redesign. Unzählige Mockups, Wireframes und auch schon fertige Templates wurden wieder verworfen, bis es zeitlich knapp wurde, denn mein Karrierekickstart stand bevor, y’know :-)

Good Designers redesign, great designers rearrange. Diesen Leitspruch nahm ich mir nicht zu Herzen, weil er sich auf mein altes Design und das, worauf ich hinarbeitete, nicht anwenden ließ. Nicht einmal das schöne, leuchtende Blau (#0282ff) hat sich halten können.

Meine ersten Zeichnungen bildeten alle zusammen das ab, was man sich unter einem typischen Designerportfolio vorstellt. Viel weiß, eine Leitfarbe und wenig Kontrast. Nach dem dritten Anlauf hatte ich die Nase schließlich voll davon. Ich wollte etwas mit Flair, etwas Atmosphärisches, etwas anderes. Ich entschied mich für meine Lieblingsepoche der Vergangenheit, die Zeit der Aufklärung. Kluge Menschen, die des nachts zwischen ihrem Tintenfass und hochragenden Bücherstapeln mit einer Gänsefeder im Kernzenlicht ihre philosophischen Gedanken auf Papier bringen. Auf der Website findet kann man dieses ursprüngliche Thema nur noch erraten, aber es zog sich als roter Faden durch alle späteren Designs. Ich habe übrigens gar nicht erst versucht, eine zwanghafte Verbindung zwischen dem Thema und „Webdesign“ zu suchen.

Stattdesssen konzentrierte ich mich darauf, On- und Offline so zu verbinden, dass man sich von beiden Seiten wiederfindet. Meine Visitenkarte zeigt sich gleich auf der Startseite und gibt demjenigen, der die URL abgetippt hat, sofort das Gefühl, reüssiert zu haben.

Mit der Haupttribüne holperte es im CSS gehörig, schließlich hat das ganze Gebilde auch ohne diese auszukommen. Bis jetzt finden sich auf der 960px*268px großen Fläche nur öde, dilettantisch freigestellte Bildchen. Urpsrünglich war gedacht, das ganze etwas (inter-)aktiver zu verwirklichen. Aber wie gesagt, die Zeit drängte.

Farblich habe ich mich themenbedingt an Braun- und Pastelltöne gehalten. Hier war mein Argument, dass diese alterstümlich anmutenden Farben meine Jugendlichkeit aufheben sollen. Kombiniert bin ich plötzlich 25 und der potenzielle Kunde wird sich keine Gedanken über etwaig fehlende Erfahrung meinerseits machen (und den Weihnachtsmann gibt es wirklich, jaha :-).

Trotz des Themas habe ich auf eine Frakturschrift verzichtet. Zusammen mit den Brauntönen könnte man da Gedankengut hineininterpretieren, das ist eindeutig nicht in meinem Sinne. Der Kopf-Bereich greift auf die Freefont Porcelain zurück und stellenweise taucht die Georgia auf. Im Inhaltsbereich dagegen kommt ausschließlich die DejaVu Sans (bzw. Lucida oder Verdana) zum Einsatz.

Je weiter das Projekt fortschritt, desto unzufriedener war ich damit. Ich sehe die Website aber ja zum Glück als einen stetigen Prozess und nicht als Produkt an. Und mit dem jetzigen Design habe ich zumindest schon einmal die Richtung eingeschlagen, welche ich in Zukunft weiter verfolgen werde.

Für negativ- sowie positiv-wertende Kommentare, Anregungen und Bugreports wäre ich sehr dankbar.

Kommentare

3.06.09

Redesign: Links

Letztens bin ich mal direkt auf Indiskretion Ehrensache unterwegs gewesen, anstatt mich nur im Feedreader durch die Beiträge zu lesen. Jedenfalls gefiel mir am Design besonders eines: die Links.

Anstatt den Links eine andere Farbe – z.B. Orange – zu geben und dann zu unterstreichen, behalten sie die Farbe des normalen Textes und bekommen einen andersfarbigen unteren Rahmen.

Das sieht meiner Meinung nach sehr elegant aus und ich könnte mir sogar einbilden, diese Links reißen mich weniger aus dem Lesefluss. Der Textbaustein wird als Link identifiziert, aber ich komme nicht ins Stolpern, wenn ich eigentlich nur den Text am Stück lesen möchte.

Ich habe das auch gleich mal beim derzeitigen Design dahingehend geändert, um zu sehen, wie das mit meiner Farbe (hellblau statt orange) ausschaut. Zusätzlich habe ich das Hintergrundbild, das auf Fremdverlinkungen hinweisen soll, eingegraut.

Ich habe sogar schon mit dem Gedanken gespielt, diese Grafiken ganz zu entfernen. Immerhin ist es auch irgendwie die Aufgabe des User Agent, dem Besucher klarzumachen, dass er sich mit dem Link von der Seite wegbewegt. Da gibt es doch bestimmt irgendwelche Firefox-Plugins, die das regeln könnten; zur Not tut’s auch ein Blick in die Statusleiste.

Eigentlich suche ich aber bloß eine Ausrede, um diese hässlichen Kästen mit den Pfeilen guten Gewissens aussondern zu können ;)

Wie sehen das meine wenigen paar Leser? Darf man auf ein bisschen Usability verzichten, wenn es dafür ein klein wenig besser aussieht? Und generell: Verbesserung oder Verschlechterung?

Kommentare [6]

2.06.09

Redesign: Schriftgrößeneinheit

Dieser Beitrag in der Reihe behandelt ausnahmsweise ein eher technisches Thema und zwar die Einheiten, in welcher die CSS-Schriftgrößen angegeben werden sollen.

Bekanntlich gibt es vier Screendesign-Einheiten für Schriftgrößen: Pixel (px), Elternelement-Schriftgröße (em), Prozentsatz der Elternelement-Schriftgröße (%) und Elternelement-x-Höhe (ex). Die x-Höhe hat bei der Wahl der Schriftgröße nicht viel zu sagen und em und % sind lediglich verschiedene Varianten der selben Idee: das Verhältnis zur Schriftgröße des Elternelements.

Man muss sich also entscheiden zwischen einer (eher) absoluten Einheit und einer rein relativen. Im Folgenden werden die Vor- und Nachteile der beiden Möglichkeiten näher beleuchtet. Beide Ansätze kann man sowohl pragmatisch als auch ideologisch betrachten.

Schriftgrößenangaben in der px-Form könnte man in Relation zur Bildschirmauflösung als absolut bezeichnen. Im Verhältnis zur realen Welt sind Pixel aber sehr wohl relativ, denn die Pixeldichte variiert von Ausgabemedium zu Ausgabemedium.

Der klare Vorteil bei der Pixel-Notation ist die Einfachheit. Man muss keine komplizierten Umrechnungen verbrechen und unter 20px kann sich jeder vor seinem inneren Auge schon vorstellen, wie das ungefähr aussehen wird. Moderne Browser haben mit dieser Notation auch keinerlei Probleme, denn der Textzoom vergrößert hier auch pixelnotierte Texte.

Ideologisch kann man argumentieren, dass sich Webdesigner mit dem Bildschirm auseinandersetzen und am Bildschirm immerhin Pixel regieren.

Ein Nachteil der Pixelmethode ist die fehlende Abhängigkeit zum Elternelement, welche im ersten Augenblick wegen der dadurch entstehenden, eben genannten Einfachheit ein Vorteil zu sein scheint. Beim zweiten Blick jedoch merkt man, dass Stylesheets, welche voll auf em- oder prozentual notierte Schriften setzen, gerade aufgrund dieser Abhängigkeit viel besser wart- und skalierbar sind.

Es wird in absehbarer Zukunft z.B. immer höhere Auflösungen bei gleich bleibender physikalischer Bildschirmbreite geben. Dadurch kann es vorkommen, dass heutige Schriftgrößen einmal viel zu klein ausfallen werden. Durch eine einfache Änderung der body-Schriftgröße kann das Problem in Sekundenschnelle behoben werden; der vollen Abhängigkeit sei Dank.

Ein ideologisches Argument für abhängige Schriftgrößen wäre dann noch, dass es sich bei em um eine extra für diesen Zweck geschaffene Einheit handelt.

Das Argument mit der Wartbarkeit fällt meiner Meinung nach am stärksten ins Gewicht, weshalb ich mich wohl für em und damit für den Mehraufwand der Umrechnerei entscheiden werde.

Kommentare [1]

21.05.09

Redesign: Kategorien

Zuletzt habe ich mich dem Thema Kategorien angenommen. Bisher gibt es auf diesem Blog keine kategorische Unterscheidung der Artikel, zumindest nicht im Frontend.

Im Backend hingegen ordne ich alle Beiträge in Kategorien ein. Das hilft mir, Artikel leichter zu finden und falls ich mich doch irgendwann dazu entscheiden sollte, Kategorien auch für Besucher anzuzeigen, wird die Implementierung deutlich einfacher.

Aber ich möchte zuerst wieder ganz zum Anfang zurück. Warum braucht man Kategorien, warum vielleicht auch eher nicht, welche Vorteile oder Nachteile haben sie für den Nutzer?

Ein ziemlich offensichtlicher Vorteil ist die Möglichkeit zu filtern. Man kann dem Besucher die Möglichkeit geben, nur Artikel eines bestimmten Themenbereichs anzuzeigen. Falls sich ein Nutzer nur für CSS interessiert, kann er diesen Bereich wählen und alle Beiträge, die diesem Kriterium entsprechen, werden für ihn herausgesucht.

Ein weiterer Vorteil ist die Übersicht, die sich bietet, wenn alle Kategorien an einer Stelle verzeichnet sind. Und je nachdem, wie exakt kategorisiert wurde, kann man auch einen Überblick über den Grad an Vertiefung in ein bestimmtes Thema bekommen.

Wenn es in einem Blog z.B. die Kategorien »Serifen«, »Serifenlose«, »Script« etc. gibt, wird sich dieses Blog wahrscheinlich viel intensiver mit Typographie auseinandersetzen als eines mit »HTML«, »CSS« und »Typographie«.

Kategorien können also durchaus einen Mehrwert haben. Aber wie schon bei den vorigen zwei Artikeln zu dem Thema Redesign kommt es auch hier auf die Benutzung an.

Man kann es beispielsweise zu weit treiben und fast jedem Artikel eine eigene Kategorie zuteilen. Dadurch verlieren sich selbstverständlich alle eben genannten Vorteile.

Eine Zahl von maximal 20 Kategorien versuche ich deshalb nicht zu überschreiten. Hinzu kommen noch Überkategorien (auch wenn diese technisch gesehen nichts anders als die anderen sind) wie »In eigener Sache«, »Frontend-Entwicklung«, »Netz allgemein« oder einfach »Sonstiges«.

Ein besonderes Verfahren, das ich mir von Gerrit van Aaken abgeschaut habe, sind Themenspecials. Bei mir heißen sie Themenserien. Anstatt jeden Artikel in eine Kategorie einzusortieren, gibt es nur einige wenige, die zusammen ein Ganzes bilden.

Ob Kategorien für Besucher sicht- und nutzbar sein werden, kann ich jetzt noch nicht sagen. Falls Nein, wäre eine Tagcloud weitestgehend sinnlos oder zumindest schwierig zu implementieren.

Kommentare

12.05.09

Redesign: Tag Clouds

Es geht wieder um die Sidebar. Zuletzt kündigte ich an, dass die letzten Kommentare in der Sidebar meines zukünftigen Blogdesigns höchstwahrscheinlich einen Platz finden werden. Jetzt geht es um Tag Clouds und deren (Un-)Nutzen.

Die Tagcloud war in den Anfangszeiten des Webzwonull ein Quasi-Standard. Die Worthaufen mit Schriftgrößenvariationen mussten einfach irgendwo zu finden sein, wenn man hip sein wollte.

Wie es eben so ist, wurde dann auch viel Unfug getrieben; die Tagclouds wurden nicht richtig ausgezeichnet oder sinnlos in der Größe variiert, anstatt nach einem Schema zu handeln, und so weiter.

Ein – meiner Meinung nach – sehr krasses Beispiel, das es für mich auf die Spitze treibt, sind 3D-Flash-Tag Clouds. Zugegebenermaßen schön anzusehen, aber unbenutzbar.

Tag Clouds sind ganz klar zum Stöbern und nicht zum schnellen und effizienten Informationsgewinn. Sie sind bewusst unaufgeräumt und nirgendwo stöbert es sich schöner als in einem Raum mit viel Unordnung und allerlei Krempel.

Allerdings möchte ich nicht für den Nutzer entscheiden, ob er stöbern möchte, oder sich nur in einen längeren Artikel vertiefen will. Tag Clouds lenken im Lesefluss zu stark ab und sind deshalb in der Sidebar fehlplatziert.

Dahingegen ist es aber einen Gedanken wert, die Schlagwortwolke z.B. im Archiv unterzubringen. Wer sich in das Archiv eines Blogs begibt, der möchte stöbern. Warum soll man ihm dann keine schöne Tag Cloud servieren?

Doch nun zum Technischen: Wie zeichnet man eine Schlagwortwolke korrekt aus? Meine erste Idee war eine ungeordnete Liste und ich halte diese Lösung immer noch für sinnvoll. Diese Art der Wolke ist für den grafikunfähigen Browser einfach besser darzustellen und somit für diese Nutzer einfacher zu scannen.

Bei der semantischen Gewichtung der Links ist HTML 5 sehr zuvorkommend, indem es Verschachtelungen von em-Tags ausdrücklich zulässt. Dadurch kann man die Gewichtung eines Schlagwortes sehr exakt angeben und muss sich nicht mit dubiosen Klassen oder style-Attributen abmühen.

Ganz wichtig ist außerdem, dass die Begriffe alphabetisch sortiert sind. Ein anderes Ordnungskriterium hätte keinen Sinn.

Wenn in meinem neuen Design solch eine Wortwolke also überhaupt vorkommt, dann im Archiv. In der Sidebar hat das Ding meiner Meinung nach jedenfalls nichts zu suchen.

Kommentare [2]
Neuere Artikel
Ältere Artikel

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll