Zur Agentur | UX Showcase

3 Kommentare | 22. März 2011, Oliver Schmid

Bereit für HTML5?

Das HTML5 Logo

Es ist soweit, ab sofort setzt Webgarten alle Kundenprojekte mit HTML5 um, sofern nicht explizit etwas anderes gewünscht wird.
Offiziell empfiehlt das W3C zwar noch XHTML, allerdings gibt es keinen wirklichen Grund dafür. Der W3C Validator kann bereits sehr gut mit HTML5 umgehen. Als Vertrauensbeweis habe ich die eigene Website bereits mit HTML5 umgesetzt. Ein weiterer Vertrauensbeweis erbringt niemand geringerer als Google. Hier wird HTML5 schon länger eingesetzt, was ein Blick in den Quellcode von Google beweist. Und da Google selber HTML5 verwendet dürfte das Unternehmen auch nicht abgeneigt sein, HTML5 Dokumente gut positioniert im Suchresultat anzuzeigen. Die semantische Auszeichnung könnte Google bei der Einschätzung sogar helfen.

Anwender zeitgemässer Browser sollen von neuen Funktionen profitieren, sofern diese bei alten Browsern keine Probleme verursachen.

So sieht ein HTML5 Dokument aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<h1>Ich bin supersexy HTML5 Code
<ul>
<li>Und verzichte auf unnötige Dinge
<li>Weniger ist mehr!

Die End-Tags braucht es nicht mehr und beim body kann sogar das Start-Tag weggelassen werden.

Die Vorteile von HTML5

  • Schlanker Code und schnellere Ladezeiten
  • Semantische Auszeichnung (Neue Selektoren wie: nav, head, aside, menu, article usw.)
  • Zahlreiche neue Funktionen, welche teilweise schon genutzt werden können
  • Für die Zukunft gerüstet, es braucht künftig keine Umstellung mehr da HTML5 fliessend wächst

Lesetipp zu HTML5

Das HTML5 Buch kann ich empfehlen. Es hat mir als Vorbereitung für das Redesign von Webgarten gedient und mich definitv von HTML5 überzeugt.

Nachtrag: HTML5 versus XHTML

8 Kommentare | 21. April 2010, Oliver Schmid

Die Zauberformel für Designer

Das Buch Visual Display of Quantitiv Information von Edward Tufte ist definitv ein Muss für jeden Webdesigner und Programmierer. Es bestätigt meine Überzeugung, dass der Design Grundsatz „Form Follows Function“ zu Schönheit führt. Edward Tufte hat die Zauberformel (data-ink ratio) für Designer erfunden. Für den intelligenten Designer durchaus zu vergleichen mit der Relativitätstheorie von Albert Einstein.

Zauberformel für Designer: Data-ink ratio

Der „data-ink ratio“ bei Chart Grafiken sollte möglichst hoch sein. Also das Verhältnis von Informationen welche Daten enthalten (data-ink) zu Informationen ohne Daten (data-junk). Erstrebenswert ist ein möglichst grosser Anteil an data-ink. Das ist die Fläche die sich verändert wenn die Daten sich ändern, es ist die nicht entfernbare Core Grafik.

Alle Elemente ohne Daten nehmen den Daten die Aufmerksamkeit. Sie lenken ab wie Tufte in zahlreichen Beispielen aufzeigt.

Ein weiteres Beispiel sah ich in einer Präsentation von Ryan Singer, ich habe es hier nachgestellt:

Einige Statements aus dem Buch von Tufte:

  • Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space
  • Above all else show the data
  • Maximize the data-ink ratio
  • Erease non-data-ink and redundant data-ink
  • Induce the viewer to think about the substance rather than about methodology, graphic design, the technology of graphic production, or something else
  • As the art bureaucracy grows, style replace content
Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.

Redesign einer Chart Grafik

  • Hier haben wir eine durchschnittliche Chart Grafik,
    so wie wir diese häufig antreffen.

    Redesign einer schlechten Chart Grafik

  • Die Box kann entfernt werden.

    Chart Grafik, etwas besser, aber noch nicht gut

  • Die vertikale Achse kann entfernt werden.

    Chart Grafik, noch etwas besser

  • Sogar ein Teil der Balken kann entfernt werden,
    um eine weisse Linie erscheinen zu lassen.

    Redesign Chart, jetzt schon viel besser

  • Nun können auch die schwarzen Markierungen weggelassen werden.
    Die Zahlen schieben wir näher an die Balken.

    Sehr gute Chart Grafik

  • Die horizontale Line kann auch weggelassen werden,
    da das Ende der Balken den Abschluss markieren.

    Die Perfekte Chart Grafik

