Am Wochenende war ich in Hannover um das Barcamp zu besuchen. Dabei konnte ich endlich Menschen kennen lernen, die ich zuvor über Twitter oder die Webkrauts kennen lernen durfte. Alexander Hahn beispielsweise, oder Christian Vogt und David Maciejewski, der mich auch bei sich aufnahm.

In Hannover stand das Socializing im Mittelpunkt. Oft traf man sich auf den Gängen oder im großen Raum und redete über dies und das. Das kalte Buffet war außerordentlich großzügig ausgefallen, ich persönlich hätte eine warme Malzeit aber wohl vorgezogen. Kaffee steuerte Sonntagmorgen bei – Danke Jungs!

Die Themen waren abwechslungsreich und gut besucht, zudem wenig werbelastig. Ich besuchte:

  • Social Project Management/Burning Man von (wobei der zweite Teil viel besser war als der erste, der nichts neues enthielt)
  • Usability mit Florian Bailey (sehr lehrreich, vor allem der Aspekt der bewusst schlechten Usability um den Nutzer zu steuern)
  • Rapid Prototyping mit RapidRabb.it (bot die Möglichkeit in die Arbeitsweise anderer zu schauen, sehr unaufdringliche Präsentation der eigenen Software in den letzten fünf Minuten)
  • Asus EeePC mit Jan Krämer (tolle Einführung in die Technik und die Spezifikationen des kleinen Linux-Rechenknechts)
  • China 2.0 mit Oliver Ueberholz (nette Session mit China-Anekdoten, richtig, richtig, richtig spannend, was sich dort im Internet tut)

Ich selbst co-hostete zwei Sessions:

  • Am Samstag: „Die Zukunft des Internets“ zusammen mit Jens Grochtdreis
  • Am Sonntag: „Gute Seiten, schlechte Seiten“ zusammen mit Jens, David und Dennis Frank

Es kam zu sehr vielen Diskussionen, es gab viele neue Barcamper. Die Mischung war klasse.

Kleine Kritikpunkte gab es auch: Internet war umständlich und Mailclients wurden geblockt, zudem war es zeitweise langsam oder kaum zu erreichen. Viele Slots blieben leer, viele der Neulinge trauten sich wohl nicht einen eigenen Vortrag anzubieten. Sonntag war zudem die gefühlte No-Show-Rate extrem hoch, das Gefühl könnte aber auch getäuscht haben.

Ein großes Kompliment geht an die Organisatoren, die einen tadellosen Job gemacht haben und es schafften eine wunderbare Veranstaltung auszurichten.

Die Netzeitung wurde neu gestaltet. An der Oberfläche wurde das Design klarer und freundlicher (grün funktioniert immer!), doch nicht wirklich aufregender. Die blauen Überschriften wirken langweilig und können nicht so überzeugen. Auch die Seitenleiste wirkt durch viele Boxen unruhig.

Was weiterhin auffällt ist die schlechte technische Qualität der Seite. Tabellenlayout so weit das Auge reicht: Die Agentur Exozet kann anders, wie man u.a. an ihrer Webseite sieht, schade, dass sie das weder beim Relaunch von N24 noch bei dem Redesign der Netzeitung anwenden konnten.

„Das alles ist natürlich nur ein kleiner Schritt. Ein größerer soll folgen.“ Domenika Ahlrichs, Chefredakteurin

Die Seite hat ganz offensichtliche Schwächen in der Konzeption, schon eine Vergrößerung der Schrift um 2 Stufen sorgt für eine Überlagerung von Elementen, was nicht sehr schön ist.

Auch die grundlegenden Accessibility-Features sind nicht vorhanden: Sprunglinks, die ein Navigieren durch die Tabellenhölle erlauben würden sind genauso wenig vorhanden wie sinnvolle Alternativtexte bei Bildern. Bei Formularelementen (Abstimmungen) gibt es keine Labels, die bei der Erfassung der Formulare helfen. Alles in allem eine sehr schwache Leistung.

Semantik ist – natürlich – exorbitant überhaupt nicht eingesetzt. H1-Überschriften sind wohl der Suchmaschinenoptimierung geschuldet. Absätze sind mal in P-Elemente gepackt, mal nur mit zwei BR-Elementen abgetrennt. Immerhin sind die Listen Listen.

Dass die Kommentare nur per JavaScript/AJAX zu begutachten sind ist ein weiteres Manko an der Seite, die es so nur noch ein Stück schwerer macht an die Inhalte zu kommen. Was ich sowieso noch nie verstanden habe ist, weshalb große Bilder nur durch einen Klick auf die Lupe geöffnet werden – und nicht, wenn man das Miniaturbild anklickt. (Dass das große Bild dann in einem JS-Popup aufgerufen wird ist selbstverständlich.)