Der content-pixel ratio für Webdesigner

Das Buch wurde vor 35 Jahren geschrieben. Können Webdesigner daraus etwas lernen? Ja, sehr viel sogar! Die Grundregeln sind noch immer gültig, vielleicht mehr denn je.

Für uns Webdesigner gilt aber der „content-pixel ratio“. Ink wurde zu Pixeln und Daten zu Content. Somit ist es also erstrebenswert, wenn die Fläche an Inhalt möglichst wenig „inhaltsloser“ Fläche (Dekorations Elemente) gegenüber steht. Denn jedes unnötige Element nimmt dem Inhalt die Aufmerksamkeit. Für uns heisst die Formel also:

Zauberformel für Webdesigner: Content-pixel ratio

Folgende Webdesig Regeln können wir daraus ableiten:

  • Jeder Pixel braucht einen Grund um am entsprechenden Ort zu sein. Und dieser Grund sollte immer die Darstellung neuer Information sein.
  • Lösche alle unnötigen Elemente
  • Es gibt keine gleich wichtigen Elemente. Weniger wichtige Elemente müssen schwächer dargestellt oder entfernt werden.
  • Die Inhalte müssen bereits vor der Erstellung des Designvorschlages existieren
  • Schönheit entsteht durch das attraktive Verhältnis verschieden langer Abstände. Man beachte den Goldenen Schnitt.
  • Ist man mit den Design nicht zufrieden beginnt man besser neu als dass man unnötige Dekorationselemente zufügt
  • Mache das Design für den Nutzer, nicht zu deiner Selbstverwirklichung
  • Verzichte auf unnötige Verpackungen (Boxen, Container)
Gestalte den Inhalt und nicht das „Rund um den Inhalt“

Praktische Anwendung im Webdesign Bereich

Für die Website meiner eigenen Agentur konnte ich diese Philosphy 2005 konsequent umsetzen. Technisch zwar bereits veraltet (Table Layout), das Design jedoch zeitlos und immer noch aktuell und ich sehe keinen Grund daran etwas zu ändern. Man beachte den Data-Pixel ratio auf den Subseiten wie dieser (Offline).

Leider ist solch eine radikale Umsetzung bei Kundenprojekten selten möglich. Der Kunde denkt man spare mit einem minimalen Design Aufwand oder man könne mit Rahmen, Schatten und Boxen den schwachen Inhalt kaschieren. In 90% der Fälle liegt der Inhalt aber noch gar nicht vor. Statt auf den Inhalt konzentriert man sich dann auf das „Rund um den Inhalt“.

Weitere Informationen

Bitte beachte auch meinen Blogbeitrag zur Typografie. Und wer das Buch von Edward Tufte jetzt noch immer nicht bestellt hat ist selber Schuld.

9 Kommentare | 7. April 2010, Oliver Schmid

Was ist gute Typografie?

Jan Tschichold: Typografie

Die beiden Grundpfeiler guter Typografie

Schrift und vor allem Anordnung nannte der Typograf Jan Tschichold einst die Grundpfeiler guter Typografie. Er schrieb:

„Gute Typografie ist wesentlich ein Ergebnis wohlüberlegter Anordnung. Einer ungeschickten Anordnung helfen selbst die allerschönsten Schriften nichts, aber selbst mit mittelmässig guten Schriften kann man eine gefällige Anordnung treffen.“

Heute kann dank Computer jeder typografisch tätig sein. Der Beruf Typograf ist verschwunden und damit eine Jahrhunderte alte Ausbildung. Wer heute im Bereich Typografie lernen will muss Bücher lesen!

Fehlendes Wissen

Webdesigner und Grafiker haben in der Regel hunderte von Schriften auf ihren Rechnern installiert. Oft fehlt aber das notwendige Grundwissen zu deren Anwendung.

Dies zeigt Beispielhaft die häufig unbedachte Anwendung der Schrift „Frutiger“. Diese Schrift hatte Adrian Frutiger für die optimale Lesbarkeit aus weiter Distanz entwickelt. Also ideal für Plakate und Schilder! Trotzdem wird sie immer wieder in langen Fliesstexten verwendet, ja ganzen Bücher wurden damit geschrieben. Dafür hatte Adrian Frutiger eigentlich die Univers entwickelt. Diese war die erste Schrift ohne Serifen, welche in Fliesstexten annähernd so gut lesbar war wie eine Serifenschrift.

Weitere Fehler sind unter anderem:

  • Erzwungenem Blocksatz, welcher riesige Löcher zwischen den Wörtern verursacht, und die gute Lesbarkeit behindert
  • Zahlreichen Schriften auf ein und der selben Website
  • Alles Fett geschrieben
  • Alles viel zu klein geschrieben
  • Experimente an Buchstabenabständen

Buchstaben dürfen nirgendwo beliebig dicht oder weit auseinander gesetzt werden. Niemals dürfen Kleinbuchsteaben gesperrt werden. Grossbuchstaben müssen hingegen leicht gesperrt werden.

Gute Typografie ist gutem Benehmen verwandt

Alles schreit, alles ist hervorgehoben, alles Fett! Während sich im normalen Leben gewisse Anstandsregel durchgesetzt haben herrscht gestalterische Anarchie. Optischer Lärm wohin das Auge blickt. Oft will Typografie anders aussehen als der Durchschnitt. Ungewöhnliche Anordnungen erfordern viel Können. Der Versuch, etwas zu machen, das man nicht kann, ergibt Kitsch. Typografie ist nicht geeignet für kreative Selbstverwirklichung! Sie dient einzig und allein der Lesbarkeit.

„Die Augen sind hungrig, aber oft schon vor dem Sehen satt.“
– Otl Aicher

Jan Tschichold schrieb: „Die Nachbarn stets mit fetten und „noch grösseren“ Schriften zu übertrumpfen, ist einfach unmöglich, da Grösse der Schrift natürliche Grenzen in Fläche der Anzeigen gesetzt sind und solche Wünsche der Auftraggeber noch schlimmere Schriftgrössen der Konkurrenten in der nächsten Nummer hervorrufen. Wenn alle Inserenten so lebhaft gestikulieren, sieht man keines mehr, und selbst ein wenig empfindlicher Leser wird durch ungezügelte Anzeigen abgestossen.“

Was er wohl heute über das Internet sagen würde? Es gilt: Weniger ist mehr!

„Da keiner leiser reden will als der Nachbar, schreien nun fast alle. Wünschbar ist aber, dass man nur mit Zimmerlautstärke rede, typografisch gesprochen: dass auf fast alle Halbfette verzichtet werde.“ – Jan Tschichold

Buchtipp: Jan Tschichold

Es empfiehlt sich folgendes Buch: Erfreuliche Drucksachen durch gute Typografie.

6 Kommentare | 25. März 2010, Oliver Schmid

Meetings are toxic

Buch REWORK von 37Signals

Vor kurzem ist das neue Buch REWORK von 37Signals erschienen. Die Firma 37Signals beschreibt sich im ersten Kapitel so:

„Some people consider us an internet company, but that makes us cringe. Internet companies are known for hiring compulsively, spending sidly, and failing spectacularly. That’s not us. We’re small, frual, and profitable.“

In den weiteren Kapitel folgen wichtige unternehmerische Grundsätze welche mit Bildern ergänzt wurden:

  • Planning is guessing
  • Grow grow grow grow grow – why?
  • Avoid long-term contracts, excess staff, meetings…
  • Less is a good thing
  • Focus on what won’t change
  • Meetings are toxic
  • Don’t be a hero
  • Go to sleep
  • Don’t copy
  • Say no by default
  • Hire when it hurts
  • Forget about formal education
  • The best are everywhere
  • Send people home at five
  • ASAP is poison

Ich kann sämtlichen Punkten nur zustimmen, wobei ich selber am „Say no by default“ noch arbeiten muss.

Ich hatte bereits das Buch Getting Real von 37Signals gelesen. Eine auf dem iPhone gut lesbare kostenlose Browser-Version findet sich hier. Ich kann auch dieses Buch absolut empfehlen.

Folge uns per Twitter | Facebook Fan werden
© 2016 by Webgarten GmbH, Haldenstrasse 5, CH - 6340 Baar, Schweiz, +41 (0)41 500 07 67