Liebe Frau Ahlrichs: Ein größerer Schritt muss kommen. Diese Poliererei an der Oberfläche bringt doch niemandem weiter. Wenn die Netzeitung erfolgreich sein und bleiben will, dann muss sie auch in das Gesamtgefüge „Web 2008“ passen. Momentan passt sie besser in das „Web 1999“.

Bereits im Oktober hatte ich versprochen ein wenig über das neue Design, insbesondere die Gridstruktur zu schreiben. Hiermit mache ich dieses Versprechen wahr.

In den letzten beiden Jahren haben Grids auf Webseiten einen regelrechten Boom erlebt, so auch hier. Auslöser dieser Bewegung sind sicher Mark Boulton (mit seiner Serie “Five Simple Steps to designing grid systems” von 2005) sowie Khoi Vinh (mit eigentlich allem, was er tut).

“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.” Mark Boulton

In Zeitungen gibt es Grid- bzw. Rastersysteme schon eine halbe Ewigkeit. Bei Webseiten jedoch gibt es diese Gestaltungstradition nicht. Das liegt sicherlich daran, dass man zu Beginn das Internet nicht als designbares Medium wahrnahm.

Zudem kommen die meisten Webdesigner eher aus der Programmierung, nicht aus der klassischen Gestaltung. Und die klassischen Gestalter versuchten sich nur zögerlich am Design von Websites.

Irgendwann entdeckte man Tabellen und damit 3-Spalten-Layouts, die heute noch oft als das A und O des Webdesigns gesehen werden (wenn auch mittlerweile ohne Tabellen). Doch die haben mit Grids nichts zu tun.

“The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic building block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.” Khoi Vinh & Mark Boulton (PDF)

Ein Grid ist eine unterschwellige Aufteilung einer Zeitung, eines Magazins oder hier im Speziellen: einer Webseite. In diesem Beitrag kann das Grid eingeblendet werden. Es besteht aus 12 Spalten à 70 Pixel (bei einer Standard-Schriftgröße von 16px). Dabei werden zwei Spalten jeweils zusammengefasst zu einer sog. „Superspalte“.

Der Planungsaufwand ist bei so einem Layout natürlich höher, Bildgrößen müssen – zumindest in der Breite – vorher festgelegt werden. Mit einem einfachen float:left; ist es plötzlich nicht mehr getan, hier übernimmt eine Klasse (nämlich twocols1) die Aufgabe Bilder korrekt auszurichten:

1 twocols ist dabei ein ungeschickter Name, weil das Bild in Wirklichkeit keine zwei sondern sechs Spalten überspannt, bzw. drei „Superspalten“.

Das neue Layout von yatil.de mit überlagertem Grid

Das Grid hier ist durch die konsequente Verwendung von em (der Einheit, nicht des Elements) für alle Breitenangaben von Elementen sowie padding und margin beliebig skalierbar, ohne seine Gestalt zu verlieren. Leider führt dieses Vorgehen (schnell) zu horizontalen Scrollbalken.

“I paid serious attention to establishing a rational and sustainable layout grid that would see me through at least a few more years of doing this. Yes, I hope to keep at it that long.” Khoi Vinh

Zudem habe ich die meisten Seitenelemente mit Float und negativen Margins in die entsprechenden Randspalten geschoben – die Zitate sind ein Beispiel dafür.

Der große Vorteil bei Grids ist, dass sich alles wie von selbst ineinander fügt. Proportionen funktionieren einfach so und die Gestaltung der Seite wirkt aufgeräumter. Ein klares Grid und viel Vorarbeit sind nötig, zahlen sich aber aus, wenn es um eine klare Seitenstruktur und zusammenpassende Elemente geht.

Heute Nacht steht eine spannende Sportentscheidung an: Im American Football wird zum 42. Mal der berühmte Superbowl ausgespielt. Nun ist der Autor dieses Blogs (im Gegensatz zum Autor jenen Blogs) kein Experte zum Thema Football.

Zusammen mit Michael „Billy“ Bielitza werde ich heute Abend ein wenig hinter die Kulissen dieses Sports schauen, der doch in Europa so wenig beliebt ist. Dazu Analysen, Hintergründe und Diskussionen rund ums Spiel und um die Ausstrahlung in der ARD.

Wer sich auf Die Diskussion gerne einlassen möchte, kann hier live Kommentare abgeben, welche wir dann freischalten und ggf. auch beantworten werden.